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: ` + component: ` An icon component typically displays a small, visually recognizable graphic or symbol that represents a particular function, object, or concept. **NOTE**
@@ -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) - `, + `, }, }, }, 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: ` + component: ` 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**
@@ -207,7 +207,7 @@ Text Button represents a clickable button that typically displays text rather th - [**Dependencies**](#dependencies) - [**Icon**](#icon) - [**Loader**](#loader) -`, +`, }, }, }, 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: ` + component: ` 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) -`, +`, }, }, }, 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..1b96eb2d7 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,9 @@ export default { //Second Example // source: { code: '',}, description: { - component: ` -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: ` + 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) - + `, }, }, 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: ` + component: ` 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) - `, + `, }, }, }, 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: ` + component: ` 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) - + `, }, }, 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: ` + component: ` 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.
- [**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) -`, +`, }, }, }, 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: ` + component: ` 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) - + `, }, }, 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: '',}, description: { - component: ` + component: ` 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) - + `, }, }, 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..0c58f3a61 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,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` + +`; + 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: ` + + 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) + +`, + }, + }, }, }; -export const BlrDivider = (params: BlrDividerType) => html` -
${BlrDividerRenderFunction(params)}
-`; +export const Divider = (params: BlrDividerType) => { + return html` ${sharedStyles} +
${BlrDividerRenderFunction(params)}
`; +}; +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', + })} +
+ ${Divider({ + ...defaultParams, + directionVariant: 'vertical', + })} +
+ `; }; -BlrDivider.args = args; +Direction.story = { name: ' ' };