${BlrNumberInputRenderFunction({
...defaultParams,
- theme: 'Light',
+ labelAppendix: undefined,
size: 'sm',
label: 'Number input SM',
value: 0,
@@ -399,7 +353,7 @@ export const SizeVariant = () => {
${BlrNumberInputRenderFunction({
...defaultParams,
- theme: 'Light',
+ labelAppendix: undefined,
size: 'md',
label: 'Number input MD',
value: 20,
@@ -408,7 +362,7 @@ export const SizeVariant = () => {
${BlrNumberInputRenderFunction({
...defaultParams,
- theme: 'Light',
+ labelAppendix: undefined,
size: 'lg',
label: 'Number input LG',
value: 40,
@@ -417,7 +371,11 @@ export const SizeVariant = () => {
`;
};
-SizeVariant.storyName = 'Appearance';
+SizeVariant.story = { name: ' ' };
+
+/**
+The Number Input component has 3 stepper variants: vertical, horizontal and split.
+ */
export const StepperVariant = () =>
html`
@@ -450,11 +408,10 @@ export const StepperVariant = () =>
`;
-StepperVariant.storyName = 'stepperVariant';
-
-//Content/ Settings Placeholder
/**
- * The placeholder component can display a placeholder text. This is recommended to improve usability.
+ * #Content / Settings
+ ### Placeholder
+ * The Number Input component can display a placeholder text. This is recommended to improve usability.
*/
export const Placeholder = () => {
return html`
@@ -464,8 +421,7 @@ export const Placeholder = () => {
...defaultParams,
theme: 'Light',
size: 'md',
- label: 'Has placeholder',
- labelAppendix: '',
+ label: 'With placeholder',
})}
@@ -473,41 +429,186 @@ export const Placeholder = () => {
...defaultParams,
theme: 'Light',
size: 'md',
- label: "Hasn't placeholder",
- labelAppendix: '',
+ label: 'Without placeholder',
placeholder: '',
})}
`;
};
-Placeholder.storyName = 'Content/ Settings';
-export const Example2 = () =>
- html`
-
+Placeholder.story = { name: ' ' };
+
+/**
+ * The Number Input component can display a unit either as a prefix or a suffix.
+ */
+export const HasUnit = () => {
+ return html`
+ ${sharedStyles}
+
${BlrNumberInputRenderFunction({
...defaultParams,
- unit: '%',
- label: 'Percent format',
- totalDigits: 3,
+ label: 'Unit prefix',
+ prependUnit: true,
+ })}
+
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'Unit suffix',
+ prependUnit: false,
+ placeholder: '',
})}
`;
+};
-Example2.storyName = 'Percent';
+/**
+ * #States
+ * Apart from states like rest, hover, pressed and focus, the Number Input component can also be disabled or readonly. The error state is documented under validation [link to Validation].
+ * ### Disabled
+The Number Input component in the disabled state can not be interacted with. This means it can not receive focus or be selected.
+*/
+export const Disabled = () => {
+ return html`
+ ${sharedStyles}
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'With Disabled',
+ disabled: false,
+ })}
+
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'Without Disabled',
+ disabled: true,
+ })}
+
+ `;
+};
-export const Example3 = () =>
- html`
-
+Disabled.story = { name: ' ' };
+
+/**
+ * The Number Input component can display a placeholder text. This is recommended to improve usability.
+ */
+export const Readonly = () => {
+ return html`
+ ${sharedStyles}
+
${BlrNumberInputRenderFunction({
...defaultParams,
- unit: '$',
- label: 'Currency format',
- prependUnit: true,
- totalDigits: 3,
- fractionDigits: 2,
+ label: 'With Readonly',
+ readonly: true,
+ })}
+
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ size: 'md',
+ label: 'Without Readonly',
+ readonly: false,
+ })}
+
+ `;
+};
+
+/**
+ * #Validation
+ * ### Required
+The Number Input component can be set as required. If set as required, an error should be thrown, when the Number Input component was not filled, 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 [link this to the Form Label] component in the dependencies section below.*/
+export const Required = () => {
+ return html`
+ ${sharedStyles}
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'With Required',
+ required: false,
+ })}
+
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'Without Required',
+ required: true,
+ })}
+
+ `;
+};
+
+Required.story = { name: ' ' };
+
+/**
+ * The Number Input component can be set to have an error. An error can be displayed after submitting a wrong value, after leaving/deselecting the Number Input or in case the Number Input was set as required and has not been filled before submitting. For more information on the error message have a look at the Form Caption Group [link this to the Form Caption Group] in the dependencies section below.
+ */
+export const HasError = () => {
+ return html`
+ ${sharedStyles}
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'With Error',
+ hasError: true,
+ })}
+
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ size: 'md',
+ label: 'Without Error',
+ hasError: false,
+ })}
+
+ `;
+};
+
+/**
+ * #Dependencies
+ * ### Icon Button
+ * The Number Input component makes use of the Icon Button component for increasing or decreasing the value. For more information have a look at the Icon Button [link to Icon Button] component.
+ */
+export const IconButton = () => {
+ return html`
+ ${sharedStyles}
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ unit: 'days',
+ })}
+
+ `;
+};
+
+IconButton.story = { name: ' ' };
+
+/**
+ * The Number Input 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 [link to Form Label] component.
+ */
+export const FormLabel = () => {
+ return html`
+ ${sharedStyles}
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ label: 'This is a label',
})}
`;
+};
-Example3.storyName = 'USD';
+/**
+ * The Number Input 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 [link to Form Caption Group] component.
+ */
+export const FormCaption = () => {
+ return html`
+ ${sharedStyles}
+
+ ${BlrNumberInputRenderFunction({
+ ...defaultParams,
+ showHint: true,
+ })}
+
+ `;
+};