IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 23 deletions
Show Stats 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 { text, boolean, select } from '@storybook/addon-knobs';
import { Story } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
import { ConfirmModal } from '@grafana/ui';
import mdx from './ConfirmModal.mdx';
import { Props } from './ConfirmModal';
const getKnobs = () => {
return {
title: text('Title', 'Delete user'),
body: text('Body', 'Are you sure you want to delete this user?'),
confirm: text('Confirm', 'Delete'),
visible: boolean('Visible', true),
icon: select('Icon', ['exclamation-triangle', 'power', 'cog', 'lock'], 'exclamation-triangle'),
};
export default {
title: 'Overlays/ConfirmModal',
component: ConfirmModal,
decorators: [withCenteredStory],
parameters: {
docs: {
page: mdx,
},
knobs: {
disable: true,
},
},
argTypes: {
icon: { control: { type: 'select', options: ['exclamation-triangle', 'power', 'cog', 'lock'] } },
isOpen: NOOP_CONTROL,
body: NOOP_CONTROL,
},
};
const defaultActions = {
@ -24,29 +35,32 @@ const defaultActions = {
},
};
export default {
title: 'Overlays/ConfirmModal',
component: ConfirmModal,
decorators: [withCenteredStory],
parameters: {
docs: {
page: mdx,
},
},
};
interface StoryProps extends Props {
visible: boolean;
bodyText: string;
}
export const basic = () => {
const { title, body, confirm, icon, visible } = getKnobs();
export const Basic: Story<StoryProps> = ({ title, bodyText, confirmText, dismissText, icon, visible }) => {
const { onConfirm, onDismiss } = defaultActions;
return (
<ConfirmModal
isOpen={visible}
title={title}
body={body}
confirmText={confirm}
body={bodyText}
confirmText={confirmText}
dismissText={dismissText}
icon={icon}
onConfirm={onConfirm}
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,
};