Storybook Documentation - Component: Text Area

[angelicahoyss]

Description / User Story

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

---

Acceptance Criteria

• [x] Component Page has the same structure as the design template (in the following order):
  • [x] Headline & Intro Text incl. a list of anchor links to all following sections
  • [x] Docs Area with Example and all Props (see which props should be displayed for this component in the section below)
  • [x] Appearance
    • [x] SizeVariant (incl. sizeVariant = SM, MD, LG)
    • [x] Resize (incl. resize = true & false)
  • [x] Content / Settings
    • [x] Placeholder (incl. placeholder = true & false)
  • [x] States
    • [x] Disabled (incl. disabled = true)
    • [x] Readonly (incl. readonly = true)
  • [x] Validation
    • [x] Required (incl. required = true)
    • [x] HasError (incl. hasError = true, once submitted)
  • [x] Dependencies
    • [x] FormLabel (incl. hasLabel = true, incl. label and appendix)
    • [x] Counter (incl. hasCounter = true, showing warning state)
    • [x] FormCaption (incl. one example with hint and one with error, incl. icons and messages)
• [x] Component Page includes the texts as defined in the section below (incl. non default values for the shown examples)
• [x] Component Page text styles (uppercase, lowercase, spacing) correspond the the design template
• [x] Component Page spacing corresponds to design template
• [x] Component Page colours correspond to design template

---

Props

See this table page "Text Area" for all props that should be displayed for the component, incl. their description, default values and the type of controls.

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 Area".

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]

https://github.com/deven-org/B01LER-Kitchen/pull/451 this branch was outdated and we have a new one on #463

[thrbnhrtmnn]

Points from todays Design Review Session:

• Theming and Styles on Docs page does not yet work > will be done in separate task
  • 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
• has required is included as an example, but without a form and a button > will be done in a separate task once we have a form component

Open points:

• [x] ~we should move all examples except for the "TextArea" into a subfolder~ > currently not possible, will be investigated and fixed afterwards
• [x] ~use all texts from Excel~ > more detailed feedback to follow
• [x] remove dark mode examples, this will be figured out in follow up task

[thrbnhrtmnn]

Feedback:

• [x] Change the title to "Text Area" (should be the same in the sidebar/sidemenu)
• [x] Update intro text (Text area is now written as "Text Area" and there is no "+" between 2nd and 3rd sentence)
• [x] In props panel: change headline from "Content/ Settings" to "Content / Settings"
• [x] In props panel: change default values for ~placeholder,~ label~, labelAppendix and hasCounter~ as described in the props page in excel
• [x] In props panel: rename "Warning Limit Type" prop to "warningLimitType"
• [x] In props panel: rename "Warning Limit (Whole Number)" prop to "warningLimitInt"
• [x] In props panel: rename "Warning Limit (Percentage)" prop to "warningLimitPer"
• [x] In props panel: update description of labelAppendix prop (text changed)
• [x] In props panel: change "Validations" to "Validation"
• [x] In props panel: change "textareaID" to ~"textareaId"~ > "textAreaId"
• [x] In props panel: add default values to all props as defined in the excel
• [x] ~Remove the TextArea Story below the props panel~ > currently not possible, needs further investigation in follow-up task
• [x] Appearance: update texts ("TextArea" should be "Text Area" now, the headlines of the props changed and are now capitalised and have spacings and the resize text changed completely)
• [x] Appearance: the title of the example in the sidebar/sidemenu should be "Size Variant" instead of "Appearance"
• [x] Appearance: remove placeholder for Size Variant and Resize examples
• [x] Content / Settings: update texts (Headline is "Content / Settings" instead of "Content/ Settings", Props headline is missing, "Text Area" in text is missing and should replace the first occurrence of "placeholder")
• [x] Content / Settings: the title of the Placeholder example in the sidebar/sidemenu should be "Placeholder" instead of "Content/ Settings"
• [x] Content / Settings: Change label for Placeholder example to "With placeholder" and "Without placeholder"
• [x] States: update texts ("TextArea" should be "Text Area" now, the headlines of the props changed and are now capitalised and have spacings and in the text the prop names are not capitalised anymore)
• [x] States: the title of the Disabled example in the sidebar/sidemenu should be "Disabled" instead of "States"
• [x] States: Change label for Disabled example to "Disabled" and remove the placeholder
• [x] States: Remove placeholder for Readonly example
• [x] Validation: update texts ("TextArea" should be "Text Area" now, the headlines of the props changed and are now capitalised and have spacings and the texts slightly changed)
• [x] Validation: the title of the Required example in the sidebar/sidemenu should be "Required" instead of "Validation"
• [x] Validation: Change label & labelAppendix for Required example to "Label-text (required)", remove placeholder and also change required to true for the example
• [x] Validation: Change label for has Error example to "Error", remove placeholder and also change hasError to true for the example (you do not have to fix the current bug that the icon is always shown, we have a ticket for that)
• [x] Dependencies: The order of the examples should be "Form Label", "Form Caption Group", "Counter", each example should be placed below the Prop headline and text, there should not be multiple headlines and texts for the same prop
• [x] Dependencies: update texts ("TextArea" should be "Text Area" now, the headlines of the props changed and are now capitalised and have spacings and the texts all changed a bit)
• [x] Dependencies: Change labels for Form Caption Group example to ~"Hint message" and "Error message"~ sorry I think we should have one example instead showing both hint and error message, so the headline should be "Hint and error message"
• [x] Dependencies: Change label & labelAppendix for Form Label example to "Label (Appendix)" and set readonly to false
• [x] Dependencies: Change label for Counter example to "Counter"
• [x] Fix all links or remove links if they can not be added right now, there will also be a follow-up task to check & fix all links after all documentation tasks are done
• [x] ~Fix headline hierarchy and add "Docs" h2 headline above first Example. Also all other Sections like "Appearance", "Validation", etc. should be h2 and the props headlines should be h3, we should not need a h4.~ > all story headlines are h3 per default, we should not need any h4

