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:
parent
7149da8d3d
commit
6781171d06
@ -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';
|
||||
|
21
ui/components/component-library/tag/README.mdx
Normal file
21
ui/components/component-library/tag/README.mdx
Normal 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
|
1
ui/components/component-library/tag/index.js
Normal file
1
ui/components/component-library/tag/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { Tag } from './tag';
|
50
ui/components/component-library/tag/tag.js
Normal file
50
ui/components/component-library/tag/tag.js
Normal 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,
|
||||
};
|
6
ui/components/component-library/tag/tag.scss
Normal file
6
ui/components/component-library/tag/tag.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.tag {
|
||||
height: auto;
|
||||
width: max-content;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
26
ui/components/component-library/tag/tag.stories.js
Normal file
26
ui/components/component-library/tag/tag.stories.js
Normal 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';
|
13
ui/components/component-library/tag/tag.test.js
Normal file
13
ui/components/component-library/tag/tag.test.js
Normal 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');
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue
Block a user