Skip to content

Commit

Permalink
feat(ui): configure args table
Browse files Browse the repository at this point in the history
  • Loading branch information
@bar-tay
bar-tay committed Nov 24, 2023
1 parent cc860db commit 4236d67
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 39 deletions.
16 changes: 8 additions & 8 deletions packages/ui-library/src/components/forms/number-input/index.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
background-color: transparent;
}
&.mode1 {
&.split {
&.sm {
> .custom-stepper-button {
width: ${StepperCombo.SM.Vertical.Width};
Expand Down Expand Up @@ -154,7 +154,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar

return typeSafeNestedCss`
.stepper-combo {
&.mode2 {
&.horizontal {
display: grid;
grid-template-columns: 1fr 0 1fr;
justify-content: center;
Expand Down Expand Up @@ -184,7 +184,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
}
}
&.mode3 {
&.vertical {
display: grid;
grid-template-rows: 1fr 0 1fr;
justify-content: center;
Expand Down Expand Up @@ -239,11 +239,11 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
cursor: not-allowed;
}
&.mode2 {
&.horizontal {
width: unset;
}
&.mode3 {
&.vertical {
width: inherit;
}
}
Expand Down Expand Up @@ -271,7 +271,7 @@ export const baseStyle = typeSafeNestedCss`
-moz-appearance: textfield;
}
&.mode1 {
&.split {
> button:first-of-type {
order: -2;
}
Expand All @@ -289,8 +289,8 @@ export const baseStyle = typeSafeNestedCss`
}
}
&.mode2,
&.mode3 {
&.horizontal,
&.vertical {
.unit.prepend {
order: -1;
}
Expand Down
218 changes: 197 additions & 21 deletions packages/ui-library/src/components/forms/number-input/index.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const defaultParams: BlrNumberInputType = {
totalDigits: 0,
unit: 'kg',
value: 0,
variant: 'mode3',
stepperVariant: 'vertical',
};

export default {
Expand All @@ -53,13 +53,12 @@ export default {
category: 'Appearance',
},
},
variant: {
stepperVariant: {
name: 'stepperVariant',
description: ' Choose variant of the stepper that is used in the component.',
options: ['mode1', 'mode2', 'mode3'],
description: ' Choose stepperVariant of the stepper that is used in the component.',
options: ['split', 'horizontal', 'vertical'],
control: {
type: 'radio',
labels: ['vertical', 'horizontal', 'split'],
},
table: {
category: 'Appearance',
Expand All @@ -77,7 +76,7 @@ export default {
name: 'value',
description: 'Enter the value the component should have.',
table: {
category: 'Content/ Settings',
category: 'Conten / Settings',
},
control: {
type: 'number',
Expand All @@ -88,7 +87,7 @@ export default {
name: 'decimals',
description: 'Enter how many decimals the value of the component has.',
table: {
category: 'Content/ Settings',
category: 'Content / Settings',
},
control: {
type: 'number',
Expand All @@ -98,23 +97,35 @@ export default {
name: 'leadingZeros',
description: 'Enter how many leadingZeros the value of the component has.',
table: {
category: 'Content/ Settings',
category: 'Content / Settings',
},
control: {
type: 'number',
},
},

unit: {
name: 'unit',
description: 'Enter the unit for the number input.',
options: [Units],
options: [undefined, ...Units],
control: {
type: 'select',
},
table: {
category: 'Content/ Settings',
category: 'Content / Settings',
},
},
// prependUnit: {
// name: 'prependUnit',
// description: 'NumberInput Content / Settings hasUnit Choose if unit is displayed as a prefix, suffix or if no unit should be displayed. "none" Radio: "none", "prefix", "suffix" was named "prependUnit" before and did function differently ',
// control: {
// type: 'boolean',
// },

// table: {
// category: 'Content/ Settings',
// },
// },
step: {
name: 'step',
description: 'Enter how much the value should change when the steppers buttons are used.',
Expand Down Expand Up @@ -142,18 +153,132 @@ export default {
},
table: {
disable: false,
category: 'Content/ Settings',
category: 'Content / Settings',
},
if: { arg: 'hasLabel', eq: true },
},

theme: {
options: Themes,
control: { type: 'select' },
labelAppendix: {
name: 'labelAppendix',
description:
'Enter string used as an appendix to the label. Use this to inform the user in case this field is required.',
control: {
type: 'text',
},
table: {
disable: false,
category: 'Content / Settings',
},
if: { arg: 'hasLabel', eq: true },
},
showHint: {
name: 'hasHint',
description: ' Choose if component has a hint message. ',
defaultValue: true,
control: {
type: 'boolean',
},
table: {
disable: false,
category: 'Content/ Settings',
},
},
hintText: {
name: 'hintMessage',
description: 'Enter string used used as hint message.',
if: { arg: 'showHint', eq: true },
table: {
disable: false,
category: 'Content/ Settings',
},
},
hintIcon: {
name: 'hintMessageIcon',
description: 'Select an icon which is displayed in front of the hint message.',
if: { arg: 'showHint', eq: true },
options: [undefined, ...PureIconKeys],
control: { type: 'select' },
table: {
disable: false,
category: 'Content / Settings',
},
},
disabled: {
name: 'disabled',
description:
'Choose if component is disabled. Prevents the user to select or change the value of this component. ',
defaultValue: false,
table: {
disable: false,
category: 'States',
},
},
readonly: {
name: 'readonly',
description: 'Choose if component is readonly. The user can select but not change the value of this component.',
defaultValue: false,
table: {
disable: false,
category: 'States',
},
},
// Validation
required: {
name: 'required',
description: 'Choose if the component must hold a value after an interaction or a submit.',
defaultValue: false,
table: {
disable: false,
category: 'Validations',
},
},
hasError: {
name: 'hasError',
description: 'Choose if component has an error.',
defaultValue: false,
table: {
disable: false,
category: 'Validations',
},
},
errorMessage: {
name: 'errorMessage',
description: 'Enter string used used as error message.',
table: {
category: 'Validations',
},
if: { arg: 'hasError', eq: true },
},
errorIcon: {
name: 'errorMessageIcon',
description: 'Select an icon which is displayed in front of the error message.',
table: {
disable: false,
category: 'Validations',
},
options: [undefined, ...PureIconKeys],
control: { type: 'select' },
if: { arg: 'hasError', eq: true },
},
theme: {
options: Themes,
control: { type: 'select' },
},
//Technical attributes
numberInputId: {
name: 'numberInputId',
description: 'Unique identifier for this component.',
table: {
disable: false,
category: 'Technical Attributes',
},
},
name: {
name: 'name',
description: 'For a < form > element, the name attribute is used as a reference when the data is submitted. ',
table: {
disable: false,
category: 'Technical Attributes',
},
},
},
parameters: {
Expand Down Expand Up @@ -237,7 +362,7 @@ const args: BlrNumberInputType = {
labelAppendix: '(Appendix)',
numberInputId: ' ',
placeholder: 'Placeholder-text',
prependUnit: false,
prependUnit: true,
readonly: false,
required: false,
showHint: false,
Expand All @@ -247,7 +372,7 @@ const args: BlrNumberInputType = {
totalDigits: 0,
unit: 'kg',
value: 0,
variant: 'mode3',
stepperVariant: 'vertical',
};

BlrNumberInput.args = args;
Expand Down Expand Up @@ -294,18 +419,69 @@ export const SizeVariant = () => {

SizeVariant.storyName = 'Appearance';

export const Example1 = () =>
export const StepperVariant = () =>
html`
<div style="max-width: 290px;">
<div class="wrapper">
${BlrNumberInputRenderFunction({
...defaultParams,
stepperVariant: 'split',
label: 'vertical',
labelAppendix: '',
unit: '%',
})}
</div>
<div class="wrapper">
${BlrNumberInputRenderFunction({
...defaultParams,
stepperVariant: 'horizontal',
label: 'horizontal',
labelAppendix: '',
unit: '%',
})}
</div>
<div class="wrapper">
${BlrNumberInputRenderFunction({
...defaultParams,
label: ' Default format',
stepperVariant: 'vertical',
label: 'split',
labelAppendix: '',
unit: '%',
})}
</div>
`;

Example1.storyName = 'Default';
StepperVariant.storyName = 'stepperVariant';

//Content/ Settings Placeholder
/**
* The placeholder component can display a placeholder text. This is recommended to improve usability.
*/
export const Placeholder = () => {
return html`
${sharedStyles}
<div class="wrapper">
${BlrNumberInputRenderFunction({
...defaultParams,
theme: 'Light',
size: 'md',
label: 'Has placeholder',
labelAppendix: '',
})}
</div>
<div class="wrapper">
${BlrNumberInputRenderFunction({
...defaultParams,
theme: 'Light',
size: 'md',
label: "Hasn't placeholder",
labelAppendix: '',
placeholder: '',
})}
</div>
`;
};

Placeholder.storyName = 'Content/ Settings';
export const Example2 = () =>
html`
<div style="max-width: 290px;">
Expand Down
Loading

0 comments on commit 4236d67

Please sign in to comment.