Merge pull request #2279 from adevinta/2243-component-tag-new-intent-…

…surface feat(tag): add "surface" intent
adevinta · Jun 28, 2024 · 6dcf4de · 6dcf4de
2 parents 8bd3855 + d79192d
commit 6dcf4de
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/packages/components/tag/src/Tag.stories.tsx b/packages/components/tag/src/Tag.stories.tsx
@@ -24,6 +24,7 @@ const intents: TagProps['intent'][] = [
   'danger',
   'info',
   'neutral',
+  'surface',
 ]
 const designs: TagProps['design'][] = ['filled', 'outlined', 'tinted']
 
@@ -43,11 +44,17 @@ export const Intent: StoryFn = _args => (
   <div className="flex flex-col gap-md">
     {designs.map(design => (
       <div key={design} className="flex flex-row gap-md">
-        {intents.map(intent => (
-          <Tag key={intent} design={design} intent={intent}>
-            {intent} tag
-          </Tag>
-        ))}
+        {intents.map(intent => {
+          if (design !== 'filled' && intent === 'surface') {
+            return <span className="self-center text-small">N/A</span>
+          }
+
+          return (
+            <Tag key={intent} design={design} intent={intent as any}>
+              {intent} tag
+            </Tag>
+          )
+        })}
       </div>
     ))}
   </div>

diff --git a/packages/components/tag/src/Tag.styles.tsx b/packages/components/tag/src/Tag.styles.tsx
@@ -28,7 +28,18 @@ export const tagStyles = cva(
        */
       intent: makeVariants<
         'intent',
-        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'info', 'neutral', 'danger']
+        [
+          'main',
+          'support',
+          'accent',
+          'basic',
+          'success',
+          'alert',
+          'info',
+          'neutral',
+          'danger',
+          'surface',
+        ]
       >({
         main: [],
         support: [],
@@ -39,6 +50,7 @@ export const tagStyles = cva(
         danger: [],
         info: [],
         neutral: [],
+        surface: [],
       }),
     },
     compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],

diff --git a/packages/components/tag/src/Tag.tsx b/packages/components/tag/src/Tag.tsx
@@ -3,7 +3,7 @@ import { forwardRef, type PropsWithChildren } from 'react'
 
 import { tagStyles, type TagStylesProps } from './Tag.styles'
 
-export interface TagProps
+interface BaseTagProps
   extends PropsWithChildren<React.ButtonHTMLAttributes<HTMLSpanElement>>,
     TagStylesProps {
   /**
@@ -12,6 +12,21 @@ export interface TagProps
   asChild?: boolean
 }
 
+interface FilteredDesignIntent<
+  Design extends TagProps['design'],
+  K extends TagStylesProps['intent'] | never = never,
+> {
+  design?: Design
+  intent?: Exclude<TagStylesProps['intent'], K>
+}
+
+type ValidTagDesignIntent =
+  | FilteredDesignIntent<'tinted', 'surface'>
+  | FilteredDesignIntent<'outlined', 'surface'>
+  | FilteredDesignIntent<'filled'>
+
+export type TagProps = BaseTagProps & ValidTagDesignIntent
+
 export const Tag = forwardRef<HTMLButtonElement, TagProps>(
   ({ design = 'filled', intent = 'basic', asChild, className, ...others }, ref) => {
     const Component = asChild ? Slot : 'span'

diff --git a/packages/components/tag/src/variants/filled.ts b/packages/components/tag/src/variants/filled.ts
@@ -46,4 +46,9 @@ export const filledVariants = [
     design: 'filled',
     class: tw(['bg-neutral', 'text-on-neutral']),
   },
+  {
+    intent: 'surface',
+    design: 'filled',
+    class: tw(['bg-surface', 'text-on-surface']),
+  },
 ] as const