@citizenplane/pimp 18.24.0 → 18.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.24.0",
+  "version": "18.25.1",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -75,6 +75,7 @@
     "@vitest/coverage-v8": "4.1.9",
     "@vue/test-utils": "2.4.11",
     "commitlint-config-gitmoji": "2.3.1",
+    "flag-icons": "7.5.0",
     "happy-dom": "20.14.5",
     "husky": "9.1.7",
     "lint-staged": "17.2.0",

package/src/components/CpDynamicMenu.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="cpDynamicMenu">
+    <cp-menu v-if="!isMobile" ref="menuRef" v-bind="menuProps" @hide="onMenuHide" @show="onMenuShow">
+      <template #trigger>
+        <slot name="trigger" />
+      </template>
+      <slot />
+    </cp-menu>
+    <template v-else>
+      <div
+        ref="triggerRef"
+        :aria-controls="menuId"
+        :aria-expanded="isSheetVisible"
+        :aria-haspopup="popupType"
+        class="cpDynamicMenu__trigger"
+        @click="toggleSheet"
+      >
+        <slot name="trigger" />
+      </div>
+      <cp-bottom-sheet v-model="isSheetVisible" v-bind="bottomSheetProps">
+        <template v-if="hasSheetTitle" #header>
+          <slot name="sheet-title">
+            <cp-heading class="cpDynamicMenu__sheetTitle" heading-level="h3">{{ sheetTitle }}</cp-heading>
+          </slot>
+        </template>
+        <cp-menu-list v-if="hasItems" :id="menuId" :items="items" @async-complete="onItemClick" @click="onItemClick" />
+        <slot v-else />
+        <template #footer>
+          <slot name="footer" />
+        </template>
+      </cp-bottom-sheet>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import { computed, ref, useId, useSlots, useTemplateRef, watch } from 'vue'
+
+import type { CpMenuPlacement } from '@/components/CpMenu.vue'
+
+import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
+
+import CpBottomSheet from '@/components/CpBottomSheet.vue'
+import CpHeading from '@/components/CpHeading.vue'
+import CpMenu from '@/components/CpMenu.vue'
+import CpMenuList from '@/components/CpMenuList.vue'
+
+import { Breakpoints } from '@/constants/layout'
+import { getKeyboardFocusableElements } from '@/helpers/dom'
+
+interface Props {
+  animationDuration?: number
+  breakpoint?: number
+  class?: string
+  contentClass?: string
+  expandOnContentDrag?: boolean
+  halfAndExpand?: boolean
+  items?: MenuItem[]
+  keepOpenOnClick?: boolean
+  placement?: CpMenuPlacement
+  preventClose?: boolean
+  sheetTitle?: string
+  snapPoints?: Array<number | `${number}%`>
+  swipeCloseThreshold?: string
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<{
+  hide: []
+  show: []
+}>()
+
+const slots = useSlots()
+
+const isMobile = useIsBreakpoint(props.breakpoint ?? Breakpoints.MOBILE)
+
+const menuRef = useTemplateRef('menuRef')
+const triggerRef = useTemplateRef<HTMLElement>('triggerRef')
+
+const isMenuOpen = ref(false)
+const isSheetVisible = ref(false)
+const menuId = useId()
+
+const hasItems = computed(() => Boolean(props.items?.length))
+const hasSheetTitle = computed(() => Boolean(props.sheetTitle || slots['sheet-title']))
+
+const popupType = computed(() => {
+  if (hasItems.value) return 'menu'
+  return 'dialog'
+})
+
+const menuProps = computed(() => ({
+  class: props.class,
+  forcePopover: true,
+  items: props.items,
+  keepOpenOnClick: props.keepOpenOnClick,
+  placement: props.placement,
+}))
+
+const sheetContentClass = computed(() => {
+  if (!hasItems.value) return props.contentClass
+  if (!props.contentClass) return 'cpDynamicMenu__menuListContent'
+  return `cpDynamicMenu__menuListContent ${props.contentClass}`
+})
+
+const sheetBaseClass = computed(() => {
+  if (hasSheetTitle.value) return 'cpDynamicMenu__sheet'
+  return 'cpDynamicMenu__sheet cpDynamicMenu__sheet--hasNoTitle'
+})
+
+const sheetClass = computed(() => {
+  if (!props.class) return sheetBaseClass.value
+  return `${sheetBaseClass.value} ${props.class}`
+})
+
+const bottomSheetProps = computed(() => ({
+  animationDuration: props.animationDuration,
+  canBackdropClose: !props.preventClose,
+  canSwipeClose: !props.preventClose,
+  class: sheetClass.value,
+  contentClass: sheetContentClass.value,
+  expandOnContentDrag: props.expandOnContentDrag,
+  halfAndExpand: props.halfAndExpand,
+  preventClose: props.preventClose,
+  snapPoints: props.snapPoints,
+  swipeCloseThreshold: props.swipeCloseThreshold,
+}))
+
+const focusTrigger = () => {
+  if (!triggerRef.value) return
+  const [firstFocusableElement] = getKeyboardFocusableElements(triggerRef.value) as HTMLElement[]
+  firstFocusableElement?.focus()
+}
+
+// CpMenu emits show/hide twice when driven imperatively, so only real state changes are relayed.
+const onMenuShow = () => {
+  if (isMenuOpen.value) return
+  isMenuOpen.value = true
+  emits('show')
+}
+
+const onMenuHide = () => {
+  if (!isMenuOpen.value) return
+  isMenuOpen.value = false
+  emits('hide')
+}
+
+const toggleSheet = () => {
+  isSheetVisible.value = !isSheetVisible.value
+}
+
+const onItemClick = () => {
+  if (props.keepOpenOnClick) return
+  isSheetVisible.value = false
+}
+
+const show = (event: Event) => {
+  if (isMobile.value) {
+    isSheetVisible.value = true
+    return
+  }
+  menuRef.value?.show(event)
+}
+
+const hide = () => {
+  if (isMobile.value) {
+    isSheetVisible.value = false
+    return
+  }
+  menuRef.value?.hide()
+}
+
+const toggle = (event: Event) => {
+  if (isMobile.value) {
+    toggleSheet()
+    return
+  }
+  menuRef.value?.toggle(event)
+}
+
+watch(isSheetVisible, (isVisible) => {
+  if (isVisible) {
+    emits('show')
+    return
+  }
+  emits('hide')
+  focusTrigger()
+})
+
+watch(isMobile, (isMobileViewport) => {
+  if (!isMobileViewport) {
+    isSheetVisible.value = false
+    return
+  }
+  if (isMenuOpen.value) menuRef.value?.hide()
+})
+
+defineExpose({ show, hide, toggle })
+</script>
+
+<style lang="scss">
+.cpDynamicMenu {
+  display: contents;
+
+  &__trigger {
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  &__sheetTitle {
+    font-size: var(--cp-text-size-2xl);
+    font-weight: 700;
+    line-height: var(--cp-line-height-2xl);
+  }
+
+  &__menuListContent.cpBottomSheet__content {
+    padding: var(--cp-spacing-sm) 0;
+  }
+
+  &__sheet--hasNoTitle .cpBottomSheet__header {
+    padding-bottom: 0;
+  }
+}
+</style>

package/src/components/CpLanguageSwitcher.vue

@@ -0,0 +1,151 @@
+<template>
+  <cp-dynamic-menu
+    ref="dynamicMenuRef"
+    :breakpoint="breakpoint"
+    :class="props.class"
+    content-class="cpLanguageSwitcher__content"
+    :placement="placement"
+  >
+    <template #trigger>
+      <slot name="trigger">
+        <cp-button appearance="tertiary" color="accent" size="sm">
+          <template #leading-icon>
+            <cp-icon type="globe" />
+          </template>
+          {{ uppercasedCurrentCode }}
+        </cp-button>
+      </slot>
+    </template>
+    <ul class="cpLanguageSwitcher__list">
+      <li v-for="lang in langs" :key="lang.code">
+        <button
+          :aria-current="getAriaCurrent(lang.code)"
+          class="cpLanguageSwitcher__lang"
+          :class="getLangClass(lang.code)"
+          type="button"
+          @click="selectLanguage(lang.code)"
+        >
+          <span class="cpLanguageSwitcher__left">
+            <span v-if="lang.flag" class="cpLanguageSwitcher__flag" :class="getFlagClass(lang.flag)" />
+            <span class="cpLanguageSwitcher__name">{{ lang.name }}</span>
+          </span>
+          <cp-icon v-if="isCurrentLanguage(lang.code)" class="cpLanguageSwitcher__check" size="20" type="check" />
+        </button>
+      </li>
+    </ul>
+  </cp-dynamic-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+
+import type { CpMenuPlacement } from '@/components/CpMenu.vue'
+
+import CpButton from '@/components/CpButton.vue'
+import CpDynamicMenu from '@/components/CpDynamicMenu.vue'
+import CpIcon from '@/components/CpIcon.vue'
+
+export interface LanguageOption {
+  code: string
+  flag?: string
+  name: string
+}
+
+interface Props {
+  breakpoint?: number
+  class?: string
+  langs: LanguageOption[]
+  placement?: CpMenuPlacement
+}
+
+const props = defineProps<Props>()
+
+const currentCode = defineModel<string>()
+
+const dynamicMenuRef = useTemplateRef('dynamicMenuRef')
+
+const uppercasedCurrentCode = computed(() => {
+  if (!currentCode.value) return ''
+  return currentCode.value.toUpperCase()
+})
+
+const isCurrentLanguage = (code: string) => code === currentCode.value
+
+const getLangClass = (code: string) => ({ 'cpLanguageSwitcher__lang--isSelected': isCurrentLanguage(code) })
+
+// flag-icons is a devDependency only: the consumer app loads flag-icons.min.css itself.
+const getFlagClass = (flag: string) => `fi fi-${flag.toLowerCase()}`
+
+const getAriaCurrent = (code: string) => {
+  if (!isCurrentLanguage(code)) return undefined
+  return 'true'
+}
+
+const selectLanguage = (code: string) => {
+  if (!isCurrentLanguage(code)) currentCode.value = code
+  dynamicMenuRef.value?.hide()
+}
+</script>
+
+<style lang="scss">
+.cpLanguageSwitcher {
+  &__content.cpBottomSheet__content {
+    padding: var(--cp-spacing-sm) 0;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    padding: 0 var(--cp-spacing-sm);
+    margin: 0;
+    gap: var(--cp-spacing-sm);
+    list-style: none;
+  }
+
+  &__lang {
+    @extend %u-focus-outline;
+
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl) var(--cp-spacing-lg) var(--cp-spacing-lg);
+    border: none;
+    border-radius: var(--cp-radius-md);
+    background-color: transparent;
+    color: var(--cp-text-primary);
+    cursor: pointer;
+    gap: var(--cp-spacing-md);
+
+    &:hover {
+      background-color: var(--cp-background-primary-hover);
+    }
+
+    &--isSelected {
+      background-color: var(--cp-background-accent-primary);
+    }
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-lg);
+  }
+
+  &__flag {
+    flex: none;
+    border-radius: var(--cp-radius-sm);
+  }
+
+  &__name {
+    font-size: var(--cp-text-size-md);
+    font-weight: 500;
+    line-height: var(--cp-line-height-md);
+  }
+
+  &__check {
+    flex: none;
+    color: var(--cp-text-accent-primary);
+  }
+}
+</style>

