@citizenplane/pimp 8.28.3 → 8.30.0

package/src/stories/CpBadge.stories.ts

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
+import { Colors, Sizes } from '@/constants'
+
 const meta = {
   title: 'CpBadge',
   component: CpBadge,
@@ -13,7 +15,7 @@ const meta = {
     },
     size: {
       control: 'select',
-      options: ['sm', 'md'],
+      options: ['xs', 'sm', 'md'],
       description: 'The size of the badge',
     },
     isStroked: {
@@ -26,12 +28,12 @@ const meta = {
     },
     leadingIcon: {
       control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
       description: 'Type of leading icon (if any)',
     },
     trailingIcon: {
       control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
       description: 'Type of trailing icon (if any)',
     },
     label: {
@@ -45,23 +47,26 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const defaultTemplate = '<CpBadge v-bind="args" />'
+const defaultRender = (args: Args) => ({
+  components: { CpBadge },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
 export const Default: Story = {
   args: {
-    color: 'gray',
-    size: 'md',
+    color: Colors.GRAY,
+    size: Sizes.MD,
     isStroked: false,
     isSquare: false,
     leadingIcon: '',
     trailingIcon: '',
     label: 'Badge',
   },
-  render: (args) => ({
-    components: { CpBadge },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadge v-bind="args" />',
-  }),
+  render: defaultRender,
 }
 
 export const WithColors: Story = {
@@ -83,74 +88,79 @@ export const WithColors: Story = {
 }
 
 export const WithSizes: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
       <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge size="sm" label="Small" />
-        <CpBadge size="md" label="Medium" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="md" label="Medium" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="sm" label="Small" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="xs" label="Extra Small" />
       </div>
     `,
   }),
 }
 
+export const WithLeadingIcon: Story = {
+  args: { ...Default.args, leadingIcon: 'check', label: 'Leading Icon' },
+  render: defaultRender,
+}
+
+export const WithTrailingIcon: Story = {
+  args: { ...Default.args, trailingIcon: 'check', label: 'Trailing Icon' },
+  render: defaultRender,
+}
+
+export const IconOnly: Story = {
+  args: { ...Default.args, leadingIcon: 'check', label: '' },
+  render: defaultRender,
+}
+
 export const IsStroked: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     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 style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge v-bind="args" is-stroked color="blue" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="red" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="orange" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="yellow" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="green" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="purple" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="gray" leading-icon="plus" trailing-icon="plus" label="Label" />
       </div>
     `,
   }),
 }
 
 export const WithIcons: Story = {
-  render: () => ({
-    components: { 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>
-    `,
-  }),
+  args: { ...Default.args, leadingIcon: 'check', trailingIcon: 'arrow-right', label: 'Both Icons' },
+  render: defaultRender,
 }
 
 export const IsSquare: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" isSquare label="Square" />
-        <CpBadge color="green" isSquare label="Square" />
-        <CpBadge color="red" isSquare label="Square" />
-      </div>
-    `,
-  }),
+  args: { ...Default.args, isSquare: true, label: 'Square' },
+  render: defaultRender,
 }
 
 export const IsClearable: Story = {
-  render: () => ({
-    components: { 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>
-    `,
-  }),
+  args: { ...Default.args, isClearable: true, label: 'Clearable' },
+  render: defaultRender,
 }
 
 export const WithSlot: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
-      <CpBadge color="purple">
+      <CpBadge v-bind="args">
         <template #leading-icon>
           <span style="font-size: 16px; margin-right: 4px;">🌟</span>
         </template>

package/src/stories/CpIcon.stories.ts

@@ -46,15 +46,6 @@ 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>
 

package/dist/IconCheckedBaggage-CFuPo731.js

@@ -1,18 +0,0 @@
-import { createElementBlock as e, openBlock as o } from "vue";
-import { _ as r } from "./index-b9vCNG2n.js";
-const t = {}, c = {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "currentColor",
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-function n(l, s) {
-  return o(), e("svg", c);
-}
-const d = /* @__PURE__ */ r(t, [["render", n]]);
-export {
-  d as default
-};

package/src/components/icons/IconCheckedBaggage.vue

@@ -1,11 +0,0 @@
-<template>
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    xmlns="http://www.w3.org/2000/svg"
-  ></svg>
-</template>