From ae94dac47a12c4f40697174cde8d3d0185912e12 Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 12 Dec 2023 15:30:16 +0100
Subject: [PATCH 1/6] feat(storybook): add divider docs

---
 .../components/ui/divider/index.stories.ts    | 69 ++++++++++++++++---
 1 file changed, 61 insertions(+), 8 deletions(-)

diff --git a/packages/ui-library/src/components/ui/divider/index.stories.ts b/packages/ui-library/src/components/ui/divider/index.stories.ts
index d84bd036c..6218b9b4e 100644
--- a/packages/ui-library/src/components/ui/divider/index.stories.ts
+++ b/packages/ui-library/src/components/ui/divider/index.stories.ts
@@ -3,20 +3,37 @@ import { BlrDividerType } from './index';
 import { BlrDividerRenderFunction } from './renderFunction';
 import { DividerVariations } from '../../../globals/constants';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
-
-// this loads the all components instances and registers their html tags
 import '../../../index';
 
+const sharedStyles = html`
+  <style>
+    .wrapper {
+      margin-top: 5rem;
+      width: 100%;
+      justify-content: center;
+      display: flex;
+      height: 35rem;
+    }
+  </style>
+`;
+
 export default {
   title: 'Design System/Web Components/UI/Divider',
   argTypes: {
     directionVariant: {
+      description: 'Choose direction of the component.',
       options: DividerVariations,
       control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
     },
     theme: {
       options: Themes,
       control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
     },
   },
   parameters: {
@@ -28,18 +45,54 @@ export default {
       canvas: { hidden: true },
     },
     viewMode: 'docs',
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+  <Markdown>
+  Divider is used to separate or delineate different sections of a user interface. It's typically a horizontal or vertical line, often with a visual style like a solid line or a dashed line.
+
+    - [**Appearance**](#appearance)
+        - [**Direction**](#direction)
+  </Markdown>
+`,
+      },
+    },
   },
 };
 
-export const BlrDivider = (params: BlrDividerType) => html`
-  <div style="width: 100%; height: 100px; display: inline-block;">${BlrDividerRenderFunction(params)}</div>
-`;
+export const BlrDivider = (params: BlrDividerType) => BlrDividerRenderFunction(params);
 
 BlrDivider.storyName = 'Divider';
 
-const args: BlrDividerType = {
-  directionVariant: 'horizontal',
+const defaultParams: BlrDividerType = {
   theme: 'Light',
+  directionVariant: 'horizontal',
+};
+
+BlrDivider.args = defaultParams;
+
+/**
+ * ## Appearance
+ * The only option to change the appearance of the Divider is the direction. The size of the Divider will be defined by the surounding element.
+ ### Direction
+ * The Divider component can have a horizontal or a vertical direction.
+ */
+
+export const Divider = () => {
+  return html`
+    ${sharedStyles}
+    ${BlrDivider({
+      ...defaultParams,
+      directionVariant: 'horizontal',
+    })}
+    <div class="wrapper">
+      ${BlrDivider({
+        ...defaultParams,
+        directionVariant: 'vertical',
+      })}
+    </div>
+  `;
 };
 
-BlrDivider.args = args;
+Divider.story = { name: ' ' };

From 34a4355c327d8eb2b6a742d33c70df36139072cd Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 9 Jan 2024 10:12:19 +0100
Subject: [PATCH 2/6] fix(ui): add feedback

---
 .../components/ui/divider/index.stories.ts    | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/ui-library/src/components/ui/divider/index.stories.ts b/packages/ui-library/src/components/ui/divider/index.stories.ts
index 6218b9b4e..7764b6cf4 100644
--- a/packages/ui-library/src/components/ui/divider/index.stories.ts
+++ b/packages/ui-library/src/components/ui/divider/index.stories.ts
@@ -14,6 +14,11 @@ const sharedStyles = html`
       display: flex;
       height: 35rem;
     }
+    .divider-container {
+      padding-top: 2rem;
+      width: 300px;
+      height: 300px;
+    }
   </style>
 `;
 
@@ -45,7 +50,7 @@ export default {
       canvas: { hidden: true },
     },
     viewMode: 'docs',
-    layout: 'padded',
+    layout: 'centered',
     docs: {
       description: {
         component: `
@@ -61,16 +66,16 @@ export default {
   },
 };
 
-export const BlrDivider = (params: BlrDividerType) => BlrDividerRenderFunction(params);
-
-BlrDivider.storyName = 'Divider';
-
+export const Divider = (params: BlrDividerType) => {
+  return html` ${sharedStyles}
+    <div class="divider-container">${BlrDividerRenderFunction(params)}</div>`;
+};
 const defaultParams: BlrDividerType = {
   theme: 'Light',
   directionVariant: 'horizontal',
 };
 
-BlrDivider.args = defaultParams;
+Divider.args = defaultParams;
 
 /**
  * ## Appearance
@@ -79,15 +84,15 @@ BlrDivider.args = defaultParams;
  * The Divider component can have a horizontal or a vertical direction.
  */
 
-export const Divider = () => {
+export const Direction = () => {
   return html`
     ${sharedStyles}
-    ${BlrDivider({
+    ${Divider({
       ...defaultParams,
       directionVariant: 'horizontal',
     })}
     <div class="wrapper">
-      ${BlrDivider({
+      ${Divider({
         ...defaultParams,
         directionVariant: 'vertical',
       })}

From 38e9366eb6313f5974010da62bd325ffaf1c5ae7 Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Fri, 12 Jan 2024 11:27:51 +0100
Subject: [PATCH 3/6] fix(storybook): change tag name

---
 .../ui-library/src/components/ui/divider/index.stories.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-library/src/components/ui/divider/index.stories.ts b/packages/ui-library/src/components/ui/divider/index.stories.ts
index 7764b6cf4..0c58f3a61 100644
--- a/packages/ui-library/src/components/ui/divider/index.stories.ts
+++ b/packages/ui-library/src/components/ui/divider/index.stories.ts
@@ -54,12 +54,12 @@ export default {
     docs: {
       description: {
         component: `
-  <Markdown>
+  <markdown>
   Divider is used to separate or delineate different sections of a user interface. It's typically a horizontal or vertical line, often with a visual style like a solid line or a dashed line.
 
     - [**Appearance**](#appearance)
         - [**Direction**](#direction)
-  </Markdown>
+  </markdown>
 `,
       },
     },
@@ -100,4 +100,4 @@ export const Direction = () => {
   `;
 };
 
-Divider.story = { name: ' ' };
+Direction.story = { name: ' ' };

From a6ecaf4ea74b8fc911fda41911418e1c6cede69a Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Fri, 12 Jan 2024 12:34:04 +0100
Subject: [PATCH 4/6] fix(storybook): tag name all files

---
 .../components/actions/buttons/icon-button/index.stories.ts | 4 ++--
 .../components/actions/buttons/text-button/index.stories.ts | 4 ++--
 .../src/components/feedback/loader/index.stories.ts         | 4 ++--
 .../src/components/forms/checkbox/index.stories.ts          | 6 +++---
 .../src/components/forms/number-input/index.stories.ts      | 4 ++--
 .../ui-library/src/components/forms/radio/index.stories.ts  | 4 ++--
 .../ui-library/src/components/forms/select/index.stories.ts | 4 ++--
 .../src/components/forms/text-input/index.stories.ts        | 4 ++--
 .../src/components/forms/textarea/index.stories.ts          | 4 ++--
 9 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
index bbdcc4218..304a0a6b4 100644
--- a/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
+++ b/packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts
@@ -171,7 +171,7 @@ export default {
     viewMode: 'docs',
     docs: {
       description: {
-        component: `<Markdown>
+        component: `<markdown>
 An icon component typically displays a small, visually recognizable graphic or symbol that represents a particular function, object, or concept.
 
 **NOTE**<br>
@@ -184,7 +184,7 @@ The Icon Button component can not be used as a link out of the box and we genera
 - [**Dependencies**](#dependencies)
  - [**Icon**](#icon) 
  - [**Loader**](#loader)  
-        </Markdown>`,
+        </markdown>`,
       },
     },
   },
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
index f301f9d50..84cc7df9f 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
+++ b/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
@@ -193,7 +193,7 @@ export default {
     viewMode: 'docs',
     docs: {
       description: {
-        component: `<Markdown>
+        component: `<markdown>
 Text Button represents a clickable button that typically displays text rather than icons or symbols. The main feature of a Text Button is the text label, which communicates the button's action or function to the user.
  
  **NOTE**<br>
@@ -207,7 +207,7 @@ Text Button represents a clickable button that typically displays text rather th
 - [**Dependencies**](#dependencies)
  - [**Icon**](#icon)
  - [**Loader**](#loader)
-</Markdown>`,
+</markdown>`,
       },
     },
   },
diff --git a/packages/ui-library/src/components/feedback/loader/index.stories.ts b/packages/ui-library/src/components/feedback/loader/index.stories.ts
index 1fc5970bd..e6436a0c5 100644
--- a/packages/ui-library/src/components/feedback/loader/index.stories.ts
+++ b/packages/ui-library/src/components/feedback/loader/index.stories.ts
@@ -69,12 +69,12 @@ export default {
     layout: 'centered',
     docs: {
       description: {
-        component: `<Markdown>
+        component: `<markdown>
 Loader’s primary purpose is to provide feedback to the user that the application has not frozen or become unresponsive but is actively processing data or performing an action.
 - [**Appearance**](#appearance)
  - [**Variant**](#variant) 
  - [**Size Variant**](#size-variant) 
-</Markdown>`,
+</markdown>`,
       },
     },
   },
diff --git a/packages/ui-library/src/components/forms/checkbox/index.stories.ts b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
index 477826b2a..feec1c449 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.stories.ts
+++ b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
@@ -220,8 +220,8 @@ export default {
       //Second Example
       // source: { code: '<blr-textarea label="Text Area LG" size="lg"></blr-textarea>',},
       description: {
-        component: `<Markdown>
-Checkbox represents two states: checked (selected) or unchecked (deselected), it  is usually accompanied by text labels that describe the option or action associated with the Checkbox.        
+        component: `<markdown>
+Checkbox represents two states: checked (selected) or unchecked (deselected), it  is usually accompanied by text labels thatdescribe the option or action associated with the Checkbox.        
 - [**Appearance**](#appearance)
  - [**Size Variant**](#size-variant) 
 - [**Content / Settings**](#content--settings)
@@ -235,7 +235,7 @@ Checkbox represents two states: checked (selected) or unchecked (deselected), it
 - [**Dependencies**](#dependencies)
  - [**Form-Label**](#form-label) 
  - [**Form Caption Group**](#form-caption-group)     
-</Markdown>
+</markdown>
         `,
       },
     },
diff --git a/packages/ui-library/src/components/forms/number-input/index.stories.ts b/packages/ui-library/src/components/forms/number-input/index.stories.ts
index 38624448a..a642c0cc2 100644
--- a/packages/ui-library/src/components/forms/number-input/index.stories.ts
+++ b/packages/ui-library/src/components/forms/number-input/index.stories.ts
@@ -362,7 +362,7 @@ export default {
     layout: 'centered',
     docs: {
       description: {
-        component: `<Markdown>
+        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.
       - [**Appearance**](#appearance)
         - [**Size Variant**](#size-variant)
@@ -380,7 +380,7 @@ export default {
         - [**Icon Button**](#icon-button)
         - [**Form Label**](#form-label)
         - [**Form Caption Group**](#form-caption-group)
-    </Markdown>`,
+    </markdown>`,
       },
     },
   },
diff --git a/packages/ui-library/src/components/forms/radio/index.stories.ts b/packages/ui-library/src/components/forms/radio/index.stories.ts
index d06c5a182..6a4333472 100644
--- a/packages/ui-library/src/components/forms/radio/index.stories.ts
+++ b/packages/ui-library/src/components/forms/radio/index.stories.ts
@@ -197,7 +197,7 @@ export default {
     layout: 'centered',
     docs: {
       description: {
-        component: `<Markdown>
+        component: `<markdown>
         A radio component allows users to select a single option from a list of mutually exclusive choices.
       
         - [**Appearance**](#appearance)
@@ -212,7 +212,7 @@ export default {
           - [**Has Error**](#has-error)
         - [**Dependencies**](#dependencies)
           - [**Form Caption Group**](#form-caption-group)
-      </Markdown>
+      </markdown>
       `,
       },
     },
diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts
index b46e3aaf3..c9ee7c9c4 100644
--- a/packages/ui-library/src/components/forms/select/index.stories.ts
+++ b/packages/ui-library/src/components/forms/select/index.stories.ts
@@ -235,7 +235,7 @@ export default {
     viewMode: 'docs',
     docs: {
       description: {
-        component: `<Markdown>
+        component: `<markdown>
 Select presents users with a list of options from which they can make a single selection. It contains a list of selectable options. These options can be text-based, such as names, items, or categories.
 <br>
 - [**Appearance**](#appearance)
@@ -249,7 +249,7 @@ Select presents users with a list of options from which they can make a single s
  - [**Form Label**](#form-label)
  - [**Icon**](#icon)
  - [**Form Caption Group**](#form-caption-group)
-</Markdown>`,
+</markdown>`,
       },
     },
   },
diff --git a/packages/ui-library/src/components/forms/text-input/index.stories.ts b/packages/ui-library/src/components/forms/text-input/index.stories.ts
index 2617e38d9..9045cf85e 100644
--- a/packages/ui-library/src/components/forms/text-input/index.stories.ts
+++ b/packages/ui-library/src/components/forms/text-input/index.stories.ts
@@ -296,7 +296,7 @@ export default {
     },
     docs: {
       description: {
-        component: `<Markdown>
+        component: `<markdown>
 Text Input allows users to enter textual information or data into a designated area. Users can interact with the Text Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current text insertion point.
 - [**Appearance**](#appearance)
  - [**Size Variant**](#size-variant) 
@@ -313,7 +313,7 @@ Text Input allows users to enter textual information or data into a designated a
  - [**Form Label**](#form-label) 
  - [**Icon**](#icon) 
  - [**Form Caption Group**](#form-caption-group)     
-</Markdown>
+</markdown>
         `,
       },
     },
diff --git a/packages/ui-library/src/components/forms/textarea/index.stories.ts b/packages/ui-library/src/components/forms/textarea/index.stories.ts
index bd6466c79..4cbae0eeb 100644
--- a/packages/ui-library/src/components/forms/textarea/index.stories.ts
+++ b/packages/ui-library/src/components/forms/textarea/index.stories.ts
@@ -386,7 +386,7 @@ export default {
       //Second Example
       // source: { code: '<blr-textarea label="Text Area LG" size="lg"></blr-textarea>',},
       description: {
-        component: `<Markdown>
+        component: `<markdown>
 Text Area allows users to input and edit multiline text. Unlike a simple Text Input component that is typically used for single-line text, a Text Area provides a larger space for users to enter and manipulate multiple lines of text.
                 Text Area components are used in various contexts where users need to input or edit longer pieces of text, such as comment boxes, message composition in messaging apps, notes, and description fields in forms.
 - [**Appearance**](#appearance)
@@ -404,7 +404,7 @@ Text Area allows users to input and edit multiline text. Unlike a simple Text In
  - [**Form Label**](#form-label) 
  - [**Form Caption Group**](#form-caption-group)     
  - [**Counter**](#counter)     
-</Markdown>
+</markdown>
         `,
       },
     },

From 8f59d65af0725e413ef1bd95c58931d3f299d9a6 Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 16 Jan 2024 10:15:41 +0100
Subject: [PATCH 5/6] fix(storybook): wip

---
 .../ui-library/src/components/forms/checkbox/index.stories.ts  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui-library/src/components/forms/checkbox/index.stories.ts b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
index feec1c449..35f0b51b8 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.stories.ts
+++ b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
@@ -221,7 +221,8 @@ export default {
       // source: { code: '<blr-textarea label="Text Area LG" size="lg"></blr-textarea>',},
       description: {
         component: `<markdown>
-Checkbox represents two states: checked (selected) or unchecked (deselected), it  is usually accompanied by text labels thatdescribe the option or action associated with the Checkbox.        
+Checkbox represents two states: checked (selected) or unchecked (deselected), it  is usually accompanied by text labels that & describe the option or action associated with the Checkbox.        
+
 - [**Appearance**](#appearance)
  - [**Size Variant**](#size-variant) 
 - [**Content / Settings**](#content--settings)

From 249747998c4e62e20740c08ba509edb3e974df61 Mon Sep 17 00:00:00 2001
From: Barkley <barkley.taylor@accenture.com>
Date: Tue, 16 Jan 2024 10:34:38 +0100
Subject: [PATCH 6/6] fix(storybook): checkbox text

---
 .../ui-library/src/components/forms/checkbox/index.stories.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-library/src/components/forms/checkbox/index.stories.ts b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
index 35f0b51b8..1b96eb2d7 100644
--- a/packages/ui-library/src/components/forms/checkbox/index.stories.ts
+++ b/packages/ui-library/src/components/forms/checkbox/index.stories.ts
@@ -221,7 +221,7 @@ export default {
       // source: { code: '<blr-textarea label="Text Area LG" size="lg"></blr-textarea>',},
       description: {
         component: `<markdown>
-Checkbox represents two states: checked (selected) or unchecked (deselected), it  is usually accompanied by text labels that & describe the option or action associated with the Checkbox.        
+        Checkbox represents two states: checked (selected) or unchecked (deselected). It is usually accompanied by a text label that describes the option or action associated with the Checkbox.        
 
 - [**Appearance**](#appearance)
  - [**Size Variant**](#size-variant)