Skip to content

Commit

Permalink
chore: test args
Browse files Browse the repository at this point in the history
  • Loading branch information
2nikhiltom committed Sep 10, 2024
1 parent 81f530e commit 3931dbe
Showing 1 changed file with 84 additions and 92 deletions.
176 changes: 84 additions & 92 deletions packages/react/src/components/NumberInput/NumberInput.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,50 +83,98 @@ export const withAILabel = () => (
</div>
);

export const Playground = (args) => (
<div>
<NumberInput {...args} id="number-input" />
</div>
);
export const Playground = ({ ...args }) => {
const [value, setValue] = React.useState(50);

const handleChange = (event, { value }) => {
setValue(value);
};

return (
<NumberInput
id="playground-number-input"
min={-100}
max={100}
value={value}
label="NumberInput label"
helperText="Optional helper text."
onChange={handleChange}
{...args}
/>
);
};

Playground.args = {
min: -100,
max: 100,
value: 50,
step: 1,
disabled: false,
invalid: false,
invalidText: 'Error message goes here',
disabled: false,
label: 'NumberInput label',
helperText: 'Optional helper text.',
warn: false,
warnText:
'Warning message that is really long can wrap to more lines but should not be excessively long.',
warnText: 'Warning message goes here',
size: 'md',
};

Playground.argTypes = {
className: {
control: { type: 'text' },
min: { control: { type: 'number' } },
max: { control: { type: 'number' } },
step: { control: { type: 'number' } },
disabled: { control: { type: 'boolean' } },
invalid: { control: { type: 'boolean' } },
invalidText: { control: { type: 'text' } },
warn: { control: { type: 'boolean' } },
warnText: { control: { type: 'text' } },
size: {
options: ['sm', 'md', 'lg'],
control: { type: 'select' },
},
defaultValue: {
label: { control: { type: 'text' } },
helperText: { control: { type: 'text' } },
id: {
table: {
disable: true,
},
},
min: {
control: { type: 'number' },
},
max: {
control: { type: 'number' },
light: {
table: {
disable: true,
},
},
value: {
control: { type: 'number' },
};

export const Playground2 = ({ ...args }) => {
// const { numberInputArrowTranslationIds, ...rest } = props();
return (
<NumberInput
id="carbon-number"
min={-100}
max={100}
value={50}
label="NumberInput label"
helperText="Optional helper text."
invalidText="Number is not valid"
{...args}
/>
);
};

Playground2.args = {
warnText:
'Warning message that is really long can wrap to more lines but should not be excessively long.',
};

Playground2.argTypes = {
className: {
table: {
disable: true,
},
},
step: {
control: { type: 'number' },
defaultValue: {
table: {
disable: true,
},
},
invalid: {
control: { type: 'boolean' },
helperText: {
control: { type: 'text' },
},
id: {
table: {
Expand All @@ -136,9 +184,6 @@ Playground.argTypes = {
invalidText: {
control: { type: 'text' },
},
disabled: {
control: { type: 'boolean' },
},
label: {
control: { type: 'text' },
},
Expand All @@ -147,79 +192,26 @@ Playground.argTypes = {
disable: true,
},
},
helperText: {
control: { type: 'text' },
},
warn: {
control: { type: 'boolean' },
},
warnText: {
control: { type: 'text' },
},
size: {
options: ['sm', 'md', 'lg', 'xl'],
control: { type: 'select' },
},
onChange: {
action: 'onChange',
},
onClick: {
action: 'onClick',
},
onKeyUp: {
action: 'onKeyUp',
},
translateWithId: {
table: {
disable: true,
},
},
onKeyUp: {
action: 'onKeyUp',
value: {
control: { type: 'text' },
},
};

export const Playground2 = ({ ...args }) => {
const [value, setValue] = React.useState(50);

const handleChange = (event, { value }) => {
setValue(value);
};

return (
<NumberInput
id="playground-number-input"
min={-100}
max={100}
value={value}
label="NumberInput label"
helperText="Optional helper text."
onChange={handleChange}
{...args}
/>
);
};

Playground2.args = {
step: 1,
disabled: false,
invalid: false,
invalidText: 'Error message goes here',
warn: false,
warnText: 'Warning message goes here',
size: 'md',
};

Playground2.argTypes = {
min: { control: { type: 'number' } },
max: { control: { type: 'number' } },
step: { control: { type: 'number' } },
disabled: { control: { type: 'boolean' } },
invalid: { control: { type: 'boolean' } },
invalidText: { control: { type: 'text' } },
warn: { control: { type: 'boolean' } },
warnText: { control: { type: 'text' } },
size: {
options: ['sm', 'md', 'lg'],
control: { type: 'select' },
warnText: {
control: {
type: 'text',
},
},
label: { control: { type: 'text' } },
helperText: { control: { type: 'text' } },
};

0 comments on commit 3931dbe

Please sign in to comment.