m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Feat/18890/button ts update (#20492)

Browse Source 
* button to TS migration

working demo

style props

broken mapping - need switch

working types file

working types

fix dependent imports of Button

variant mapping

working types

fix lint

fix test

fix ButtonSize issue on QuizContent

box fix

test if this works

fix button being used on QuizContent

fix button_variant import

readme fix

* fix button import

* fix primary button as anchor hover

* deprecated

* button to TS migration

fix lint

fix test

* fix rebase issue

* fix rebase issue

* lint fix
This commit is contained in:
Garrett Bear 2023-08-28 14:42:00 -07:00 committed by GitHub
parent c54212916b
commit 66292330fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 292 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/configure-snap-popup/configure-snap-popup.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
BUTTON_VARIANT, ButtonVariant,
Button, Button,
Box, Box,
Modal, Modal,
@ -72,7 +72,7 @@ export default function ConfigureSnapPopup({
{t('configureSnapPopupLink')} {t('configureSnapPopupLink')}
</Text> </Text>
<Button <Button
variant={BUTTON_VARIANT.LINK} variant={ButtonVariant.Link}
marginBottom={8} marginBottom={8}
onClick={() => { onClick={() => {
global.platform.openTab({ global.platform.openTab({

3
ui/components/app/srp-quiz-modal/QuizContent/QuizContent.tsx
View File

@ -60,8 +60,7 @@ export default function QuizContent({
key={idx} key={idx}
size={btn.size} size={btn.size}
onClick={btn.onClick} onClick={btn.onClick}
label={btn.label} variant={btn.variant as any}
variant={btn.variant}
width={BlockSize.Full} width={BlockSize.Full}
data-testid={btn['data-testid']} data-testid={btn['data-testid']}
> >

54
ui/components/app/srp-quiz-modal/SRPQuiz/SRPQuiz.tsx
View File

@ -18,8 +18,8 @@ import { REVEAL_SEED_ROUTE } from '../../../../helpers/constants/routes';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useI18nContext } from '../../../../hooks/useI18nContext';
import { import {
BUTTON_SIZES, ButtonSize,
BUTTON_VARIANT, ButtonVariant,
Icon, Icon,
IconName, IconName,
IconSize, IconSize,
@ -81,14 +81,14 @@ export default function SRPQuiz(props: any) {
{ {
label: t('srpSecurityQuizGetStarted'), label: t('srpSecurityQuizGetStarted'),
onClick: () => setStage(QuizStage.questionOne), onClick: () => setStage(QuizStage.questionOne),
variant: BUTTON_VARIANT.PRIMARY, variant: ButtonVariant.Primary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-get-started', 'data-testid': 'srp-quiz-get-started',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
'data-testid': 'srp-quiz-learn-more', 'data-testid': 'srp-quiz-learn-more',
}, },
]} ]}
@ -105,21 +105,21 @@ export default function SRPQuiz(props: any) {
{ {
label: t('srpSecurityQuizQuestionOneWrongAnswer'), label: t('srpSecurityQuizQuestionOneWrongAnswer'),
onClick: () => setStage(QuizStage.wrongAnswerQuestionOne), onClick: () => setStage(QuizStage.wrongAnswerQuestionOne),
variant: BUTTON_VARIANT.SECONDARY, variant: ButtonVariant.Secondary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-wrong-answer', 'data-testid': 'srp-quiz-wrong-answer',
}, },
{ {
label: t('srpSecurityQuizQuestionOneRightAnswer'), label: t('srpSecurityQuizQuestionOneRightAnswer'),
onClick: () => setStage(QuizStage.rightAnswerQuestionOne), onClick: () => setStage(QuizStage.rightAnswerQuestionOne),
variant: BUTTON_VARIANT.SECONDARY, variant: ButtonVariant.Secondary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-right-answer', 'data-testid': 'srp-quiz-right-answer',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
}, },
]} ]}
/> />
@ -137,14 +137,14 @@ export default function SRPQuiz(props: any) {
{ {
label: t('continue'), label: t('continue'),
onClick: () => setStage(QuizStage.questionTwo), onClick: () => setStage(QuizStage.questionTwo),
variant: BUTTON_VARIANT.PRIMARY, variant: ButtonVariant.Primary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-continue', 'data-testid': 'srp-quiz-continue',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
}, },
]} ]}
/> />
@ -162,14 +162,14 @@ export default function SRPQuiz(props: any) {
{ {
label: t('tryAgain'), label: t('tryAgain'),
onClick: () => setStage(QuizStage.questionOne), onClick: () => setStage(QuizStage.questionOne),
variant: BUTTON_VARIANT.PRIMARY, variant: ButtonVariant.Primary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-try-again', 'data-testid': 'srp-quiz-try-again',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
}, },
]} ]}
/> />
@ -185,21 +185,21 @@ export default function SRPQuiz(props: any) {
{ {
label: t('srpSecurityQuizQuestionTwoRightAnswer'), label: t('srpSecurityQuizQuestionTwoRightAnswer'),
onClick: () => setStage(QuizStage.rightAnswerQuestionTwo), onClick: () => setStage(QuizStage.rightAnswerQuestionTwo),
variant: BUTTON_VARIANT.SECONDARY, variant: ButtonVariant.Secondary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-right-answer', 'data-testid': 'srp-quiz-right-answer',
}, },
{ {
label: t('srpSecurityQuizQuestionTwoWrongAnswer'), label: t('srpSecurityQuizQuestionTwoWrongAnswer'),
onClick: () => setStage(QuizStage.wrongAnswerQuestionTwo), onClick: () => setStage(QuizStage.wrongAnswerQuestionTwo),
variant: BUTTON_VARIANT.SECONDARY, variant: ButtonVariant.Secondary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-wrong-answer', 'data-testid': 'srp-quiz-wrong-answer',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
}, },
]} ]}
/> />
@ -217,14 +217,14 @@ export default function SRPQuiz(props: any) {
{ {
label: t('continue'), label: t('continue'),
onClick: () => history.push(REVEAL_SEED_ROUTE), onClick: () => history.push(REVEAL_SEED_ROUTE),
variant: BUTTON_VARIANT.PRIMARY, variant: ButtonVariant.Primary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-continue', 'data-testid': 'srp-quiz-continue',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
}, },
]} ]}
/> />
@ -242,14 +242,14 @@ export default function SRPQuiz(props: any) {
{ {
label: t('tryAgain'), label: t('tryAgain'),
onClick: () => setStage(QuizStage.questionTwo), onClick: () => setStage(QuizStage.questionTwo),
variant: BUTTON_VARIANT.PRIMARY, variant: ButtonVariant.Primary,
size: BUTTON_SIZES.LG, size: ButtonSize.Lg,
'data-testid': 'srp-quiz-try-again', 'data-testid': 'srp-quiz-try-again',
}, },
{ {
label: t('learnMoreUpperCase'), label: t('learnMoreUpperCase'),
onClick: openSupportArticle, onClick: openSupportArticle,
variant: BUTTON_VARIANT.LINK, variant: ButtonVariant.Link,
}, },
]} ]}
/> />

