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

Layout: updates story from knobs to control (#32761)

Browse Source 
* Layout: updates story from knobs to control

* exported default as meta

* removes unnecessary prop and disables knobs
This commit is contained in:
Uchechukwu Obasi 2021-04-08 14:42:31 +01:00 committed by GitHub
parent 7032ecce2a
commit 62ddf5b7b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/grafana-ui/src/components/Layout/Layout.story.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import { Layout } from './Layout';
import { Layout, LayoutProps } from './Layout';
import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
import { select } from '@storybook/addon-knobs';
import { Story, Meta } from '@storybook/react';
import mdx from './Layout.mdx';
export default {
@ -15,29 +15,54 @@ export default {
docs: {
page: mdx,
},
knobs: {
disabled: true,
},
controls: {
exclude: ['orientation'],
},
},
};
args: {
justify: 'flex-start',
spacing: 'sm',
align: 'center',
wrap: false,
width: '100%',
},
argTypes: {
justify: {
control: {
type: 'select',
options: ['flex-start', 'flex-end', 'space-between', 'center'],
},
},
align: {
control: {
type: 'select',
options: ['flex-start', 'flex-end', 'center', 'normal'],
},
},
spacing: {
control: {
type: 'select',
options: ['xs', 'sm', 'md', 'lg'],
},
},
},
} as Meta;
const justifyVariants = ['flex-start', 'flex-end', 'space-between'];
const spacingVariants = ['xs', 'sm', 'md', 'lg'];
export const horizontal = () => {
const justify = select('Justify elements', justifyVariants, 'flex-start');
const spacing = select('Elements spacing', spacingVariants, 'sm');
export const Horizontal: Story<LayoutProps> = (args) => {
return (
<HorizontalGroup justify={justify as any} spacing={spacing as any}>
<HorizontalGroup {...args}>
<Button>Save</Button>
<Button>Cancel</Button>
</HorizontalGroup>
);
};
export const vertical = () => {
const justify = select('Justify elements', justifyVariants, 'flex-start');
const spacing = select('Elements spacing', spacingVariants, 'sm');
export const Vertical: Story<LayoutProps> = (args) => {
return (
<VerticalGroup justify={justify as any} spacing={spacing as any}>
<VerticalGroup {...args}>
<Button>Save</Button>
<Button>Cancel</Button>
</VerticalGroup>