@citizenplane/pimp 9.13.2 → 9.13.4

package/package.json

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

package/src/components/CpBadge.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="cpBadge" :class="componentDynamicClasses">
     <slot name="leading-icon">
-      <cp-icon v-if="leadingIcon" :type="leadingIcon" class="cpBadge__icon" />
+      <cp-icon v-if="leadingIcon" class="cpBadge__icon" :type="leadingIcon" />
     </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" />
+      <cp-icon v-if="trailingIcon" class="cpBadge__icon" :type="trailingIcon" />
     </slot>
-    <button v-if="isClearable" class="cpBadge__clear" type="button" :disabled="isDisabled" @click="handleClear">
-      <cp-icon type="x" class="cpBadge__clearIcon" />
+    <button v-if="isClearable" class="cpBadge__clear" :disabled="isDisabled" type="button" @click="handleClear">
+      <cp-icon class="cpBadge__clearIcon" type="x" />
     </button>
   </div>
 </template>
@@ -28,6 +28,7 @@ interface Emits {
 interface Props {
   color?: Colors
   isClearable?: boolean
+  isDashed?: boolean
   isDisabled?: boolean
   isSquare?: boolean
   isStroked?: boolean
@@ -57,6 +58,7 @@ const componentDynamicClasses = computed(() => {
     `cpBadge--is${capitalizeFirstLetter(props.color)}`,
     { 'cpBadge--isStroked': props.isStroked },
     { 'cpBadge--isSquare': props.isSquare },
+    { 'cpBadge--isDashed': props.isDashed },
     { 'cpBadge--isDisabled': props.isDisabled },
   ]
 })
@@ -108,6 +110,10 @@ const handleClear = () => emit('onClear')
     outline: 1px solid currentColor;
   }
 
