feat(chip): add intent designs

adevinta · Aug 23, 2023 · a858e36 · a858e36
1 parent cef8cfc
commit a858e36
Show file tree

Hide file tree

Showing 8 changed files with 427 additions and 14 deletions.
diff --git a/packages/components/chip/src/Chip.stories.tsx b/packages/components/chip/src/Chip.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react'
+import { ComponentProps } from 'react'
 
 import { Chip } from '.'
 
@@ -7,6 +8,21 @@ const meta: Meta<typeof Chip> = {
   component: Chip,
 }
 
+type ChipProps = ComponentProps<typeof Chip>
+
+const designs: ChipProps['design'][] = ['outlined', 'filled', 'dashed', 'tinted']
+
+const intents: ChipProps['intent'][] = [
+  'primary',
+  'secondary',
+  'success',
+  'alert',
+  'danger',
+  'info',
+  'neutral',
+  'surface',
+]
+
 export default meta
 
 export const Default: StoryFn = _args => (
@@ -15,3 +31,33 @@ export const Default: StoryFn = _args => (
     <Chip.ClearButton onClick={() => console.log('clear')} />
   </Chip>
 )
+
+export const Intent: StoryFn = _args => (
+  <div className="flex flex-col flex-wrap gap-md">
+    Default
+    {designs.map(design => (
+      <div key={design} className="flex flex-wrap gap-md">
+        {intents.map(intent => (
+          <Chip design={design} key={`${design}-${intent}`} intent={intent}>
+            {intent} chip
+          </Chip>
+        ))}
+      </div>
+    ))}
+    Actionable
+    {designs.map(design => (
+      <div key={design} className="flex flex-wrap gap-md">
+        {intents.map(intent => (
+          <Chip
+            design={design}
+            key={`${design}-${intent}`}
+            intent={intent}
+            onClick={() => console.log(`click ${design} ${intent}`)}
+          >
+            {intent} chip
+          </Chip>
+        ))}
+      </div>
+    ))}
+  </div>
+)
diff --git a/packages/components/chip/src/Chip.styles.tsx b/packages/components/chip/src/Chip.styles.tsx
@@ -1,7 +1,7 @@
 import { makeVariants, tw } from '@spark-ui/internal-utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-// import { dashedVariants, filledVariants, outlinedVariants, tintedVariants } from './variants'
+import { dashedVariants, filledVariants, outlinedVariants, tintedVariants } from './variants'
 
 export const chipStyles = cva(
   [
@@ -53,10 +53,10 @@ export const chipStyles = cva(
       },
     },
     compoundVariants: [
-      // ...filledVariants,
-      // ...outlinedVariants,
-      // ...tintedVariants,
-      // ...dashedVariants,
+      ...filledVariants,
+      ...outlinedVariants,
+      ...tintedVariants,
+      ...dashedVariants,
     ],
     defaultVariants: {
       design: 'outlined',
@@ -66,41 +66,43 @@ export const chipStyles = cva(
 )
 
 export const chipContentStyles = cva(
-  ['inline-flex h-full items-center justify-center gap-sm whitespace-nowrap'],
+  [
+    'inline-flex h-full items-center justify-center gap-sm overflow-hidden text-ellipsis whitespace-nowrap',
+  ],
   {
     variants: {
       isBordered: {
-        no: ['max-w-sz-240'],
-        yes: ['max-w-[238px]'],
+        false: ['max-w-sz-240'],
+        true: ['max-w-[238px]'],
       },
       hasClearButton: {
         true: [],
         false: [],
       },
     },
     defaultVariants: {
-      isBordered: 'no',
+      isBordered: false,
       hasClearButton: false,
     },
     compoundVariants: [
       {
         hasClearButton: false,
-        isBordered: 'no',
+        isBordered: false,
         class: tw(['px-md']),
       },
       {
         hasClearButton: false,
-        isBordered: 'yes',
+        isBordered: true,
         class: tw(['px-[7px]']),
       },
       {
         hasClearButton: true,
-        isBordered: 'no',
+        isBordered: false,
         class: tw(['pl-md']),
       },
       {
         hasClearButton: true,
-        isBordered: 'yes',
+        isBordered: true,
         class: tw(['pl-[7px]']),
       },
     ],

diff --git a/packages/components/chip/src/Chip.tsx b/packages/components/chip/src/Chip.tsx
@@ -92,7 +92,12 @@ export const Chip = forwardRef<HTMLButtonElement | HTMLDivElement, ChipProps>(
         }}
         data-spark-component="chip"
       >
-        <span className={chipContentStyles({ hasClearButton: !!hasClearButton })}>
+        <span
+          className={chipContentStyles({
+            hasClearButton: !!hasClearButton,
+            isBordered: design === 'dashed',
+          })}
+        >
           <ChipContext.Provider value={{ disabled, design, intent }}>
             {children}
           </ChipContext.Provider>

diff --git a/packages/components/chip/src/variants/dashed.ts b/packages/components/chip/src/variants/dashed.ts
@@ -0,0 +1,84 @@
+import { tw } from '@spark-ui/internal-utils'
+
+export const dashedVariants = [
+  {
+    intent: 'primary',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-primary/dim-5',
+      'enabled:active:bg-primary/dim-5',
+      'focus-visible:bg-primary/dim-5',
+      'text-primary',
+    ]),
+  },
+  {
+    intent: 'secondary',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-secondary/dim-5',
+      'enabled:active:bg-secondary/dim-5',
+      'focus-visible:bg-secondary/dim-5',
+      'text-secondary',
+    ]),
+  },
+  {
+    intent: 'success',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-success/dim-5',
+      'enabled:active:bg-success/dim-5',
+      'focus-visible:bg-success/dim-5',
+      'text-success',
+    ]),
+  },
+  {
+    intent: 'alert',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-alert/dim-5',
+      'enabled:active:bg-alert/dim-5',
+      'focus-visible:bg-alert/dim-5',
+      'text-alert',
+    ]),
+  },
+  {
+    intent: 'danger',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-error/dim-5',
+      'enabled:active:bg-error/dim-5',
+      'focus-visible:bg-error/dim-5',
+      'text-error',
+    ]),
+  },
+  {
+    intent: 'info',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-info/dim-5',
+      'enabled:active:bg-info/dim-5',
+      'focus-visible:bg-info/dim-5',
+      'text-info',
+    ]),
+  },
+  {
+    intent: 'neutral',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-neutral/dim-5',
+      'enabled:active:bg-neutral/dim-5',
+      'focus-visible:bg-neutral/dim-5',
+      'text-neutral',
+    ]),
+  },
+  {
+    intent: 'surface',
+    design: 'dashed',
+    class: tw([
+      'enabled:hover:bg-surface/dim-5',
+      'enabled:active:bg-surface/dim-5',
+      'focus-visible:bg-surface/dim-5',
+      'text-surface',
+    ]),
+  },
+] as const
diff --git a/packages/components/chip/src/variants/filled.ts b/packages/components/chip/src/variants/filled.ts
@@ -0,0 +1,96 @@
+import { tw } from '@spark-ui/internal-utils'
+
+export const filledVariants = [
+  // Primary
+  {
+    intent: 'primary',
+    design: 'filled',
+    class: tw([
+      'bg-primary',
+      'text-on-primary',
+      'enabled:hover:bg-primary-hovered',
+      'enabled:active:bg-primary-pressed',
+      'focus-visible:bg-primary-focused',
+    ]),
+  },
+  // Secondary
+  {
+    intent: 'secondary',
+    design: 'filled',
+    class: tw([
+      'bg-secondary',
+      'text-on-secondary',
+      'enabled:hover:bg-secondary-hovered',
+      'enabled:active:bg-secondary-pressed',
+      'focus-visible:bg-secondary-focused',
+    ]),
+  },
+  // Success
+  {
+    intent: 'success',
+    design: 'filled',
+    class: tw([
+      'bg-success',
+      'text-on-success',
+      'enabled:hover:bg-success-hovered',
+      'enabled:active:bg-success-pressed',
+      'focus-visible:bg-success-focused',
+    ]),
+  },
+  // Alert
+  {
+    intent: 'alert',
+    design: 'filled',
+    class: tw([
+      'bg-alert',
+      'text-on-alert',
+      'enabled:hover:bg-alert-hovered',
+      'enabled:active:bg-alert-pressed',
+      'focus-visible:bg-alert-focused',
+    ]),
+  },
+  // Danger
+  {
+    intent: 'danger',
+    design: 'filled',
+    class: tw([
+      'text-on-error bg-error',
+      'enabled:hover:bg-error-hovered enabled:active:bg-error-pressed',
+      'focus-visible:bg-error-focused',
+    ]),
+  },
+  // Info
+  {
+    intent: 'info',
+    design: 'filled',
+    class: tw([
+      'text-on-error bg-info',
+      'enabled:hover:bg-info-hovered enabled:active:bg-info-pressed',
+      'focus-visible:bg-info-focused',
+    ]),
+  },
+  // Neutral
+  {
+    intent: 'neutral',
+    design: 'filled',
+    class: tw([
+      'bg-neutral',
+      'text-on-neutral',
+      'enabled:hover:bg-neutral-hovered',
+      'enabled:active:bg-neutral-pressed',
+      'focus-visible:bg-neutral-focused',
+    ]),
+  },
+  // Surface
+  {
+    intent: 'surface',
+    design: 'filled',
+    class: tw([
+      'bg-surface',
+      'text-on-surface',
+      'enabled:hover:bg-surface-hovered',
+      'enabled:active:bg-surface-pressed',
+      'focus-visible:bg-surface-focused',
+    ]),
+  },
+] as const
diff --git a/packages/components/chip/src/variants/index.ts b/packages/components/chip/src/variants/index.ts
@@ -0,0 +1,4 @@
+export { filledVariants } from './filled'
+export { outlinedVariants } from './outlined'
+export { tintedVariants } from './tinted'
+export { dashedVariants } from './dashed'