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

Added Tag Component (#15947)

* updated tag component and stashed storyshot update

* updated styling for tags

* updated test component for tag

* updated tag styles as per figma

* updated borderRadius prop for tag

* removed unused import

* updated Tag component with labelProps

* updated README

* updated Typography with Tag
This commit is contained in:
Nidhi Kumari 2022-10-12 23:05:51 +05:30 committed by GitHub
parent 7149da8d3d
commit 6781171d06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 118 additions and 0 deletions

View File

@ -7,5 +7,6 @@
@import 'button-primary/button-primary';
@import 'button-secondary/button-secondary';
@import 'icon/icon';
@import 'tag/tag';
@import 'text/text';
@import 'text-field-base/text-field-base';

View File

@ -0,0 +1,21 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Tag } from './tag';
# Tag
The `Tag` is a component used to display text within a container.
<Canvas>
<Story id="ui-components-component-library-tag-tag-stories-js--default-story" />
</Canvas>
## Props
The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
<ArgsTable of={Tag} />
### Label
The text content of the `Tag` component

View File

@ -0,0 +1 @@
export { Tag } from './tag';

View File

@ -0,0 +1,50 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { Text } from '../text';
import {
ALIGN_ITEMS,
BORDER_RADIUS,
COLORS,
DISPLAY,
JUSTIFY_CONTENT,
TEXT,
} from '../../../helpers/constants/design-system';
export const Tag = ({ label, className, labelProps, ...props }) => {
return (
<Box
className={classnames('tag', className)}
backgroundColor={COLORS.BACKGROUND_DEFAULT}
borderColor={COLORS.BORDER_DEFAULT}
borderWidth={1}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
paddingLeft={1}
paddingRight={1}
borderRadius={BORDER_RADIUS.PILL}
display={DISPLAY.INLINE_BLOCK}
{...props}
>
<Text variant={TEXT.BODY_SM} {...labelProps}>
{label}
</Text>
</Box>
);
};
Tag.propTypes = {
/**
* The text content of the Tag component
*/
label: PropTypes.string,
/**
* The label props of the component. Most Text component props can be used
*/
labelProps: Text.propTypes,
/**
* Additional classNames to be added to the Tag component
*/
className: PropTypes.string,
};

View File

@ -0,0 +1,6 @@
.tag {
height: auto;
width: max-content;
padding-top: 1px;
padding-bottom: 1px;
}

View File

@ -0,0 +1,26 @@
import React from 'react';
import README from './README.mdx';
import { Tag } from './tag';
export default {
title: 'Components/ComponentLibrary/Tag',
id: __filename,
component: Tag,
parameters: {
docs: {
page: README,
},
},
argTypes: {
label: {
control: 'text',
},
},
args: {
label: 'Imported',
},
};
export const DefaultStory = (args) => <Tag {...args} />;
DefaultStory.storyName = 'Default';

View File

@ -0,0 +1,13 @@
/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { Tag } from './tag';
describe('Tag', () => {
it('should render the label inside the tag', () => {
const { getByTestId } = render(<Tag data-testid="tag" label="Imported" />);
expect(getByTestId('tag')).toBeDefined();
expect(getByTestId('tag')).toHaveTextContent('Imported');
});
});