Commit 100e7eb9 by Uchechukwu Obasi Committed by GitHub

Alert: update story to use controls (#31145)

* Alert: updated story to use Controls

* updated some changes
parent 7f1f5599
import React from 'react';
import { Story } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
import { Props } from './Alert';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from '../Alert/Alert.mdx';
import { StoryExample } from '../../utils/storybook/StoryExample';
const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
export default {
title: 'Overlays/Alert',
component: Alert,
......@@ -13,26 +17,30 @@ export default {
docs: {
page: mdx,
},
knobs: {
disabled: true,
},
},
argTypes: {
severity: { control: { type: 'select', options: severities } },
},
};
const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
export const Examples = () => {
export const Examples: Story<Props> = ({ severity, title, buttonContent }) => {
return (
<VerticalGroup>
<StoryExample name="With buttonContent and children">
<Alert
title="Some very important message"
severity="error"
buttonContent={<span>Close</span>}
title={title}
severity={severity}
buttonContent={<span>{buttonContent}</span>}
onRemove={action('Remove button clicked')}
>
Child content that includes some alert details, like maybe what actually happened.
</Alert>
</StoryExample>
<StoryExample name="No dismiss">
<Alert title="Some very important message" severity="info" />
<Alert title={title} severity={severity} />
</StoryExample>
<StoryExample name="Severities">
<VerticalGroup>
......@@ -49,3 +57,9 @@ export const Examples = () => {
</VerticalGroup>
);
};
Examples.args = {
severity: 'error',
title: 'Some very important message',
buttonContent: 'Close',
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment