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

ConfirmModal: updates story from knobs to control (#31781)

Browse Source
This commit is contained in:
Uchechukwu Obasi
2021-03-08 16:50:09 +01:00
committed by GitHub
parent 8f9cf851f7
commit 2e25dfc969
1 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
View File

@@ -1,18 +1,29 @@
import React from 'react'; import React from 'react';
import { text, boolean, select } from '@storybook/addon-knobs'; import { Story } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
import { ConfirmModal } from '@grafana/ui'; import { ConfirmModal } from '@grafana/ui';
import mdx from './ConfirmModal.mdx'; import mdx from './ConfirmModal.mdx';
import { Props } from './ConfirmModal';
const getKnobs = () => { export default {
return { title: 'Overlays/ConfirmModal',
title: text('Title', 'Delete user'), component: ConfirmModal,
body: text('Body', 'Are you sure you want to delete this user?'), decorators: [withCenteredStory],
confirm: text('Confirm', 'Delete'), parameters: {
visible: boolean('Visible', true), docs: {
icon: select('Icon', ['exclamation-triangle', 'power', 'cog', 'lock'], 'exclamation-triangle'), page: mdx,
}; },
knobs: {
disable: true,
},
},
argTypes: {
icon: { control: { type: 'select', options: ['exclamation-triangle', 'power', 'cog', 'lock'] } },
isOpen: NOOP_CONTROL,
body: NOOP_CONTROL,
},
}; };
const defaultActions = { const defaultActions = {
@@ -24,29 +35,32 @@ const defaultActions = {
}, },
}; };
export default { interface StoryProps extends Props {
title: 'Overlays/ConfirmModal', visible: boolean;
component: ConfirmModal, bodyText: string;
decorators: [withCenteredStory], }
parameters: {
docs: {
page: mdx,
},
},
};
export const basic = () => { export const Basic: Story<StoryProps> = ({ title, bodyText, confirmText, dismissText, icon, visible }) => {
const { title, body, confirm, icon, visible } = getKnobs();
const { onConfirm, onDismiss } = defaultActions; const { onConfirm, onDismiss } = defaultActions;
return ( return (
<ConfirmModal <ConfirmModal
isOpen={visible} isOpen={visible}
title={title} title={title}
body={body} body={bodyText}
confirmText={confirm} confirmText={confirmText}
dismissText={dismissText}
icon={icon} icon={icon}
onConfirm={onConfirm} onConfirm={onConfirm}
onDismiss={onDismiss} onDismiss={onDismiss}
/> />
); );
}; };
Basic.args = {
title: 'Delete user',
bodyText: 'Are you sure you want to delete this user?',
confirmText: 'Delete',
dismissText: 'Cancel',
icon: 'exclamation-triangle',
visible: true,
};