6
ui/components/app/srp-quiz-modal/types.ts
View File

@ -1,3 +1,5 @@
import { ButtonSize, ButtonVariant } from '../../component-library';
export enum QuizStage { export enum QuizStage {
introduction = 'introduction', introduction = 'introduction',
questionOne = 'question_one', questionOne = 'question_one',
@ -31,8 +33,8 @@ export interface IQuizInformationProps {
buttons: { buttons: {
onClick: () => void; onClick: () => void;
label: string; label: string;
variant: string; variant: ButtonVariant;
size?: string; size?: ButtonSize;
'data-testid'?: string; 'data-testid'?: string;
}[]; }[];
} }

4
ui/components/component-library/button-primary/button-primary.scss
View File

@ -1,5 +1,5 @@
.mm-button-primary { .mm-button-primary {
&:hover { &:hover:not(&--disabled) {
color: var(--color-primary-inverse); color: var(--color-primary-inverse);
box-shadow: var(--component-button-primary-shadow); box-shadow: var(--component-button-primary-shadow);
} }
@ -10,7 +10,7 @@
} }
// Danger type // Danger type
&--type-danger { &--type-danger:not(&--disabled) {
&:hover { &:hover {
color: var(--color-error-inverse); color: var(--color-error-inverse);
box-shadow: var(--component-button-danger-shadow); box-shadow: var(--component-button-danger-shadow);

58
ui/components/component-library/button/README.mdx
View File

@ -13,66 +13,53 @@ The `Button` is used for user actions. It unifies `ButtonPrimary`, `ButtonSecond
## Props ## Props
The `Button` accepts all props below as well as all [ButtonPrimary](/docs/components-componentlibrary-buttonprimary--default-story), [ButtonSecondary](/docs/components-componentlibrary-buttonsecondary--default-story), [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story), and [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Button} /> <ArgsTable of={Button} />
The `Button` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
<ArgsTable of={ButtonBase} />
The `Button` accepts all [ButtonPrimary](/docs/components-componentlibrary-buttonprimary--default-story), [ButtonSecondary](/docs/components-componentlibrary-buttonsecondary--default-story), [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story), and [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={ButtonLink} />
### Variant ### Variant
Use the `variant` prop and the `BUTTON_VARIANT` object from `./button.constants.js` to change the `Button` variant. Use the `variant` prop and the `ButtonVariant` enum from `./ui/components/component-library` to change the `Button` variant.
Possible variants include: Possible variants include:
- `BUTTON_VARIANT.PRIMARY` - `ButtonVariant.Primary` (default)
- `BUTTON_VARIANT.SECONDARY` - `ButtonVariant.Secondary`
- `BUTTON_VARIANT.LINK` - `ButtonVariant.Link`
<Canvas> <Canvas>
<Story id="components-componentlibrary-button--variant" /> <Story id="components-componentlibrary-button--variant" />
</Canvas> </Canvas>
```jsx ```jsx
import { Button, BUTTON_VARIANT } from '../ui/component-library/button'; import { Button, ButtonVariant } from '../ui/component-library/button';
<Button variant={BUTTON_VARIANT.PRIMARY}>Button Primary</Button> <Button variant={ButtonVariant.Primary}>Button Primary</Button>
<Button variant={BUTTON_VARIANT.SECONDARY}>Button Secondary</Button> <Button variant={ButtonVariant.Secondary}>Button Secondary</Button>
<Button variant={BUTTON_VARIANT.LINK}>Button Link</Button> <Button variant={ButtonVariant.Link}>Button Link</Button>
``` ```
### Size ### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `Size.MD` Use the `size` prop and the `ButtonSize` enum from `./ui/components/component-library` to change the size of `Button`. Defaults to `Buttonsize.Md`
Optional: `BUTTON_SIZES` from `./button` object can be used instead of `Size`.
Possible sizes include: Possible sizes include:
- `Size.inherit` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only - `Buttonsize.Inherit` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.auto` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only - `Buttonsize.Auto` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.SM` 32px - `Buttonsize.Sm` 32px
- `Size.MD` 40px - `Buttonsize.Md` 40px
- `Size.LG` 48px - `Buttonsize.Lg` 48px
<Canvas> <Canvas>
<Story id="components-componentlibrary-button--size-story" /> <Story id="components-componentlibrary-button--size-story" />
</Canvas> </Canvas>
```jsx ```jsx
import { Size } from '../../../helpers/constants/design-system'; import { Button, ButtonSize } from '../../component-library';
import { Button } from '../../component-library';
<Button size={Size.inherit} /> <Button size={Buttonsize.Inherit} />
<Button size={Size.SM} /> <Button size={Buttonsize.Sm} />
<Button size={Size.MD} /> <Button size={Buttonsize.Md} />
<Button size={Size.LG} /> <Button size={Buttonsize.Lg} />
``` ```
### Danger ### Danger
@ -113,7 +100,6 @@ Use boolean `block` prop to quickly enable a full width block button
</Canvas> </Canvas>
```jsx ```jsx
import { DISPLAY } from '../../../helpers/constants/design-system';
import { Button } from '../../component-library'; import { Button } from '../../component-library';
<Button>Default Button</Button> <Button>Default Button</Button>
@ -184,8 +170,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
</Canvas> </Canvas>
```jsx ```jsx
import { Button } from '../../component-library'; import { Button, IconName } from '../../component-library';
import { IconName } from '../icon';
<Button startIconName={IconName.AddSquare}>Button</Button>; <Button startIconName={IconName.AddSquare}>Button</Button>;
``` ```
@ -195,8 +180,7 @@ import { IconName } from '../icon';
</Canvas> </Canvas>
```jsx ```jsx
import { Button } from '../../component-library'; import { Button, IconName } from '../../component-library';
import { IconName } from '../icon';
<Button endIconName={IconName.Arrow2Right}>Button</Button>; <Button endIconName={IconName.Arrow2Right}>Button</Button>;
``` ```

0
ui/components/component-library/button/__snapshots__/button.test.js.snap → ui/components/component-library/button/__snapshots__/button.test.tsx.snap
View File

15
ui/components/component-library/button/button.constants.js
View File

@ -1,15 +0,0 @@
import { Size } from '../../../helpers/constants/design-system';
export const BUTTON_SIZES = {
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
INHERIT: Size.inherit,
AUTO: Size.auto,
};
export const BUTTON_VARIANT = {
PRIMARY: 'primary',
SECONDARY: 'secondary',
LINK: 'link',
};

34
ui/components/component-library/button/button.js
View File

@ -1,34 +0,0 @@
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_VARIANT } from './button.constants';
export const Button = ({ variant, ...props }) => {
switch (variant) {
case BUTTON_VARIANT.PRIMARY:
return <ButtonPrimary {...props} />;
case BUTTON_VARIANT.SECONDARY:
return <ButtonSecondary {...props} />;
case BUTTON_VARIANT.LINK:
return <ButtonLink {...props} />;
default:
return <ButtonPrimary {...props} />;
}
};
Button.propTypes = {
/**
* Select the variant of Button.
* Possible values could be 'BUTTON_VARIANT.PRIMARY', 'BUTTON_VARIANT.SECONDARY', 'BUTTON_VARIANT.LINK'
* Button will default to `BUTTON_VARIANT.PRIMARY`
*/
variant: PropTypes.oneOf(Object.values(BUTTON_VARIANT)),
/**
* Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
*/
...ButtonPrimary.propTypes,
};

128
ui/components/component-library/button/button.stories.js → ui/components/component-library/button/button.stories.tsx
View File

@ -1,39 +1,18 @@
import React from 'react'; import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { import {
AlignItems, AlignItems,
DISPLAY, Display,
FLEX_DIRECTION, FlexDirection,
Size,
TextVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { IconName } from '..'; import { Box, IconName } from '..';
import { ButtonLinkSize } from '../button-link';
import Box from '../../ui/box/box';
import { Text } from '../text'; import { Text } from '../text';
import README from './README.mdx'; import README from './README.mdx';
import { Button, BUTTON_VARIANT } from '.'; import { Button, ButtonSize, ButtonVariant } from '.';
const marginSizeControlOptions = [
undefined,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
'auto',
];
export default { export default {
title: 'Components/ComponentLibrary/Button', title: 'Components/ComponentLibrary/Button',
component: Button, component: Button,
parameters: { parameters: {
docs: { docs: {
@ -83,79 +62,54 @@ export default {
}, },
size: { size: {
control: 'select', control: 'select',
options: Object.values(ButtonLinkSize), options: Object.values(ButtonSize),
}, },
variant: { variant: {
options: Object.values(BUTTON_VARIANT), options: Object.values(ButtonVariant),
control: 'select', 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: { args: {
children: 'Button', children: 'Button',
}, },
}; } as Meta<typeof Button>;
export const DefaultStory = (args) => <Button {...args} />; const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const Variant = (args) => ( export const Variant: StoryFn<typeof Button> = () => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={Display.Flex} gap={1}>
<Button variant={BUTTON_VARIANT.PRIMARY} {...args}> <Button variant={ButtonVariant.Primary}>Button Primary</Button>
Button Primary <Button variant={ButtonVariant.Secondary}>Button Secondary</Button>
</Button> <Button variant={ButtonVariant.Link}>Button Link</Button>
<Button variant={BUTTON_VARIANT.SECONDARY} {...args}>
Button Secondary
</Button>
<Button variant={BUTTON_VARIANT.LINK} {...args}>
Button Link
</Button>
</Box> </Box>
); );
export const SizeStory = (args) => ( export const SizeStory: StoryFn<typeof Button> = (args) => (
<> <>
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.baseline} alignItems={AlignItems.baseline}
gap={1} gap={1}
marginBottom={3} marginBottom={3}
> >
<Button {...args} size={Size.SM}> <Button {...args} variant={ButtonVariant.Primary} size={ButtonSize.Sm}>
Small Button Small Button
</Button> </Button>
<Button {...args} size={Size.MD}> <Button {...args} size={ButtonSize.Md}>
Medium (Default) Button Medium (Default) Button
</Button> </Button>
<Button {...args} size={Size.LG}> <Button {...args} size={ButtonSize.Lg}>
Large Button Large Button
</Button> </Button>
<Button {...args} variant={BUTTON_VARIANT.LINK}> <Button {...args} variant={ButtonVariant.Link}>
Auto ButtonLink Auto ButtonLink
</Button> </Button>
</Box> </Box>
<Text variant={TextVariant.bodySm}> <Text variant={TextVariant.bodySm}>
<Button {...args} variant={BUTTON_VARIANT.LINK} size={Size.inherit}> <Button {...args} variant={ButtonVariant.Link} size={ButtonSize.Inherit}>
Button Inherit Button Inherit
</Button>{' '} </Button>{' '}
inherits the font-size of the parent element. Inherit size only used for inherits the font-size of the parent element. Inherit size only used for
@ -165,8 +119,8 @@ export const SizeStory = (args) => (
); );
SizeStory.storyName = 'Size'; SizeStory.storyName = 'Size';
export const Danger = (args) => ( export const Danger: StoryFn<typeof Button> = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={Display.Flex} gap={1}>
<Button {...args}>Normal</Button> <Button {...args}>Normal</Button>
{/* Test Anchor tag to match exactly as button */} {/* Test Anchor tag to match exactly as button */}
<Button as="a" {...args} href="#" danger> <Button as="a" {...args} href="#" danger>
@ -175,13 +129,15 @@ export const Danger = (args) => (
</Box> </Box>
); );
export const Href = (args) => <Button {...args}>Anchor Element</Button>; export const Href: StoryFn<typeof Button> = (args) => (
<Button {...args}>Anchor Element</Button>
);
Href.args = { Href.args = {
href: '/metamask', href: '/metamask',
}; };
export const Block = (args) => ( export const Block: StoryFn<typeof Button> = (args) => (
<> <>
<Button {...args} marginBottom={2}> <Button {...args} marginBottom={2}>
Default Button Default Button
@ -192,8 +148,8 @@ export const Block = (args) => (
</> </>
); );
export const As = (args) => ( export const As: StoryFn<typeof Button> = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}> <Box display={Display.Flex} flexDirection={FlexDirection.Row} gap={2}>
<Button {...args}>Button Element</Button> <Button {...args}>Button Element</Button>
<Button as="a" href="#" {...args}> <Button as="a" href="#" {...args}>
Anchor Element Anchor Element
@ -201,26 +157,22 @@ export const As = (args) => (
</Box> </Box>
); );
export const Disabled = (args) => <Button {...args}>Disabled Button</Button>; export const Disabled = Template.bind({});
Disabled.args = { Disabled.args = {
disabled: true, disabled: true,
}; };
export const Loading = (args) => <Button {...args}>Loading Button</Button>; export const Loading = Template.bind({});
Loading.args = { Loading.args = {
loading: true, loading: true,
}; };
export const StartIconName = (args) => ( export const StartIconName = Template.bind({});
<Button {...args} startIconName={IconName.AddSquare}> StartIconName.args = {
Button startIconName: IconName.AddSquare,
</Button> };
);
export const EndIconName = (args) => ( export const EndIconName = Template.bind({});
<Button {...args} endIconName={IconName.Arrow2Right}> EndIconName.args = {
Button endIconName: IconName.AddSquare,
</Button> };
);

60
ui/components/component-library/button/button.test.js → ui/components/component-library/button/button.test.tsx
View File

@ -2,8 +2,8 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { IconName } from '..'; import { IconName } from '..';
import { BUTTON_SIZES, BUTTON_VARIANT } from './button.constants';
import { Button } from './button'; import { Button } from './button';
import { ButtonSize, ButtonVariant } from '.';
describe('Button', () => { describe('Button', () => {
it('should render button element correctly', () => { it('should render button element correctly', () => {
@ -47,30 +47,30 @@ describe('Button', () => {
const { getByTestId, container } = render( const { getByTestId, container } = render(
<> <>
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
data-testid={BUTTON_VARIANT.PRIMARY} data-testid={ButtonVariant.Primary}
> >
Button Button
</Button> </Button>
<Button <Button
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
data-testid={BUTTON_VARIANT.SECONDARY} data-testid={ButtonVariant.Secondary}
> >
Button Button
</Button> </Button>
<Button variant={BUTTON_VARIANT.LINK} data-testid={BUTTON_VARIANT.LINK}> <Button variant={ButtonVariant.Link} data-testid={ButtonVariant.Link}>
Button Button
</Button> </Button>
</>, </>,
); );
expect(getByTestId(BUTTON_VARIANT.PRIMARY)).toHaveClass( expect(getByTestId(ButtonVariant.Primary)).toHaveClass(
`mm-button-${BUTTON_VARIANT.PRIMARY}`, `mm-button-${ButtonVariant.Primary}`,
); );
expect(getByTestId(BUTTON_VARIANT.SECONDARY)).toHaveClass( expect(getByTestId(ButtonVariant.Secondary)).toHaveClass(
`mm-button-${BUTTON_VARIANT.SECONDARY}`, `mm-button-${ButtonVariant.Secondary}`,
); );
expect(getByTestId(BUTTON_VARIANT.LINK)).toHaveClass( expect(getByTestId(ButtonVariant.Link)).toHaveClass(
`mm-button-${BUTTON_VARIANT.LINK}`, `mm-button-${ButtonVariant.Link}`,
); );
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });
@ -79,34 +79,34 @@ describe('Button', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<Button <Button
size={BUTTON_SIZES.INHERIT} variant={ButtonVariant.Link}
variant={BUTTON_VARIANT.LINK} size={ButtonSize.Inherit}
data-testid={BUTTON_SIZES.INHERIT} data-testid={ButtonSize.Inherit}
> >
Button {BUTTON_SIZES.INHERIT} Button {ButtonSize.Inherit}
</Button> </Button>
<Button size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM}> <Button size={ButtonSize.Sm} data-testid={ButtonSize.Sm}>
Button {BUTTON_SIZES.SM} Button {ButtonSize.Sm}
</Button> </Button>
<Button size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD}> <Button size={ButtonSize.Md} data-testid={ButtonSize.Md}>
Button {BUTTON_SIZES.MD} Button {ButtonSize.Md}
</Button> </Button>
<Button size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG}> <Button size={ButtonSize.Lg} data-testid={ButtonSize.Lg}>
Button {BUTTON_SIZES.LG} Button {ButtonSize.Lg}
</Button> </Button>
</>, </>,
); );
expect(getByTestId(BUTTON_SIZES.INHERIT)).toHaveClass( expect(getByTestId(ButtonSize.Inherit)).toHaveClass(
`mm-button-link--size-${BUTTON_SIZES.INHERIT}`, `mm-button-link--size-${ButtonSize.Inherit}`,
); );
expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass( expect(getByTestId(ButtonSize.Sm)).toHaveClass(
`mm-button-base--size-${BUTTON_SIZES.SM}`, `mm-button-base--size-${ButtonSize.Sm}`,
); );
expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass( expect(getByTestId(ButtonSize.Md)).toHaveClass(
`mm-button-base--size-${BUTTON_SIZES.MD}`, `mm-button-base--size-${ButtonSize.Md}`,
); );
expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass( expect(getByTestId(ButtonSize.Lg)).toHaveClass(
`mm-button-base--size-${BUTTON_SIZES.LG}`, `mm-button-base--size-${ButtonSize.Lg}`,
); );
}); });

35
ui/components/component-library/button/button.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from 'react';
import type { PolymorphicRef } from '../box';
import { ButtonPrimary } from '../button-primary';
import { ButtonSecondary } from '../button-secondary';
import { ButtonLink } from '../button-link';
import type { ButtonPrimaryProps } from '../button-primary/button-primary.types';
import type { ButtonSecondaryProps } from '../button-secondary/button-secondary.types';
import type { ButtonLinkProps } from '../button-link/button-link.types';
import type { ButtonProps, ButtonComponent } from './button.types';
import { ButtonVariant } from './button.types';
export const Button: ButtonComponent = React.forwardRef(
<C extends React.ElementType = 'button' | 'a'>(
{ variant, ...props }: ButtonProps<C>,
ref?: PolymorphicRef<C>,
) => {
switch (variant) {
case ButtonVariant.Primary:
return (
<ButtonPrimary ref={ref} {...(props as ButtonPrimaryProps<C>)} />
);
case ButtonVariant.Secondary:
return (
<ButtonSecondary ref={ref} {...(props as ButtonSecondaryProps<C>)} />
);
case ButtonVariant.Link:
return <ButtonLink ref={ref} {...(props as ButtonLinkProps<C>)} />;
default:
return (
<ButtonPrimary ref={ref} {...(props as ButtonPrimaryProps<C>)} />
);
}
},
);

46
ui/components/component-library/button/button.types.ts Normal file
View File

@ -0,0 +1,46 @@
import type { PolymorphicComponentPropWithRef } from '../box';
import type { ButtonPrimaryStyleUtilityProps } from '../button-primary/button-primary.types';
import type { ButtonSecondaryStyleUtilityProps } from '../button-secondary/button-secondary.types';
import type { ButtonLinkStyleUtilityProps } from '../button-link/button-link.types';
export enum ButtonSize {
Sm = 'sm',
Md = 'md',
Lg = 'lg',
Inherit = 'inherit',
Auto = 'auto',
}
export enum ButtonVariant {
Primary = 'primary',
Secondary = 'secondary',
Link = 'link',
}
type ValidButtonSize = ButtonSize.Sm | ButtonSize.Md | ButtonSize.Lg;
type ButtonPropsByVariant = {
[ButtonVariant.Primary]: {
variant?: ButtonVariant.Primary;
size?: ValidButtonSize; // Allows for only ButtonSize.Sm, ButtonSize.Md, ButtonSize.Lg
} & Omit<ButtonPrimaryStyleUtilityProps, 'size'>;
[ButtonVariant.Secondary]: {
variant?: ButtonVariant.Secondary;
size?: ValidButtonSize; // Allows for only ButtonSize.Sm, ButtonSize.Md, ButtonSize.Lg
} & Omit<ButtonSecondaryStyleUtilityProps, 'size'>;
[ButtonVariant.Link]: {
variant?: ButtonVariant.Link;
size?: ButtonSize;
} & Omit<ButtonLinkStyleUtilityProps, 'size'>;
};
type ButtonPropsMap = {
[variant in ButtonVariant]: ButtonPropsByVariant[variant];
};
export type ButtonProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, ButtonPropsMap[ButtonVariant]>;
export type ButtonComponent = <C extends React.ElementType = 'button' | 'a'>(
props: ButtonProps<C>,
) => React.ReactElement | null;

2
ui/components/component-library/button/index.js
View File

@ -1,2 +0,0 @@
export { Button } from './button';
export { BUTTON_VARIANT, BUTTON_SIZES } from './button.constants';

23
ui/components/component-library/button/index.ts Normal file
View File

@ -0,0 +1,23 @@
import { Size } from '../../../helpers/constants/design-system';
export { Button } from './button';
export { ButtonSize, ButtonVariant } from './button.types';
/**
* @deprecated `BUTTON_VARIANT` const has been deprecated in favor of the `ButtonVariant` enum which can still be imported from `ui/components/component-library`
*/
export const BUTTON_SIZES = {
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
INHERIT: Size.inherit,
AUTO: Size.auto,
};
/**
* @deprecated `BUTTON_SIZES` const has been deprecated in favor of the `ButtonSize` enum which can still be imported from `ui/components/component-library`
*/
export const BUTTON_VARIANT = {
PRIMARY: 'primary',
SECONDARY: 'secondary',
LINK: 'link',
};

11
ui/components/component-library/header-base/header-base.stories.tsx
View File

@ -3,7 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
import { import {
IconName, IconName,
Button, Button,
BUTTON_SIZES, ButtonSize,
ButtonIcon, ButtonIcon,
ButtonIconSize, ButtonIconSize,
Text, Text,
@ -206,7 +206,7 @@ export const UseCaseDemos = (args) => (
<Button <Button
backgroundColor={BackgroundColor.successAlternative} backgroundColor={BackgroundColor.successAlternative}
style={{ whiteSpace: 'nowrap' }} style={{ whiteSpace: 'nowrap' }}
size={BUTTON_SIZES.SM} size={ButtonSize.Sm}
> >
Unlock Now Unlock Now
</Button> </Button>
@ -247,10 +247,7 @@ export const UseCaseDemos = (args) => (
/> />
} }
endAccessory={ endAccessory={
<Button <Button backgroundColor={BackgroundColor.goerli} size={ButtonSize.Sm}>
backgroundColor={BackgroundColor.goerli}
size={BUTTON_SIZES.SM}
>
Download Download
</Button> </Button>
} }
@ -272,7 +269,7 @@ export const UseCaseDemos = (args) => (
startAccessory={ startAccessory={
<Button <Button
backgroundColor={BackgroundColor.successAlternative} backgroundColor={BackgroundColor.successAlternative}
size={BUTTON_SIZES.SM} size={ButtonSize.Sm}
> >
Unlock Unlock
</Button> </Button>

8
ui/components/component-library/index.js
View File

@ -15,7 +15,13 @@ export {
BadgeWrapperAnchorElementShape, BadgeWrapperAnchorElementShape,
} from './badge-wrapper'; } from './badge-wrapper';
export { Box } from './box'; export { Box } from './box';
export { Button, BUTTON_VARIANT, BUTTON_SIZES } from './button'; export {
Button,
ButtonVariant,
ButtonSize,
BUTTON_SIZES,
BUTTON_VARIANT,
} from './button';
export { ButtonBase, ButtonBaseSize } from './button-base'; export { ButtonBase, ButtonBaseSize } from './button-base';
export { ButtonIcon, ButtonIconSize } from './button-icon'; export { ButtonIcon, ButtonIconSize } from './button-icon';
export { ButtonLink, ButtonLinkSize } from './button-link'; export { ButtonLink, ButtonLinkSize } from './button-link';

4
ui/components/component-library/input/input.stories.tsx
View File

@ -8,7 +8,7 @@ import {
TextVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { Button, Box, BUTTON_VARIANT } from '..'; import { Button, Box, ButtonVariant } from '..';
import { InputType } from './input.types'; import { InputType } from './input.types';
import { Input } from './input'; import { Input } from './input';
@ -169,7 +169,7 @@ export const Ref = (args) => {
<Box display={Display.Flex}> <Box display={Display.Flex}>
<Input {...args} ref={inputRef} value={value} onChange={handleOnChange} /> <Input {...args} ref={inputRef} value={value} onChange={handleOnChange} />
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
marginLeft={1} marginLeft={1}
onClick={handleOnClick} onClick={handleOnClick}
> >

12
ui/components/component-library/modal-content/README.mdx
View File

@ -24,21 +24,21 @@ Use the `children` prop to render the content of `ModalContent`. The `ModalConte
```jsx ```jsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Modal, ModalContent, ModalHeader, Text, Button, BUTTON_VARIANT } from '../../component-library'; import { Modal, ModalContent, ModalHeader, Text, Button, ButtonVariant } from '../../component-library';
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const handleOnClick = () => { const handleOnClick = () => {
setShow(!show); setShow(!show);
}; };
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}> <Button variant={ButtonVariant.Primary} onClick={handleOnClick}>
Open Open
</Button> </Button>
<Modal isOpen={show} onClose={handleOnClick}> <Modal isOpen={show} onClose={handleOnClick}>
<ModalContent {...args}> <ModalContent {...args}>
<ModalHeader marginBottom={4}>Modal Header</ModalHeader> <ModalHeader marginBottom={4}>Modal Header</ModalHeader>
<Text marginBottom={4}>Modal Content</Text> <Text marginBottom={4}>Modal Content</Text>
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}> <Button variant={ButtonVariant.Primary} onClick={handleOnClick}>
Close Close
</Button> </Button>
<LoremIpsum /> <LoremIpsum />
@ -65,7 +65,7 @@ import { DISPLAY } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { Modal, ModalContent, Text, Button, BUTTON_VARIANT } from '../../component-library'; import { Modal, ModalContent, Text, Button, ButtonVariant } from '../../component-library';
enum ModalContentSizeStoryOption { enum ModalContentSizeStoryOption {
Sm = 'sm', Sm = 'sm',
@ -82,13 +82,13 @@ const handleOnClick = (size: ModalContentSizeStoryOption) => {
<Box display={DISPLAY.FLEX} gap={4}> <Box display={DISPLAY.FLEX} gap={4}>
<Button <Button
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)} onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)}
> >
Show sm size Show sm size
</Button> </Button>
<Button <Button
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
onClick={() => handleOnClick(ModalContentSizeStoryOption.ClassName)} onClick={() => handleOnClick(ModalContentSizeStoryOption.ClassName)}
> >
Show className Show className

14
ui/components/component-library/modal-content/modal-content.stories.tsx
View File

@ -5,7 +5,7 @@ import Box from '../../ui/box';
import { DISPLAY } from '../../../helpers/constants/design-system'; import { DISPLAY } from '../../../helpers/constants/design-system';
import { BUTTON_VARIANT, Button, Text, Modal, ModalHeader } from '..'; import { ButtonVariant, Button, Text, Modal, ModalHeader } from '..';
import { ModalContent } from './modal-content'; import { ModalContent } from './modal-content';
import { ModalContentSize } from './modal-content.types'; import { ModalContentSize } from './modal-content.types';
@ -48,14 +48,14 @@ export const DefaultStory: ComponentStory<typeof ModalContent> = (args) => {
}; };
return ( return (
<> <>
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}> <Button variant={ButtonVariant.Primary} onClick={handleOnClick}>
Open Open
</Button> </Button>
<Modal isOpen={show} onClose={handleOnClick}> <Modal isOpen={show} onClose={handleOnClick}>
<ModalContent {...args}> <ModalContent {...args}>
<ModalHeader marginBottom={4}>Modal Header</ModalHeader> <ModalHeader marginBottom={4}>Modal Header</ModalHeader>
<Text marginBottom={4}>Modal Content</Text> <Text marginBottom={4}>Modal Content</Text>
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}> <Button variant={ButtonVariant.Primary} onClick={handleOnClick}>
Close Close
</Button> </Button>
</ModalContent> </ModalContent>
@ -73,7 +73,7 @@ export const Children: ComponentStory<typeof ModalContent> = (args) => {
}; };
return ( return (
<> <>
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}> <Button variant={ButtonVariant.Primary} onClick={handleOnClick}>
Open Open
</Button> </Button>
<Modal isOpen={show} onClose={handleOnClick}> <Modal isOpen={show} onClose={handleOnClick}>
@ -84,7 +84,7 @@ export const Children: ComponentStory<typeof ModalContent> = (args) => {
</Text> </Text>
<Button <Button
marginBottom={4} marginBottom={4}
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
onClick={handleOnClick} onClick={handleOnClick}
> >
Close Close
@ -118,13 +118,13 @@ export const Size: ComponentStory<typeof ModalContent> = (args) => {
<> <>
<Box display={DISPLAY.FLEX} gap={4}> <Box display={DISPLAY.FLEX} gap={4}>
<Button <Button
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)} onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)}
> >
Show sm size Show sm size
</Button> </Button>
<Button <Button
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
onClick={() => handleOnClick(ModalContentSizeStoryOption.ClassName)} onClick={() => handleOnClick(ModalContentSizeStoryOption.ClassName)}
> >
Show className Show className

