@citizenplane/pimp 8.20.4 → 8.22.0

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/stories/CpIcon.stories.ts

@@ -1,5 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import CpIcon from '@/components/visual/CpIcon.vue'
+import { CustomCpIcons } from '@/constants'
+
+const iconsOptions = [
+  ...Object.keys(CustomCpIcons),
+  'activity',
+  'alert-circle',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'bell',
+  'calendar',
+  'check',
+  'check-circle',
+  'chevron-down',
+  'chevron-left',
+  'chevron-right',
+  'chevron-up',
+  'edit',
+  'home',
+  'search',
+  'settings',
+  'user',
+  'x',
+].sort()
 
 const meta = {
   title: 'CpIcon',
@@ -7,28 +32,7 @@ const meta = {
   argTypes: {
     type: {
       control: 'select',
-      options: [
-        'activity',
-        'alert-circle',
-        'arrow-down',
-        'arrow-left',
-        'arrow-right',
-        'arrow-up',
-        'bell',
-        'calendar',
-        'check',
-        'check-circle',
-        'chevron-down',
-        'chevron-left',
-        'chevron-right',
-        'chevron-up',
-        'edit',
-        'home',
-        'search',
-        'settings',
-        'user',
-        'x',
-      ],
+      options: iconsOptions,
       description: 'Type of icon to display',
     },
     size: {
@@ -39,6 +43,13 @@ const meta = {
       control: 'text',
       description: 'HTML tag to use for the icon wrapper',
     },
+    weight: {
+      control: 'number',
+      description: 'Weight for specific icons like checked-baggage',
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
   },
 } satisfies Meta<typeof CpIcon>
 
@@ -65,14 +76,36 @@ export const Default: Story = {
 }
 
 export const DifferentSizes: Story = {
-  render: () => ({
+  args: {
+    type: 'check',
+  },
+  render: (args) => ({
     components: { CpIcon },
+    setup() {
+      return { args }
+    },
     template: `
       <div style="padding: 20px; display: flex; align-items: center; gap: 16px;">
-        <CpIcon type="check" size="16" />
-        <CpIcon type="check" size="24" />
-        <CpIcon type="check" size="32" />
-        <CpIcon type="check" size="48" />
+        <CpIcon v-bind="{ ...args, size: 16 }" />
+        <CpIcon v-bind="{ ...args, size: 24 }" />
+        <CpIcon v-bind="{ ...args, size: 32 }" />
+        <CpIcon v-bind="{ ...args, size: 48 }" />
+      </div>
+    `,
+  }),
+}
+
+export const AllIcons: Story = {
+  render: () => ({
+    components: { CpIcon },
+    setup() {
+      return { icons: iconsOptions }
+    },
+    template: `
+      <div style="padding: 20px; display: grid; grid-template-columns: repeat(4, minmax(100px, 3fr)); gap: 16px;">
+        <div v-for="icon in icons" style="display: flex;align-items: center;justify-content: center;border: 1px solid #eee;border-radius: 4px;padding: 2px 0;">
+          <CpIcon :key="icon" :type="icon" />
+        </div>
       </div>
     `,
   }),

package/src/stories/CpSelectMenu.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import CpSelectMenu from '@/components/selects/CpSelectMenu.vue'
 
 const meta = {

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "isolatedModules": true,
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "storybook-static", "dist", "build"]
+}

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>

package/src/stories/CpBadgeNew.stories.ts

@@ -1,148 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import CpBadgeNew from '@/components/atomic-elements/CpBadgeNew.vue'
-
-const meta = {
-  title: 'CpBadgeNew',
-  component: CpBadgeNew,
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['gray', 'blue', 'green', 'red', 'orange', 'purple', 'pink', 'yellow'],
-      description: 'The color variant of the badge',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md'],
-      description: 'The size of the badge',
-    },
-    isStroked: {
-      control: 'boolean',
-      description: 'Whether the badge has a stroked border',
-    },
-    leadingIcon: {
-      control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
-      description: 'Type of leading icon (if any)',
-    },
-    trailingIcon: {
-      control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
-      description: 'Type of trailing icon (if any)',
-    },
-    label: {
-      control: 'text',
-      description: 'The label text',
-    },
-  },
-} satisfies Meta<typeof CpBadgeNew>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    color: 'gray',
-    size: 'md',
-    isStroked: false,
-    leadingIcon: '',
-    trailingIcon: '',
-    label: 'Badge',
-  },
-  render: (args) => ({
-    components: { CpBadgeNew },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadgeNew v-bind="args" />',
-  }),
-}
-
-export const WithColors: Story = {
-  render: () => ({
-    components: { CpBadgeNew },
-    template: `
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadgeNew color="gray" label="Gray" />
-        <CpBadgeNew color="blue" label="Blue" />
-        <CpBadgeNew color="green" label="Green" />
-        <CpBadgeNew color="red" label="Red" />
-        <CpBadgeNew color="orange" label="Orange" />
-        <CpBadgeNew color="purple" label="Purple" />
-        <CpBadgeNew color="pink" label="Pink" />
-        <CpBadgeNew color="yellow" label="Yellow" />
-      </div>
-    `,
-  }),
-}
-
-export const WithSizes: Story = {
-  render: () => ({
-    components: { CpBadgeNew },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadgeNew size="sm" label="Small" />
-        <CpBadgeNew size="md" label="Medium" />
-      </div>
-    `,
-  }),
-}
-
-export const IsStroked: Story = {
-  render: () => ({
-    components: { CpBadgeNew },
-    template: `
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadgeNew color="blue" isStroked label="Stroked" />
-        <CpBadgeNew color="green" isStroked label="Stroked" />
-        <CpBadgeNew color="red" isStroked label="Stroked" />
-      </div>
-    `,
-  }),
-}
-
-export const WithIcons: Story = {
-  render: () => ({
-    components: { CpBadgeNew },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadgeNew color="blue" leading-icon="check" label="Leading Icon" />
-        <CpBadgeNew color="green" trailing-icon="arrow-right" label="Trailing Icon" />
-        <CpBadgeNew color="red" leading-icon="check" trailing-icon="arrow-right" label="Both Icons" />
-      </div>
-    `,
-  }),
-}
-
-export const IsClearable: Story = {
-  render: () => ({
-    components: { CpBadgeNew },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadgeNew color="blue" isClearable label="Clearable" />
-        <CpBadgeNew color="green" isClearable label="Clearable" />
-        <CpBadgeNew color="red" isClearable label="Clearable" />
-      </div>
-    `,
-  }),
-}
-
-export const WithSlot: Story = {
-  render: () => ({
-    components: { CpBadgeNew },
-    template: `
-      <CpBadgeNew 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>
-      </CpBadgeNew>
-    `,
-  }),
-}