@citizenplane/pimp 8.20.3 → 8.21.0

package/src/components/atomic-elements/CpBadge.vue

@@ -1,35 +1,59 @@
 <template>
-  <div class="cpBadge" :class="computedClasses">
-    <span v-if="hasIconSlot" class="cpBadge__icon"> <slot name="icon" /></span>
-    <cp-icon v-else-if="icon" :type="icon" class="cpBadge__icon" />
-    <span class="cpBadge__label"><slot /></span>
-    <button v-if="isClearable" class="cpBadge__clear" type="button" @click="onClear">
-      <cp-icon class="cpBadge__icon cpBadge__icon--isClear" type="x" />
+  <div class="cpBadge" :class="componentDynamicClasses">
+    <slot name="leading-icon">
+      <cp-icon v-if="leadingIcon" :type="leadingIcon" class="cpBadge__icon" />
+    </slot>
+
+    <span class="cpBadge__label">
+      <slot>{{ label }}</slot>
+    </span>
+
+    <slot v-if="!isClearable" name="trailing-icon">
+      <cp-icon v-if="trailingIcon" :type="trailingIcon" class="cpBadge__icon" />
+    </slot>
+
+    <button v-if="isClearable" class="cpBadge__clear" @click="onClear">
+      <cp-icon type="x" class="cpBadge__icon" />
     </button>
   </div>
 </template>
 
-<script>
-// Need to be declared in module scope, see https://stackoverflow.com/a/70947352
-const badgeColors = ['neutral', 'blue', 'green', 'red', 'orange', 'purple', 'teal', 'pink', 'yellow']
-</script>
-
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
+
+import { Colors } from '@/constants'
+
+import { Sizes } from '@/utils/constants'
 
 import { capitalizeFirstLetter } from '@/helpers'
 
 const props = defineProps({
   color: {
+    type: String,
+    default: Colors.GRAY,
+    validator: (value) => Object.values(Colors).includes(value),
+  },
+  size: {
+    type: String,
+    required: false,
+    default: Sizes.MD,
+    validator(value) {
+      return Object.values(Sizes).includes(value)
+    },
+  },
+  label: {
     type: String,
     default: '',
-    validator: (value) => badgeColors.includes(value) || value === '',
   },
-  isSolid: {
-    type: Boolean,
-    default: false,
+  leadingIcon: {
+    type: String,
+    default: '',
+  },
+  trailingIcon: {
+    type: String,
+    default: '',
   },
-  isPlain: {
+  isStroked: {
     type: Boolean,
     default: false,
   },
@@ -37,164 +61,84 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  icon: {
-    type: String,
-    default: '',
-  },
 })
 
-const emits = defineEmits(['on-clear'])
-
-const slots = useSlots()
-
-const capitalizedColor = computed(() => {
-  return capitalizeFirstLetter(props.color)
-})
-
-const hasIconSlot = computed(() => {
-  return !!slots.icon
+const componentDynamicClasses = computed(() => {
+  return [
+    `cpBadge--${props.size}`,
+    `cpBadge--is${capitalizeFirstLetter(props.color)}`,
+    { 'cpBadge--isStroked': props.isStroked },
+    { 'cpBadge--isClearable': props.isClearable },
+  ]
 })
-
-const computedClasses = computed(() => {
-  const hasIcon = props.icon !== '' || hasIconSlot.value
-
-  return {
-    'cpBadge--isSolid': props.isSolid,
-    'cpBadge--isPlain': props.isPlain,
-    'cpBadge--hasIcon': hasIcon,
-    'cpBadge--isClearable': props.isClearable,
-    [`cpBadge--is${capitalizedColor.value}`]: capitalizedColor.value,
-  }
-})
-
-const onClear = () => {
-  emits('on-clear')
-}
 </script>
 
 <style lang="scss">
-@mixin cp-badge-color-default($color) {
-  background-color: rgba($color, 0.14);
-  border-color: transparent;
-  color: $color;
-
-  .cpBadge__clear:hover,
-  .cpBadge__clear:focus-visible {
-    background-color: $color;
-  }
-}
-
-@mixin cp-badge-color-solid($color) {
-  color: colors.$neutral-light;
-  background-color: $color;
-  border-color: transparent;
-
-  .cpBadge__clear:hover,
-  .cpBadge__clear:focus-visible {
+@mixin cp-badge-themed($className, $color, $bg-color, $outline-color) {
+  &--is#{$className} {
     color: $color;
-    background-color: colors.$neutral-light;
-  }
-}
-
-@mixin cp-badge-style($color, $className) {
-  &--is#{$className}:not(#{&}--isSolid) {
-    @include cp-badge-color-default($color);
-  }
+    background-color: $bg-color;
+    outline-color: $outline-color;
 
-  &--is#{$className}#{&}--isSolid {
-    @include cp-badge-color-solid($color);
+    .cpBadge__clear:hover,
+    .cpBadge__clear:focus-visible {
+      background-color: $color;
+    }
   }
 }
 
 .cpBadge {
   display: inline-flex;
+  padding: sp.$space-sm sp.$space;
   align-items: center;
-  padding-block: sp.$space-sm;
+  border-radius: fn.px-to-rem(8);
+  background-color: colors.$neutral-dark-5;
   font-size: fn.px-to-em(14);
-  font-weight: 500;
-  border-radius: fn.px-to-rem(1000);
-  border: 1px solid colors.$border-color;
-  background-color: colors.$neutral-light;
-
-  @include cp-badge-style(colors.$neutral-dark, 'Neutral');
-  @include cp-badge-style(colors.$secondary-color, 'Blue');
-  @include cp-badge-style(colors.$green-2, 'Green');
-  @include cp-badge-style(colors.$red, 'Red');
-  @include cp-badge-style(colors.$orange, 'Orange');
-  @include cp-badge-style(colors.$purple, 'Purple');
-  @include cp-badge-style(colors.$blue-1, 'Teal');
-  @include cp-badge-style(colors.$pink, 'Pink');
-  @include cp-badge-style(colors.$yellow, 'Yellow');
-
-  &--isYellow#{&}--isSolid {
-    color: darken(colors.$yellow, 20);
-
-    &:before {
-      background-color: darken(colors.$yellow, 20);
-    }
-  }
+  color: colors.$neutral-dark;
+  gap: sp.$space-sm;
 
-  &:not(#{&}--isPlain):not(#{&}--hasIcon)::before {
-    content: '';
-    width: fn.px-to-rem(6);
-    height: fn.px-to-rem(6);
-    margin-right: fn.px-to-rem(6);
-    border-radius: 100%;
-    flex-shrink: 0;
-    background-color: currentColor;
+  &--isStroked {
+    outline: 1px solid currentColor;
   }
 
-  &:not(&--isClearable) {
-    padding-inline: sp.$space;
-  }
+  @include cp-badge-themed('Blue', colors.$blue, colors.$blue-100, colors.$blue-200);
+  @include cp-badge-themed('Gray', colors.$astronaut, colors.$gray-5, colors.$gray-4);
+  @include cp-badge-themed('Green', colors.$green, colors.$green-100, colors.$green-200);
+  @include cp-badge-themed('Orange', colors.$orange, colors.$orange-100, colors.$orange-200);
+  @include cp-badge-themed('Pink', colors.$pink, colors.$pink-100, colors.$pink-200);
+  @include cp-badge-themed('Purple', colors.$purple, colors.$purple-100, colors.$purple-200);
+  @include cp-badge-themed('Red', colors.$red, colors.$red-100, colors.$red-200);
+  @include cp-badge-themed('Yellow', colors.$yellow-500, colors.$yellow-100, colors.$yellow-200);
 
-  &--isClearable {
-    padding-left: sp.$space;
-    padding-right: sp.$space-sm;
-  }
+  &--sm {
+    font-size: fn.px-to-em(12);
 
-  &__label {
-    @extend %u-text-ellipsis;
-    flex: 1;
-    min-width: 0;
+    .cpBadge__label {
+      line-height: fn.px-to-rem(16);
+    }
   }
 
   &__icon {
-    color: currentColor;
     width: fn.px-to-rem(16);
     height: fn.px-to-rem(16);
+    aspect-ratio: 1/1;
+  }
 
-    &:not(&--isClear) {
-      margin-right: sp.$space-sm;
-    }
-
-    &--isClear svg {
-      stroke-width: fn.px-to-rem(2);
-    }
-
-    > * {
-      width: 100%;
-      height: 100%;
-    }
+  &__label {
+    line-height: fn.px-to-rem(20);
   }
 
   &__clear {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: fn.px-to-rem(6);
-    padding: fn.px-to-rem(1);
-    border-radius: 100%;
+    padding: sp.$space-xs;
+    border-radius: 50%;
     color: inherit;
 
     &:hover,
     &:focus-visible {
       color: colors.$neutral-light;
-      background-color: colors.$neutral-dark;
-    }
-
-    &:focus {
-      outline: none !important;
     }
   }
 }

package/src/components/index.js

@@ -9,7 +9,6 @@ import { vTooltip } from 'floating-vue'
 // COMPONENTS
 // Atomic elements
 import CpBadge from './atomic-elements/CpBadge.vue'
-import CpBadgeNew from './atomic-elements/CpBadgeNew.vue'
 import CpDialog from './atomic-elements/CpDialog.vue'
 import CpDialogWrapper from './atomic-elements/CpDialogWrapper.vue'
 import CpTooltip from './atomic-elements/CpTooltip.vue'
@@ -74,7 +73,6 @@ import createToaster from '@/plugins/toaster'
 const Components = {
   CpToaster,
   CpBadge,
-  CpBadgeNew,
   CpHeading,
   CpButton,
   CpDialogWrapper,

package/src/stories/CpBadge.stories.ts

@@ -8,151 +8,141 @@ const meta = {
   argTypes: {
     color: {
       control: 'select',
-      options: ['neutral', 'blue', 'green', 'red', 'orange', 'purple', 'teal', 'pink', 'yellow'],
+      options: ['gray', 'blue', 'green', 'red', 'orange', 'purple', 'pink', 'yellow'],
       description: 'The color variant of the badge',
     },
-    isSolid: {
-      control: 'boolean',
-      description: 'Whether the badge has a solid background',
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'The size of the badge',
     },
-    isPlain: {
+    isStroked: {
       control: 'boolean',
-      description: 'Whether the badge has a plain style (no dot)',
+      description: 'Whether the badge has a stroked border',
     },
-    isClearable: {
-      control: 'boolean',
-      description: 'Whether the badge can be cleared',
+    leadingIcon: {
+      control: 'select',
+      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      description: 'Type of leading icon (if any)',
     },
-    icon: {
+    trailingIcon: {
       control: 'select',
-      options: ['arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'check'],
-      description: 'The icon to display in the badge',
+      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      description: 'Type of trailing icon (if any)',
+    },
+    label: {
+      control: 'text',
+      description: 'The label text',
     },
-    onClear: { action: 'cleared' },
   },
 } satisfies Meta<typeof CpBadge>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    color: 'neutral',
-    isSolid: false,
-    isPlain: false,
-    isClearable: false,
-    icon: '',
+    color: 'gray',
+    size: 'md',
+    isStroked: false,
+    leadingIcon: '',
+    trailingIcon: '',
+    label: 'Badge',
   },
   render: (args) => ({
     components: { CpBadge },
     setup() {
       return { args }
     },
-    template: '<CpBadge v-bind="args">Badge</CpBadge>',
+    template: '<CpBadge v-bind="args" />',
   }),
 }
 
 export const WithColors: Story = {
-  render: (args) => ({
+  render: () => ({
     components: { CpBadge },
-    setup() {
-      return { args }
-    },
     template: `
       <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadge color="neutral">Neutral</CpBadge>
-        <CpBadge color="blue">Blue</CpBadge>
-        <CpBadge color="green">Green</CpBadge>
-        <CpBadge color="red">Red</CpBadge>
-        <CpBadge color="orange">Orange</CpBadge>
-        <CpBadge color="purple">Purple</CpBadge>
-        <CpBadge color="teal">Teal</CpBadge>
-        <CpBadge color="pink">Pink</CpBadge>
-        <CpBadge color="yellow">Yellow</CpBadge>
+        <CpBadge color="gray" label="Gray" />
+        <CpBadge color="blue" label="Blue" />
+        <CpBadge color="green" label="Green" />
+        <CpBadge color="red" label="Red" />
+        <CpBadge color="orange" label="Orange" />
+        <CpBadge color="purple" label="Purple" />
+        <CpBadge color="pink" label="Pink" />
+        <CpBadge color="yellow" label="Yellow" />
       </div>
     `,
   }),
 }
 
-export const Solid: Story = {
-  render: (args) => ({
+export const WithSizes: Story = {
+  render: () => ({
     components: { CpBadge },
-    setup() {
-      return { args }
-    },
     template: `
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadge color="neutral" is-solid>Neutral</CpBadge>
-        <CpBadge color="blue" is-solid>Blue</CpBadge>
-        <CpBadge color="green" is-solid>Green</CpBadge>
-        <CpBadge color="red" is-solid>Red</CpBadge>
-        <CpBadge color="orange" is-solid>Orange</CpBadge>
-        <CpBadge color="purple" is-solid>Purple</CpBadge>
-        <CpBadge color="teal" is-solid>Teal</CpBadge>
-        <CpBadge color="pink" is-solid>Pink</CpBadge>
-        <CpBadge color="yellow" is-solid>Yellow</CpBadge>
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge size="sm" label="Small" />
+        <CpBadge size="md" label="Medium" />
       </div>
     `,
   }),
 }
 
-export const WithIcon: Story = {
-  args: {
-    color: 'blue',
-    icon: 'check',
-  },
-  render: (args) => ({
+export const IsStroked: Story = {
+  render: () => ({
     components: { CpBadge },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadge v-bind="args">With Icon</CpBadge>',
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="blue" isStroked label="Stroked" />
+        <CpBadge color="green" isStroked label="Stroked" />
+        <CpBadge color="red" isStroked label="Stroked" />
+      </div>
+    `,
   }),
 }
 
-export const Clearable: Story = {
-  args: {
-    color: 'blue',
-    isClearable: true,
-  },
-  render: (args) => ({
+export const WithIcons: Story = {
+  render: () => ({
     components: { CpBadge },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadge v-bind="args">Clearable Badge</CpBadge>',
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge color="blue" leading-icon="check" label="Leading Icon" />
+        <CpBadge color="green" trailing-icon="arrow-right" label="Trailing Icon" />
+        <CpBadge color="red" leading-icon="check" trailing-icon="arrow-right" label="Both Icons" />
+      </div>
+    `,
   }),
 }
 
-export const Plain: Story = {
-  args: {
-    color: 'green',
-    isPlain: true,
-  },
-  render: (args) => ({
+export const IsClearable: Story = {
+  render: () => ({
     components: { CpBadge },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadge v-bind="args">Plain Badge</CpBadge>',
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge color="blue" isClearable label="Clearable" />
+        <CpBadge color="green" isClearable label="Clearable" />
+        <CpBadge color="red" isClearable label="Clearable" />
+      </div>
+    `,
   }),
 }
 
-export const AllVariants: Story = {
-  render: (args) => ({
+export const WithSlot: Story = {
+  render: () => ({
     components: { CpBadge },
-    setup() {
-      return { args }
-    },
     template: `
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadge color="blue">Default</CpBadge>
-        <CpBadge color="blue" is-solid>Solid</CpBadge>
-        <CpBadge color="blue" is-plain>Plain</CpBadge>
-        <CpBadge color="blue" is-clearable>Clearable</CpBadge>
-        <CpBadge color="blue" icon="check">With Icon</CpBadge>
-        <CpBadge color="blue" is-solid is-clearable>Solid Clearable</CpBadge>
-      </div>
+      <CpBadge color="purple">
+        <template #leading-icon>
+          <span style="font-size: 16px; margin-right: 4px;">🌟</span>
+        </template>
+        <div>
+          Custom div inside default slot
+        </div>
+        <template #trailing-icon>
+          <span style="font-size: 16px; margin-left: 4px;">🚀</span>
+        </template>
+      </CpBadge>
     `,
   }),
 }

package/src/components/atomic-elements/CpBadgeNew.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="cpBadgeNew" :class="componentDynamicClasses">
-    <slot name="leading-icon">
-      <cp-icon v-if="leadingIcon" :type="leadingIcon" class="cpBadgeNew__icon" />
-    </slot>
-
-    <span class="cpBadgeNew__label">
-      <slot>{{ label }}</slot>
-    </span>
-
-    <slot v-if="!isClearable" name="trailing-icon">
-      <cp-icon v-if="trailingIcon" :type="trailingIcon" class="cpBadgeNew__icon" />
-    </slot>
-
-    <button v-if="isClearable" class="cpBadgeNew__clear" @click="onClear">
-      <cp-icon type="x" class="cpBadgeNew__icon" />
-    </button>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-import { Colors } from '@/constants'
-
-import { Sizes } from '@/utils/constants'
-
-import { capitalizeFirstLetter } from '@/helpers'
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: Colors.GRAY,
-    validator: (value) => Object.values(Colors).includes(value),
-  },
-  size: {
-    type: String,
-    required: false,
-    default: Sizes.MD,
-    validator(value) {
-      return Object.values(Sizes).includes(value)
-    },
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  leadingIcon: {
-    type: String,
-    default: '',
-  },
-  trailingIcon: {
-    type: String,
-    default: '',
-  },
-  isStroked: {
-    type: Boolean,
-    default: false,
-  },
-  isClearable: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const componentDynamicClasses = computed(() => {
-  return [
-    `cpBadgeNew--${props.size}`,
-    `cpBadgeNew--is${capitalizeFirstLetter(props.color)}`,
-    { 'cpBadgeNew--isStroked': props.isStroked },
-    { 'cpBadgeNew--isClearable': props.isClearable },
-  ]
-})
-</script>
-
-<style lang="scss">
-@mixin cp-badge-new-themed($className, $color, $bg-color, $outline-color) {
-  &--is#{$className} {
-    color: $color;
-    background-color: $bg-color;
-    outline-color: $outline-color;
-
-    .cpBadgeNew__clear:hover,
-    .cpBadgeNew__clear:focus-visible {
-      background-color: $color;
-    }
-  }
-}
-
-.cpBadgeNew {
-  display: inline-flex;
-  padding: sp.$space-sm sp.$space;
-  align-items: center;
-  border-radius: fn.px-to-rem(8);
-  background-color: colors.$neutral-dark-5;
-  font-size: fn.px-to-em(14);
-  color: colors.$neutral-dark;
-  gap: sp.$space-sm;
-
-  &--isStroked {
-    outline: 1px solid currentColor;
-  }
-
-  @include cp-badge-new-themed('Blue', colors.$blue, colors.$blue-100, colors.$blue-200);
-  @include cp-badge-new-themed('Gray', colors.$astronaut, colors.$gray-5, colors.$gray-4);
-  @include cp-badge-new-themed('Green', colors.$green, colors.$green-100, colors.$green-200);
-  @include cp-badge-new-themed('Orange', colors.$orange, colors.$orange-100, colors.$orange-200);
-  @include cp-badge-new-themed('Pink', colors.$pink, colors.$pink-100, colors.$pink-200);
-  @include cp-badge-new-themed('Purple', colors.$purple, colors.$purple-100, colors.$purple-200);
-  @include cp-badge-new-themed('Red', colors.$red, colors.$red-100, colors.$red-200);
-  @include cp-badge-new-themed('Yellow', colors.$yellow-500, colors.$yellow-100, colors.$yellow-200);
-
-  &--sm {
-    font-size: fn.px-to-em(12);
-
-    .cpBadgeNew__label {
-      line-height: fn.px-to-rem(16);
-    }
-  }
-
-  &__icon {
-    width: fn.px-to-rem(16);
-    height: fn.px-to-rem(16);
-    aspect-ratio: 1/1;
-  }
-
-  &__label {
-    line-height: fn.px-to-rem(20);
-  }
-
-  &__clear {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: sp.$space-xs;
-    border-radius: 50%;
-    color: inherit;
-
-    &:hover,
-    &:focus-visible {
-      color: colors.$neutral-light;
-    }
-  }
-}
-</style>