docs: align components and templates with design docs [skip chromatic]

[auroraVasconcelos]

Description:

• In the side menu in Storybook 1st show simple component (eg. accordion) and after the group (eg.accordion-group)
• In the side menu in Storybook all templates should have "resumed names" (eg. Badge) instead of (eg. Button with Badge)
• 1st show Related Components and 2nd show Related Templates
• On the 1st sample we use the component name when possible (eg. Button) instead of (Default)
• In code the 1st sample has slots vs in Figma slots are only shown if no interactions is required. When interaction is required we use the slots in the next samples.
• Use the "open" attribute, Use "summary" to ...
• When displaying options and variants, 1st line of copy has ":" at the end (eg. Use the ”variant” attribute to set the button’s variant:) and the bullet list never has a "." at the end.
• The samples should help empasize what is being shown. If we are talking about "Inverted" components shown should have "Inverted" in the text
• If variants or options are shown we should use bullet list bellow sample
• Always add (default) in front of the default variant/size/etc. (e.g., lg (default)).
• If a bullet list is shown, use a colon in the sentence (e.g., "Use the size attribute to change a button’s size: ").
• In bullet lists, do not use any kind of punctuation marks at the end of the sentence (e.g., lg (default)).
• Ensure you add a period at the end of all sentences.
• Always use the attribute of classes' nomenclature (e.g., instead of "large", use lg).
• Template links in components must point to the mentioned section within the template. If the template have the name of the component link the full template.
• The naming of related templates must be Component Only or if pointing to a specific section Component - Component (eg: in sd-select link it to the template select , in sd-tooltip link to the section Select with Tooltip ).
• In docs, the related components and related templates lists must be ordered by relevance.

Definition of Reviewable:

• Documentation is created/updated
• Migration Guide is created/updated
• E2E tests (features, a11y, bug fixes) are created/updated

• Stories (features, a11y) are created/updated
• relevant tickets are linked

[coraliefeil]

Approved.