@citizenplane/pimp 9.16.1 → 9.16.3

package/package.json

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

package/src/components/CpToast.vue

@@ -20,9 +20,15 @@
             :color="getButtonColor(message.severity)"
             is-square
             size="sm"
-            @click="message.primaryAction.onClick"
+            @click="handleActionClick(message.primaryAction.onClick, closeCallback)"
           >
+            <template v-if="message.primaryAction.leadingIcon" #leading-icon>
+              <cp-icon :type="message.primaryAction.leadingIcon" />
+            </template>
             {{ message.primaryAction.label }}
+            <template v-if="message.primaryAction.trailingIcon" #trailing-icon>
+              <cp-icon :type="message.primaryAction.trailingIcon" />
+            </template>
           </cp-button>
           <cp-button
             v-if="message.secondaryAction"
@@ -31,9 +37,15 @@
             :color="getButtonColor(message.severity)"
             is-square
             size="sm"
-            @click="message.secondaryAction.onClick"
+            @click="handleActionClick(message.secondaryAction.onClick, closeCallback)"
           >
+            <template v-if="message.secondaryAction.leadingIcon" #leading-icon>
+              <cp-icon :type="message.secondaryAction.leadingIcon" />
+            </template>
             {{ message.secondaryAction.label }}
+            <template v-if="message.secondaryAction.trailingIcon" #trailing-icon>
+              <cp-icon :type="message.secondaryAction.trailingIcon" />
+            </template>
           </cp-button>
         </div>
         <div
@@ -60,11 +72,15 @@ interface Message {
   life?: number
   primaryAction?: {
     label: string
+    leadingIcon?: string
     onClick: VoidFunction
+    trailingIcon?: string
   }
   secondaryAction?: {
     label: string
+    leadingIcon?: string
     onClick: VoidFunction
+    trailingIcon?: string
   }
   severity: CpToastTypes
   showTimer?: boolean
@@ -106,6 +122,11 @@ const getButtonColor = (severity: string) => {
 const hasActions = (message: Message) => !!message.primaryAction || !!message.secondaryAction
 
 const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
+
+const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) => {
+  onClick()
+  closeCallback()
+}
 </script>
 
 <style lang="scss">
@@ -130,8 +151,14 @@ const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
   z-index: -1;
 }
 
+.cpToasts {
+  pointer-events: none;
+}
+
 .cpToasts .p-toast-message-leave-active:not(:only-child) {
   position: absolute;
+  left: 0;
+  right: 0;
 }
 
 .cpToasts[data-p$='center'] {
@@ -148,6 +175,7 @@ const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
 .cpToasts > div {
   display: flex;
   flex-direction: column;
+  pointer-events: auto;
   gap: sp.$space;
 }
 
@@ -159,6 +187,7 @@ const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
   overflow: hidden;
   position: relative;
   flex-direction: column;
+  max-width: fn.px-to-rem(400);
   padding: sp.$space-md;
   border-radius: fn.px-to-rem(8);
   box-shadow: var(--toaster-shadow);
@@ -324,4 +353,14 @@ const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
     }
   }
 }
+
+@media (max-width: 451px) {
+  .cpToasts {
+    max-width: calc(100% - #{fn.v(spacing-2xl)});
+    right: 0 !important;
+    left: 0;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
 </style>

package/src/stories/CpToast.stories.ts

@@ -175,12 +175,14 @@ export const WithActions: Story = {
           detail: 'This is a cpToast description.',
           primaryAction: {
             label: 'Primary action',
+            leadingIcon: 'user',
             onClick: () => {
               console.log('Primary action clicked')
             },
           },
           secondaryAction: {
             label: 'Secondary action',
+            trailingIcon: 'arrow-right',
             onClick: () => {
               console.log('Secondary action clicked')
             },