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

Drawer: updates story from knobs to controls (#31821)

Browse Source 
* Drawer: updates story from knobs to controls

* fixes small nit
This commit is contained in:
Uchechukwu Obasi 2021-03-09 17:15:37 +01:00 committed by GitHub
parent 5e38d4538d
commit aee78f7527
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
View File

@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import { text } from '@storybook/addon-knobs'; import { Story } from '@storybook/react';
import { Button, Drawer } from '@grafana/ui'; import { Button, Drawer } from '@grafana/ui';
import { UseState } from '../../utils/storybook/UseState'; import { UseState } from '../../utils/storybook/UseState';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './Drawer.mdx'; import mdx from './Drawer.mdx';
import { Props } from './Drawer';
export default { export default {
title: 'Overlays/Drawer', title: 'Overlays/Drawer',
@ -13,12 +14,25 @@ export default {
docs: { docs: {
page: mdx, page: mdx,
}, },
knobs: {
disable: true,
},
},
args: {
closeOnMaskClick: true,
scrollableContent: false,
width: '40%',
expandable: false,
subtitle: 'This is a subtitle.',
},
argTypes: {
title: { control: { type: 'text' } },
width: { control: { type: 'text' } },
subtitle: { control: { type: 'text' } },
}, },
}; };
export const global = () => { export const Global: Story<Props> = (args) => {
const drawerTitle = text('title', 'Drawer title');
return ( return (
<UseState initialState={{ isOpen: false }}> <UseState initialState={{ isOpen: false }}>
{(state, updateValue) => { {(state, updateValue) => {
@ -27,8 +41,11 @@ export const global = () => {
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button> <Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && ( {state.isOpen && (
<Drawer <Drawer
title={drawerTitle} title={args.title}
subtitle="This is a subtitle." subtitle={args.subtitle}
closeOnMaskClick={args.closeOnMaskClick}
scrollableContent={args.scrollableContent}
width={args.width}
onClose={() => { onClose={() => {
updateValue({ isOpen: !state.isOpen }); updateValue({ isOpen: !state.isOpen });
}} }}
@ -52,8 +69,11 @@ export const global = () => {
</UseState> </UseState>
); );
}; };
Global.args = {
title: 'Drawer title',
};
export const longContent = () => { export const LongContent: Story<Props> = (args) => {
return ( return (
<UseState initialState={{ isOpen: true }}> <UseState initialState={{ isOpen: true }}>
{(state, updateValue) => { {(state, updateValue) => {
@ -62,9 +82,11 @@ export const longContent = () => {
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button> <Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && ( {state.isOpen && (
<Drawer <Drawer
scrollableContent title={args.title}
expandable subtitle={args.subtitle}
title="Drawer with long content" closeOnMaskClick={args.closeOnMaskClick}
scrollableContent={args.scrollableContent}
width={args.width}
onClose={() => { onClose={() => {
updateValue({ isOpen: !state.isOpen }); updateValue({ isOpen: !state.isOpen });
}} }}
@ -148,10 +170,11 @@ export const longContent = () => {
</UseState> </UseState>
); );
}; };
LongContent.args = {
title: 'Drawer title with long content',
};
export const inLine = () => { export const InLine: Story<Props> = (args) => {
const drawerTitle = text('title', 'Storybook');
return ( return (
<UseState initialState={{ isOpen: false }}> <UseState initialState={{ isOpen: false }}>
{(state, updateValue) => { {(state, updateValue) => {
@ -169,8 +192,12 @@ export const inLine = () => {
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button> <Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && ( {state.isOpen && (
<Drawer <Drawer
inline={true} inline={args.inline}
title={drawerTitle} title={args.title}
subtitle={args.subtitle}
closeOnMaskClick={args.closeOnMaskClick}
scrollableContent={args.scrollableContent}
width={args.width}
onClose={() => { onClose={() => {
updateValue({ isOpen: !state.isOpen }); updateValue({ isOpen: !state.isOpen });
}} }}
@ -193,3 +220,7 @@ export const inLine = () => {
</UseState> </UseState>
); );
}; };
InLine.args = {
title: 'Storybook',
inline: true,
};