@citizenplane/pimp 9.7.9 → 9.7.11

package/package.json

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

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/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;">