[angelicahoyss]

Hi hi 🌞 here are a few small things I noticed:

Props panel:

• [x] theme prop should be inside of the 'appearance' section (it should be the first prop in the prop panel)
• [x] textareaId should be textAreaId
• [x] Section technical attributes textAreaId should be a component name instead of #674

Stories:

• [x] ~After all main titles like for example Appearance, there shouldn’t be a divider~ > this is okay for now
• [x] ~Before title Appearance, there is an extra Placeholder subtitle that should be removed~ > will be fixed later
• [x] ~A hint and a placeholder should be added to all text areas on the page to correspond Figma design, except to the one that is an explicit example without a placeholder~ > we decided not do this and have the examples show as few props as possible to directly see what the prop that is highlighted here is doing
• [x] Text of Placeholder section should be ‘The Text Area component…’ instead of ‘The placeholder component...’
• [x] Placeholder text should rather be ‘Add a message here’ instead of ‘Placeholder-text’
• [x] In the Disabled section the text should be ‘The Text Area component’ instead of ‘The Text Area Component’
• [x] ~In the section Validation Required, there should be another example than ‘Label-text’. Perhaps use the one from Figma design (’Reason for submission’)~ We defined it like it currently is
• [x] ~In the section Validation Error, please use the same example as above instead of ‘Error’.~ "Error" is fine as a headline for now, as the error can appear for all Text Areas and there is no case where this normally happens ~The error message is also missing~ > instead the hasErrorIcon prop should be set to false so the Icon will disappear once this is fixed
• [x] In section Form Caption Group, please show a group of hint and error message on the error example, so that it’s clear how this component represents a caption group.
• [x] ~In section Form Caption Group, please use the label texts from Figma design (A Text Area with a hint and A Text Area with an error message).~ Headline should be "Hint and error message" 🌷

@thrbnhrtmnn

[thrbnhrtmnn]

Hey @angelicahoyss , thanks for the review, a few things we already discussed, so I edited your findings and resolved some points already.

I also checked my first review and had to uncheck some points as they were not implemented yet.

I would also add:

• [x] I forgot to capitalize one occurence of "Text Area" and one occurrence of "Text Input" in the intro, this was fixed in the Excel and needs to be fixed in the intro text
• [x] Form Label example should show either only a FormLabel with hasLabel=true incl. a label and appendix or it should additionally include an example without a label and appendix. It should not show any error state or any caption. Also when using the component name in the label, please write it as "Text Area" (on branch 421a-storybook-textarea-fix this story looks good)
• [x] The link to the Form Label Component in the Form Label text should only be shown as "Form Label" and the word "component." afterwards.
• [x] The link to the Form Caption Group" component should not be bold and the sentence should be "For more information have a look at the internal Form Caption Group component."

[thrbnhrtmnn]

Documentation was successfully merged today!