Improvements for components in storefront

[BeckyBrekke]

Copying this from #2156. Fixing the broken links in that issue but the rest should be looked at.

For zeroheight:

• [x] Avatar - it doesn't exists in Components section, but there is documentation in Foundation section. Maybe there is a reason for it 🤔 ?
• [ ] Autocomplete - there is no documentation.
• [x] Banner - got additional description &Text example is wrong is a repetition of Text and Icon example.
• [x] Breadcrumbs - lack of links to rest of the examples.
• [x] Button - i would link Icon button & Progress button & Full width examples.
• [x] Card - got additional description & i would link With media & With divider examples.
• [x] Chip - lack of links to rest of the examples.
• [x] Dialog - lack of links to rest of the examples & the Demo view it doesn’t show well the example after triggering the Dialog.
• [x] Divider - got additional description & lack of links to rest of the examples.
• [x] Menu - link is broken & i would link Complex example.
• [x] Paper - it does't exists in Components section, but there is documentation in Foundation as Elevation. Not sure if we need listed as a component 🤔 .
• [x] Popover - i would link With Tooltip example.
• [x] Progress:Dot - link is broken.
• [x] Scrim - link is broken & got additional description.
• [x] Search - link is broken & lack of links to rest of the examples.
• [x] Select:Native - link is broken.
• [x] Side Sheet - - link is broken & lack of links to rest of the examples & got additional description.
• [x] Slider - lack of links to rest of the examples.
• [x] Snackbar - got additional description.
• [x] Table - got additional description.
• [x] TableOfContent - link is broken.
• [x] Tabs - the link might broke after the merge, maybe link more examples? And the most confusing is this: Tabs have a minimum width of Spacer/16 - Medium on each side of the label. we took it away from the storybook.
• [x] TextField - lack of links to rest of the examples. The examples from Figma in Zeroheight are misleading because the helper text is overlapping with icon and another text.

[BeckyBrekke]

Will wait for @lucasveil to return from vacay so we can discuss.

[lucasveil]

After meeting with @BeckyBrekke 08/09 I will fix the list and have Rebecca do a last review

[BeckyBrekke]

The zeroheight fixes are good to go, will publish a new release soon so all the changes are pushed out.

[martalalik]

All the checked issues are fixed ⬆️ I found still some small things around ⬇️

TODO:

• [x] Avatar - it doesn't exists in Components section, but there is documentation in Foundation section. Maybe there is a reason for it 🤔 ? relevant issue: #251 . @lucasveil works on a new variants - relevant issues: #2252 #2270
• [x] Autocomplete - there is no documentation. Need to be discussed with design team
• [x] AppLauncher - we have an example under Popover component. Wouldn’t be usefully we add link to Popover code tab? 🤔 Agreed Demo is now implemented
• [x] Breadcrumbs - broken link.
• [x] ButtonGroup - suggestion: now we have ButtonGroup placed and described under Button component. Shall we add some additional, good practice description about ButtonGroup? 🤔 Discussed in team with design/dev and agreed on a new issue
• [x] Chip - broken link.
• [x] Divider - link is broken
• [x] Dialog - broken link
• [x] Link - we have an example under Typography component. Wouldn’t be usefully we add link to Typography code tab? 🤔 Agreed. Added a new tab and link to code
• [x] Popover - broken link
• [x] Progress - in code tab there is link only for CircularProgress, lacking the rest. Added linear, dots and star in the code tab
• [x] Select - the overview & code tab need update. The SingleSelect & MultiSelect, are deprecated. Now there is a relevant issue #2457
• [x] Slider - broken link
• [x] TextField - broken link
• [x] TopBar - code tab link is broken.

Why some components has this nice display under Demo like here ⬇️

while other looks like that ⬇️

[BeckyBrekke]

@lucasveil When I published the changes, none of the links in the "More examples available in the code tab" worked. @ https://app.zenhub.com/workspaces/equinor-design-system-604f57c09e350a0011b654f4/issues/equinor/design-system/2156 You did most of them, but I did some too and was pretty sure I did it the correct way. Can we look at it next week?

[martalalik]

@lucasveil When I published the changes, none of the links in the "More examples available in the code tab" worked. @

Some links works, the only ones that didn't work i listed above.

[lucasveil]

The issue was that zeroheight made a redirect to the links in the CMS. I have now fixed all the url and it should work on the next publish @BeckyBrekke @martalalik

[BeckyBrekke]

Looks good, small changes: Fixed the link to storybook for the topbar. Made the windows taller for the progress indicators to remove scrollbars Bolded the period at the end of the sentence: "More examples available in the code tab." since the whole sentence was bold.