@citizenplane/pimp 18.8.0 → 18.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.8.0",
+  "version": "18.8.2",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/css/easings.css

@@ -2,4 +2,5 @@
   --cp-easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);
   --cp-easing-elastic-soft: cubic-bezier(0.34, 1.2, 0.64, 1);
   --cp-easing-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
+  --cp-easing-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/assets/css/transitions.css

@@ -0,0 +1,34 @@
+/* Transitions classes that are globally used */
+
+.scale-elastic-enter-active,
+.scale-elastic-leave-active {
+  transition:
+    scale 200ms var(--cp-easing-elastic),
+    opacity 200ms ease;
+}
+
+.scale-elastic-enter-from,
+.scale-elastic-leave-to {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: transform 500ms var(--cp-easing-ease-out-quart);
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 300ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

package/src/assets/main.css

@@ -4,4 +4,5 @@
 @import "./css/shadows.css";
 @import "./css/typography.css";
 @import "./css/easings.css";
+@import "./css/transitions.css";
 @import "./css/tokens.css";

package/src/components/CpMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="cpMenu">
+    <div v-if="isDrawer" class="cpMenu__drawerOverlay" :class="drawerOverlayDynamicClass" />
     <div
       ref="trigger"
       :aria-controls="menuId"
@@ -62,25 +63,28 @@
 import PrimevueDrawer from 'primevue/drawer'
 import type { MenuItem } from 'primevue/menuitem'
 import PrimevuePopover from 'primevue/popover'
-import { computed, nextTick, onUnmounted, ref, useId } from 'vue'
+import { computed, nextTick, ref, useId } from 'vue'
+
+import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 import CpMenuList from '@/components/CpMenuList.vue'
 
+import { Breakpoints } from '@/constants/layout'
 import { getKeyboardFocusableElements } from '@/helpers/dom'
 
 export interface Props {
   class?: string
   forcePopover?: boolean
-  fullHeightDrawer?: boolean
+  isFullHeightDrawer?: boolean
   items?: MenuItem[]
   keepOpenOnClick?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   class: undefined,
-  fullHeightDrawer: false,
+  isFullHeightDrawer: false,
   items: undefined,
   keepOpenOnClick: false,
 })
@@ -90,37 +94,33 @@ const emits = defineEmits<{
   show: []
 }>()
 
-const MOBILE_BREAKPOINT_PX = 640
-
 const trigger = ref<HTMLElement | null>(null)
 const popover = ref<InstanceType<typeof PrimevuePopover>>()
 const closeButton = ref<InstanceType<typeof CpButton> | null>(null)
 const isOpen = ref(false)
 const menuId = useId()
 
