IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TextArea: updates story from knobs to control (#34195)

Browse Source 
* TextArea: updates story from knobs to control

* removed the cols control since it has no effect on component

Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>
This commit is contained in:
Uchechukwu Obasi 2021-05-17 14:31:09 +01:00 committed by GitHub
parent 21f0509f8b
commit 85620f65a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/grafana-ui/src/components/TextArea/TextArea.story.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { TextArea } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { boolean, number, text } from '@storybook/addon-knobs';
import { Meta, Story } from '@storybook/react';
import mdx from './TextArea.mdx';
export default {
@ -9,39 +9,32 @@ export default {
component: TextArea,
decorators: [withCenteredStory],
parameters: {
controls: {
exclude: ['cols'],
},
docs: {
page: mdx,
},
},
};
export const simple = () => {
const BEHAVIOUR_GROUP = 'Behaviour props';
// ---
const invalid = boolean('Invalid', false, BEHAVIOUR_GROUP);
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
const VISUAL_GROUP = 'Visual options';
// ---
const placeholder = text('Placeholder', 'This is just a placeholder', VISUAL_GROUP);
const cols = number('Cols', 30, { range: true, min: 5, max: 50, step: 5 }, VISUAL_GROUP);
const CONTAINER_GROUP = 'Container options';
// ---
const containerWidth = number(
'Container width',
300,
{
range: true,
min: 100,
max: 500,
step: 10,
knobs: {
disable: true,
},
CONTAINER_GROUP
);
},
argTypes: {
containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
},
} as Meta;
export const Basic: Story = (args) => {
return (
<div style={{ width: containerWidth }}>
<TextArea invalid={invalid} placeholder={placeholder} cols={cols} disabled={disabled} />
<div style={{ width: args.containerWidth }}>
<TextArea invalid={args.invalid} placeholder={args.placeholder} cols={args.cols} disabled={args.disabled} />
</div>
);
};
Basic.args = {
invalid: false,
disabled: false,
placeholder: 'This is just a placeholder',
cols: 30,
containerWidth: 300,
};