feat: [chip] - remove colors variants

PrestaShopCorp · Oct 9, 2023 · e11ae5f · e11ae5f
1 parent ef85f34
commit e11ae5f
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 150 deletions.
diff --git a/packages/components/chip/src/chip.ts b/packages/components/chip/src/chip.ts
@@ -3,17 +3,8 @@ import type { PuikTooltipPosition } from '@puik/components'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Chip from './chip.vue'
 
-export const chipColorsVariants = [
-  'neutral',
-  'blue',
-  'yellow',
-  'green',
-  'purple',
-] as const
-
 export const chipSizeVariants = ['default', 'small'] as const
 
-export type PuikChipColorVariant = (typeof chipColorsVariants)[number]
 export type PuikChipSizeVariant = (typeof chipSizeVariants)[number]
 
 export const chipProps = buildProps({
@@ -27,11 +18,6 @@ export const chipProps = buildProps({
     required: true,
     default: undefined,
   },
-  variant: {
-    type: String,
-    required: false,
-    default: 'neutral',
-  },
   size: {
     type: String,
     required: false,

diff --git a/packages/components/chip/src/chip.vue b/packages/components/chip/src/chip.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="[
-      `puik-chip puik-chip--${variant as PuikChipColorVariant} puik-chip--${size as PuikChipSizeVariant}`,
+      `puik-chip puik-chip--${size as PuikChipSizeVariant}`,
       { 'puik-chip--disabled': disabled },
     ]"
   >
@@ -29,11 +29,7 @@
 <script setup lang="ts">
 import { PuikIcon } from '@puik/components/icon'
 import { PuikTooltip } from '@puik/components/tooltip'
-import {
-  chipProps,
-  type PuikChipSizeVariant,
-  type PuikChipColorVariant,
-} from './chip'
+import { chipProps, type PuikChipSizeVariant } from './chip'
 import type { PuikTooltipPosition } from '@puik/components/tooltip'
 defineOptions({
   name: 'PuikChip',

diff --git a/packages/components/chip/stories/chip.stories.ts b/packages/components/chip/stories/chip.stories.ts
@@ -1,10 +1,9 @@
 import { ref } from 'vue'
 import { PuikIcon, PuikButton, tooltipPositions } from '@puik/components'
-import { chipColorsVariants, chipSizeVariants } from '../src/chip'
+import { chipSizeVariants } from '../src/chip'
 import PuikChip from './../src/chip.vue'
 import type { Meta, StoryFn, Args } from '@storybook/vue3'
 
-const chipColorsVariantsSummary = chipColorsVariants.join('|')
 const chipSizeVariantsSummary = chipSizeVariants.join('|')
 const tooltipPositionsSummary = tooltipPositions.join('|')
 
@@ -51,20 +50,6 @@ export default {
         },
       },
     },
-    variant: {
-      description:
-        'Color variants of chip component (neutral by default, blue, yellow, green, purple)',
-      control: 'select',
-      options: chipColorsVariants,
-      table: {
-        type: {
-          summary: chipColorsVariantsSummary,
-        },
-        defaultValue: {
-          summary: 'neutral',
-        },
-      },
-    },
     icon: {
       description: 'Material icon name',
       control: 'text',
@@ -108,7 +93,6 @@ export default {
     id: 'puik-chip-id',
     content: 'default chip',
     size: 'default',
-    variant: 'neutral',
     icon: '',
     disabled: false,
     tooltipPosition: 'bottom',
@@ -135,37 +119,31 @@ const HandleCloseEventTemplate: StoryFn = (args: Args) => ({
   setup() {
     const chips = ref([
       {
-        variant: 'neutral',
         icon: 'home',
         disabled: true,
         content: "can't close disabled",
       },
       {
-        variant: 'neutral',
         icon: 'home',
         disabled: false,
         content: 'close me !',
       },
       {
-        variant: 'blue',
         icon: 'home',
         disabled: false,
         content: 'close me !',
       },
       {
-        variant: 'yellow',
         icon: 'home',
         disabled: false,
         content: 'close me !',
       },
       {
-        variant: 'green',
         icon: 'home',
         disabled: false,
         content: 'close me !',
       },
       {
-        variant: 'purple',
         icon: 'home',
         disabled: false,
         content: 'close me !',
@@ -191,7 +169,6 @@ const HandleCloseEventTemplate: StoryFn = (args: Args) => ({
       :id="'puik-chip-'+index"
       :key="index"
       :content="chip.content"
-      :variant="chip.variant"
       :icon="chip.icon"
       :disabled="chip.disabled"
       @close="handleCloseChip(index)"
@@ -204,50 +181,6 @@ const HandleCloseEventTemplate: StoryFn = (args: Args) => ({
 `,
 })
 
-const ColorVariantsTemplate: StoryFn = (args: Args) => ({
-  components: {
-    PuikIcon,
-    PuikChip,
-  },
-  setup() {
-    const chips = ref([
-      {
-        variant: 'neutral',
-        content: 'neutral chip',
-      },
-      {
-        variant: 'blue',
-        content: 'blue chip',
-      },
-      {
-        variant: 'yellow',
-        content: 'yellow chip',
-      },
-      {
-        variant: 'green',
-        content: 'green chip',
-      },
-      {
-        variant: 'purple',
-        content: 'purple chip',
-      },
-    ])
-
-    return { chips, args }
-  },
-  template: `
-  <div class="flex space-x-2 mb-4">
-    <puik-chip
-      v-for="(chip, index) in chips"
-      :id="'puik-chip-'+index"
-      :key="index"
-      :content="chip.content"
-      :variant="chip.variant"
-    />
-  </div>
-`,
-})
-
 const SizeVariantsTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikIcon,
@@ -335,7 +268,6 @@ export const Default = {
   :id="args.id"
   :content="args.content"
   :size="args.size"
-  :variant="args.variant"
   :icon="args.icon"
   :disabled="args.disabled"
   :tooltipPosition="args.tooltipPosition"
@@ -344,7 +276,7 @@ export const Default = {
 </div>
 
 <!--HTML/CSS Snippet-->
-<div id="puik-chip-id" class="puik-chip puik-chip--neutral puik-chip--default">
+<div id="puik-chip-id" class="puik-chip puik-chip--default">
   <div class="puik-chip__content">
     default chip
   </div>
@@ -370,7 +302,6 @@ export const HandleCloseEvent = {
     :id="'puik-chip-'+index"
     :key="index"
     :content="chip.content"
-    :variant="chip.variant"
     :icon="chip.icon"
     :disabled="chip.disabled"
     @close="handleCloseChip(index)"
@@ -390,36 +321,6 @@ const handleCloseChip = (index: number) => {
   },
 }
 
-export const ColorVariants = {
-  render: ColorVariantsTemplate,
-  args: {},
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<!--VueJS Snippet-->
-<!-- $variants: ${chipColorsVariantsSummary} -->
-<puik-chip
-  :id="args.id"
-  :content="args.content"
-  :variant="{$variant}"
-/>
-</div>
-
-<!--HTML/CSS Snippet-->
-<!-- $variants: ${chipColorsVariantsSummary} -->
-<div id="puik-chip-id" class="puik-chip puik-chip--{$variant} puik-chip--default">
-  <div class="puik-chip__content">
-    {$variant} chip
-  </div>
-</div>
-`,
-        language: 'html',
-      },
-    },
-  },
-}
-
 export const SizeVariants = {
   render: SizeVariantsTemplate,
   args: {},
@@ -438,7 +339,7 @@ export const SizeVariants = {
 
 <!--HTML/CSS Snippet-->
 <!-- $sizes: ${chipSizeVariantsSummary} -->
-<div id="puik-chip-id" class="puik-chip puik-chip--neutral puik-chip--{$size}">
+<div id="puik-chip-id" class="puik-chip puik-chip--{$size}">
   <div class="puik-chip__content">
     {$size} chip
   </div>
@@ -466,7 +367,7 @@ export const Disabled = {
 </div>
 
 <!--HTML/CSS Snippet-->
-<div id="puik-chip-default" class="puik-chip puik-chip--neutral puik-chip--default puik-chip--disabled">
+<div id="puik-chip-default" class="puik-chip puik-chip--default puik-chip--disabled">
   <div class="puik-chip__content">
     disabled chip
   </div>
@@ -494,7 +395,7 @@ export const WithIcon = {
 </div>
 
 <!--HTML/CSS Snippet-->
-<div id="puik-chip-default" class="puik-chip puik-chip--neutral puik-chip--default">
+<div id="puik-chip-default" class="puik-chip puik-chip--default">
   <div class="puik-icon material-icons-round puik-chip__icon" style="font-size: 1rem;">
     favorite
   </div>

diff --git a/packages/components/chip/test/chip.spec.ts b/packages/components/chip/test/chip.spec.ts
@@ -37,11 +37,6 @@ describe('Chip tests', () => {
     expect(findChipContent().text()).toBe('content')
   })
 
-  it('should display a blue version of the chip', () => {
-    factory({ variant: 'blue' })
-    expect(findChip().classes()).toContain('puik-chip--blue')
-  })
-
   it('should display a chip small version', () => {
     factory({ size: 'small' })
     expect(findChip().classes()).toContain('puik-chip--small')
@@ -52,11 +47,6 @@ describe('Chip tests', () => {
     expect(findLeftIcon().text()).toBe('home')
   })
 
-  it('should display a chip closeable version', () => {
-    factory({ closeable: true })
-    expect(findCloseBtn().text()).toBe('close')
-  })
-
   it('should display a chip disabled version', () => {
     factory({ disabled: true })
     expect(findChip().classes()).toContain('puik-chip--disabled')

diff --git a/packages/theme/src/chip.scss b/packages/theme/src/chip.scss
@@ -2,7 +2,7 @@
 
 .puik-chip {
   @extend .puik-body-small;
-  @apply max-w-fit font-bold flex items-center;
+  @apply bg-primary-300 text-primary max-w-fit font-bold flex items-center;
 
   &--default {
     @apply px-2 py-[3px];
@@ -13,21 +13,6 @@
       @apply p-[1px];
     }
   }
-  &--neutral {
-    @apply bg-primary-300 text-primary;
-  }
-  &--blue {
-    @apply bg-ocean-blue-50 text-primary;
-  }
-  &--yellow {
-    @apply bg-amber-100 text-primary;
-  }
-  &--green {
-    @apply bg-green-50 text-primary;
-  }
-  &--purple {
-    @apply bg-purple-50 text-primary;
-  }
   &--disabled {
     @apply bg-primary-200 text-primary-500;
     .puik-chip__close {