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 { VerticalGroup } from '../Layout/Layout';
@ -14,34 +14,26 @@ const meta: ComponentMeta<typeof Checkbox> = {
docs: {
page: mdx,
},
controls: {
exclude: ['value', 'htmlValue'],
},
},
};
export const Controlled = () => {
export const Basic: ComponentStory<typeof Checkbox> = (args) => {
const [checked, setChecked] = useState(false);
const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
return (
<div>
<Checkbox
value={checked}
onChange={onChange}
label="Skip TLS cert validation"
description="Set to true if you want to skip TLS cert validation"
/>
<Checkbox value={checked} onChange={onChange} {...args} />
</div>
);
};
export const uncontrolled = () => {
return (
<div>
<Checkbox
defaultChecked={true}
label="Skip TLS cert validation"
description="Set to true if you want to skip TLS cert validation"
/>
</div>
);
Basic.args = {
label: 'Skip TLS cert validation',
description: 'Set to true if you want to skip TLS cert validation',
disabled: false,
};
export const StackedList = () => {
@ -68,17 +60,21 @@ export const StackedList = () => {
);
};
export const InAField = () => {
export const InAField: ComponentStory<typeof Checkbox> = (args) => {
return (
<div>
<Field
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."
>
<Field {...args}>
<Checkbox name="hide" id="hide" defaultChecked={true} />
</Field>
</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;