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

FileUpload: refactor story from knobs to control (#35760)

Browse Source
This commit is contained in:
Uchechukwu Obasi 2021-06-15 15:37:36 +01:00 committed by GitHub
parent b40e78a943
commit 597c099050
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx
View File

@ -2,8 +2,7 @@ import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { FileUpload } from '@grafana/ui';
import mdx from './FileUpload.mdx';
import { useSize } from '../../utils/storybook/useSize';
import { ComponentSize } from '../../types/size';
import { Meta, Story } from '@storybook/react';
export default {
title: 'Forms/FileUpload',
@ -13,15 +12,28 @@ export default {
docs: {
page: mdx,
},
controls: {
exclude: ['className', 'onFileUpload'],
},
},
};
argTypes: {
size: {
control: {
type: 'select',
},
options: ['xs', 'sm', 'md', 'lg'],
},
},
} as Meta;
export const Single = () => {
const size = useSize();
export const Basic: Story = (args) => {
return (
<FileUpload
size={size as ComponentSize}
size={args.size}
onFileUpload={({ currentTarget }) => console.log('file', currentTarget?.files && currentTarget.files[0])}
/>
);
};
Basic.args = {
size: 'md',
};

7
packages/grafana-ui/src/utils/storybook/useSize.ts
View File

@ -1,7 +0,0 @@
import { select } from '@storybook/addon-knobs';
import { ComponentSize } from '../../types/size';
export function useSize(size: ComponentSize = 'md') {
const sizes = ['xs', 'sm', 'md', 'lg'];
return select('Size', sizes, size);
}