@citizenplane/pimp 8.25.3 → 8.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "8.25.3",
+  "version": "8.25.4",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/visual/CpIcon.vue

@@ -39,12 +39,16 @@ const dynamicIcon = computed(() => {
 
   if (isFeatherIcon.value) {
     return 'svg'
-  } else if (type.value === 'checked-baggage') {
-    return weight.value >= 30 ? CustomCpIcons['checked-baggage-20'] : CustomCpIcons['checked-baggage-30']
-  } else {
+  } else if (isCustomIcon.value) {
+    if (type.value === 'checked-baggage') {
+      return weight.value >= 30 ? CustomCpIcons['checked-baggage-20'] : CustomCpIcons['checked-baggage-30']
+    }
     // @ts-expect-error cannot use string as index type for CustomCpIcons
-    return CustomCpIcons[type.value] || ''
+    return CustomCpIcons[type.value]
   }
+
+  // Fallback to SVG for any other case
+  return 'svg'
 })
 
 const wrapperAttrs = computed(() => {
@@ -76,8 +80,9 @@ const iconAttrs = computed(() => {
       class: 'cpIcon__content',
     }
   } else {
+    // Default to square icon if type is not found
     // @ts-expect-error cannot use string as index type for feather.icons
-    const featherIcon = feather.icons[type.value]
+    const featherIcon = feather.icons[type.value] || feather.icons['square']
     return {
       ...featherIcon.attrs,
       ...attrs,

package/src/constants/src/CpCustomIcons.ts

@@ -48,7 +48,7 @@ export default {
   'no-refund': defineAsyncComponent(() => import('@/components/icons/IconNoRefund.vue')),
   notion: defineAsyncComponent(() => import('@/components/icons/IconNotion.vue')),
   offline: defineAsyncComponent(() => import('@/components/icons/IconOffline.vue')),
-  'on-way': defineAsyncComponent(() => import('@/components/icons/IconOneWay.vue')),
+  'one-way': defineAsyncComponent(() => import('@/components/icons/IconOneWay.vue')),
   ota: defineAsyncComponent(() => import('@/components/icons/IconOta.vue')),
   paid: defineAsyncComponent(() => import('@/components/icons/IconPaid.vue')),
   passport: defineAsyncComponent(() => import('@/components/icons/IconPassport.vue')),

package/src/stories/CpIcon.stories.ts

@@ -24,6 +24,7 @@ const iconsOptions = [
   'settings',
   'user',
   'x',
+  'invalid-icon-name',
 ].sort()
 
 const meta = {
@@ -47,7 +48,9 @@ const meta = {
       control: 'number',
       description: 'Weight for specific icons like checked-baggage',
       table: {
-        defaultValue: { summary: 0 },
+        defaultValue: {
+          summary: '0',
+        },
       },
     },
   },
@@ -96,6 +99,9 @@ export const DifferentSizes: Story = {
 }
 
 export const AllIcons: Story = {
+  args: {
+    type: 'check',
+  },
   render: () => ({
     components: { CpIcon },
     setup() {