+  &--isDashed {
+    outline-style: dashed;
+  }
+
   &--isSquare {
     border-radius: fn.px-to-rem(8);
 

package/src/components/icons/IconNoPassport.vue

@@ -1,26 +1,27 @@
 <template>
   <svg
-    width="24"
+    clip-rule="evenodd"
+    fill="currentColor"
+    fill-rule="evenodd"
     height="24"
     viewBox="0 0 24 24"
-    fill="none"
+    width="24"
     xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
   >
     <g clip-path="url(#clip0_4785_394)">
-      <path d="M1 1L23 23" />
-      <path d="M4.68018 9.35397V21H16.0532M19.4477 19.1946V5C19.4477 3.89543 18.5522 3 17.4477 3H7H4.68018V4.53769" />
       <path
-        d="M12.4003 12.2968C13.9007 12.0992 15.0588 10.8153 15.0588 9.26086C15.0588 7.56956 13.6878 6.19849 11.9965 6.19849C10.5229 6.19849 9.29238 7.23929 9 8.62587"
+        d="M0.292977 0.292992C0.683498 -0.0974964 1.31652 -0.0975061 1.70704 0.292992L3.81544 2.40139C3.99781 2.15781 4.28852 2.00004 4.61622 2.00002H17.3838C19.0406 2.00007 20.3838 3.3432 20.3838 5.00002V18.9697L23.707 22.293C24.0976 22.6835 24.0975 23.3165 23.707 23.7071C23.3165 24.0976 22.6835 24.0976 22.293 23.7071L0.292977 1.70705C-0.0975315 1.31653 -0.0975422 0.683511 0.292977 0.292992ZM5.61622 4.20217L8.50196 7.08791C9.22217 5.95299 10.4883 5.19839 11.9326 5.19827C14.1759 5.1985 15.995 7.01743 15.9951 9.26077C15.9951 10.7049 15.2405 11.9711 14.1055 12.6914L18.3838 16.9697V5.00002C18.3838 4.44777 17.936 4.00007 17.3838 4.00002H5.61622V4.20217ZM11.9326 7.19827C11.0354 7.19842 10.2711 7.77302 9.98829 8.57424L12.6182 11.2041C13.4194 10.9216 13.9951 10.1587 13.9951 9.26077C13.995 8.122 13.0714 7.1985 11.9326 7.19827Z"
+      />
+      <path
+        d="M4.61622 8.35354C5.16835 8.35354 5.61597 8.80146 5.61622 9.35354V20H15.9893C16.5415 20 16.9893 20.4477 16.9893 21C16.9893 21.5523 16.5415 22 15.9893 22H4.61622C4.06396 22 3.61622 21.5523 3.61622 21V9.35354C3.61646 8.80148 4.06411 8.35357 4.61622 8.35354Z"
+      />
+      <path
+        d="M11.3223 15.3047C11.8742 15.3051 12.3223 15.7526 12.3223 16.3047C12.3221 16.8567 11.8742 17.3043 11.3223 17.3047H9.14259C8.59038 17.3047 8.14272 16.8569 8.14259 16.3047C8.14259 15.7524 8.5903 15.3047 9.14259 15.3047H11.3223Z"
       />
-      <path d="M9.20605 16.3044H11.3855" />
     </g>
     <defs>
       <clipPath id="clip0_4785_394">
-        <rect width="24" height="24" fill="white" />
+        <rect fill="white" height="24" width="24" />
       </clipPath>
     </defs>
   </svg>

package/src/components/icons/IconPassport.vue

@@ -1,18 +1,21 @@
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    clip-rule="evenodd"
+    fill="currentColor"
+    fill-rule="evenodd"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
-      d="M5 3H17.7675C18.8721 3 19.7675 3.89543 19.7675 5V19C19.7675 20.1046 18.8721 21 17.7675 21H5V3Z"
-      stroke="#3E3E5B"
-      stroke-width="2"
-      stroke-linejoin="round"
+      d="M14.7227 15.3047C15.2747 15.3049 15.7227 15.7526 15.7227 16.3047C15.7225 16.8567 15.2747 17.3044 14.7227 17.3047H9.14258C8.59037 17.3047 8.14271 16.8569 8.14258 16.3047C8.14258 15.7524 8.59029 15.3047 9.14258 15.3047H14.7227Z"
     />
-    <circle cx="12.3163" cy="9.26086" r="3.06237" stroke="#3E3E5B" stroke-width="2" />
     <path
-      d="M9.52588 16.3044H15.1062"
-      stroke="#3E3E5B"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      d="M11.9326 5.19824C14.1761 5.19831 15.995 7.01731 15.9951 9.26074C15.995 11.5042 14.1761 13.3232 11.9326 13.3232C9.6891 13.3232 7.87019 11.5043 7.87012 9.26074C7.87025 7.01728 9.68913 5.19827 11.9326 5.19824ZM11.9326 7.19824C10.7937 7.19827 9.87025 8.12185 9.87012 9.26074C9.87019 10.3997 10.7937 11.3232 11.9326 11.3232C13.0715 11.3232 13.995 10.3997 13.9951 9.26074C13.995 8.12188 13.0715 7.19831 11.9326 7.19824Z"
+    />
+    <path
+      d="M17.3838 2C19.0406 2.00005 20.3838 3.34318 20.3838 5V19C20.3838 20.6568 19.0406 21.9999 17.3838 22H4.61621C4.06395 22 3.61621 21.5523 3.61621 21V3C3.61621 2.44773 4.06395 2.00002 4.61621 2H17.3838ZM5.61621 20H17.3838C17.936 19.9999 18.3838 19.5523 18.3838 19V5C18.3838 4.44775 17.936 4.00005 17.3838 4H5.61621V20Z"
     />
   </svg>
 </template>

package/src/stories/CpBadge.stories.ts

@@ -22,6 +22,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the badge has a stroked border',
     },
+    isDashed: {
+      control: 'boolean',
+      description: 'Whether the badge has a dashed border',
+    },
     isSquare: {
       control: 'boolean',
       description: 'Whether the badge has a square border',
@@ -145,6 +149,26 @@ export const IsStroked: Story = {
   }),
 }
 
+export const IsDashed: Story = {
+  render: (args: Args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge v-bind="args" is-dashed is-stroked color="blue" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-dashed is-stroked color="red" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-dashed is-stroked color="orange" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-dashed is-stroked color="yellow" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-dashed is-stroked color="green" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-dashed is-stroked color="purple" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-dashed is-stroked color="gray" leading-icon="plus" trailing-icon="plus" label="Label" />
+      </div>
+    `,
+  }),
+}
+
 export const IsSquare: Story = {
   args: { ...Default.args, isSquare: true, label: 'Square' },
   render: defaultRender,

package/src/stories/CpIcon.stories.ts

@@ -113,3 +113,26 @@ export const AllIcons: Story = {
     `,
   }),
 }
+
+export const AllIconsColored: Story = {
+  args: {
+    type: 'check',
+  },
+  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; flex-direction: column; align-items: center;border: 1px solid #eee;border-radius: 4px;">
+          <span style="font-size: 12px; padding: 8px; word-break: break-word;">{{ icon }}</span>
+          <hr style="width: 100%; background-color: #eee; height: 1px; border: 0" />
+          <div style="padding: 20px; color: green;background-color: #f0fdf4;width: 100%;display: flex;align-items: center;justify-content: center;height: 100%;">
+            <CpIcon :key="icon" :type="icon" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}