Storybook Documentation - Component: FormLabel

[thrbnhrtmnn]

Description / User Story

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

---

Acceptance Criteria

• 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
    • Variant (incl. variant = hint, error; both with icon)
    • SizeVariant (incl. sizeVariant = SM, MD, LG)
  • Content / Settings
    • LabelAppendix (incl. labelAppendix = "(required)", "")
  • Validation
    • hasError (incl. hasError = false, true)
• 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 "FormLabel" 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 "FormLabel" and "[componentName]" with "formLabel".

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

[JpunktWpunkt]

feature/496-storybook-form-label

[thrbnhrtmnn]

Feedback @JpunktWpunkt :

• Props Order: theme should be placed before/above sizeVariant in props panel
• Size Variant: Change label to "Form label" for all size variants and add labelAppendix "SM"/"MD"/"LG"
• Label Appendix: Change label to "Form label" and labelAppendix to "(required)", add same example but with labelAppendix "(optional)" and add another example without labelAppendix.
• Error: Add labelAppendix "(with Appendix)" to example

[thrbnhrtmnn]

Feedback @JpunktWpunkt :

• Default Story / Props: Please change default label from "Label- text" to "Label-text"
• Size Variant: Please change label from "Form- label" to "Form label SM" and also change the labelAppendix to "(Appendix SM)", so that label and labelAppendix read "Form label SM (Appendix SM)" for SM size Variant. Do the same for other sizes, changing the corresponding size in the label and labelAppendix.

[thrbnhrtmnn]

Thanks @JpunktWpunkt , I just approved #686