8
ui/components/component-library/modal-header/README.mdx
View File

@ -99,9 +99,9 @@ Use the `startAccessory` prop to render a component in the startAccessory positi
</Canvas> </Canvas>
```jsx ```jsx
import { ModalHeader, Button, BUTTON_SIZES } from '../../component-library'; import { ModalHeader, Button, ButtonSize } from '../../component-library';
<ModalHeader startAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}> <ModalHeader startAccessory={<Button size={ButtonSize.Sm}>Demo</Button>}>
StartAccessory StartAccessory
</ModalHeader>; </ModalHeader>;
``` ```
@ -115,9 +115,9 @@ Use the `endAccessory` prop to render a component in the endAccessory position.
</Canvas> </Canvas>
```jsx ```jsx
import { ModalHeader, Button, BUTTON_SIZES } from '../../component-library'; import { ModalHeader, Button, ButtonSize } from '../../component-library';
<ModalHeader endAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}> <ModalHeader endAccessory={<Button size={ButtonSize.Sm}>Demo</Button>}>
EndAccessory EndAccessory
</ModalHeader>; </ModalHeader>;
``` ```

6
ui/components/component-library/modal-header/modal-header.stories.tsx
View File

@ -10,7 +10,7 @@ import {
JustifyContent, JustifyContent,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { AvatarAccount, BUTTON_SIZES, Button, Text } from '..'; import { AvatarAccount, ButtonSize, Button, Text } from '..';
import { ModalHeader } from './modal-header'; import { ModalHeader } from './modal-header';
import README from './README.mdx'; import README from './README.mdx';
@ -76,11 +76,11 @@ OnClose.args = {
export const StartAccessory = Template.bind({}); export const StartAccessory = Template.bind({});
StartAccessory.args = { StartAccessory.args = {
children: 'StartAccessory demo', children: 'StartAccessory demo',
startAccessory: <Button size={BUTTON_SIZES.SM}>Demo</Button>, startAccessory: <Button size={ButtonSize.Sm}>Demo</Button>,
}; };
export const EndAccessory = Template.bind({}); export const EndAccessory = Template.bind({});
EndAccessory.args = { EndAccessory.args = {
children: 'EndAccessory demo', children: 'EndAccessory demo',
endAccessory: <Button size={BUTTON_SIZES.SM}>Demo</Button>, endAccessory: <Button size={ButtonSize.Sm}>Demo</Button>,
}; };

8
ui/components/component-library/popover-header/README.mdx
View File

@ -99,9 +99,9 @@ Use the `startAccessory` prop to render a component in the startAccessory positi
</Canvas> </Canvas>
```jsx ```jsx
import { PopoverHeader, Button, BUTTON_SIZES } from '../../component-library'; import { PopoverHeader, Button, ButtonSize } from '../../component-library';
<PopoverHeader startAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}> <PopoverHeader startAccessory={<Button size={ButtonSize.Sm}>Demo</Button>}>
StartAccessory StartAccessory
</PopoverHeader>; </PopoverHeader>;
``` ```
@ -115,9 +115,9 @@ Use the `endAccessory` prop to render a component in the endAccessory position.
</Canvas> </Canvas>
```jsx ```jsx
import { PopoverHeader, Button, BUTTON_SIZES } from '../../component-library'; import { PopoverHeader, Button, ButtonSize } from '../../component-library';
<PopoverHeader endAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}> <PopoverHeader endAccessory={<Button size={ButtonSize.Sm}>Demo</Button>}>
EndAccessory EndAccessory
</PopoverHeader>; </PopoverHeader>;
``` ```

