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

Switch: updates story from knobs to control (#34016)

Browse Source 
* Switch: updates story from knobs to control

* small nit fixes

* exported default storybook config as meta
This commit is contained in:
Uchechukwu Obasi 2021-05-13 08:01:56 +01:00 committed by GitHub
parent 567bbdf6e6
commit 8f91b59640
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/grafana-ui/src/components/Switch/Switch.story.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useCallback } from 'react';
import { boolean } from '@storybook/addon-knobs';
import { Meta, Story } from '@storybook/react';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import { InlineField, Switch, InlineSwitch } from '@grafana/ui';
import mdx from './Switch.mdx';
@ -14,41 +14,50 @@ export default {
docs: {
page: mdx,
},
knobs: {
disable: true,
},
},
};
export const Controlled = () => {
const [checked, setChecked] = useState(false);
const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
args: {
disabled: false,
value: false,
transparent: false,
},
} as Meta;
export const Controlled: Story = (args) => {
return (
<div>
<div style={{ marginBottom: '32px' }}>
<Field label="Normal switch" description="For horizontal forms">
<Switch value={checked} disabled={disabled} onChange={onChange} />
<Switch value={args.value} disabled={args.disabled} transparent={args.transparent} />
</Field>
</div>
<div style={{ marginBottom: '32px' }}>
<InlineFieldRow>
<InlineField label="My switch">
<InlineSwitch value={checked} disabled={disabled} onChange={onChange} />
<InlineSwitch value={args.value} disabled={args.disabled} transparent={args.transparent} />
</InlineField>
</InlineFieldRow>
</div>
<div style={{ marginBottom: '32px' }}>
<div>just inline switch with show label</div>
<span>
<InlineSwitch label="Raw data" showLabel={true} value={checked} disabled={disabled} onChange={onChange} />
<InlineSwitch
label="Raw data"
showLabel={true}
value={args.value}
disabled={args.disabled}
transparent={args.transparent}
/>
</span>
</div>
</div>
);
};
export const Uncontrolled = () => {
const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
return <Switch disabled={disabled} />;
export const Uncontrolled: Story = (args) => {
const [checked, setChecked] = useState(args.value);
const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} />;
};