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

tag component housekeeping (#16355)

Browse Source 
* tag component housekeeping

* added snapshot testing
This commit is contained in:
Nidhi Kumari 2022-11-04 01:48:16 +05:30 committed by GitHub
parent 8bdf820c70
commit 58da1d8075
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/component-library/tag/README.mdx
View File

@ -19,3 +19,7 @@ The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-bo
### Label ### Label
The text content of the `Tag` component The text content of the `Tag` component
<Canvas>
<Story id="ui-components-component-library-tag-tag-stories-js--label" />
</Canvas>

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

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Tag should render the label inside the tag and match snapshot 1`] = `
<div>
<div
class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
data-testid="tag"
>
<p
class="box text text--body-sm text--color-text-default box--flex-direction-row"
>
Imported
</p>
</div>
</div>
`;

6
ui/components/component-library/tag/tag.js
View File

@ -15,7 +15,7 @@ import {
export const Tag = ({ label, className, labelProps, ...props }) => { export const Tag = ({ label, className, labelProps, ...props }) => {
return ( return (
<Box <Box
className={classnames('tag', className)} className={classnames('mm-tag', className)}
backgroundColor={COLORS.BACKGROUND_DEFAULT} backgroundColor={COLORS.BACKGROUND_DEFAULT}
borderColor={COLORS.BORDER_DEFAULT} borderColor={COLORS.BORDER_DEFAULT}
borderWidth={1} borderWidth={1}
@ -47,4 +47,8 @@ Tag.propTypes = {
* Additional classNames to be added to the Tag component * Additional classNames to be added to the Tag component
*/ */
className: PropTypes.string, className: PropTypes.string,
/**
* Tag also accepts all props from Box
*/
...Box.propTypes,
}; };

2
ui/components/component-library/tag/tag.scss
View File

@ -1,4 +1,4 @@
.tag { .mm-tag {
height: auto; height: auto;
width: max-content; width: max-content;
padding-top: 1px; padding-top: 1px;

6
ui/components/component-library/tag/tag.stories.js
View File

@ -24,3 +24,9 @@ export default {
export const DefaultStory = (args) => <Tag {...args} />; export const DefaultStory = (args) => <Tag {...args} />;
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
Label.args = {
label: 'Label Story',
};

7
ui/components/component-library/tag/tag.test.js
View File

@ -5,9 +5,12 @@ import React from 'react';
import { Tag } from './tag'; import { Tag } from './tag';
describe('Tag', () => { describe('Tag', () => {
it('should render the label inside the tag', () => { it('should render the label inside the tag and match snapshot', () => {
const { getByTestId } = render(<Tag data-testid="tag" label="Imported" />); const { getByTestId, container } = render(
<Tag data-testid="tag" label="Imported" />,
);
expect(getByTestId('tag')).toBeDefined(); expect(getByTestId('tag')).toBeDefined();
expect(getByTestId('tag')).toHaveTextContent('Imported'); expect(getByTestId('tag')).toHaveTextContent('Imported');
expect(container).toMatchSnapshot();
}); });
}); });