m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

button secondary housekeeping (#16495)

Browse Source 
* button secondary housekeeping

* add snapshot

* add export constants
This commit is contained in:
Garrett Bear 2022-11-15 12:48:24 -08:00 committed by GitHub
parent f9ed4a560b
commit d4bf8adaf8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1 +1,2 @@
export { ButtonPrimary } from './button-primary'; export { ButtonPrimary } from './button-primary';
export { BUTTON_PRIMARY_SIZES } from './button-primary.constants';

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

@ -43,7 +43,7 @@ import { ButtonSecondary } from '../ui/component-library/button/button-secondary
### Danger ### Danger
Use the `danger` boolean prop to change the `ButtonPrimary` to danger color. Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
<Canvas> <Canvas>
<Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--danger" /> <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--danger" />

16
ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ButtonSecondary should render button element correctly 1`] = `
<div>
<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="button-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 Secondary
</span>
</button>
</div>
`;

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

@ -32,7 +32,7 @@ ButtonSecondary.propTypes = {
*/ */
danger: PropTypes.bool, danger: PropTypes.bool,
/** /**
* The possible size values for ButtonSecondary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', * Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
* Default value is 'SIZES.MD'. * Default value is 'SIZES.MD'.
*/ */
size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)), size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)),

12
ui/components/component-library/button-secondary/button-secondary.stories.js
View File

@ -1,5 +1,9 @@
import React from 'react'; import React from 'react';
import { ALIGN_ITEMS, DISPLAY } from '../../../helpers/constants/design-system'; import {
ALIGN_ITEMS,
DISPLAY,
SIZES,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon'; import { ICON_NAMES } from '../icon';
import { ButtonSecondary } from './button-secondary'; import { ButtonSecondary } from './button-secondary';
@ -110,13 +114,13 @@ DefaultStory.storyName = 'Default';
export const Size = (args) => ( export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}> <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.SM}> <ButtonSecondary {...args} size={SIZES.SM}>
Small Button Small Button
</ButtonSecondary> </ButtonSecondary>
<ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.MD}> <ButtonSecondary {...args} size={SIZES.MD}>
Medium (Default) Button Medium (Default) Button
</ButtonSecondary> </ButtonSecondary>
<ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.LG}> <ButtonSecondary {...args} size={SIZES.LG}>
Large Button Large Button
</ButtonSecondary> </ButtonSecondary>
</Box> </Box>

1
ui/components/component-library/button-secondary/button-secondary.test.js
View File

@ -14,6 +14,7 @@ describe('ButtonSecondary', () => {
expect(getByText('Button Secondary')).toBeDefined(); expect(getByText('Button Secondary')).toBeDefined();
expect(container.querySelector('button')).toBeDefined(); expect(container.querySelector('button')).toBeDefined();
expect(getByTestId('button-secondary')).toHaveClass('mm-button'); expect(getByTestId('button-secondary')).toHaveClass('mm-button');
expect(container).toMatchSnapshot();
}); });
it('should render anchor element correctly', () => { it('should render anchor element correctly', () => {

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

@ -1 +1,2 @@
export { ButtonSecondary } from './button-secondary'; export { ButtonSecondary } from './button-secondary';
export { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';