Increasing flexibility and improving visual hierarchy: Linked logo section

[mattea-turic]

Component/pattern to amend

Linked logo section

Visual

Context

In what context does your amendment solve a problem?

The current pattern is too rigid, so we're not able to use it for common use cases, such as when the H2 has a description, or when we want to wrap it in a shallow, if being used among other elements. Therefore, allowing for it to live independently would make most sense to me.

[Edit following input from @jmuzina and @britneywwc]: Changes to be considered overall:

1. Removing the H2 and description requirements (could also have as optional)
2. Wrapping first row of logos in a shallow to allow for a clearer hierarchy.
3. Removing the requirement for a regular section from the pattern (and adding flags for shallow/regular)
4. Removing the HR at the top of the pattern (optionally)

Example here of where the current pattern can't accommodate the intended implentation:

[syncronize-issues-to-jira[bot]]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-24099.

This message was autogenerated

[jmuzina]

There's at least one, possibly two, more changes currently in discussion that we could accomodate here:

1. Removing the regular section from the pattern by default
2. Removing the HR at the top of the pattern - only needs DSWG consideration if this is to be a new default, as current behavior includes the HR)

See Figma thread

[mattea-turic]

Thank you @jmuzina ! Will amend the ticket to also reflect these changes

[britneywwc]

Is it possible to add a flag for shallow section? Similar to the is-shallow flag for Quote Wrapper

[mattea-turic]

@britneywwc thanks, I updated the issue! ^^

[dgtlntv]

Design system contribution meeting: Needed by sites designers.

Tier: Sites Priority: High

[jmuzina]

1. Removing the H2 and description requirements (could also have as optional)
2. Wrapping first row of logos in a shallow to allow for a clearer hierarchy.
3. Removing the requirement for a regular section from the pattern (and adding flags for shallow/regular)
4. Removing the HR at the top of the pattern (optionally)

• Items 3 and 4 are completed in #5598 as they are prerequisites for embedding the pattern inside the basic section - see example. I have considered these changes (removing the top rule and the bottom padding) as doable by a developer changing the "scope" of a pattern from "section" to "block". "section"-scoped patterns are full-width and have appropriate separation from other sections using a top rule and bottom padding. "block"-scoped patterns do not have these. @kim-isaac @mattea-turic does that seem like a reasonable rule to you?
• Part of item 1 is also completed in #5598 (the H2 was made optional, as it conflicts with the title of the basic section when embedded).
  • Could you @mattea-turic @kim-isaac let me know what you mean by "description"? I don't see that in the pattern API / code / or spec. Do you mean the descriptive text / label for each link?
• Item 2 has not yet been addressed.

[mattea-turic]

@jmuzina

• For Items 3 and 4,

..."section"-scoped patterns are full-width and have appropriate separation from other sections using a top rule and bottom padding. "block"-scoped patterns do not have these...does that seem like a reasonable rule to you?

This makes sense to me!

• For Item 1,

Could you let me know what you mean by "description"?

This is my bad – by "description", I meant the paragraph text that often sits next to H2s. I forgot the pattern here doesn't actually have this requirement (or option). On reflection, if we're allowing for this to be both a "section" and a "block", would it add a lot of extra work to allow for a description flag(?) as part of the section? This wouldn't matter if it's always occupying 4 cols (as can be used within the basic section), but isn't currently a possibility when it's full-width.

I.e.

[jmuzina]

@mattea-turic

I meant the paragraph text that often sits next to H2s. I forgot the pattern here doesn't actually have this requirement (or option)... if we're allowing for this to be both a "section" and a "block", would it add a lot of extra work to allow for a description flag(?) as part of the section? This wouldn't matter if it's always occupying 4 cols (as can be used within the basic section), but isn't currently a possibility when it's full-width.

Understanding this to mean you are asking for a new "description" input to the pattern.

It's not a lot of extra work - looks like just a new input and rendering it as paragraph element(s).

This sort of thing seems like it's probably already in some designs and sites as pattern overrides - can you provide any design links or live examples of this just to verify there's currently a design need?

There is also a question of content guidelines - adding a description split to the side would require a tighter character constraint for the title (as it can now only use half width).

To summarize, I'd like the following before I proceed with adding a description:

1. Links to Figma mocks or live sites where a linked logo section has a description
2. Clarification on in which contexts (section or block) a description is allowed
3. Content constraints/guidelines for the description and the title (when the description is present). In max characters with spaces, but also maybe in terms of content height (I know generally the right hand side is taller than the left, I'm assuming that holds here too?)
4. Responsiveness behavior for the description and title - when should they stack or split? Is there an option to split instead of stack on medium? If so, does that effect the constraints in item 3? I guess a Figma mock would help here.

[mattea-turic]

@jmuzina

1. Links to Figma mocks or live sites where a linked logo section has a description:

I added an example here. In terms of live pages, I have an example here and we did use it as part of a design for one of the appliance pages (link), but it was rejected in the end (the page, I mean).

2. Clarification on in which contexts (section or block) a description is allowed

We should allow for a description as part of a section only. Not sure how it would work as part of a block? If I understand correctly from your comment earlier, the block is the pattern isolated from other elements, like the header, rule, and padding. Please lmk if there's any further clarification you need around the contexts!

3. Content constraints/guidelines for the description and the title (when the description is present). In max characters with spaces, but also maybe in terms of content height (I know generally the right hand side is taller than the left, I'm assuming that holds here too?)

I think we can use the same limits for description and title as we have for the basic section i.e. 70 characters for the title; 300 chars for the description.

4. Responsiveness behavior for the description and title - when should they stack or split? Is there an option to split instead of stack on medium? If so, does that effect the constraints in item 3? I guess a Figma mock would help here.

I added a mockup here. There shouldn't be any affects to the content limits