feat(ui): add address tag ui component LW-10061

packages/ui/src/design-system/address-tags/address-tag.component.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren, HTMLAttributes } from 'react';
+import React from 'react';
+
+import cs from 'classnames';
+
+import * as cx from './address-tag.css';
+
+import type { AddressTagScheme } from './types';
+
+export type AddressBaseTageProps = PropsWithChildren<
+  HTMLAttributes<HTMLDivElement> & {
+    variant: AddressTagScheme;
+  }
+>;
+
+export const AddressTag = ({
+  children,
+  className,
+  variant,
+  ...restProps
+}: Readonly<AddressBaseTageProps>): JSX.Element => (
+  <div {...restProps} className={cs(className, cx.card({ scheme: variant }))}>
+    {children}
+  </div>
+);

packages/ui/src/design-system/address-tags/address-tag.css.ts

@@ -0,0 +1,30 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+import { vars } from '../../design-tokens';
+
+import { AddressTagScheme } from './types';
+
+export const card = recipe({
+  base: {
+    fontSize: vars.fontSizes.$12,
+    fontWeight: vars.fontWeights.$medium,
+    borderRadius: vars.radius.$medium,
+    padding: [vars.spacing.$4, vars.spacing.$8],
+  },
+  variants: {
+    scheme: {
+      [AddressTagScheme.Own]: {
+        color: vars.colors.$address_tag_own_color,
+        backgroundColor: vars.colors.$address_tag_own_bgColor,
+      },
+      [AddressTagScheme.Handle]: {
+        color: vars.colors.$address_tag_handle_color,
+        backgroundColor: vars.colors.$address_tag_handle_bgColor,
+      },
+      [AddressTagScheme.Foreign]: {
+        color: vars.colors.$address_tag_foreign_color,
+        backgroundColor: vars.colors.$address_tag_foreign_bgColor,
+      },
+    },
+  },
+});

packages/ui/src/design-system/address-tags/address-tags.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
+import { page, Section, Variants } from '../decorators';
+import { Cell, Grid } from '../grid';
+
+import { AddressTag } from './address-tag.component';
+import { AddressTagScheme } from './types';
+
+export default {
+  title: 'AddressTag',
+  decorators: [
+    page({
+      title: 'Address Tag',
+      subtitle: 'Simple component to flag addresses as own, handle or foreign.',
+    }),
+  ],
+} as Meta;
+
+export const Overview = (): JSX.Element => {
+  const variantsData = [
+    {
+      Component: AddressTag,
+      variant: AddressTagScheme.Own,
+    },
+    {
+      Component: AddressTag,
+      variant: AddressTagScheme.Handle,
+    },
+    {
+      Component: AddressTag,
+      variant: AddressTagScheme.Foreign,
+    },
+  ];
+  const renderTable = (showHeader = false): JSX.Element => (
+    <Variants.Table
+      headers={showHeader ? variantsData.map(v => v.variant) : []}
+    >
+      <Variants.Row>
+        {variantsData.map(({ Component, variant }) => (
+          <Variants.Cell key={variant}>
+            <Component variant={variant}>{variant}</Component>
+          </Variants.Cell>
+        ))}
+      </Variants.Row>
+    </Variants.Table>
+  );
+
+  return (
+    <Grid columns="$1">
+      <Cell>
+        <Section title="Main components">
+          <>
+            {renderTable(true)}
+            <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
+              <div style={{ color: 'white' }}>{renderTable()}</div>
+            </LocalThemeProvider>
+          </>
+        </Section>
+      </Cell>
+    </Grid>
+  );
+};

packages/ui/src/design-system/address-tags/index.ts

@@ -0,0 +1 @@
+export { AddressTag } from './address-tag.component';

packages/ui/src/design-system/address-tags/types.ts

@@ -0,0 +1,5 @@
+export enum AddressTagScheme {
+  Own = 'Own',
+  Handle = 'Handle',
+  Foreign = 'Foreign',
+}

packages/ui/src/design-tokens/colors.data.ts

@@ -308,6 +308,13 @@ export const colors = {
   $info_bar_container_bgColor: '',
   $info_bar_message_color: '',
   $info_bar_icon_color: '',
+
+  $address_tag_own_color: '',
+  $address_tag_own_bgColor: '',
+  $address_tag_handle_color: '',
+  $address_tag_handle_bgColor: '',
+  $address_tag_foreign_color: '',
+  $address_tag_foreign_bgColor: '',
 };
 
 export type Colors = typeof colors;

packages/ui/src/design-tokens/theme/dark-theme.css.ts

@@ -409,6 +409,16 @@ const colors: Colors = {
   $info_bar_container_bgColor: darkColorScheme.$primary_dark_grey_plus,
   $info_bar_icon_color: darkColorScheme.$secondary_data_pink,
   $info_bar_message_color: darkColorScheme.$primary_light_grey,
+
+  $address_tag_own_color: darkColorScheme.$secondary_data_pink,
+  $address_tag_own_bgColor: rgba(darkColorScheme.$secondary_data_pink, 0.1),
+  $address_tag_handle_color: darkColorScheme.$primary_accent_purple,
+  $address_tag_handle_bgColor: rgba(
+    darkColorScheme.$primary_accent_purple,
+    0.1,
+  ),
+  $address_tag_foreign_color: darkColorScheme.$primary_dark_grey,
+  $address_tag_foreign_bgColor: darkColorScheme.$primary_light_grey,
 };
 
 const elevation: Elevation = {

packages/ui/src/design-tokens/theme/light-theme.css.ts

@@ -437,6 +437,16 @@ const colors: Colors = {
   $info_bar_container_bgColor: lightColorScheme.$secondary_cream,
   $info_bar_icon_color: lightColorScheme.$secondary_data_pink,
   $info_bar_message_color: lightColorScheme.$primary_black,
+
+  $address_tag_own_color: lightColorScheme.$secondary_data_pink,
+  $address_tag_own_bgColor: rgba(lightColorScheme.$secondary_data_pink, 0.1),
+  $address_tag_handle_color: lightColorScheme.$primary_accent_purple,
+  $address_tag_handle_bgColor: rgba(
+    lightColorScheme.$primary_accent_purple,
+    0.1,
+  ),
+  $address_tag_foreign_color: lightColorScheme.$primary_dark_grey,
+  $address_tag_foreign_bgColor: lightColorScheme.$primary_light_grey,
 };
 
 export const elevation: Elevation = {