1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 11:28:51 +01:00
metamask-extension/ui/components/component-library/button-primary/button-primary.stories.tsx
Garrett Bear 3915482edb
ButtonPrimary to TS (#20390)
* ButtonPrimary to TS

* button primary to ts updates

* fixes
2023-08-04 10:45:55 -07:00

62 lines
1.6 KiB
TypeScript

import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { AlignItems, Display } from '../../../helpers/constants/design-system';
import { Box } from '..';
import README from './README.mdx';
import { ButtonPrimary, ButtonPrimarySize } from '.';
export default {
title: 'Components/ComponentLibrary/ButtonPrimary',
component: ButtonPrimary,
parameters: {
docs: {
page: README,
},
},
argTypes: {
as: {
control: 'select',
options: ['button', 'a'],
},
size: {
control: 'select',
options: Object.values(ButtonPrimarySize),
},
},
args: {
children: 'Button Primary',
},
} as Meta<typeof ButtonPrimary>;
export const DefaultStory: StoryFn<typeof ButtonPrimary> = (args) => (
<ButtonPrimary {...args} />
);
DefaultStory.storyName = 'Default';
export const SizeStory: StoryFn<typeof ButtonPrimary> = (args) => (
<Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<ButtonPrimary {...args} size={ButtonPrimarySize.Sm}>
Small Button
</ButtonPrimary>
<ButtonPrimary {...args} size={ButtonPrimarySize.Md}>
Medium (Default) Button
</ButtonPrimary>
<ButtonPrimary {...args} size={ButtonPrimarySize.Lg}>
Large Button
</ButtonPrimary>
</Box>
);
SizeStory.storyName = 'Size';
export const Danger: StoryFn<typeof ButtonPrimary> = (args) => (
<Box display={Display.Flex} gap={1}>
<ButtonPrimary {...args}>Normal</ButtonPrimary>
{/* Test Anchor tag to match exactly as button */}
<ButtonPrimary as="a" {...args} href="#" danger>
Danger
</ButtonPrimary>
</Box>
);