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

Legacy Switch: updates story from knobs to controls (#32249)

Browse Source 
* Legacy Switch: updates story from knobs to controls

* destructure arguments appropriately
This commit is contained in:
Uchechukwu Obasi 2021-03-23 12:33:27 +01:00 committed by GitHub
parent 814f194d07
commit 49a5b9f0cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx
View File

@ -1,8 +1,9 @@
import React, { useState } from 'react';
import { Switch } from './Switch';
import { text } from '@storybook/addon-knobs';
import { Props, Switch } from './Switch';
import { Story } from '@storybook/react';
import mdx from './Switch.mdx';
import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
const getStory = (title: string, component: any) => ({
title,
@ -11,22 +12,26 @@ const getStory = (title: string, component: any) => ({
docs: {
page: mdx,
},
knobs: {
disable: true,
},
},
argTypes: {
className: NOOP_CONTROL,
labelClass: NOOP_CONTROL,
switchClass: NOOP_CONTROL,
},
});
export default getStory('Forms/Legacy/Switch', Switch);
const getKnobs = () => {
return {
label: text('Label Text', 'Label'),
tooltip: text('Tooltip', ''),
};
};
const SwitchWrapper = () => {
const { label, tooltip } = getKnobs();
const SwitchWrapper: Story<Props> = ({ label, ...args }) => {
const [checked, setChecked] = useState(false);
return <Switch label={label} checked={checked} onChange={() => setChecked(!checked)} tooltip={tooltip} />;
return <Switch {...args} label={label} checked={checked} onChange={() => setChecked(!checked)} />;
};
export const basic = () => <SwitchWrapper />;
export const Basic = SwitchWrapper.bind({});
Basic.args = {
label: 'Label',
tooltip: '',
};