@citizenplane/pimp 9.7.8 → 9.7.11

package/package.json

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

package/src/components/CpMultiselect.vue

@@ -6,21 +6,21 @@
     <auto-complete
       ref="multiselect"
       v-model="selectModel"
-      :append-to="appendTo"
+      :append-to
       auto-option-focus
       :data-key="trackBy"
-      :disabled="disabled"
+      :disabled
       :force-selection
-      :input-class="inputClass"
+      :input-class
       :invalid="isInvalid"
-      :multiple="multiple"
-      :name="name"
-      :option-disabled="optionDisabled"
-      :option-label="optionLabel"
-      :placeholder="placeholder"
+      :multiple
+      :name
+      :option-disabled
+      :option-label
+      :placeholder
       :pt="passThroughConfig"
       :suggestions="options"
-      :typeahead="typeahead"
+      :typeahead
       @click="handleClick"
       @complete="handleSearch"
       @hide="handleOverlayHidden"
@@ -115,6 +115,7 @@ interface Props {
   options?: unknown[]
   placeholder?: string
   required?: boolean
+  size?: 'sm' | 'md'
   trackBy?: string
   withoutTypeahead?: boolean
 }
@@ -131,6 +132,7 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
   optionDisabled: 'disabled',
   options: () => [],
+  size: 'md',
 })
 
 const emit = defineEmits<Emits>()
