Storybook Documentation - Component: Icon

[angelicahoyss]

Description / User Story

With this task we want to make the Icon Component page in Storybook look like the template from design.

---

Acceptance Criteria

• The current Overview of all icons has been moved from the Icon Component Page to a new Page under "Foundation" with the name "Icons"
• Component Page has the same structure as the design template (in the following order):
  • Headline & Intro Text incl. a list of anchor links to all following sections
  • Docs Area with Example and all Props (see which props should be displayed for this component in the section below)
  • Appearance
    • SizeVariant (incl. sizeVariant = SM, MD, LG)
• Component Page includes the texts as defined in the section below (incl. non default values for the shown examples)
• Component Page text styles (uppercase, lowercase, spacing) correspond the the design template
• Component Page spacing corresponds to design template
• Component Page colours correspond to design template

---

Props

See this table page "Icon" for all props that should be displayed for the component, incl. their description, default values and the type of controls. Props that do not appear and that can be removed, should also be removed (not including theme for example, because this is needed for all components, but still not part of the props section)

If the props in the list are not the same as the component currently uses, just leave a comment in column G in the excel and a follow-up task will be created. Fixing the components is not part of this ticket.

---

Content / Texts

See this table page "Documentation Texts" for all texts that should be displayed for the component. Filter column A in cell A3 to only show you the texts of this components.

For the texts please change "[component name]" with "Icon" and "[componentName]" with "icon".

Also all the examples in the documentation below the Props should not use the default values, but they should use descriptive texts for Label, Placeholder and other text fields. Some examples are already given in the template.

---

Background information

• Example of a collapsible Props Section can be seen here

[thrbnhrtmnn]

Hey @bar-tay , here is my feedback:

• The first AC is still open: The current Overview of all icons has been moved from the Icon Component Page to a new Page under "Foundation" with the name "Icons", after this is done, the idea was to only show one icon in the default story, which can also be switched via the icon prop. If this is not how the icon component works, than we should discuss alternatives.
• Props: is ignoreSize a prop in the component? This was not there when we started the briefing for the documentation. Do you know what it does and could you make a suggestion for the description?
• Props: Aria label does not have a way to input a text for it. Is the prop also implemented in the component, if not please remove the prop from the documentation.
• SizeVariant: Please update the text to the one from the excel. The text should be about the Icon and not the Checkbox and it has 6 sizes.
• SizeVariant: The example should only show the default icon (blr360) in all 6 sizes.