@citizenplane/pimp 18.8.1 → 18.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.8.1",
+  "version": "18.8.3",
   "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/CpTrip.vue

@@ -96,6 +96,8 @@ const uniqueAirlines = computed(() => {
 
 <style lang="scss">
 .cpTrip {
+  width: 100%;
+
   &__header {
     display: flex;
     align-items: center;
@@ -126,6 +128,7 @@ const uniqueAirlines = computed(() => {
     position: relative;
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     justify-content: center;
 
     &:last-child {

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/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>
     `,