@@ -154,7 +156,7 @@ const inputClass = computed(() => ({
 }))
 
 const passThroughConfig = computed(() => ({
-  root: { class: `cpMultiselect__select` },
+  root: { class: `cpMultiselect__select cpMultiselect__select--${props.size}` },
   inputmultiple: { class: 'cpMultiselect__tags' },
   dropdown: { class: 'cpMultiselect__toggle' },
   inputchip: { class: 'cpMultiselect__inputWrapper' },
@@ -302,6 +304,10 @@ onMounted(() => overrideAlignOverlay())
     border-radius: fn.px-to-rem(8);
     gap: sp.$space;
 
+    &--sm {
+      padding: sp.$space-sm sp.$space-md;
+    }
+
     &:has(input:hover):not(:has(input:disabled)) {
       outline: fn.px-to-rem(1) solid colors.$primary-color;
     }
@@ -376,6 +382,7 @@ onMounted(() => overrideAlignOverlay())
     font-size: fn.px-to-rem(14);
     line-height: fn.px-to-rem(24);
     background-color: transparent;
+    width: 100%;
 
     &:disabled {
       color: colors.$gray-500;

package/src/components/CpToaster.vue

@@ -17,11 +17,16 @@
           <p v-if="description" class="cpToaster__description">{{ description }}</p>
         </div>
       </div>
-      <button class="cpToaster__close" type="button" @click="closeToaster"><cp-icon type="x" /></button>
+      <button class="cpToaster__close" type="button" @click="closeToaster">
+        <cp-icon type="x" />
+      </button>
       <div v-if="actionLabel" class="cpToaster__footer">
-        <button class="cpToaster__button" type="button" @click="handleActionMethod">
+        <button v-if="actionIsButton" class="cpToaster__button" type="button" @click="handleActionMethod">
           {{ actionLabel }}
         </button>
+        <a v-else class="cpToaster__button" v-bind="actionLinkProperties">
+          {{ actionLabel }}
+        </a>
       </div>
     </div>
   </transition>
@@ -37,7 +42,9 @@ import CpIcon from '@/components/CpIcon.vue'
 import { HeadingLevels, Intent } from '@/constants'
 
 interface Props {
+  actionAs?: 'link' | 'button'
   actionLabel?: string
+  actionLinkProperties?: Record<string, unknown>
   actionMethod?: (vmProperties: Record<string, unknown>) => void
   delayBeforeCloseInMs?: number
   description?: string
@@ -55,6 +62,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'info',
   delayBeforeCloseInMs: 5000,
   actionLabel: '',
+  actionLinkProperties: () => ({}),
+  actionAs: 'button',
   actionMethod: () => {},
   isUnique: false,
 })
@@ -78,6 +87,8 @@ const countDownInterval = ref<ReturnType<typeof setInterval>>()
 
 const instance = getCurrentInstance()
 
+const actionIsButton = computed(() => props.actionAs === 'button')
+
 const toasterIcon = computed(() => {
   const intentValues = Object.values(Intent)
   const intent = intentValues.find((intentItem) => intentItem.value === props.type)
@@ -185,8 +196,8 @@ const closeToaster = (): void => {
 }
 
 const removeElement = (el: Element): void => {
-  if (typeof (el as HTMLElement).remove !== 'undefined') {
-    ;(el as HTMLElement).remove()
+  if (typeof el.remove !== 'undefined') {
+    el.remove()
   } else if (el.parentNode) {
     el.parentNode.removeChild(el)
   }

package/src/stories/CpMultiselect.stories.ts

@@ -95,6 +95,11 @@ const meta = {
       control: 'text',
       description: 'Property to track the selected option',
     },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'Size of the multiselect',
+    },
   },
 } satisfies Meta<typeof CpMultiselect>
 
@@ -139,7 +144,7 @@ export const Single: Story = {
       return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
     },
     template: `
-      <div style="padding: 20px;">
+      <div style="padding: 20px;width: 25rem;">
         <CpMultiselect v-model="selectedSupplier" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
           <template #prefix>
             <cp-partner-badge type="supplier" size="sm" />

package/src/stories/CpToaster.stories.ts

@@ -6,6 +6,15 @@ const meta = {
   title: 'CpToaster',
   component: CpToaster,
   argTypes: {
+    actionAs: {
+      control: 'select',
+      options: ['link', 'button'],
+      description: 'Determines if the action is a link or a button',
+    },
+    actionLinkProperties: {
+      control: 'object',
+      description: 'Properties for the action link when actionAs is "link"',
+    },
     title: {
       control: 'text',
       description: 'The title of the toast',
@@ -37,15 +46,17 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const defaultArgs = {
+  title: 'Default Toast',
+  description: 'This is a default toast message',
+  type: 'info',
+  delayBeforeCloseInMs: 3000,
+  actionLabel: '',
+  isUnique: false,
+}
+
 export const Default: Story = {
-  args: {
-    title: 'Default Toast',
-    description: 'This is a default toast message',
-    type: 'info',
-    delayBeforeCloseInMs: 3000,
-    actionLabel: '',
-    isUnique: false,
-  },
+  args: defaultArgs,
   render: (args) => ({
     template: `
       <div style="padding: 20px;">
@@ -61,6 +72,7 @@ export const Default: Story = {
 }
 
 export const DifferentTypes: Story = {
+  args: defaultArgs,
   render: () => ({
     template: `
       <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
@@ -103,7 +115,35 @@ export const DifferentTypes: Story = {
   }),
 }
 
-export const WithAction: Story = {
+export const WithActionAsLink: Story = {
+  args: defaultArgs,
+  render: () => ({
+    template: `
+      <div style="padding: 20px;">
+        <cp-button @click="addLinkToaster">Show Toast with Action</cp-button>
+      </div>
+    `,
+    methods: {
+      addLinkToaster() {
+        this.$toaster.success({
+          title: 'This is a success toaster',
+          description: 'Description of a toaster with a link',
+          actionAs: 'link',
+          actionLabel: 'See flight information',
+          actionLinkProperties: {
+            href: 'http://app.citizenplane.com',
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+          isUnique: true,
+        })
+      },
+    },
+  }),
+}
+
+export const WithActionAsButton: Story = {
+  args: defaultArgs,
   render: () => ({
     template: `
       <div style="padding: 20px;">
@@ -117,9 +157,8 @@ export const WithAction: Story = {
           description: 'Description of a toaster with a link',
           actionLabel: 'See flight information',
           isUnique: true,
-          actionMethod: (vm) => {
-            vm.closeToaster()
-            window.open('http://app.citizenplane.com', '_blank')
+          actionMethod: () => {
+            alert('Action button clicked!')
           },
         })
       },
@@ -128,6 +167,7 @@ export const WithAction: Story = {
 }
 
 export const CustomDuration: Story = {
+  args: defaultArgs,
   render: () => ({
     template: `
       <div style="padding: 20px;">