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: add controls support + remove UseState from Collapse story (#52869)

Browse Source 
* add controls support + remove UseState from Collapse story

* exclude className as well

* exclude className prop as well
This commit is contained in:
Ashley Harrison 2022-07-27 15:36:54 +01:00 committed by GitHub
parent c2d3c90bc8
commit a98920f910
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/grafana-ui/src/components/Collapse/Collapse.story.tsx
View File

@ -1,12 +1,15 @@
import { ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';
import { UseState } from '../../utils/storybook/UseState';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import { Collapse, ControlledCollapse } from './Collapse';
import mdx from './Collapse.mdx';
const EXCLUDED_PROPS = ['className', 'onToggle'];
const meta: ComponentMeta<typeof Collapse> = {
title: 'Layout/Collapse',
component: Collapse,
@ -15,34 +18,47 @@ const meta: ComponentMeta<typeof Collapse> = {
docs: {
page: mdx,
},
controls: {
exclude: EXCLUDED_PROPS,
},
},
args: {
children: 'Panel data',
isOpen: false,
label: 'Collapse panel',
collapsible: true,
},
argTypes: {
onToggle: { action: 'toggled' },
},
};
export const basic = () => {
export const Basic: ComponentStory<typeof Collapse> = (args) => {
const [, updateArgs] = useArgs();
return (
<UseState initialState={{ isOpen: false }}>
{(state, updateValue) => {
return (
<Collapse
collapsible
label="Collapse panel"
isOpen={state.isOpen}
onToggle={() => updateValue({ isOpen: !state.isOpen })}
>
<p>Panel data</p>
</Collapse>
);
<Collapse
{...args}
onToggle={() => {
action('onToggle')({ isOpen: !args.isOpen });
updateArgs({ isOpen: !args.isOpen });
}}
</UseState>
>
<p>{args.children}</p>
</Collapse>
);
};
export const controlled = () => {
export const Controlled: ComponentStory<typeof ControlledCollapse> = (args) => {
return (
<ControlledCollapse label="Collapse panel">
<p>Panel data</p>
<ControlledCollapse {...args}>
<p>{args.children}</p>
</ControlledCollapse>
);
};
Controlled.parameters = {
controls: {
exclude: [...EXCLUDED_PROPS, 'isOpen'],
},
};
export default meta;