From 09ba74bb4d56ac5d765542bb7bb42463f82f7f88 Mon Sep 17 00:00:00 2001 From: Barkley Date: Thu, 25 Apr 2024 15:55:54 +0200 Subject: [PATCH 1/4] fix(ui): adjust links --- .../src/components/button-group/index.stories.ts | 1 + .../src/components/button-icon/index.stories.ts | 4 ++-- .../src/components/button-text/index.stories.ts | 4 ++-- .../ui-library/src/components/checkbox/index.stories.ts | 6 +++--- .../src/components/form-caption/index.stories.ts | 2 +- .../src/components/input-field-number/index.stories.ts | 6 +++--- .../src/components/input-field-text/index.stories.ts | 8 ++++---- .../src/components/radio-group/index.stories.ts | 2 +- .../ui-library/src/components/select/index.stories.ts | 6 +++--- .../ui-library/src/components/textarea/index.stories.ts | 6 +++--- .../src/components/toggle-switch/index.stories.ts | 2 +- 11 files changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/ui-library/src/components/button-group/index.stories.ts b/packages/ui-library/src/components/button-group/index.stories.ts index a510659f8..33d429695 100644 --- a/packages/ui-library/src/components/button-group/index.stories.ts +++ b/packages/ui-library/src/components/button-group/index.stories.ts @@ -111,6 +111,7 @@ export const ButtonGroup = ( }; const defaultParams: BlrButtonGroupType = { + theme: 'Light', sizeVariant: 'md', alignment: 'left', }; diff --git a/packages/ui-library/src/components/button-icon/index.stories.ts b/packages/ui-library/src/components/button-icon/index.stories.ts index 92ecacc5e..360df448b 100644 --- a/packages/ui-library/src/components/button-icon/index.stories.ts +++ b/packages/ui-library/src/components/button-icon/index.stories.ts @@ -286,7 +286,7 @@ Disabled.argTypes = { /** * ## Dependencies * ### Icon - * The Button Icon component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon--docs) component. + * The Button Icon component makes use of the Icon component. For more information have a look at the [Icon](/docs/components-icon--docs) component. */ export const Icon = () => { return html` @@ -305,7 +305,7 @@ Icon.argTypes = { }; /** - * The Button Icon uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](/docs/design-system-web-components-feedback-loader--docs) component. + * The Button Icon uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](/docs/components-loader--docs) component. */ export const Loader = () => { return html` diff --git a/packages/ui-library/src/components/button-text/index.stories.ts b/packages/ui-library/src/components/button-text/index.stories.ts index e7232b084..90f7a0250 100644 --- a/packages/ui-library/src/components/button-text/index.stories.ts +++ b/packages/ui-library/src/components/button-text/index.stories.ts @@ -360,7 +360,7 @@ Disabled.story = { /** * ## Dependencies * ### Icon - * The Button Text component can display a leading or trailing icon next to the label. For more information have a look at the [Icon](?path=/docs/design-system-web-components-ui-icon--docs) component. + * The Button Text component can display a leading or trailing icon next to the label. For more information have a look at the [Icon](?path=/docs/components-icon--docs) component. */ export const Icon = () => { @@ -389,7 +389,7 @@ Icon.argTypes = { }; Icon.story = { name: ' ' }; /** - * The Button Text uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](?path=/docs/design-system-web-components-feedback-loader--docs) component. + * The Button Text uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](?path=/docs/components-loader--docs) component. */ export const Loader = () => { return html` diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts index a532efed2..2a4596dbc 100644 --- a/packages/ui-library/src/components/checkbox/index.stories.ts +++ b/packages/ui-library/src/components/checkbox/index.stories.ts @@ -397,7 +397,7 @@ Readonly.story = { // * ## Validation // * // * ### Required -// * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/design-system-web-components-internal-components-formlabel--docs) component in the dependencies section below. +// * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/components-form-label--docs) component in the dependencies section below. // */ // export const Required = () => { // return html` @@ -444,7 +444,7 @@ HasError.story = { * ## Dependencies * * ### Form Label - * The Checkbox component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/design-system-web-components-internal-components-formlabel--docs) component. + * The Checkbox component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/components-form-label--docs) component. */ export const FormLabel = () => { @@ -470,7 +470,7 @@ FormLabel.story = { /** * ### Form Caption Group - * The Checkbox component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component. If the Checkbox component lacks a label (hasLabel=false), the Form Caption Group should remain hidden. + * The Checkbox component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/components-form-caption-group--docs) component. If the Checkbox component lacks a label (hasLabel=false), the Form Caption Group should remain hidden. */ export const FormCaptionGroup = () => { return html` diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts index 4ee50234a..646db1f09 100644 --- a/packages/ui-library/src/components/form-caption/index.stories.ts +++ b/packages/ui-library/src/components/form-caption/index.stories.ts @@ -179,7 +179,7 @@ SizeVariant.story = { name: ' ' }; /** * ## Dependencies * ### Icon - * The Form Caption component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon-icon--docs) component. + * The Form Caption component makes use of the Icon component. For more information have a look at the [Icon](/docs/components-icon--docs) component. */ export const Icon = () => { diff --git a/packages/ui-library/src/components/input-field-number/index.stories.ts b/packages/ui-library/src/components/input-field-number/index.stories.ts index 3cd39e5d1..902ddb8c5 100644 --- a/packages/ui-library/src/components/input-field-number/index.stories.ts +++ b/packages/ui-library/src/components/input-field-number/index.stories.ts @@ -607,7 +607,7 @@ export const HasError = (params: BlrInputFieldNumberType) => { /** * ## Dependencies * ### Button Icon - * The Input Field Number component makes use of the Button Icon component for increasing or decreasing the value. For more information have a look at the [Button Icon](?path=/docs/design-system-web-components-actions-buttons-button-icon--docs) component. + * The Input Field Number component makes use of the Button Icon component for increasing or decreasing the value. For more information have a look at the [Button Icon](?path=/docs/components-actions-buttons-button-icon--docs) component. */ export const ButtonIcon = (params: BlrInputFieldNumberType) => { return html` @@ -627,7 +627,7 @@ export const ButtonIcon = (params: BlrInputFieldNumberType) => { ButtonIcon.story = { name: ' ' }; /** - * The Input Field Number component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component. + * The Input Field Number component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/components-form-label--docs) component. */ export const FormLabel = (params: BlrInputFieldNumberType) => { return html` @@ -657,7 +657,7 @@ export const FormLabel = (params: BlrInputFieldNumberType) => { }; /** - * The Input Field Number component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component. + * The Input Field Number component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/components-form-caption-group--docs) component. */ export const FormCaptionGroup = (params: BlrInputFieldNumberType) => { return html` diff --git a/packages/ui-library/src/components/input-field-text/index.stories.ts b/packages/ui-library/src/components/input-field-text/index.stories.ts index 90dc8716b..004083d37 100644 --- a/packages/ui-library/src/components/input-field-text/index.stories.ts +++ b/packages/ui-library/src/components/input-field-text/index.stories.ts @@ -440,7 +440,7 @@ SizeVariant.story = { /** * ## Content / Settings * ### Type - * The Input Field Text component can have all the types an html input can have, except the number and the unit type, which is covered in the Input Field Number component. For more information have a look at the [Input Field Number](/docs/design-system-web-components-forms-input-field-number--docs) component. + * The Input Field Text component can have all the types an html input can have, except the number and the unit type, which is covered in the Input Field Number component. For more information have a look at the [Input Field Number](/docs/components-forms-input-field-number--docs) component. */ export const Type = () => { return html` @@ -644,7 +644,7 @@ HasError.argTypes = { /** * ## Dependencies * ### Form Label - * The Input Field Text component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component. + * The Input Field Text component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/components-form-label--docs) component. */ export const FormLabel = () => { return html` @@ -672,7 +672,7 @@ FormLabel.story = { name: ' ', }; /** - * The Input Field Text component can have a trailing clickable Icon / Button Icon component. This could be used for example to show or hide the input, when it is used to enter a password. For more information have a look at the [Icon](?path=/docs/design-system-web-components-ui-icon--docs) component. + * The Input Field Text component can have a trailing clickable Icon / Button Icon component. This could be used for example to show or hide the input, when it is used to enter a password. For more information have a look at the [Icon](?path=/docs/components-icon--docs) component. */ export const Icon = () => { return html` @@ -707,7 +707,7 @@ Icon.argTypes = { ...disabledArgTypes, }; /** - * The Form Caption Group component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component. + * The Form Caption Group component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/components-form-caption-group--docs) component. */ export const FormCaptionGroup = () => { return html` diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts index e67f30ac6..307501c5e 100644 --- a/packages/ui-library/src/components/radio-group/index.stories.ts +++ b/packages/ui-library/src/components/radio-group/index.stories.ts @@ -436,7 +436,7 @@ export const HasError = () => { /** * ## Dependencies * ### Form Caption Group - * The Radio Group component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component. + * The Radio Group component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/components-form-caption-group--docs) component. */ export const FormCaptionGroup = () => { return html` diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts index fbbf4b8ad..bab3c024b 100644 --- a/packages/ui-library/src/components/select/index.stories.ts +++ b/packages/ui-library/src/components/select/index.stories.ts @@ -409,7 +409,7 @@ HasError.argTypes = { * ## Dependencies * * ### Form Label - * The Select component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/design-system-web-components-internal-components-formlabel--docs) component. + * The Select component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/components-form-label--docs) component. */ export const FormLabel = () => { return html` @@ -439,7 +439,7 @@ FormLabel.argTypes = { ...disabledArgTypes, }; /** - * The Select component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon--docs) component. + * The Select component makes use of the Icon component. For more information have a look at the [Icon](/docs/components-icon--docs) component. */ export const Icon = () => { @@ -471,7 +471,7 @@ Icon.argTypes = { ...disabledArgTypes, }; /** - * The Select component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component. + * The Select component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/components-form-caption-group--docs) component. */ export const FormCaptionGroup = () => { return html` diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts index c93d33a5d..e7fe8c4a2 100644 --- a/packages/ui-library/src/components/textarea/index.stories.ts +++ b/packages/ui-library/src/components/textarea/index.stories.ts @@ -700,7 +700,7 @@ HasError.argTypes = { /** * ## Dependencies * ### Form Label - * The Text Area component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component. + * The Text Area component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/components-form-label--docs) component. */ // States FormLabel export const FormLabel = () => { @@ -738,7 +738,7 @@ FormLabel.story = { name: ' ', }; /** - * The Text Area component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal Form Caption Group component. + * The Text Area component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal Form Caption Group component. */ export const FormCaptionGroup = () => { return html` @@ -779,7 +779,7 @@ FormCaptionGroup.argTypes = { // States Counter /** - * The Text Area component can display an optional counter. The threshold for the warning and error message can be set individually. For more information have a look at the internal [Counter](?path=/docs/design-system-web-components-internal-components-counter--docs) component. + * The Text Area component can display an optional counter. The threshold for the warning and error message can be set individually. For more information have a look at the internal [Counter](?path=/docs/components-counter--docs) component. */ export const Counter = () => { return html` diff --git a/packages/ui-library/src/components/toggle-switch/index.stories.ts b/packages/ui-library/src/components/toggle-switch/index.stories.ts index e757a750c..69f84e9a7 100644 --- a/packages/ui-library/src/components/toggle-switch/index.stories.ts +++ b/packages/ui-library/src/components/toggle-switch/index.stories.ts @@ -413,7 +413,7 @@ Readonly.story = { name: ' ' }; /** * ## Dependencies * ### Form Caption - * The Toggle Switch component can display an optional hint message with or without icons. For more information have a look at the [Form Caption](/docs/design-system-web-components-internal-components-formcaptiongroup-formcaption--docs) component. + * The Toggle Switch component can display an optional hint message with or without icons. For more information have a look at the [Form Caption](/docs/components-form-caption-group-formcaption--docs) component. */ export const FormCaption = () => { return html` From b6c6a7ec0a2016185f2491f45698330cef9b89be Mon Sep 17 00:00:00 2001 From: Barkley Date: Wed, 22 May 2024 12:23:25 +0200 Subject: [PATCH 2/4] fix(ui): correct issues --- .../ui-library/src/components/form-caption/index.stories.ts | 3 +++ .../ui-library/src/components/toggle-switch/index.stories.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts index 646db1f09..ac0efebd0 100644 --- a/packages/ui-library/src/components/form-caption/index.stories.ts +++ b/packages/ui-library/src/components/form-caption/index.stories.ts @@ -73,16 +73,19 @@ export default { description: { component: ` Form Caption provides either a brief hint or error message to a related form element such as Input Field Text or Select. It is typically displayed below the form element, and it can be used to provide additional information about the type of information a user has to provide, like an example of the correct data format. + - [**Appearance**](#appearance) - [**Variant**](#variant) - [**Size Variant**](#size-variant) - [**Dependencies**](#dependencies) - [**Icon**](#icon) + The Form Caption is intended to be used when creating new components. Currently, it is used like this in the following components: - [**Form Caption Group**](?path=/docs/components-form-caption-group--docs) - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs) It is not intended to use the Form Caption directly when creating new applications. + `, }, diff --git a/packages/ui-library/src/components/toggle-switch/index.stories.ts b/packages/ui-library/src/components/toggle-switch/index.stories.ts index 69f84e9a7..e47f442ef 100644 --- a/packages/ui-library/src/components/toggle-switch/index.stories.ts +++ b/packages/ui-library/src/components/toggle-switch/index.stories.ts @@ -413,7 +413,7 @@ Readonly.story = { name: ' ' }; /** * ## Dependencies * ### Form Caption - * The Toggle Switch component can display an optional hint message with or without icons. For more information have a look at the [Form Caption](/docs/components-form-caption-group-formcaption--docs) component. + * The Toggle Switch component can display an optional hint message with or without icons. For more information have a look at the [Form Caption](/docs/components-form-caption--docs) component. */ export const FormCaption = () => { return html` From c3e47927f70feaf8a003563fbd417e172c318a22 Mon Sep 17 00:00:00 2001 From: Barkley Date: Thu, 23 May 2024 07:19:13 +0200 Subject: [PATCH 3/4] fix(ui): review comments --- .../src/components/input-field-number/index.stories.ts | 3 +-- .../src/components/input-field-text/index.stories.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui-library/src/components/input-field-number/index.stories.ts b/packages/ui-library/src/components/input-field-number/index.stories.ts index b283aec6d..f8682e1b9 100644 --- a/packages/ui-library/src/components/input-field-number/index.stories.ts +++ b/packages/ui-library/src/components/input-field-number/index.stories.ts @@ -607,8 +607,7 @@ export const HasError = (params: BlrInputFieldNumberType) => { /** * ## Dependencies - * ### Button Icon - * The Input Field Number component makes use of the Button Icon component for increasing or decreasing the value. For more information have a look at the [Button Icon](?path=/docs/components-button-icon--docs) component. + * ### Stepper Button * The Input Field Number component makes use of the Stepper Button component when `stepperVariant='split'` for increasing or decreasing the value. For more information have a look at the [Stepper Button (Not yet implemented)](?path=/docs/components-stepper-button--docs) component. * diff --git a/packages/ui-library/src/components/input-field-text/index.stories.ts b/packages/ui-library/src/components/input-field-text/index.stories.ts index 004083d37..9045871d9 100644 --- a/packages/ui-library/src/components/input-field-text/index.stories.ts +++ b/packages/ui-library/src/components/input-field-text/index.stories.ts @@ -440,7 +440,7 @@ SizeVariant.story = { /** * ## Content / Settings * ### Type - * The Input Field Text component can have all the types an html input can have, except the number and the unit type, which is covered in the Input Field Number component. For more information have a look at the [Input Field Number](/docs/components-forms-input-field-number--docs) component. + * The Input Field Text component can have all the types an html input can have, except the number and the unit type, which is covered in the Input Field Number component. For more information have a look at the [Input Field Number](/docs/components-input-field-number--docs) component. */ export const Type = () => { return html` From a6a3079f2ee0209cf2fff4a887d19ba6b66a0074 Mon Sep 17 00:00:00 2001 From: Barkley Date: Fri, 24 May 2024 10:17:38 +0200 Subject: [PATCH 4/4] fix(ui): review changes --- .../components/form-caption-group/index.stories.ts | 1 + .../src/components/form-caption-group/index.test.ts | 1 + .../src/components/form-caption/index.stories.ts | 6 ++---- .../components/input-field-number/index.stories.ts | 11 ++++------- 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/ui-library/src/components/form-caption-group/index.stories.ts b/packages/ui-library/src/components/form-caption-group/index.stories.ts index f9b07e6a8..e8a2c3def 100644 --- a/packages/ui-library/src/components/form-caption-group/index.stories.ts +++ b/packages/ui-library/src/components/form-caption-group/index.stories.ts @@ -74,6 +74,7 @@ BlrFormCaptionGroup.storyName = 'Form Caption Group'; const args: BlrFormCaptionGroupType = { sizeVariant: 'sm', + theme: 'Light', }; BlrFormCaptionGroup.args = args; diff --git a/packages/ui-library/src/components/form-caption-group/index.test.ts b/packages/ui-library/src/components/form-caption-group/index.test.ts index ae7d671c7..48400bce0 100644 --- a/packages/ui-library/src/components/form-caption-group/index.test.ts +++ b/packages/ui-library/src/components/form-caption-group/index.test.ts @@ -10,6 +10,7 @@ import { html } from 'lit-html'; const sampleParams: BlrFormCaptionGroupType = { sizeVariant: 'md', + theme: 'Light', }; const hintCaption = BlrFormCaptionRenderFunction({ diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts index ac0efebd0..a74f887be 100644 --- a/packages/ui-library/src/components/form-caption/index.stories.ts +++ b/packages/ui-library/src/components/form-caption/index.stories.ts @@ -73,19 +73,17 @@ export default { description: { component: ` Form Caption provides either a brief hint or error message to a related form element such as Input Field Text or Select. It is typically displayed below the form element, and it can be used to provide additional information about the type of information a user has to provide, like an example of the correct data format. - - [**Appearance**](#appearance) - [**Variant**](#variant) - [**Size Variant**](#size-variant) - [**Dependencies**](#dependencies) - [**Icon**](#icon) - + The Form Caption is intended to be used when creating new components. Currently, it is used like this in the following components: - [**Form Caption Group**](?path=/docs/components-form-caption-group--docs) - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs) - It is not intended to use the Form Caption directly when creating new applications. - + It is not intended to use the Form Caption directly when creating new applications. `, }, diff --git a/packages/ui-library/src/components/input-field-number/index.stories.ts b/packages/ui-library/src/components/input-field-number/index.stories.ts index f8682e1b9..c9156cb7a 100644 --- a/packages/ui-library/src/components/input-field-number/index.stories.ts +++ b/packages/ui-library/src/components/input-field-number/index.stories.ts @@ -524,11 +524,11 @@ export const HasUnit = (params: BlrInputFieldNumberType) => { }; /** - * ## States - * Apart from states like rest, hover, pressed and focus, the Input Field Number component can also be disabled or readonly. The error state is documented under [validation](#validation). + * ## States + * Apart from states like rest, hover, pressed and focus, the Input Field Number component can also be disabled or readonly. The error state is documented under [validation](#validation). * ### Disabled -The Input Field Number component in the disabled state can not be interacted with. This means it can not receive focus or be selected. -*/ + * The Input Field Number component in the disabled state can not be interacted with. This means it can not receive focus or be selected. + */ export const Disabled = (params: BlrInputFieldNumberType) => { return html` ${sharedStyles} @@ -607,10 +607,8 @@ export const HasError = (params: BlrInputFieldNumberType) => { /** * ## Dependencies - * ### Stepper Button * The Input Field Number component makes use of the Stepper Button component when `stepperVariant='split'` for increasing or decreasing the value. For more information have a look at the [Stepper Button (Not yet implemented)](?path=/docs/components-stepper-button--docs) component. - * * > Since the Stepper Button component is not yet implemented in code, the underlying elements reference the design tokens from the [Stepper Button Figma Component](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-B01LER---UI-Kit?type=design&node-id=3618-108974) component directly. */ export const StepperButton = (params: BlrInputFieldNumberType) => { @@ -633,7 +631,6 @@ StepperButton.story = { name: ' ' }; /** * ### Stepper Combo * The Input Field Number component makes use of the Stepper Combo component when `stepperVariant='horizontal | vertical'` for increasing or decreasing the value. For more information have a look at the [Stepper Combo (Not yet implemented)](?path=/docs/components-stepper-combo--docs) component. - * * > Since the Stepper Combo component is not yet implemented in code, the underlying elements reference the design tokens from the [Stepper Combo Figma Component](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-B01LER---UI-Kit?type=design&node-id=10636-18946) directly. */ export const StepperCombo = (params: BlrInputFieldNumberType) => {