-const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX}px)`)
-const isMobileViewport = ref(mediaQuery.matches)
-const onMediaChange = (event: MediaQueryListEvent) => {
-  isMobileViewport.value = event.matches
-}
-mediaQuery.addEventListener('change', onMediaChange)
-onUnmounted(() => mediaQuery.removeEventListener('change', onMediaChange))
+const isMobileViewport = useIsBreakpoint(Breakpoints.TABLET)
 
 const isDrawer = computed(() => isMobileViewport.value && !props.forcePopover)
 const hasItems = computed(() => props.items?.length)
 const popupType = computed(() => (hasItems.value ? 'menu' : 'dialog'))
 
 const popoverPt = {
-  root: { class: ['cpMenu__overlay', props.class] },
-  content: { class: 'cpMenu__overlayContent' },
+  root: { class: ['cpMenu__menu', props.class] },
+  content: { class: 'cpMenu__menuContent' },
   transition: { name: 'scale-elastic', duration: 100 },
 }
 
+const drawerOverlayDynamicClass = computed(() => ({
+  'cpMenu__drawerOverlay--isOpen': isOpen.value,
+}))
+
 const drawerPt = {
-  root: { class: ['cpMenu__drawer', { 'cpMenu__drawer--fullHeight': props.fullHeightDrawer }] },
+  root: { class: ['cpMenu__drawer', { 'cpMenu__drawer--isFullHeight': props.isFullHeightDrawer }] },
   content: { class: 'cpMenu__drawerContent' },
-  mask: { class: 'cpMenu__drawerMask' },
   header: { class: 'cpMenu__drawerHeader' },
+  transition: { name: 'drawer', duration: 300 },
 }
 
 const show = (event: Event) => {
@@ -171,7 +171,7 @@ defineExpose({ show, hide, toggle })
     cursor: pointer;
   }
 
-  &__overlay {
+  &__menu {
     position: absolute;
     min-width: calc(var(--cp-dimensions-1) * 62.5);
     border-radius: var(--cp-radius-md);
@@ -182,18 +182,25 @@ defineExpose({ show, hide, toggle })
     will-change: opacity, transform;
   }
 
-  &__overlayContent {
+  &__menuContent {
     padding: var(--cp-spacing-sm) 0;
   }
 
-  &__drawerMask {
+  &__drawerOverlay {
     position: fixed;
-    z-index: 2;
+    z-index: 0;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     background-color: var(--cp-background-overlay);
     inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 250ms ease;
+
+    &--isOpen {
+      opacity: 1;
+    }
   }
 
   &__drawer {
@@ -208,7 +215,7 @@ defineExpose({ show, hide, toggle })
     box-shadow: var(--cp-shadows-overlay);
   }
 
-  &__drawer--fullHeight {
+  &__drawer--isFullHeight {
     height: 100%;
     max-height: 100%;
     border-radius: 0;
@@ -230,29 +237,4 @@ defineExpose({ show, hide, toggle })
     padding: var(--cp-spacing-md) var(--cp-spacing-xl);
   }
 }
-
-.scale-elastic-enter-active,
-.scale-elastic-leave-active {
-  transition:
-    scale 200ms var(--cp-easing-elastic),
-    opacity 200ms ease;
-}
-
-.scale-elastic-enter-from,
-.scale-elastic-leave-to {
-  opacity: 0;
-  scale: 0.9;
-}
-
-.p-drawer-enter-active,
-.p-drawer-leave-active {
-  transition:
-    transform 300ms ease,
-    opacity 250ms ease;
-}
-
-.p-drawer-enter-from,
-.p-drawer-leave-to {
-  transform: translateY(100%);
-}
 </style>

package/src/components/icons/IconDestination.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16 11.9999C16 9.02546 18.1644 6.55652 21.0042 6.08217C21.5489 5.99118 22 6.44763 22 6.99992C22 7.5522 21.5453 7.98709 21.0101 8.12334C19.2798 8.56386 18 10.1324 18 11.9999C18 13.8674 19.2798 15.436 21.0101 15.8765C21.5453 16.0127 22 16.4476 22 16.9999C22 17.5522 21.5489 18.0087 21.0042 17.9177C18.1644 17.4433 16 14.9744 16 11.9999ZM11.5859 12.9999L9.29297 15.2929C8.90244 15.6834 8.90244 16.3164 9.29297 16.7069C9.68349 17.0975 10.3165 17.0975 10.707 16.7069L14.6967 12.7173C14.8838 12.5356 15 12.2813 15 11.9999C15 11.7185 14.8838 11.4642 14.6967 11.2825L10.707 7.29288C10.3165 6.90236 9.68349 6.90236 9.29297 7.29288C8.90244 7.68341 8.90244 8.31642 9.29297 8.70695L11.5859 10.9999H2C1.44772 10.9999 1 11.4476 1 11.9999C1 12.5522 1.44772 12.9999 2 12.9999H11.5859Z"/>
+  </svg>
+</template>

package/src/components/icons/IconOrigin.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M2 6.99992C2 6.44763 2.45108 5.99118 2.99581 6.08217C5.83559 6.55653 8 9.02546 8 11.9999C8 14.9744 5.83559 17.4433 2.99581 17.9177C2.45107 18.0087 2 17.5522 2 16.9999C2 16.4476 2.45467 16.0127 2.98988 15.8765C4.72024 15.436 6 13.8674 6 11.9999C6 10.1324 4.72024 8.56386 2.98988 8.12334C2.45467 7.98709 2 7.5522 2 6.99992ZM19.5859 13H10C9.44771 13 9 12.5523 9 12C9 11.4478 9.44771 11 10 11H19.5859L17.293 8.70707C16.9024 8.31655 16.9024 7.68353 17.293 7.29301C17.6835 6.90248 18.3165 6.90248 18.707 7.29301L22.707 11.293C23.0976 11.6835 23.0976 12.3165 22.707 12.7071L18.707 16.7071C18.3165 17.0976 17.6835 17.0976 17.293 16.7071C16.9024 16.3165 16.9024 15.6835 17.293 15.293L19.5859 13Z"/>
+  </svg>
+</template>

package/src/composables/useIsBreakpoint.ts

@@ -0,0 +1,16 @@
+import { useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+
+import { Breakpoints } from '@/constants/layout'
+
+export const useIsBreakpoint = (breakpoint: Breakpoints = Breakpoints.MOBILE) => {
+  const isMounted = ref(false)
+  onMounted(() => (isMounted.value = true))
+
+  const { width } = useWindowSize()
+
+  return computed(() => {
+    if (!isMounted.value) return false
+    return width.value < breakpoint
+  })
+}

package/src/constants/CpCustomIcons.ts

@@ -38,6 +38,7 @@ import IconCorrosive from '@/components/icons/IconCorrosive.vue'
 import IconDashedCircle from '@/components/icons/IconDashedCircle.vue'
 import IconDedicated from '@/components/icons/IconDedicated.vue'
 import IconDeparture from '@/components/icons/IconDeparture.vue'
+import IconDestination from '@/components/icons/IconDestination.vue'
 import IconDeviceForbidden from '@/components/icons/IconDeviceForbidden.vue'
 import IconDirectFlightAlt from '@/components/icons/IconDirectFlightAlt.vue'
 import IconDistribution from '@/components/icons/IconDistribution.vue'
@@ -92,6 +93,7 @@ import IconNoSeat from '@/components/icons/IconNoSeat.vue'
 import IconNotion from '@/components/icons/IconNotion.vue'
 import IconOffline from '@/components/icons/IconOffline.vue'
 import IconOneWay from '@/components/icons/IconOneWay.vue'
+import IconOrigin from '@/components/icons/IconOrigin.vue'
 import IconOta from '@/components/icons/IconOta.vue'
 import IconOtaFilled from '@/components/icons/IconOtaFilled.vue'
 import IconPaid from '@/components/icons/IconPaid.vue'
@@ -173,6 +175,7 @@ export const CustomCpIcons = {
   dedicated: IconDedicated,
   departure: IconDeparture,
   'direct-flight-alt': IconDirectFlightAlt,
+  destination: IconDestination,
   'device-forbidden': IconDeviceForbidden,
   distribution: IconDistribution,
   'distribution-closed': IconDistributionClosed,
@@ -226,6 +229,7 @@ export const CustomCpIcons = {
   notion: IconNotion,
   offline: IconOffline,
   'one-way': IconOneWay,
+  origin: IconOrigin,
   ota: IconOta,
   'ota-filled': IconOtaFilled,
   paid: IconPaid,

package/src/stories/CpMenu.stories.ts

@@ -29,7 +29,7 @@ const meta = {
       description: 'Disable the bottom-drawer behavior on mobile and keep the popover anchored to the trigger.',
       table: { defaultValue: { summary: 'false' } },
     },
-    fullHeightDrawer: {
+    isFullHeightDrawer: {
       control: 'boolean',
       description: 'When enabled, the mobile drawer takes the full available height.',
       table: { defaultValue: { summary: 'false' } },
@@ -132,7 +132,10 @@ export const ForcePopoverOnMobile: Story = {
  */
 export const FullHeightDrawer: Story = {
   args: {
-    fullHeightDrawer: true,
+    isFullHeightDrawer: true,
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
   },
   render: (args) => ({
     components: { CpButton, CpMenu },
@@ -150,7 +153,7 @@ export const FullHeightDrawer: Story = {
     template: `
       <CpMenu v-bind="args" :items="items">
         <template #trigger>
-          <CpButton>Open full-height drawer</CpButton>
+          <CpButton size="xs" appearance="secondary">Open drawer</CpButton>
         </template>
       </CpMenu>
     `,