mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Migrate component to TS: Tag (#20086)
* migrating Tag to TS --------- Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
Dhruv
GitHub
parent
a01e4fa00a
commit
edbc728014
@ -1,16 +0,0 @@
|
||||
// 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="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
|
||||
>
|
||||
Imported
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
|
||||
data-testid="tag"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
|
||||
>
|
||||
Imported
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1 +0,0 @@
|
||||
export { Tag } from './tag';
|
||||
2
ui/components/component-library/tag/index.ts
Normal file
2
ui/components/component-library/tag/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { Tag } from './tag';
|
||||
export type { TagProps } from './tag.types';
|
||||
@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
AlignItems,
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
BorderRadius,
|
||||
DISPLAY,
|
||||
JustifyContent,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { Text } from '..';
|
||||
|
||||
export const Tag = ({ label, className, labelProps, ...props }) => {
|
||||
return (
|
||||
<Box
|
||||
className={classnames('mm-tag', className)}
|
||||
backgroundColor={BackgroundColor.backgroundDefault}
|
||||
borderColor={BorderColor.borderDefault}
|
||||
borderWidth={1}
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
borderRadius={BorderRadius.pill}
|
||||
display={DISPLAY.INLINE_BLOCK}
|
||||
{...props}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} {...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: PropTypes.object,
|
||||
/**
|
||||
* Additional classNames to be added to the Tag component
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Tag also accepts all props from Box
|
||||
*/
|
||||
...Box.propTypes,
|
||||
};
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import README from './README.mdx';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { Tag } from './tag';
|
||||
import README from './README.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/Tag',
|
||||
|
||||
component: Tag,
|
||||
parameters: {
|
||||
docs: {
|
||||
@ -19,13 +19,13 @@ export default {
|
||||
args: {
|
||||
label: 'Imported',
|
||||
},
|
||||
};
|
||||
} as Meta<typeof Tag>;
|
||||
|
||||
export const DefaultStory = (args) => <Tag {...args} />;
|
||||
export const DefaultStory: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
|
||||
export const Label: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
|
||||
|
||||
Label.args = {
|
||||
label: 'Label Story',
|
||||
44
ui/components/component-library/tag/tag.tsx
Normal file
44
ui/components/component-library/tag/tag.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Text, Box } from '..';
|
||||
import type { PolymorphicRef, BoxProps } from '../box';
|
||||
|
||||
import {
|
||||
AlignItems,
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
BorderRadius,
|
||||
Display,
|
||||
JustifyContent,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import { TagComponent, TagProps } from './tag.types';
|
||||
|
||||
export const Tag: TagComponent = React.forwardRef(
|
||||
<C extends React.ElementType = 'div'>(
|
||||
{ label, className = '', labelProps, ...props }: TagProps<C>,
|
||||
ref: PolymorphicRef<C>,
|
||||
) => {
|
||||
return (
|
||||
<Box
|
||||
ref={ref}
|
||||
className={classnames('mm-tag', className)}
|
||||
backgroundColor={BackgroundColor.backgroundDefault}
|
||||
borderColor={BorderColor.borderDefault}
|
||||
borderWidth={1}
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
borderRadius={BorderRadius.pill}
|
||||
display={Display.InlineBlock}
|
||||
{...(props as BoxProps<C>)}
|
||||
>
|
||||
<Text variant={TextVariant.bodySm} {...labelProps}>
|
||||
{label}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
);
|
||||
27
ui/components/component-library/tag/tag.types.ts
Normal file
27
ui/components/component-library/tag/tag.types.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { TextProps, ValidTagType } from '../text/text.types';
|
||||
import type {
|
||||
StyleUtilityProps,
|
||||
PolymorphicComponentPropWithRef,
|
||||
} from '../box';
|
||||
|
||||
export interface TagStyleUtilityProps extends StyleUtilityProps {
|
||||
/**
|
||||
* The text content of the Tag component, can either be a string or ReactNode
|
||||
*/
|
||||
label?: string | React.ReactNode;
|
||||
/**
|
||||
* The label props of the component. Most Text component props can be used
|
||||
*/
|
||||
labelProps?: TextProps<ValidTagType>;
|
||||
/**
|
||||
* Additional classNames to be added to the Tag component
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export type TagProps<C extends React.ElementType> =
|
||||
PolymorphicComponentPropWithRef<C, TagStyleUtilityProps>;
|
||||
|
||||
export type TagComponent = <C extends React.ElementType = 'div'>(
|
||||
props: TagProps<C>,
|
||||
) => React.ReactElement | null;
|
||||
@ -61,7 +61,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="box mm-tag box--margin-right-1 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--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
|
||||
class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
|
||||
@ -83,7 +83,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
|
||||
</p>
|
||||
</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--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
|
||||
class="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
|
||||
@ -135,7 +135,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
|
||||
Tags
|
||||
</p>
|
||||
<div
|
||||
class="box mm-tag box--margin-right-1 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"
|
||||
class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||||
|
||||
@ -85,8 +85,6 @@ export const SnapDetailHeader = ({
|
||||
labelProps={{
|
||||
color: TextColor.textAlternative,
|
||||
}}
|
||||
className=""
|
||||
height={2}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
@ -152,7 +150,7 @@ export const SnapDetailHeader = ({
|
||||
<Tag
|
||||
color={TextColor.infoDefault}
|
||||
backgroundColor={BackgroundColor.infoMuted}
|
||||
borderColor={BackgroundColor.infoMuted}
|
||||
borderColor={BorderColor.infoMuted}
|
||||
label={
|
||||
<Box
|
||||
display={Display.Flex}
|
||||
@ -180,7 +178,7 @@ export const SnapDetailHeader = ({
|
||||
className=""
|
||||
color={TextColor.infoDefault}
|
||||
backgroundColor={BackgroundColor.infoMuted}
|
||||
borderColor={BackgroundColor.infoMuted}
|
||||
borderColor={BorderColor.infoMuted}
|
||||
label={
|
||||
<Box
|
||||
display={Display.Flex}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user