feat: tag component (#3262)

apps/gallery-new/.storybook/preview.tsx

@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'light',
-          value: '#FFFFF'
+          value: '#FFFFFF'
         }
       ]
     },

apps/gallery-new/stories/composites/wui-tag.stories.ts

@@ -2,28 +2,34 @@ import type { Meta } from '@storybook/web-components'
 import '@reown/appkit-ui-new/src/composites/wui-tag'
 import type { WuiTag } from '@reown/appkit-ui-new/src/composites/wui-tag'
 import { html } from 'lit'
-import { tagOptions } from '../../utils/PresetUtils'
+import { iconOptions, tagOptions } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiTag>
 
 export default {
   title: 'Composites/wui-tag',
   args: {
-    variant: 'main',
-    size: 'lg'
+    variant: 'accent',
+    size: 'md',
+    icon: undefined
   },
   argTypes: {
     variant: {
       options: tagOptions,
       control: { type: 'select' }
     },
     size: {
-      options: ['lg', 'md'],
+      options: ['md', 'sm'],
+      control: { type: 'select' }
+    },
+    icon: {
+      options: [undefined, ...iconOptions],
       control: { type: 'select' }
     }
   }
 } as Component
 
 export const Default: Component = {
-  render: args => html`<wui-tag size=${args.size} variant=${args.variant}>Recent</wui-tag>`
+  render: args =>
+    html`<wui-tag icon=${args.icon} size=${args.size} variant=${args.variant}>Recent</wui-tag>`
 }

apps/gallery-new/utils/PresetUtils.ts

@@ -22,7 +22,7 @@ import type {
   PlacementType,
   ButtonShortcutVariant,
   SpacingType,
-  TagType,
+  TagVariant,
   TextAlign,
   TextType,
   ThemeType,
@@ -315,7 +315,14 @@ export const cardSelectOptions: CardSelectType[] = ['network', 'wallet']
 
 export const backgroundOptions: BackgroundType[] = ['opaque', 'transparent']
 
-export const tagOptions: TagType[] = ['main', 'shade', 'error', 'success']
+export const tagOptions: TagVariant[] = [
+  'accent',
+  'info',
+  'success',
+  'warning',
+  'error',
+  'certified'
+]
 
 export const accountEntryOptions: AccountEntryType[] = ['icon', 'image']
 

packages/ui-new/src/composites/wui-tag/index.ts

@@ -2,7 +2,7 @@ import { html, LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 import '../../components/wui-text/index.js'
 import { resetStyles } from '../../utils/ThemeUtil.js'
-import type { TagType } from '../../utils/TypeUtil.js'
+import type { TagVariant, TagSize, IconType } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
@@ -11,17 +11,21 @@ export class WuiTag extends LitElement {
   public static override styles = [resetStyles, styles]
 
   // -- State & Properties -------------------------------- //
-  @property() public variant: TagType = 'main'
+  @property() public variant: TagVariant = 'accent'
 
-  @property() public size: 'lg' | 'md' = 'lg'
+  @property() public size: TagSize = 'md'
+
+  @property() public icon: IconType | undefined = undefined
 
   // -- Render -------------------------------------------- //
   public override render() {
     this.dataset['variant'] = this.variant
     this.dataset['size'] = this.size
-    const textVariant = this.size === 'md' ? 'mini-700' : 'micro-700'
+    const textVariant = this.size === 'md' ? 'md-medium' : 'sm-medium'
+    const iconSize = this.size === 'md' ? 'sm' : 'xs'
 
     return html`
+      ${this.icon ? html`<wui-icon size=${iconSize} name=${this.icon}></wui-icon>` : null}
       <wui-text data-variant=${this.variant} variant=${textVariant} color="inherit">
         <slot></slot>
       </wui-text>

packages/ui-new/src/composites/wui-tag/styles.ts

@@ -1,44 +1,52 @@
-import { css } from 'lit'
+import { css } from '../../utils/ThemeHelperUtil.js'
 
 export default css`
   :host {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: var(--wui-spacing-m);
-    padding: 0 var(--wui-spacing-3xs) !important;
-    border-radius: var(--wui-border-radius-5xs);
+    gap: ${({ spacing }) => spacing[1]};
   }
 
-  :host > wui-text {
-    transform: translateY(5%);
+  :host([data-variant='accent']) {
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+    color: ${({ tokens }) => tokens.core.textAccentPrimary};
   }
 
-  :host([data-variant='main']) {
-    background-color: var(--wui-color-accent-glass-015);
-    color: var(--wui-color-accent-100);
+  :host([data-variant='info']) {
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    color: ${({ tokens }) => tokens.theme.textSecondary};
   }
 
-  :host([data-variant='shade']) {
-    background-color: var(--wui-color-gray-glass-010);
-    color: var(--wui-color-fg-200);
+  :host([data-variant='success']) {
+    background-color: ${({ tokens }) => tokens.core.backgroundSuccess};
+    color: ${({ tokens }) => tokens.core.textSuccess};
   }
 
-  :host([data-variant='success']) {
-    background-color: var(--wui-icon-box-bg-success-100);
-    color: var(--wui-color-success-100);
+  :host([data-variant='warning']) {
+    background-color: ${({ tokens }) => tokens.core.backgroundWarning};
+    color: ${({ tokens }) => tokens.core.textWarning};
   }
 
   :host([data-variant='error']) {
-    background-color: var(--wui-icon-box-bg-error-100);
-    color: var(--wui-color-error-100);
+    background-color: ${({ tokens }) => tokens.core.backgroundError};
+    color: ${({ tokens }) => tokens.core.textError};
+  }
+
+  :host([data-variant='certified']) {
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    color: ${({ tokens }) => tokens.theme.textSecondary};
   }
 
-  :host([data-size='lg']) {
-    padding: 11px 5px !important;
+  :host([data-size='md']) {
+    height: 30px;
+    padding: 0 ${({ spacing }) => spacing[2]};
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
   }
 
-  :host([data-size='lg']) > wui-text {
-    transform: translateY(2%);
+  :host([data-size='sm']) {
+    height: 20px;
+    padding: 0 ${({ spacing }) => spacing[1]};
+    border-radius: ${({ borderRadius }) => borderRadius[1]};
   }
 `

packages/ui-new/src/utils/TypeUtil.ts

@@ -227,6 +227,10 @@ export type ToggleSize = 'lg' | 'md' | 'sm'
 
 export type CheckboxSize = 'lg' | 'md' | 'sm'
 
+export type TagVariant = 'accent' | 'info' | 'success' | 'warning' | 'error' | 'certified'
+
+export type TagSize = 'md' | 'sm'
+
 export type ButtonVariant =
   | 'accent-primary'
   | 'accent-secondary'