Storybook Documentation - Component: Text Button

[angelicahoyss]

Description / User Story

With this task we want to make the Text Button 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. CTA, Primary, Secondary, Silent, Destructive, Encourage)
    • SizeVariant (incl. sizeVariant = XS, SM, MD, LG, XL)
  • States
    • Disabled (incl. disabled = true)
  • Dependencies
    • Icon (incl. leadingicon & trailingicon = blr360)
    • Loader (incl. loading = 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 "Text Button" 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 "Text Button" and "[componentName]" with "textButton".

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]

related to this PR 412-storybook-textbutton

[thrbnhrtmnn]

Feedback:

• In TOC: pleas write "Size Variant" without "-"
• In TOC: Link to dependencies goes to disabled section
• In Props: description for buttonDisplay prop is missing and prop should be selected via radios
• In Props: sizeVariant description changed and needs an update
• In Props: description of icon & iconPosition prop needed an update, also change the order or the 2 props > order is still wrong
• In Props: description of disabled prop needed an update, also disabled should be placed above loading > order is still wrong
• In Props: href and target should have a textfield to enter strings, target also should hold the defined default (_self) and please remove the "-" at the end of the description be removed as we just decided to kick them (technical part can be done later)
• In Props: order of event props should be the same as in the excel: click > focus > blur
• In Props: remove loadingStatus from props panel
• In Props: Accessibility (incl. ariaLabel) should be above technical attributes > section is still below technical attributes
• Variant: ideally the variants should appear in the same order as in the text, also change the label to the names of the variants
• SizeVariant: Change label similar to TextArea and TextInput to "Button XS", "Button SM" etc.
• States: Text under section headline is missing
• Disabled: Change label to "Disabled"
• Icon: Change labels to "Leading icon" and "Trailing icon" > please write icon lowercase
• Section "Button as link" was added after this ticket was created. Please also add it, but without any example / story.

[JpunktWpunkt]

startet with fix-branch fix/412-storybook-text-button

[thrbnhrtmnn]

Hey @JpunktWpunkt ,

I looked over the current branch and updated the feedback above. Also I found a new topic, which we should discuss:

• There seems to be an issue with the buttonDisplay variant "block". It seems to me that because the surrounding container is has display flex, that the button will not be full width like before. Maybe lets have a look together at this.

[thrbnhrtmnn]

When the "block" variant is using up the full width of the wrapper again, this task can be merged and moved to done