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

Chore: Added controls to Checkbox stories (#54372)

Browse Source
This commit is contained in:
Gustavo Santos 2022-08-31 07:19:37 -03:00 committed by GitHub
parent 9e74050472
commit 3ba3d47b85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
View File

@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react'; import { ComponentMeta, ComponentStory } from '@storybook/react';
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { VerticalGroup } from '../Layout/Layout'; import { VerticalGroup } from '../Layout/Layout';
@ -14,34 +14,26 @@ const meta: ComponentMeta<typeof Checkbox> = {
docs: { docs: {
page: mdx, page: mdx,
}, },
controls: {
exclude: ['value', 'htmlValue'],
},
}, },
}; };
export const Controlled = () => { export const Basic: ComponentStory<typeof Checkbox> = (args) => {
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]); const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
return ( return (
<div> <div>
<Checkbox <Checkbox value={checked} onChange={onChange} {...args} />
value={checked}
onChange={onChange}
label="Skip TLS cert validation"
description="Set to true if you want to skip TLS cert validation"
/>
</div> </div>
); );
}; };
export const uncontrolled = () => { Basic.args = {
return ( label: 'Skip TLS cert validation',
<div> description: 'Set to true if you want to skip TLS cert validation',
<Checkbox disabled: false,
defaultChecked={true}
label="Skip TLS cert validation"
description="Set to true if you want to skip TLS cert validation"
/>
</div>
);
}; };
export const StackedList = () => { export const StackedList = () => {
@ -68,17 +60,21 @@ export const StackedList = () => {
); );
}; };
export const InAField = () => { export const InAField: ComponentStory<typeof Checkbox> = (args) => {
return ( return (
<div> <div>
<Field <Field {...args}>
label="Hidden"
description="Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden."
>
<Checkbox name="hide" id="hide" defaultChecked={true} /> <Checkbox name="hide" id="hide" defaultChecked={true} />
</Field> </Field>
</div> </div>
); );
}; };
InAField.args = {
label: 'Hidden',
description:
'Annotation queries can be toggled on or of at the top of the dashboard. With this option checked this toggle will be hidden.',
disabled: false,
};
export default meta; export default meta;