feature/496-storybook-form-label

packages/ui-library/src/components/forms/number-input/index.stories.ts

@@ -4,7 +4,7 @@ import { BlrNumberInputRenderFunction } from './renderFunction';
 import { FormSizes, Units } from '../../../globals/constants';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { PureIconKeys } from '@boiler/icons/icons-optimized';
-import { html } from 'lit';
+import { html } from 'lit-html';
 import { action } from '@storybook/addon-actions';
 
 const sharedStyles = html`
@@ -361,7 +361,7 @@ export default {
       description: {
         component: `<Markdown>
       Number Input allows users to enter enter numbers into a designated area. Users can interact with the Number Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current number insertion point.
-      - [**Apperance**](#apperance)
+      - [**Appearance**](#appearance)
         - [**Size Variant**](#size-variant)
         - [**Stepper Variant**](#stepper-variant)
       - [**Content / Settings**](#content--settings)
@@ -386,7 +386,7 @@ export default {
 export const NumberInput = (params: BlrNumberInputType) => BlrNumberInputRenderFunction(params);
 
 /**
- * ## Apperance
+ * ## Appearance
  *  ### Size Variant
  * The Number Input component comes in 3 sizes: SM, MD and LG.
  */

packages/ui-library/src/components/internal-components/form-label/index.stories.ts

@@ -3,21 +3,72 @@ import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { FormSizes, LabelVariants } from '../../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
+import { html } from 'lit-html';
+
+const sharedStyles = html`
+  <style>
+    .stories-form-label {
+      padding: 1.25rem;
+    }
+  </style>
+`;
 
 export default {
-  title: 'Design System/Web Components/Internal Components/FormLabel',
+  title: 'Design System/Web Components/Internal Components/Form Label',
   argTypes: {
     labelSize: {
+      name: 'sizeVariant',
+      description: 'Choose size of the component.',
       options: FormSizes,
-      control: { type: 'select' },
+      control: { type: 'radio' },
+      table: {
+        category: 'Appearance',
+      },
     },
     theme: {
       options: Themes,
       control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
+    labelText: {
+      name: 'label',
+      description: 'Enter string used as label text.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Content / Settings',
+      },
+    },
+    labelAppendix: {
+      name: 'labelAppendix',
+      description:
+        'Enter string used as an appendix to the label. Use this to inform the user in case this field is required.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Content / Settings',
+      },
     },
+
     variant: {
+      name: 'has Error',
+      description: 'Choose if component has an error.',
       options: LabelVariants,
       control: { type: 'select' },
+      table: {
+        category: 'Validation',
+      },
+    },
+    forValue: {
+      description: 'This references the id of the component to which the label is added.',
+      control: { type: 'text' },
+      table: {
+        category: 'Accessibility',
+      },
     },
   },
   parameters: {
@@ -26,20 +77,110 @@ export default {
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125225&mode=dev',
     },
     viewMode: 'docs',
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `<Markdown> Form Label provides a descriptive text or caption for an input field. The <label> element must be associated with an input field using the for attribute. 
+    - [**Appearance**](#appearance)
+      - [**Size Variant**](#size-variant)
+    - [**Content / Settings**](#content--settings)
+      - [**Label Appendix**](#label-appendix)
+    - [**Validation**](#validation)
+      - [**Has Error**](#has-error)
+  </Markdown>`,
+      },
+    },
   },
 };
 
 export const BlrFormLabel = (params: BlrFormLabelType) => BlrFormLabelRenderFunction(params);
+BlrFormLabel.storyName = 'Form Label';
 
-BlrFormLabel.storyName = 'FormLabel';
-
-const args: BlrFormLabelType = {
+const defaultParams: BlrFormLabelType = {
   theme: 'Light',
-  labelText: 'Test',
-  labelAppendix: 'added',
   labelSize: 'md',
-  forValue: 'Richard',
+  labelText: 'Label-text',
+  labelAppendix: '(Appendix)',
   variant: 'label',
+  forValue: 'Form Label',
+};
+BlrFormLabel.args = defaultParams;
+
+/**
+ * ## Appearance
+ *  ### Size Variant
+ * The Form Label component comes in 3 sizes: SM, MD and LG.
+ */
+export const SizeVariant = () => {
+  return html`${sharedStyles}
+    <div class="stories-form-label">
+      ${BlrFormLabelRenderFunction({
+        ...defaultParams,
+        labelSize: 'sm',
+        labelText: 'Form label SM',
+        labelAppendix: '(Appendix SM)',
+      })}
+    </div>
+    <div class="stories-form-label">
+      ${BlrFormLabelRenderFunction({
+        ...defaultParams,
+        labelSize: 'md',
+        labelText: 'Form label MD',
+        labelAppendix: '(Appendix MD)',
+      })}
+    </div>
+    <div class="stories-form-label">
+      ${BlrFormLabelRenderFunction({
+        ...defaultParams,
+        labelSize: 'lg',
+        labelText: 'Form label LG',
+        labelAppendix: '(Appendix LG)',
+      })}
+    </div>`;
 };
+SizeVariant.story = { name: ' ' };
 
-BlrFormLabel.args = args;
+/**
+ * ## Content / Settings
+ * ### Label Appendix
+ * The Form Label component can display an appendix text next to the label text. The label appendix should be used to inform the users in case this field is required.
+ */
+export const LabelAppendix = () => {
+  return html`
+    ${BlrFormLabelRenderFunction({
+      ...defaultParams,
+      labelSize: 'lg',
+      labelText: 'Form label',
+      labelAppendix: '(required)',
+    })}
+    ${BlrFormLabelRenderFunction({
+      ...defaultParams,
+      labelSize: 'lg',
+      labelText: 'Form label',
+      labelAppendix: '(optional)',
+    })}
+    ${BlrFormLabelRenderFunction({
+      ...defaultParams,
+      labelSize: 'lg',
+      labelText: 'Form label',
+      labelAppendix: ' ',
+    })}
+  `;
+};
+LabelAppendix.story = { name: ' ' };
+
+/**
+ * ## Validation
+ *
+ * ### Has Error
+ * The Form Label component can be set to have an error.
+ */
+export const HasError = () => {
+  return html` ${BlrFormLabelRenderFunction({
+    ...defaultParams,
+    labelText: 'Error',
+    labelAppendix: '(with Appendix)',
+    variant: 'error',
+  })}`;
+};
+HasError.story = { name: ' ' };