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

Storybook: Remove unneccesary stories and reorganize a bit (#22959)

Browse Source
This commit is contained in:
Tobias Skarhed 2020-03-23 13:02:09 +01:00 committed by GitHub
parent 8aca83a646
commit c82a778c3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 3 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx
View File

@ -4,7 +4,7 @@ import { CustomHeadersSettings } from './CustomHeadersSettings';
import { DataSourceSettings } from '@grafana/data';
export default {
title: 'UI/DataSource/CustomHeadersSettings',
title: 'Panel/DataSource/CustomHeadersSettings',
component: CustomHeadersSettings,
decorators: [withCenteredStory, withHorizontallyCenteredStory],
};

2
packages/grafana-ui/src/components/Forms/Form.story.tsx
View File

@ -19,7 +19,7 @@ import { boolean } from '@storybook/addon-knobs';
import { TextArea } from './TextArea/TextArea';
export default {
title: 'Forms/Test forms',
title: 'Forms/Example forms',
decorators: [withStoryContainer, withCenteredStory],
parameters: {
docs: {

23
packages/grafana-ui/src/components/Forms/Label.story.tsx
View File

@ -1,23 +0,0 @@
import React from 'react';
import { text } from '@storybook/addon-knobs';
import { Label } from './Label';
const getKnobs = () => {
return {
label: text('text', 'Form element label'),
description: text('description', 'Description of the form field'),
};
};
export default {
title: 'Forms',
component: Label,
};
export const simple = () => {
const { label, description } = getKnobs();
return <Label description={description}>{label}</Label>;
};

32
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.story.tsx
View File

@ -1,32 +0,0 @@
import React, { useState } from 'react';
import { RadioButton, RadioButtonSize } from './RadioButton';
import { boolean, select } from '@storybook/addon-knobs';
export default {
title: 'Forms/RadioButton',
component: RadioButton,
};
const sizes: RadioButtonSize[] = ['sm', 'md'];
export const simple = () => {
const [active, setActive] = useState();
const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
const VISUAL_GROUP = 'Visual options';
const size = select<RadioButtonSize>('Size', sizes, 'md', VISUAL_GROUP);
return (
<RadioButton
disabled={disabled}
size={size}
active={active}
id="standalone"
onChange={() => {
setActive(!active);
}}
>
Radio button
</RadioButton>
);
};

2
packages/grafana-ui/src/components/Tabs/Tabs.story.tsx
View File

@ -6,7 +6,7 @@ import { Tab } from './Tab';
import { TabContent } from './TabContent';
export default {
title: 'General/Tabs/TabsExample',
title: 'General/Tabs',
decorators: [withCenteredStory],
};

56
packages/grafana-ui/src/components/Tabs/TabsBar.story.tsx
View File

@ -1,56 +0,0 @@
import React from 'react';
import { select } from '@storybook/addon-knobs';
import { TabsBar } from './TabsBar';
import { Tab } from './Tab';
import { UseState } from '../../utils/storybook/UseState';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './TabsBar.mdx';
export default {
title: 'General/Tabs/TabsBar',
component: TabsBar,
decorators: [withCenteredStory],
parameters: {
docs: {
page: mdx,
},
},
};
const tabs = [
{ label: '1st child', key: 'first', active: true },
{ label: '2nd child', key: 'second', active: false },
{ label: '3rd child', key: 'third', active: false },
];
export const Simple = () => {
const VISUAL_GROUP = 'Visual options';
// ---
const icon = select(
'Icon',
{ None: undefined, Heart: 'fa fa-heart', Star: 'fa fa-star', User: 'fa fa-user' },
undefined,
VISUAL_GROUP
);
return (
<UseState initialState={tabs}>
{(state, updateState) => {
return (
<TabsBar>
{state.map((tab, index) => {
return (
<Tab
key={index}
label={tab.label}
active={tab.active}
icon={icon}
onChangeTab={() => updateState(state.map((tab, idx) => ({ ...tab, active: idx === index })))}
/>
);
})}
</TabsBar>
);
}}
</UseState>
);
};