@citizenplane/pimp 9.15.1 → 9.15.2

package/package.json

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

package/src/components/CpToast.vue

@@ -37,7 +37,7 @@
           </cp-button>
         </div>
         <div
-          v-if="displayTimer(message.life)"
+          v-if="displayTimer(message)"
           aria-hidden="true"
           class="cpToast__timer"
           role="presentation"
@@ -50,15 +50,15 @@
 
 <script setup lang="ts">
 import Toast from 'primevue/toast'
-import { defineProps, withDefaults } from 'vue'
 
 import { CpToastTypes } from '@/constants/CpToastTypes'
 
 import { capitalizeFirstLetter } from '@/helpers'
 
-interface Props {
+interface Message {
   detail?: string
   hideTimer?: boolean
+  life?: number
   primaryAction?: {
     label: string
     onClick: VoidFunction
@@ -71,14 +71,7 @@ interface Props {
   summary: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  hideTimer: false,
-  primaryAction: undefined,
-  secondaryAction: undefined,
-  detail: '',
-})
-
-const displayTimer = (life: number) => !props.hideTimer && life !== undefined
+const displayTimer = (message: Message) => !message.hideTimer && message.life !== undefined
 
 const getDynamicClass = (severity: string) => `cpToast--is${capitalizeFirstLetter(severity)}`
 
@@ -110,12 +103,13 @@ const getButtonColor = (severity: string) => {
   }
 }
 
-const hasActions = (message: Props) => !!message.primaryAction || !!message.secondaryAction
+const hasActions = (message: Message) => !!message.primaryAction || !!message.secondaryAction
 
 const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
 </script>
 
 <style lang="scss">
+.p-toast-message-move,
 .p-toast-message-enter-active {
   transition:
     transform 400ms fn.v(easing-elastic),
@@ -136,7 +130,7 @@ const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
   z-index: -1;
 }
 
-.cpToasts div[role='alert']:not(:only-child).p-toast-message-leave-active {
+.cpToasts .p-toast-message-leave-active:not(:only-child) {
   position: absolute;
 }
 
@@ -144,6 +138,13 @@ const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
   transform: translate3d(-50%, 0, 0);
 }
 
+.cpToasts[data-p^='bottom'] {
+  .p-toast-message-enter-from,
+  .p-toast-message-leave-to {
+    transform: translate3d(0, fn.px-to-rem(30), 0) scale3d(0.75, 0.75, 1);
+  }
+}
+
 .cpToasts > div {
   display: flex;
   flex-direction: column;

package/src/stories/CpToast.stories.ts

@@ -1,4 +1,5 @@
 import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
@@ -131,22 +132,28 @@ export const WithTimer: Story = {
     setup() {
       const toast = useToast()
 
+      const hideTimer = ref(false)
+
       const notifyWithTimer = () => {
         toast.add({
           severity: CpToastTypes.INFO,
           summary: "Hello i'm a cpToast with a timer !",
           detail: 'This is a cpToast description.',
           life: 2500,
+          hideTimer: !hideTimer.value,
         })
       }
 
-      return { args, notifyWithTimer }
+      return { args, notifyWithTimer, hideTimer }
     },
     template: `
       <div style="padding: 16px;">
         <CpToast v-bind="args" />
 
         <cp-button @click="notifyWithTimer">Show toast with timer</cp-button>
+        <div style="margin-top: 24px">
+          <cp-switch v-model="hideTimer" label="Show timer bar ?"</cp-switch>
+        </div>
       </div>
     `,
   }),