6
ui/components/component-library/popover-header/popover-header.stories.tsx
View File

@ -10,7 +10,7 @@ import {
JustifyContent, JustifyContent,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { AvatarAccount, BUTTON_SIZES, Button, Text } from '..'; import { AvatarAccount, ButtonSize, Button, Text } from '..';
import { PopoverHeader } from './popover-header'; import { PopoverHeader } from './popover-header';
import README from './README.mdx'; import README from './README.mdx';
@ -76,11 +76,11 @@ OnClose.args = {
export const StartAccessory = Template.bind({}); export const StartAccessory = Template.bind({});
StartAccessory.args = { StartAccessory.args = {
children: 'StartAccessory demo', children: 'StartAccessory demo',
startAccessory: <Button size={BUTTON_SIZES.SM}>Demo</Button>, startAccessory: <Button size={ButtonSize.Sm}>Demo</Button>,
}; };
export const EndAccessory = Template.bind({}); export const EndAccessory = Template.bind({});
EndAccessory.args = { EndAccessory.args = {
children: 'EndAccessory demo', children: 'EndAccessory demo',
endAccessory: <Button size={BUTTON_SIZES.SM}>Demo</Button>, endAccessory: <Button size={ButtonSize.Sm}>Demo</Button>,
}; };

4
ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.stories.tsx
View File

@ -1,7 +1,7 @@
import { useArgs } from '@storybook/client-api'; import { useArgs } from '@storybook/client-api';
import { StoryFn } from '@storybook/react'; import { StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';
import { BUTTON_VARIANT, Button } from '../../../components/component-library'; import { ButtonVariant, Button } from '../../../components/component-library';
import AddSnapAccountModal from '.'; import AddSnapAccountModal from '.';
const AddSnapAccountModalStory = { const AddSnapAccountModalStory = {
@ -16,7 +16,7 @@ export const DefaultStory: StoryFn<typeof AddSnapAccountModal> = () => {
return ( return (
<> <>
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
onClick={() => updateArgs({ isShowingModal: true })} onClick={() => updateArgs({ isShowingModal: true })}
> >
Open modal Open modal

4
ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { import {
BUTTON_VARIANT, ButtonVariant,
Box, Box,
Button, Button,
Modal, Modal,
@ -53,7 +53,7 @@ export default function AddSnapAccountModal({
{t('addSnapAccountModalDescription')} {t('addSnapAccountModalDescription')}
</Text> </Text>
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
block block
className="get-started_button" className="get-started_button"
data-testid="get-started-button" data-testid="get-started-button"

10
ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
View File

@ -3,7 +3,7 @@ import ConfigureSnapPopup, {
ConfigureSnapPopupType, ConfigureSnapPopupType,
} from '../../../components/app/configure-snap-popup/configure-snap-popup'; } from '../../../components/app/configure-snap-popup/configure-snap-popup';
import { import {
BUTTON_VARIANT, ButtonVariant,
Box, Box,
Button, Button,
Icon, Icon,
@ -58,7 +58,7 @@ export const SnapDetailHeader = ({
marginBottom={4} marginBottom={4}
> >
<Button <Button
variant={BUTTON_VARIANT.LINK} variant={ButtonVariant.Link}
marginRight={4} marginRight={4}
onClick={() => history.back()} onClick={() => history.back()}
> >
@ -91,7 +91,7 @@ export const SnapDetailHeader = ({
<Box> <Box>
{isInstalled && updateAvailable && ( {isInstalled && updateAvailable && (
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
marginRight={1} marginRight={1}
onClick={() => { onClick={() => {
setShowConfigPopoverType(ConfigureSnapPopupType.INSTALL); setShowConfigPopoverType(ConfigureSnapPopupType.INSTALL);
@ -103,7 +103,7 @@ export const SnapDetailHeader = ({
)} )}
{isInstalled && ( {isInstalled && (
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
onClick={() => { onClick={() => {
setShowConfigPopoverType(ConfigureSnapPopupType.CONFIGURE); setShowConfigPopoverType(ConfigureSnapPopupType.CONFIGURE);
setShowConfigPopover(true); setShowConfigPopover(true);
@ -114,7 +114,7 @@ export const SnapDetailHeader = ({
)} )}
{!isInstalled && ( {!isInstalled && (
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
onClick={() => { onClick={() => {
setShowConfigPopoverType(ConfigureSnapPopupType.INSTALL); setShowConfigPopoverType(ConfigureSnapPopupType.INSTALL);
setShowConfigPopover(true); setShowConfigPopover(true);

6
ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx
View File

@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import { useHistory, useParams } from 'react-router-dom'; import { useHistory, useParams } from 'react-router-dom';
import semver from 'semver'; import semver from 'semver';
import { import {
BUTTON_VARIANT, ButtonVariant,
Box, Box,
Button, Button,
Tag, Tag,
@ -111,7 +111,7 @@ export default function SnapAccountDetailPage() {
{currentSnap.auditUrls.map((auditLink, index) => { {currentSnap.auditUrls.map((auditLink, index) => {
return ( return (
<Text key={`audit-link-${index}`}> <Text key={`audit-link-${index}`}>
<Button variant={BUTTON_VARIANT.LINK} href={auditLink}> <Button variant={ButtonVariant.Link} href={auditLink}>
{auditLink} {auditLink}
</Button> </Button>
</Text> </Text>
@ -127,7 +127,7 @@ export default function SnapAccountDetailPage() {
{isInstalled && ( {isInstalled && (
<Box> <Box>
<Button <Button
variant={BUTTON_VARIANT.LINK} variant={ButtonVariant.Link}
onClick={() => onClick={() =>
history.push( history.push(
`${SNAPS_VIEW_ROUTE}/${encodeURIComponent( `${SNAPS_VIEW_ROUTE}/${encodeURIComponent(

6
ui/pages/keyring-snaps/snap-card/snap-card.tsx
View File

@ -4,7 +4,7 @@ import ConfigureSnapPopup, {
ConfigureSnapPopupType, ConfigureSnapPopupType,
} from '../../../components/app/configure-snap-popup'; } from '../../../components/app/configure-snap-popup';
import { import {
BUTTON_VARIANT, ButtonVariant,
Box, Box,
Button, Button,
Icon, Icon,
@ -91,7 +91,7 @@ export default function SnapCard({
{isInstalled ? ( {isInstalled ? (
<Button <Button
data-testid="configure-snap-button" data-testid="configure-snap-button"
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
onClick={() => setShowConfigPopover(true)} onClick={() => setShowConfigPopover(true)}
> >
{t('snapConfigure')} {t('snapConfigure')}
@ -99,7 +99,7 @@ export default function SnapCard({
) : ( ) : (
<Button <Button
data-testid="install-snap-button" data-testid="install-snap-button"
variant={BUTTON_VARIANT.SECONDARY} variant={ButtonVariant.Secondary}
onClick={() => { onClick={() => {
history.push(`/add-snap-account/${id}`); history.push(`/add-snap-account/${id}`);
}} }}

2
ui/pages/settings/security-tab/security-tab.component.js
View File

@ -21,9 +21,9 @@ import {
} from '../../../../shared/lib/ui-utils'; } from '../../../../shared/lib/ui-utils';
import SRPQuiz from '../../../components/app/srp-quiz-modal/SRPQuiz'; import SRPQuiz from '../../../components/app/srp-quiz-modal/SRPQuiz';
import { import {
Button,
BUTTON_SIZES, BUTTON_SIZES,
Box, Box,
Button,
Text, Text,
} from '../../../components/component-library'; } from '../../../components/component-library';
import TextField from '../../../components/ui/text-field'; import TextField from '../../../components/ui/text-field';

4
ui/pages/swaps/prepare-swap-page/smart-transactions-popover.stories.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { StoryFn, Meta } from '@storybook/react'; import { StoryFn, Meta } from '@storybook/react';
import { useArgs } from '@storybook/client-api'; import { useArgs } from '@storybook/client-api';
import { BUTTON_VARIANT, Button } from '../../../components/component-library'; import { ButtonVariant, Button } from '../../../components/component-library';
import SmartTransactionPopover from './smart-transactions-popover'; import SmartTransactionPopover from './smart-transactions-popover';
export default { export default {
@ -20,7 +20,7 @@ export const DefaultStory: StoryFn<typeof SmartTransactionPopover> = () => {
return ( return (
<> <>
<Button variant={BUTTON_VARIANT.PRIMARY} onClick={toggleModal}> <Button variant={ButtonVariant.Primary} onClick={toggleModal}>
Open modal Open modal
</Button> </Button>
{isShowingModal && ( {isShowingModal && (

6
ui/pages/swaps/prepare-swap-page/smart-transactions-popover.tsx
View File

@ -16,7 +16,7 @@ import {
Text, Text,
Box, Box,
Button, Button,
BUTTON_VARIANT, ButtonVariant,
} from '../../../components/component-library'; } from '../../../components/component-library';
interface Props { interface Props {
@ -80,7 +80,7 @@ export default function SmartTransactionsPopover({
</Text> </Text>
<Button <Button
variant={BUTTON_VARIANT.PRIMARY} variant={ButtonVariant.Primary}
onClick={onEnableSmartTransactionsClick} onClick={onEnableSmartTransactionsClick}
width={BlockSize.Full} width={BlockSize.Full}
> >
@ -89,7 +89,7 @@ export default function SmartTransactionsPopover({
<Button <Button
type="link" type="link"
variant={BUTTON_VARIANT.LINK} variant={ButtonVariant.Link}
onClick={onCloseSmartTransactionsOptInPopover} onClick={onCloseSmartTransactionsOptInPopover}
width={BlockSize.Full} width={BlockSize.Full}
> >