feat(storybook): add divider docs

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>`,
       },
     },
   },

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>`,
       },
     },
   },

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>`,
       },
     },
   },

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

@@ -220,8 +220,9 @@ 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 a text label that describes the option or action associated with the Checkbox.        
+
 - [**Appearance**](#appearance)
  - [**Size Variant**](#size-variant) 
 - [**Content / Settings**](#content--settings)
@@ -235,7 +236,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>
         `,
       },
     },

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>`,
       },
     },
   },

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>
       `,
       },
     },

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>`,
       },
     },
   },

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>
         `,
       },
     },

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>
         `,
       },
     },

packages/ui-library/src/components/ui/divider/index.stories.ts

@@ -3,20 +3,42 @@ 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;
+    }
+    .divider-container {
+      padding-top: 2rem;
+      width: 300px;
+      height: 300px;
+    }
+  </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 +50,54 @@ export default {
       canvas: { hidden: true },
     },
     viewMode: 'docs',
+    layout: 'centered',
+    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 Divider = (params: BlrDividerType) => {
+  return html` ${sharedStyles}
+    <div class="divider-container">${BlrDividerRenderFunction(params)}</div>`;
+};
+const defaultParams: BlrDividerType = {
+  theme: 'Light',
+  directionVariant: 'horizontal',
+};
 
-BlrDivider.storyName = 'Divider';
+Divider.args = defaultParams;
 
-const args: BlrDividerType = {
-  directionVariant: 'horizontal',
-  theme: 'Light',
+/**
+ * ## 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 Direction = () => {
+  return html`
+    ${sharedStyles}
+    ${Divider({
+      ...defaultParams,
+      directionVariant: 'horizontal',
+    })}
+    <div class="wrapper">
+      ${Divider({
+        ...defaultParams,
+        directionVariant: 'vertical',
+      })}
+    </div>
+  `;
 };
 
-BlrDivider.args = args;
+Direction.story = { name: ' ' };