package/src/components/CpMenu.vue

@@ -63,10 +63,11 @@
 </template>
 
 <script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
 import PrimevueDrawer from 'primevue/drawer'
 import type { MenuItem } from 'primevue/menuitem'
 import PrimevuePopover from 'primevue/popover'
-import { computed, nextTick, ref, useId } from 'vue'
+import { computed, nextTick, ref, shallowRef, useId } from 'vue'
 
 import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
 
@@ -107,6 +108,7 @@ 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 observedPopoverElement = shallowRef<HTMLElement | null>(null)
 const menuId = useId()
 
 const isMobileViewport = useIsBreakpoint(Breakpoints.TABLET)
@@ -186,30 +188,56 @@ const focusCloseButton = () => {
 
 const onHide = () => {
   isOpen.value = false
+  observedPopoverElement.value = null
   focusTrigger()
   emits('hide')
 }
 
-const alignPopoverEnd = () => {
-  if (!popover.value) return
+const getPopoverElements = () => {
+  if (!popover.value) return null
 
   const { container: popoverElement, target: triggerElement } = popover.value as unknown as {
     container: HTMLElement | null
     target: HTMLElement | null
   }
 
-  if (!popoverElement || !triggerElement) return
+  if (!popoverElement || !triggerElement) return null
+
+  return { popoverElement, triggerElement }
+}
 
-  const triggerWidth = triggerElement.offsetWidth
-  const popoverWidth = popoverElement.offsetWidth
+const getPopoverRightEdge = (popoverElement: HTMLElement) => {
+  const offsetParent = popoverElement.offsetParent as HTMLElement | null
+  const offsetParentLeft = offsetParent?.getBoundingClientRect().left ?? 0
 
-  popoverElement.style.marginLeft = `${(popoverWidth - triggerWidth) * -1}px`
+  return offsetParentLeft + popoverElement.offsetLeft + popoverElement.offsetWidth
 }
 
+const alignPopoverEnd = () => {
+  const elements = getPopoverElements()
+  if (!elements) return
+
+  const { popoverElement, triggerElement } = elements
+  popoverElement.style.marginLeft = ''
+
+  const gapAfterTriggerEnd = getPopoverRightEdge(popoverElement) - triggerElement.getBoundingClientRect().right
+  if (!gapAfterTriggerEnd) return
+
+  popoverElement.style.marginLeft = `${gapAfterTriggerEnd * -1}px`
+}
+
+useResizeObserver(observedPopoverElement, alignPopoverEnd)
+
 const onShow = async () => {
   isOpen.value = true
-  if (isPopoverPlacementEnd.value) alignPopoverEnd()
   emits('show')
+
+  if (!isPopoverPlacementEnd.value) return
+
+  await nextTick()
+
+  alignPopoverEnd()
+  observedPopoverElement.value = getPopoverElements()?.popoverElement ?? null
 }
 
 defineExpose({ show, hide, toggle })

package/src/components/index.ts

@@ -36,12 +36,14 @@ import CpDate from './CpDate.vue'
 import CpDatepicker from './CpDatepicker.vue'
 import CpDialog from './CpDialog.vue'
 import CpDynamicDialog from './CpDynamicDialog.vue'
+import CpDynamicMenu from './CpDynamicMenu.vue'
 import CpFlightTabs from './CpFlightTabs.vue'
 import CpHeading from './CpHeading.vue'
 import CpIcon from './CpIcon.vue'
 import CpIllustration from './CpIllustration.vue'
 import CpInput from './CpInput.vue'
 import CpItemActions from './CpItemActions.vue'
+import CpLanguageSwitcher from './CpLanguageSwitcher.vue'
 import CpLoader from './CpLoader.vue'
 import CpMenu from './CpMenu.vue'
 import CpMenuItem from './CpMenuItem.vue'
@@ -112,11 +114,13 @@ const Components = {
   CpButtonGroup,
   CpDialog,
   CpDynamicDialog,
+  CpDynamicMenu,
   CpDate,
   CpContextualMenu,
   CpMenu,
   CpMenuItem,
   CpMenuList,
+  CpLanguageSwitcher,
   CpItemActions,
   CpCoreDatepicker,
   CpDatepicker,
@@ -203,6 +207,7 @@ const Pimp: Plugin = {
   },
 }
 
+export type { LanguageOption } from '@/components/CpLanguageSwitcher.vue'
 export type { CpAncillaryFlightSelectionFlight } from '@/constants/CpAncillaryFlightSelectionTypes'
 export type { CpBasketCategory, CpBasketGroup, CpBasketRow } from '@/constants/CpBasketTypes'
 export type { CpFlightTabsFlight } from '@/constants/CpFlightTabsTypes'
@@ -266,12 +271,14 @@ export {
   CpDatepicker,
   CpDialog,
   CpDynamicDialog,
+  CpDynamicMenu,
   CpFlightTabs,
   CpHeading,
   CpIcon,
   CpIllustration,
   CpInput,
   CpItemActions,
+  CpLanguageSwitcher,
   CpLoader,
   CpMenu,
   CpMenuItem,