Page Comparison

Button

For all components starting ‘button.primary...’,  in focus state, border should be more distinct no to blend to button background

Button

Is font size 14 normal for button.primary.small.text.?

Button

Is there inconsistency in button.primary.large.icon. and button.secondary.large.icon. style: background and size?

Button

For button.secondary.large.icon. in dark theme there is no border in focus state, comparing to the same button in light theme;

Icon

Do icons fonts meet accessibility standards?

Link

For link.cta.secondary.large. in focus state, border layout should be edit: it should be similar to link.cta.primary.small.border layout or adapted to the line size;

Link

For link.cta.primary.large. and link.cta.primary.small. in hover and focus states, border color should change similar to link text color, comparing to default state

Link/Button

Nav variation of Link and nav dropdown button focus states have issues with underlines and outlines. For hover states underline is matching to text. For focus state underline is longer to suit focus outline.

Amended in figma (see email from Ben Wilson of 14.06.2022 19:31 (Kyiv time))

Subtle button

Subtle button style should be the same as subtle link.

Default state should be grey along with the icon. In this case it will be consistent and can be used in Subtle accordion without adjustments: no need in green icon.

Disclosure

Button outline is not the same as subtle button outline.

Typography is different for different states.

Ben Wilson: Have we got confirmation that the 'subtle accordion' is to be moved to be it's own component and renamed 'Disclosure'. The current 'subtle accordion' styling and states are aligned to the accordion styling (colour tokens, type tokens, etc). The action item is to align it to the 'subtle button' instead. In my opinion, whether it follows the accordion style or subtle button style is dependent on whether it remains as a variant of the accordion or becomes a separate component. @Harris, Nick , are you able to confirm if there is a preference your end / if it is to be a unique component?

[SK]: Nick Harris Ben, there is no Accrodion button variant, we should use Subtle variant of the button for both Accordion and Disclosure. Moreover, it is a button, are you sure you want to style it as a link without a need (like in Nav) ?

Mobile nav

This is not a link on the Desktop navigation, shouldn't we keep it consistent?

Amended in figma (see email from Ben Wilson of 14.06.2022 19:31 (Kyiv time))

It is suggested to keep it a button but open by default. Pros: less code, additional feature out of the box. Nick Harris nathan.mckean@reckitt.com (Unlicensed) ?

Update:

• One column for secondary menu

• Link styles are still in discussion

• no JS fallback for button - it keeps working as a dropdown using CSS.

Decisions:

Keep nav link style for both mobile and desktop.

Product Header

Is it a new button variant?

Link variant. Not button. May be a variant of a Link, used in Paginator as well.

Update: Link variant.

Image + Text

Small variant - will be mobile - right?

Bigger text - is it a Heading description ?

Heading title should be Headling L max - Heading L min

Bigger text is a Heading block description

Carousel

Small viewport middle use case

Sergey to double check if this is feasible with current library.

Update: this is not possible to have alignment changed in the middle. If carousel is cycled then center mode is an option. But all modes cannot be done at the same time.

Carousel

Small viewport will always show buttons for MVP

To check if we can determine touch screen. Update: not possible at this point. So, we will show buttons on small viewports.

Retailer Llink

Retailer links cannot be of the same width for all logos, width differ as the only constants here are paddings.

Minimum width will be applied.

Minimum width will be a token

Update: White or grayscale logos on Dark mode - do not think we need it.

On dark design is going to be reviewed by Ben.

To prominent now?

Done

Typography

Min Max should be aligned across the design

Should be applied to components

Done

Teaser 2

Alignement is implemented differently from the design. Ben to check if this is fine.

@Ben Wilson

Fine as of now

Video

There is no design for non JS fallback, i.e a message telling the user that to view this media they need to enable javascript.

Design UI for the non JS fallback (@Ben Wilson)

Done

Variant Selector

buttons 1 and 10 will not be of the equal size.

Acknowledged

Video

We do not have notifications in MVP.

Notification will be design like this, but won’t be a separate component

Video

Disclosure design doesn’t match (see Anatomy sub section in the Video component brief)

Storybook to be updated. Andrey Onyshenko (Unlicensed) to create a ticket.

Skip links

review Skip links design, maybe add a fill with color as it may overlap the main menu or too long Utility links menu.

Ben Wilson, what is the link ?

Breadcrumbs

Overflow button have Link behavior

Will be kept as button

Page Card

Standard variant, heading link with non-default style.

Elevation should be added on hover for cards, heading

Link

Gap between text and icon size 6px and 9px. Can it be 4px and 8px ?

always 8px, if we find non-standard - just say

Button

Button text is centred. Is this the design intention? Should it be a variable/token? (Does it look weird being centred if wrapping to two rows? Yes, icon only can be centred - but the other should be discussed.

James to create a mockup for two line button.

Two lines - text left aligned. Icon on the first line.

Button

Nav style button padding appears to include a 1px padding. This is not a spacer value and is likely a design error that could be tweaked.

Outline style for all elements - change to 2px

4px.

Button

The outline offset for nav is hard coded at 1px. On other variant styles it is 4px. What is the reason that we don't have a common default value for styles like this? It doesn't look like line size, style, colour, outline value etc is referencing common token values to centralise the styles rather than adding them individually for each state.

Outline style for all elements - change to 2px

4px

Link

Nav style link padding appears to include a 2px & 3px padding. This is not a spacer value and is likely a design error that could be tweaked.

Outline style for all elements - change to 2px

4px

Image + Text

Inset variant. What is that bigger text in description ?

Add body text in development

Promo strip

I think actually maybe there is a logic error here in the design and that what is shown in the design as the background image should actually be for a foreground image as that is more important. Background images are more decorational. That foreground image can then maintain its native aspect ratio, but have a max width and max height defined to constrain it. Whilst you could do logic to show a bg image in the absence of a foreground image, that logic may be unnecessary until we have a request for it.

From the designs, it actually looks to me that the height of the image is bounded by the text box height, but I could be wrong. Regardless, the alignment of image, text and CTA appear off and should get a design opinion.

Teaser 2/Promo Strip

Disclaimer should be added at the bottom

Page Header

Ben/Inviqa to confirm if the max width of the breadcrumb container (in that position) should be the full width of the title container, or a shorter percentage (to reduce the chance of visual outcomes where breadcrumb is longer than title.

70% of the Heading Block

Skip to content

Revisit skip to link design.

Image + Text

Example needed

Can we get an example of what Image + text would look like if it were in a section with a section heading (H2)
In Figma

Teasers

Design of Teaser does not reflect the approach for full-width and inseet versions for each variant. Instead Hero Promo and Teaser 1 are considered as two different variant, whereas it should be one variant in two sizes.

We now have full, strip, split with hero and standard as sizes. Size has no effect on strip.

Page Card

We need image without rounded corners

Check Figma or Notion