feat: Add Tag component for React Native

packages/design-system-react-native/src/components/Tag/README.md

@@ -0,0 +1,76 @@
+# Tag
+
+A tag is a compact, non-interactive or interactive label used to categorize, annotate, or highlight metadata. Tags help users quickly scan, filter, and understand content relationships at a glance.
+
+**Figma:** [MMDS Components — Tag](https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-MMDS-Components?node-id=12339-1167)
+
+```tsx
+import { Tag } from '@metamask/design-system-react-native';
+
+<Tag>Default Example</Tag>;
+```
+
+## Props
+
+### `children`
+
+The content of the `Tag` component.
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import { Tag } from '@metamask/design-system-react-native';
+
+<Tag>
+  <Text>Custom children content</Text>
+</Tag>;
+```
+
+### `twClassName`
+
+Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to:
+
+- Add new styles that don't exist in the default component
+- Override the component's default styles when needed
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+```tsx
+import { Tag } from '@metamask/design-system-react-native';
+
+// Add additional styles
+<Tag twClassName="mt-4">
+  <Text>Custom Background</Text>
+</Tag>
+
+// Override default styles
+<Tag twClassName="bg-error-default">
+  <Text>Override Background</Text>
+</Tag>
+```
+
+### `style`
+
+Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible. Use `style` with `tw.style()` for conditionals or dynamic values.
+
+| TYPE                   | REQUIRED | DEFAULT     |
+| ---------------------- | -------- | ----------- |
+| `StyleProp<ViewStyle>` | No       | `undefined` |
+
+```tsx
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+
+export const ConditionalExample = ({ isActive }: { isActive: boolean }) => {
+  const tw = useTailwind();
+
+  return (
+    <Tag style={tw.style('bg-default', isActive && 'bg-success-default')}>
+      <Text>Conditional styling</Text>
+    </Tag>
+  );
+};
+```

packages/design-system-react-native/src/components/Tag/Tag.constants.ts

@@ -0,0 +1,52 @@
+import {
+  BoxAlignItems,
+  BoxBackgroundColor,
+  BoxFlexDirection,
+  IconColor,
+  TextColor,
+} from '../../types';
+
+export const TagVariant = {
+  Neutral: 'neutral',
+  Success: 'success',
+  Error: 'error',
+  Warning: 'warning',
+  Info: 'info',
+} as const;
+export type TagVariant = (typeof TagVariant)[keyof typeof TagVariant];
+
+export const MAP_TAG_VARIANT_BACKGROUND: Record<
+  TagVariant,
+  BoxBackgroundColor
+> = {
+  [TagVariant.Neutral]: BoxBackgroundColor.BackgroundMuted,
+  [TagVariant.Success]: BoxBackgroundColor.SuccessMuted,
+  [TagVariant.Error]: BoxBackgroundColor.ErrorMuted,
+  [TagVariant.Warning]: BoxBackgroundColor.WarningMuted,
+  [TagVariant.Info]: BoxBackgroundColor.InfoMuted,
+};
+
+export const MAP_TAG_VARIANT_TEXT_COLOR: Record<TagVariant, TextColor> = {
+  [TagVariant.Neutral]: TextColor.TextDefault,
+  [TagVariant.Success]: TextColor.SuccessDefault,
+  [TagVariant.Error]: TextColor.ErrorDefault,
+  [TagVariant.Warning]: TextColor.WarningDefault,
+  [TagVariant.Info]: TextColor.InfoDefault,
+};
+
+export const MAP_TAG_VARIANT_ICON_COLOR: Record<TagVariant, IconColor> = {
+  [TagVariant.Neutral]: IconColor.IconDefault,
+  [TagVariant.Success]: IconColor.SuccessDefault,
+  [TagVariant.Error]: IconColor.ErrorDefault,
+  [TagVariant.Warning]: IconColor.WarningDefault,
+  [TagVariant.Info]: IconColor.InfoDefault,
+};
+
+/** Vertical padding (Tailwind `py-*`) */
+export const TAG_PADDING_VERTICAL_TW = 'py-0';
+
+export const TAG_LAYOUT = {
+  flexDirection: BoxFlexDirection.Row,
+  alignItems: BoxAlignItems.Center,
+  twClassName: 'rounded-md self-start gap-0.5',
+} as const;

packages/design-system-react-native/src/components/Tag/Tag.figma.tsx

@@ -0,0 +1,49 @@
+// import figma needs to remain as figma otherwise it breaks code connect
+// eslint-disable-next-line import-x/no-named-as-default
+import figma from '@figma/code-connect';
+import React from 'react';
+
+import { IconName } from '../Icon';
+
+import { Tag } from './Tag';
+
+import { TagVariant } from '.';
+
+/**
+ * Code Connect for Tag (React Native).
+ * If Dev Mode shows different property names, change the first argument to
+ * `figma.enum` / `figma.string` (e.g. `Type` instead of `variant`, `Text` instead of `Label`).
+ */
+
+figma.connect(
+  Tag,
+  'https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-MMDS-Components?node-id=12339-6553',
+  {
+    props: {
+      variant: figma.enum('variant', {
+        Neutral: TagVariant.Neutral,
+        Success: TagVariant.Success,
+        Error: TagVariant.Error,
+        Warning: TagVariant.Warning,
+        Info: TagVariant.Info,
+      }),
+      label: figma.string('Label'),
+      startIconName: figma.boolean('startIcon (Figma Only)', {
+        true: IconName.Tag,
+        false: undefined,
+      }),
+      endIconName: figma.boolean('endIcon (Figma Only)', {
+        true: IconName.Tag,
+        false: undefined,
+      }),
+    },
+    example: ({ variant, label, startIconName, endIconName }) => (
+      <Tag
+        variant={variant}
+        label={label}
+        startIconName={startIconName}
+        endIconName={endIconName}
+      />
+    ),
+  },
+);

packages/design-system-react-native/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React from 'react';
+
+import { IconName } from '../Icon';
+
+import { Tag } from './Tag';
+import { TagVariant } from './Tag.constants';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Variants: Story = {
+  render: () => (
+    <>
+      <Tag variant={TagVariant.Neutral}>Neutral</Tag>
+      <Tag variant={TagVariant.Success} twClassName="mt-2">
+        Success
+      </Tag>
+      <Tag variant={TagVariant.Error} twClassName="mt-2">
+        Error
+      </Tag>
+      <Tag variant={TagVariant.Warning} twClassName="mt-2">
+        Warning
+      </Tag>
+      <Tag variant={TagVariant.Info} twClassName="mt-2">
+        Info
+      </Tag>
+    </>
+  ),
+};
+
+export const NoIcon: Story = {
+  render: () => <Tag label="Tag" />,
+};
+
+export const StartIcon: Story = {
+  render: () => <Tag startIconName={IconName.Warning} label="Tag" />,
+};
+
+export const EndIcon: Story = {
+  render: () => <Tag endIconName={IconName.ArrowRight} label="Tag" />,
+};
+
+const renderStartAndEndIcons = () => (
+  <Tag
+    startIconName={IconName.Warning}
+    endIconName={IconName.ArrowRight}
+    label="Tag"
+  />
+);
+
+export const StartAndEndIcons: Story = {
+  render: renderStartAndEndIcons,
+};

packages/design-system-react-native/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,147 @@
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+
+import { IconName } from '../Icon';
+
+import { Tag } from './Tag';
+
+describe('Tag', () => {
+  let tw: ReturnType<typeof useTailwind>;
+
+  beforeAll(() => {
+    const { result } = renderHook(() => useTailwind());
+    tw = result.current;
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(
+      <Tag>
+        <Text>Hello, World!</Text>
+      </Tag>,
+    );
+
+    expect(getByText('Hello, World!')).toBeOnTheScreen();
+  });
+
+  it('applies the correct styles', () => {
+    const { getByTestId } = render(
+      <Tag twClassName="bg-default" testID="component-name">
+        <Text>Styled Content</Text>
+      </Tag>,
+    );
+
+    expect(getByTestId('component-name')).toHaveStyle(tw`bg-default`);
+  });
+
+  it('accepts testID prop', () => {
+    const { getByTestId } = render(
+      <Tag testID="component-name">
+        <Text>Test Content</Text>
+      </Tag>,
+    );
+
+    expect(getByTestId('component-name')).toBeOnTheScreen();
+  });
+
+  it('renders label prop as text', () => {
+    const { getByText } = render(
+      <Tag label="From label" testID="tag-with-label" />,
+    );
+
+    expect(getByText('From label')).toBeOnTheScreen();
+  });
+
+  it('renders string children with tag text styling when label is omitted', () => {
+    const { getByText } = render(<Tag>String child</Tag>);
+
+    expect(getByText('String child')).toBeOnTheScreen();
+  });
+
+  it('renders number children with tag text styling when label is omitted', () => {
+    const { getByText } = render(<Tag>{42}</Tag>);
+
+    expect(getByText('42')).toBeOnTheScreen();
+  });
+
+  it('prefers label over string children', () => {
+    const { getByText, queryByText } = render(
+      <Tag label="Label wins">Children lose</Tag>,
+    );
+
+    expect(getByText('Label wins')).toBeOnTheScreen();
+    expect(queryByText('Children lose')).not.toBeOnTheScreen();
+  });
+
+  it('renders start icon when startIconName is provided', () => {
+    const { getByTestId } = render(
+      <Tag
+        label="Tagged"
+        startIconName={IconName.Tag}
+        startIconProps={{ testID: 'tag-start-icon' }}
+      />,
+    );
+
+    expect(getByTestId('tag-start-icon')).toBeOnTheScreen();
+  });
+
+  it('renders end icon when endIconName is provided', () => {
+    const { getByTestId } = render(
+      <Tag
+        label="Tagged"
+        endIconName={IconName.Tag}
+        endIconProps={{ testID: 'tag-end-icon' }}
+      />,
+    );
+
+    expect(getByTestId('tag-end-icon')).toBeOnTheScreen();
+  });
+
+  it('resolves icon from startIconProps.name when startIconName is omitted', () => {
+    const { getByTestId } = render(
+      <Tag
+        label="From props"
+        startIconProps={{ name: IconName.Tag, testID: 'tag-start-icon' }}
+      />,
+    );
+
+    expect(getByTestId('tag-start-icon')).toBeOnTheScreen();
+  });
+
+  it('does not render icons when no name is provided', () => {
+    const { queryByTestId } = render(
+      <Tag
+        label="No icons"
+        startIconProps={{ testID: 'tag-start-icon' }}
+        endIconProps={{ testID: 'tag-end-icon' }}
+      />,
+    );
+
+    expect(queryByTestId('tag-start-icon')).not.toBeOnTheScreen();
+    expect(queryByTestId('tag-end-icon')).not.toBeOnTheScreen();
+  });
+
+  it('renders startAccessory when no start icon', () => {
+    const { getByTestId } = render(
+      <Tag
+        label="With accessory"
+        startAccessory={<Text testID="tag-start-accessory">→</Text>}
+      />,
+    );
+
+    expect(getByTestId('tag-start-accessory')).toBeOnTheScreen();
+  });
+
+  it('renders endAccessory when no end icon', () => {
+    const { getByTestId } = render(
+      <Tag
+        label="With end accessory"
+        endAccessory={<Text testID="tag-end-accessory">←</Text>}
+      />,
+    );
+
+    expect(getByTestId('tag-end-accessory')).toBeOnTheScreen();
+  });
+});