mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Feat/16290/add button component (#16305)
* add button component * add all button props * update tests * add button type prop * fix base button size const * add href prop to button base * Update ui/components/component-library/button/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * update tests * Update ui/components/component-library/button-primary/button-primary.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button/button.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button/button.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button/button.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * update button props on readme * linting issue fix Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear
GitHub
parent
6cca9892b2
commit
a28d727caf
@ -43,12 +43,12 @@ import { ButtonLink } from '../ui/component-library/button/button-link/button-li
|
||||
<ButtonLink size={SIZES.LG} />
|
||||
```
|
||||
|
||||
### Type
|
||||
### Danger
|
||||
|
||||
Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonLink`.
|
||||
Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-link-button-link-stories-js--type" />
|
||||
<Story id="ui-components-component-library-button-link-button-link-stories-js--danger" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
|
||||
@ -139,7 +139,7 @@ export const Size = (args) => (
|
||||
</>
|
||||
);
|
||||
|
||||
export const Type = (args) => (
|
||||
export const Danger = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<ButtonLink {...args}>Normal</ButtonLink>
|
||||
{/* Test Anchor tag to match exactly as button */}
|
||||
|
||||
@ -53,7 +53,7 @@ describe('ButtonLink', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should render with different types', () => {
|
||||
it('should render as danger', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonLink danger data-testid="danger" />
|
||||
|
||||
@ -41,12 +41,12 @@ import { ButtonPrimary } from '../ui/component-library/button/button-primary/but
|
||||
<ButtonPrimary size={SIZES.LG} />
|
||||
```
|
||||
|
||||
### Type
|
||||
### Danger
|
||||
|
||||
Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonPrimary`.
|
||||
Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-primary-button-primary-stories-js--type" />
|
||||
<Story id="ui-components-component-library-button-primary-button-primary-stories-js--danger" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
|
||||
@ -28,7 +28,7 @@ ButtonPrimary.propTypes = {
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Boolean to change button type to Danger when true
|
||||
* When true, `ButtonPrimary` color becomes Danger.
|
||||
*/
|
||||
danger: PropTypes.bool,
|
||||
/**
|
||||
|
||||
@ -122,7 +122,7 @@ export const Size = (args) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Type = (args) => (
|
||||
export const Danger = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<ButtonPrimary {...args}>Normal</ButtonPrimary>
|
||||
{/* Test Anchor tag to match exactly as button */}
|
||||
|
||||
@ -66,7 +66,7 @@ describe('ButtonPrimary', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should render with different types', () => {
|
||||
it('should render as danger', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonPrimary danger data-testid="danger" />
|
||||
|
||||
@ -41,12 +41,12 @@ import { ButtonSecondary } from '../ui/component-library/button/button-secondary
|
||||
<ButtonSecondary size={SIZES.LG} />
|
||||
```
|
||||
|
||||
### Type
|
||||
### Danger
|
||||
|
||||
Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonSecondary`.
|
||||
Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--type" />
|
||||
<Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--danger" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
|
||||
@ -28,7 +28,7 @@ ButtonSecondary.propTypes = {
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Boolean to change button type to Danger when true
|
||||
* When true, ButtonSecondary color becomes Danger.
|
||||
*/
|
||||
danger: PropTypes.bool,
|
||||
/**
|
||||
|
||||
@ -122,7 +122,7 @@ export const Size = (args) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Type = (args) => (
|
||||
export const Danger = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<ButtonSecondary {...args}>Normal</ButtonSecondary>
|
||||
{/* Test Anchor tag to match exactly as button */}
|
||||
|
||||
@ -68,7 +68,7 @@ describe('ButtonSecondary', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('should render with different types', () => {
|
||||
it('should render as danger', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonSecondary danger data-testid="danger" />
|
||||
|
||||
178
ui/components/component-library/button/README.mdx
Normal file
178
ui/components/component-library/button/README.mdx
Normal file
@ -0,0 +1,178 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Button } from './button';
|
||||
|
||||
# Button
|
||||
|
||||
The `Button` is used for user actions it unifies `ButtonPrimary`, `ButtonSecondary` and `ButtonLink`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
The `Button` accepts all props below as well as all [ButtonPrimary](/ui-components-component-library-button-primary-button-primary-stories-js--default-story), [ButtonSecondary](/ui-components-component-library-button-secondary-button-secondary-stories-js--default-story), [ButtonLink](/ui-components-component-library-button-link-button-link-stories-js--default-story), and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
|
||||
|
||||
<ArgsTable of={Button} />
|
||||
|
||||
### Type
|
||||
|
||||
Use the `type` prop and the `BUTTON_TYPES` object from `./button.constants.js` to change the `Button` type.
|
||||
|
||||
Possible types include:
|
||||
|
||||
- `BUTTON_TYPES.PRIMARY`
|
||||
- `BUTTON_TYPES.SECONDARY`
|
||||
- `BUTTON_TYPES.LINK`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--type" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button, BUTTON_TYPES } from '../ui/component-library/button';
|
||||
|
||||
<Button type={BUTTON_TYPES.PRIMARY}>Button Primary</Button>
|
||||
<Button type={BUTTON_TYPES.SECONDARY}>Button Secondary</Button>
|
||||
<Button type={BUTTON_TYPES.LINK}>Button Link</Button>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `SIZES.MD`
|
||||
|
||||
Optional: `BUTTON_SIZES` from `./button` object can be used instead of `SIZES`.
|
||||
|
||||
Possible sizes include:
|
||||
|
||||
- `SIZES.AUTO` inherits the font-size of the parent element.
|
||||
- `SIZES.SM` 32px
|
||||
- `SIZES.MD` 40px
|
||||
- `SIZES.LG` 48px
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--size" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { SIZES } from '../../../helpers/constants/design-system';
|
||||
import { Button } from '../ui/component-library/button/button/button';
|
||||
|
||||
<Button size={SIZES.AUTO} />
|
||||
<Button size={SIZES.SM} />
|
||||
<Button size={SIZES.MD} />
|
||||
<Button size={SIZES.LG} />
|
||||
```
|
||||
|
||||
### Danger
|
||||
|
||||
Use the `danger` boolean prop to change the `Button` to danger color.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--danger" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library/button/button/button';
|
||||
|
||||
<Button>Normal</Button>
|
||||
<Button danger>Danger</Button>
|
||||
```
|
||||
|
||||
### Href
|
||||
|
||||
When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--href" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library/button/button/button';
|
||||
|
||||
<Button href="/">Href Example</Button>;
|
||||
```
|
||||
|
||||
### Block
|
||||
|
||||
Use boolean `block` prop to quickly enable a full width block button
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--block" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { DISPLAY } from '../../../helpers/constants/design-system';
|
||||
import { Button } from '../ui/component-library';
|
||||
|
||||
<Button>Default Button</Button>
|
||||
<Button block>Block Button</Button>
|
||||
```
|
||||
|
||||
### As
|
||||
|
||||
Use the `as` box prop to change the element of `Button`. Defaults to `button`.
|
||||
|
||||
When an `href` prop is passed it will change the element to an anchor(`a`) tag.
|
||||
|
||||
Button `as` options:
|
||||
|
||||
- `button`
|
||||
- `a`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--as" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library';
|
||||
|
||||
|
||||
<Button as="button">Button Element</Button>
|
||||
<Button as="a" href="#">
|
||||
Anchor Element
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the boolean `disabled` prop to disable button
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--disabled" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library';
|
||||
|
||||
<Button disabled>Disabled Button</Button>;
|
||||
```
|
||||
|
||||
### Loading
|
||||
|
||||
Use the boolean `loading` prop to set loading spinner
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--loading" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library';
|
||||
|
||||
<Button loading>Loading Button</Button>;
|
||||
```
|
||||
|
||||
### Icon
|
||||
|
||||
Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-button-button-stories-js--icon" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Button } from '../ui/component-library';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
|
||||
<Button icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</Button>;
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Button should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button mm-button--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
|
||||
data-testid="button"
|
||||
>
|
||||
<span
|
||||
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Button should render with different button types 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="box mm-button mm-button--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
|
||||
data-testid="primary"
|
||||
>
|
||||
<span
|
||||
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="box mm-button mm-button--size-md mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
|
||||
data-testid="secondary"
|
||||
>
|
||||
<span
|
||||
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="box mm-button mm-button--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
|
||||
data-testid="link"
|
||||
>
|
||||
<span
|
||||
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
14
ui/components/component-library/button/button.constants.js
Normal file
14
ui/components/component-library/button/button.constants.js
Normal file
@ -0,0 +1,14 @@
|
||||
import { SIZES } from '../../../helpers/constants/design-system';
|
||||
|
||||
export const BUTTON_SIZES = {
|
||||
SM: SIZES.SM,
|
||||
MD: SIZES.MD,
|
||||
LG: SIZES.LG,
|
||||
AUTO: SIZES.AUTO,
|
||||
};
|
||||
|
||||
export const BUTTON_TYPES = {
|
||||
PRIMARY: 'primary',
|
||||
SECONDARY: 'secondary',
|
||||
LINK: 'link',
|
||||
};
|
||||
34
ui/components/component-library/button/button.js
Normal file
34
ui/components/component-library/button/button.js
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { ButtonPrimary } from '../button-primary';
|
||||
import { ButtonSecondary } from '../button-secondary';
|
||||
import { ButtonLink } from '../button-link';
|
||||
|
||||
import { BUTTON_TYPES } from './button.constants';
|
||||
|
||||
export const Button = ({ type, ...props }) => {
|
||||
switch (type) {
|
||||
case BUTTON_TYPES.PRIMARY:
|
||||
return <ButtonPrimary {...props} />;
|
||||
case BUTTON_TYPES.SECONDARY:
|
||||
return <ButtonSecondary {...props} />;
|
||||
case BUTTON_TYPES.LINK:
|
||||
return <ButtonLink {...props} />;
|
||||
default:
|
||||
return <ButtonPrimary {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
/**
|
||||
* Select the type of Button.
|
||||
* Possible values could be 'BUTTON_TYPES.PRIMARY', 'BUTTON_TYPES.SECONDARY', 'BUTTON_TYPES.LINK'
|
||||
* Button will default to `BUTTON_TYPES.PRIMARY`
|
||||
*/
|
||||
type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
|
||||
/**
|
||||
* Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
|
||||
*/
|
||||
...ButtonPrimary.propTypes,
|
||||
};
|
||||
212
ui/components/component-library/button/button.stories.js
Normal file
212
ui/components/component-library/button/button.stories.js
Normal file
@ -0,0 +1,212 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
ALIGN_ITEMS,
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
SIZES,
|
||||
TEXT,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { ICON_NAMES } from '../icon';
|
||||
import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
|
||||
import Box from '../../ui/box/box';
|
||||
import { Text } from '../text';
|
||||
import README from './README.mdx';
|
||||
import { Button, BUTTON_TYPES } from '.';
|
||||
|
||||
const marginSizeControlOptions = [
|
||||
undefined,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
'auto',
|
||||
];
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/Button',
|
||||
id: __filename,
|
||||
component: Button,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
controls: { sort: 'alpha' },
|
||||
},
|
||||
argTypes: {
|
||||
as: {
|
||||
control: 'select',
|
||||
options: ['button', 'a'],
|
||||
},
|
||||
block: {
|
||||
control: 'boolean',
|
||||
},
|
||||
children: {
|
||||
control: 'text',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
danger: {
|
||||
control: 'boolean',
|
||||
},
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
},
|
||||
href: {
|
||||
control: 'text',
|
||||
},
|
||||
icon: {
|
||||
control: 'select',
|
||||
options: Object.values(ICON_NAMES),
|
||||
},
|
||||
iconPositionRight: {
|
||||
control: 'boolean',
|
||||
},
|
||||
iconProps: {
|
||||
control: 'object',
|
||||
},
|
||||
loading: {
|
||||
control: 'boolean',
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: Object.values(BUTTON_LINK_SIZES),
|
||||
},
|
||||
type: {
|
||||
options: Object.values(BUTTON_TYPES),
|
||||
control: 'select',
|
||||
},
|
||||
marginTop: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginRight: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginBottom: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginLeft: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
},
|
||||
args: {
|
||||
children: 'Button',
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <Button {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Type = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<Button type={BUTTON_TYPES.PRIMARY} {...args}>
|
||||
Button Primary
|
||||
</Button>
|
||||
<Button type={BUTTON_TYPES.SECONDARY} {...args}>
|
||||
Button Secondary
|
||||
</Button>
|
||||
<Button type={BUTTON_TYPES.LINK} {...args}>
|
||||
Button Link
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Size = (args) => (
|
||||
<>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={ALIGN_ITEMS.BASELINE}
|
||||
gap={1}
|
||||
marginBottom={3}
|
||||
>
|
||||
<Button {...args} size={SIZES.SM}>
|
||||
Small Button
|
||||
</Button>
|
||||
<Button {...args} size={SIZES.MD}>
|
||||
Medium (Default) Button
|
||||
</Button>
|
||||
<Button {...args} size={SIZES.LG}>
|
||||
Large Button
|
||||
</Button>
|
||||
</Box>
|
||||
<Text variant={TEXT.BODY_SM}>
|
||||
<Button {...args} type={BUTTON_TYPES.LINK} size={SIZES.AUTO}>
|
||||
Button Auto
|
||||
</Button>{' '}
|
||||
inherits the font-size of the parent element. Auto size only used for
|
||||
ButtonLink.
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
|
||||
export const Danger = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<Button {...args}>Normal</Button>
|
||||
{/* Test Anchor tag to match exactly as button */}
|
||||
<Button as="a" {...args} href="#" danger>
|
||||
Danger
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Href = (args) => <Button {...args}>Href Example</Button>;
|
||||
|
||||
Href.args = {
|
||||
href: '/metamask',
|
||||
};
|
||||
|
||||
export const Block = (args) => (
|
||||
<>
|
||||
<Button {...args} marginBottom={2}>
|
||||
Default Button
|
||||
</Button>
|
||||
<Button {...args} block marginBottom={2}>
|
||||
Block Button
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
export const As = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
|
||||
<Button {...args}>Button Element</Button>
|
||||
<Button as="a" href="#" {...args}>
|
||||
Anchor Element
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Disabled = (args) => <Button {...args}>Disabled Button</Button>;
|
||||
|
||||
Disabled.args = {
|
||||
disabled: true,
|
||||
};
|
||||
|
||||
export const Loading = (args) => <Button {...args}>Loading Button</Button>;
|
||||
|
||||
Loading.args = {
|
||||
loading: true,
|
||||
};
|
||||
|
||||
export const Icon = (args) => (
|
||||
<Button {...args} icon={ICON_NAMES.ADD_SQUARE_FILLED}>
|
||||
Button
|
||||
</Button>
|
||||
);
|
||||
157
ui/components/component-library/button/button.test.js
Normal file
157
ui/components/component-library/button/button.test.js
Normal file
@ -0,0 +1,157 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
|
||||
import { Button } from './button';
|
||||
|
||||
describe('Button', () => {
|
||||
it('should render button element correctly', () => {
|
||||
const { getByTestId, getByText, container } = render(
|
||||
<Button data-testid="button">Button</Button>,
|
||||
);
|
||||
expect(getByText('Button')).toBeDefined();
|
||||
expect(container.querySelector('button')).toBeDefined();
|
||||
expect(getByTestId('button')).toHaveClass('mm-button');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render anchor element correctly', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<Button as="a" data-testid="button">
|
||||
Button
|
||||
</Button>,
|
||||
);
|
||||
expect(getByTestId('button')).toHaveClass('mm-button');
|
||||
const anchor = container.getElementsByTagName('a').length;
|
||||
expect(anchor).toBe(1);
|
||||
});
|
||||
|
||||
it('should render anchor element correctly by href only being passed', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<Button href="/metamask" data-testid="button">
|
||||
Visit Site
|
||||
</Button>,
|
||||
);
|
||||
expect(getByTestId('button')).toHaveClass('mm-button');
|
||||
const anchor = container.getElementsByTagName('a').length;
|
||||
expect(anchor).toBe(1);
|
||||
});
|
||||
|
||||
it('should render button as block', () => {
|
||||
const { getByTestId } = render(<Button block data-testid="block" />);
|
||||
expect(getByTestId('block')).toHaveClass(`mm-button--block`);
|
||||
});
|
||||
|
||||
it('should render with different button types', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<>
|
||||
<Button type={BUTTON_TYPES.PRIMARY} data-testid={BUTTON_TYPES.PRIMARY}>
|
||||
Button
|
||||
</Button>
|
||||
<Button
|
||||
type={BUTTON_TYPES.SECONDARY}
|
||||
data-testid={BUTTON_TYPES.SECONDARY}
|
||||
>
|
||||
Button
|
||||
</Button>
|
||||
<Button type={BUTTON_TYPES.LINK} data-testid={BUTTON_TYPES.LINK}>
|
||||
Button
|
||||
</Button>
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId(BUTTON_TYPES.PRIMARY)).toHaveClass(
|
||||
`mm-button-${BUTTON_TYPES.PRIMARY}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_TYPES.SECONDARY)).toHaveClass(
|
||||
`mm-button-${BUTTON_TYPES.SECONDARY}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_TYPES.LINK)).toHaveClass(
|
||||
`mm-button-${BUTTON_TYPES.LINK}`,
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render with different size classes', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<Button
|
||||
size={BUTTON_SIZES.AUTO}
|
||||
type={BUTTON_TYPES.LINK}
|
||||
data-testid={BUTTON_SIZES.AUTO}
|
||||
>
|
||||
Button {BUTTON_SIZES.AUTO}
|
||||
</Button>
|
||||
<Button size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM}>
|
||||
Button {BUTTON_SIZES.SM}
|
||||
</Button>
|
||||
<Button size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD}>
|
||||
Button {BUTTON_SIZES.MD}
|
||||
</Button>
|
||||
<Button size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG}>
|
||||
Button {BUTTON_SIZES.LG}
|
||||
</Button>
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.AUTO}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.SM}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.MD}`,
|
||||
);
|
||||
expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass(
|
||||
`mm-button--size-${BUTTON_SIZES.LG}`,
|
||||
);
|
||||
});
|
||||
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<Button data-testid="classname" className="mm-button--test">
|
||||
Button
|
||||
</Button>,
|
||||
);
|
||||
expect(getByTestId('classname')).toHaveClass('mm-button--test');
|
||||
});
|
||||
|
||||
it('should render with different button states', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<Button loading data-testid="loading">
|
||||
Button
|
||||
</Button>
|
||||
<Button disabled data-testid="disabled">
|
||||
Button
|
||||
</Button>
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId('loading')).toHaveClass(`mm-button--loading`);
|
||||
expect(getByTestId('disabled')).toHaveClass(`mm-button--disabled`);
|
||||
});
|
||||
it('should render with icon', () => {
|
||||
const { getByTestId } = render(
|
||||
<Button
|
||||
data-testid="icon"
|
||||
icon="add-square-filled"
|
||||
iconProps={{ 'data-testid': 'base-button-icon' }}
|
||||
>
|
||||
Button
|
||||
</Button>,
|
||||
);
|
||||
|
||||
expect(getByTestId('base-button-icon')).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render as danger', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<Button danger data-testid="danger">
|
||||
Button Danger
|
||||
</Button>
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(getByTestId('danger')).toHaveClass('mm-button-primary--type-danger');
|
||||
});
|
||||
2
ui/components/component-library/button/index.js
Normal file
2
ui/components/component-library/button/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export { Button } from './button';
|
||||
export { BUTTON_TYPES } from './button.constants';
|
||||
Loading…
Reference in New Issue
Block a user