bring / hedwig-react-components Goto Github PK

https://hedwig.zeroheight.com/styleguide/s/32297/p/42582c-show-more/b/02ce44

Make sure we include all the necessary a11y attributes.

Extend the options to Card to support the needs of the components that are very similar to Card, Entrance box and CTA Box.

• Cards can have a CTA thats either a Link or a Button
  • If CTA is present the card itself is not clickable
• Add an arrow icon at the bottom if card description is present and the card itself is a link (clickable)
• Card suface can be transparent. If so it must have a CTA and padding on the surface is compressed by defualt.
• Add a modifier (or something else) that marks a Card as "Featured" - making it look like CTA Box.
  • Image on right or left side
  • Background colors can be lighter, dark or darker. Text color adapts accordingly.
  • Om mobile it looks like any other card, but retains its background color

• How do we solve FontAwesome token friction when using these icons, not only Service icons?

• Tabs can be either a nav element surrounding a ul, or a ul with role="tablist". How to support this in both React and HTML.
• Tabs on smaller screens stack vertically with the "tab indicator lines" on the left side (see image)

https://hedwig.zeroheight.com/styleguide/s/32297/p/0795fa-lists/b/500574

• Spacing adjustment
• dark red/green on icon and title
• Icon is not editable
• Icon is required
• is the default html element for this component, but kan also be a div

https://hedwig.posten.no/7cc809d17/p/7789b3-info-box/b/077f7e/i/32277187

• Instead of the exclamation mark circle we must use the exclamation mark triangle icon. Why?: To reduce confusion between validation icon and the help tip icon (question mark circle). And to reuse the error/warning icon used in other components, such as Warning banner and Warning box.
  

#39 (comment)

This is actually a blockquote element. We should keep in mind that there is a html element for a inline quotation also.

<p>And you know what they say: <q>Winter is coming</q></p>

< blockquote>Winter is coming</blockquote>

Not saying that we neet an option for inline quote in this component, but maybe some sort of styling elsewhere.

Somewhat linked to fieldset as a radio group can have a label styled as Body Title
Radiobutton do not have focus (when tabbing)

• Change the the plus/minus icon to chevron. Why: to avoid confusion with a plus icon when used in a "Add-context"
• Spacing: 24px between header and content,48 bottom padding on expanded accordion (not including the contents bottom padding/margin)
• Paragraph text in accordion has a margin-top: 0; that can be removed. Why: better readability when there are multiple paragraphs in one expanded accordion

• compressed version. The 24px and 16px padding in the table is 16px and 8px accordingly. And the cell text font size is 16px (Technincal)
• table caption styled as H3 Title by default, but must have option to override

slim and "full version

Somewhat linked to fieldset as a checkbox group can have a label styled as Body Title

• Can we make this component to also have "attention" and "success" variants?
• And a generic message box with optional icon?
• And a Closable option
• rename to "Warning message"? This might be confusion since we have a Info box, and that might be because of the naming. Warning Box is actual a "message" with som sort of urgency. While Info-box is additional info about its surrounding content.

Can we make this component to also have "attention" and "success" variants?
Or in other word: banner versions of the different kind of messages we have....

The best practice is to have the links in breadcrumbs as an ordered list inside a nav element. This will help screen reader users know it is a navigation bar. Our current breadcrumbs is only links in separate divs.

Morten gave it a try: bring/hedwig#1753

https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html

For styling:

• Caption text size
• Remove text-transform: uppercase;
• Same border-bottom and hover style as link.

Alos remove collapsed breadcrumbs - it not in use and its a bad design pattern There is a task for it here but I'll close it as a duplicate. bring/hedwig#1645

https://hedwig.zeroheight.com/styleguide/s/32297/p/22910d-service-widget/b/580810

• Need to support different legend styling - caption 13pt and Body Title

• Icons options for all
• large, small and medium have fixed heights. The fixed heights should be removed.

• Autowidth as default. In other words: Making the dropdown fullwidth should be an option.
• We then need a min-width property also