@citizenplane/pimp 18.12.2 → 18.12.4

package/package.json

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

package/src/assets/css/reduced-motion.css

@@ -0,0 +1,73 @@
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-delay: 0ms !important;
+    transition-duration: 1ms !important;
+  }
+
+  [class$="-enter-from"],
+  [class*="-enter-from "],
+  [class$="-leave-to"],
+  [class*="-leave-to "] {
+    transform: none !important;
+  }
+
+  :where([class$="-enter-from"], [class*="-enter-from "], [class$="-leave-to"], [class*="-leave-to "]) {
+    rotate: none !important;
+    scale: 1 !important;
+    translate: none !important;
+  }
+
+  [class$="-enter-active"],
+  [class*="-enter-active "],
+  [class$="-leave-active"],
+  [class*="-leave-active "] {
+    transition: opacity 120ms linear !important;
+  }
+
+  .dialog-enter-from dialog main,
+  .dialog-leave-to dialog main {
+    transform: none !important;
+  }
+
+  .cpDialog__container,
+  .cpDialog__overlay,
+  .cpMenu__menuContent,
+  .cpTable__overlay,
+  .v-popper__wrapper {
+    transition: opacity 120ms linear !important;
+  }
+
+  .v-popper__popper--hidden .v-popper__wrapper {
+    scale: 1 !important;
+  }
+
+  .drawer-enter-from,
+  .drawer-leave-to {
+    opacity: 0 !important;
+  }
+
+  .counter-up-enter-active,
+  .counter-up-leave-active,
+  .counter-down-enter-active,
+  .counter-down-leave-active,
+  .expand-enter-active,
+  .expand-leave-active {
+    transition: none !important;
+  }
+
+  .counter-up-leave-to,
+  .counter-down-leave-to {
+    filter: none !important;
+  }
+
+  :not([data-motion="essential"], [data-motion="essential"] *),
+  :not([data-motion="essential"], [data-motion="essential"] *)::before,
+  :not([data-motion="essential"], [data-motion="essential"] *)::after {
+    animation-delay: 0ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}

package/src/assets/main.css

@@ -6,3 +6,4 @@
 @import "./css/easings.css";
 @import "./css/transitions.css";
 @import "./css/tokens.css";
+@import "./css/reduced-motion.css";

package/src/components/CpMultiselect.vue

@@ -347,6 +347,7 @@ onMounted(() => overrideAlignOverlay())
     justify-content: space-between;
     padding: var(--cp-spacing-md);
     border-radius: var(--cp-radius-md);
+    background-color: var(--cp-background-primary);
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);

package/src/components/CpTabs.vue

@@ -30,6 +30,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import { useReducedMotion } from '@/composables/useReducedMotion'
+
 import CpText from '@/components/CpText.vue'
 
 import { capitalizeFirstLetter } from '@/helpers'
@@ -64,6 +66,7 @@ const cpTabsElement = ref<HTMLElement | null>(null)
 const activeUnderline = ref<HTMLElement | null>(null)
 const activeTabIndex = ref<number | null>(props.defaultActiveIndex)
 const suppressUnderlineTransition = ref(false)
+const prefersReducedMotion = useReducedMotion()
 
 const textSize = computed(() => {
   switch (props.size) {
@@ -204,7 +207,7 @@ const scrollToActiveElement = (behavior: ScrollBehavior = 'smooth') => {
   const activeTabElement = getActiveTabElement()
   if (!activeTabElement) return
 
-  return activeTabElement.scrollIntoView({ block: 'nearest', behavior })
+  return activeTabElement.scrollIntoView({ block: 'nearest', behavior: prefersReducedMotion.value ? 'instant' : behavior })
 }
 
 onBeforeUnmount(() => window.removeEventListener('resize', setUnderlineStyle))

package/src/components/CpTransitionCounter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cpTransitionCounter">
-    <transition :duration="duration" mode="out-in" :name="formattedTransitionName">
+    <transition :duration="resolvedDuration" mode="out-in" :name="formattedTransitionName">
       <span :key="counterNumber">
         <slot />
       </span>
@@ -11,6 +11,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
+import { useReducedMotion } from '@/composables/useReducedMotion'
+
 interface Props {
   counterNumber?: number
   duration?: number
@@ -30,6 +32,9 @@ const direction = ref<Directions>(Directions.UP)
 
 const formattedTransitionName = computed(() => `counter-${direction.value}`)
 
+const prefersReducedMotion = useReducedMotion()
+const resolvedDuration = computed(() => (prefersReducedMotion.value ? 0 : props.duration))
+
 watch(
   () => props.counterNumber,
   (newValue: number, oldValue: number) => {

package/src/components/CpTransitionExpand.vue

@@ -5,6 +5,10 @@
 </template>
 
 <script setup lang="ts">
+import { useReducedMotion } from '@/composables/useReducedMotion'
+
+const prefersReducedMotion = useReducedMotion()
+
 const afterEnter = (element: Element) => {
   const el = element as HTMLElement
   el.style.height = `auto`
@@ -12,6 +16,12 @@ const afterEnter = (element: Element) => {
 
 const enter = (element: Element) => {
   const el = element as HTMLElement
+
+  if (prefersReducedMotion.value) {
+    el.style.height = 'auto'
+    return
+  }
+
   const { width } = getComputedStyle(el)
 
   el.style.width = width
@@ -37,6 +47,12 @@ const enter = (element: Element) => {
 
 const leave = (element: Element): void => {
   const el = element as HTMLElement
+
+  if (prefersReducedMotion.value) {
+    el.style.height = '0'
+    return
+  }
+
   const { height } = getComputedStyle(el)
 
   el.style.height = height

package/src/components/CpTransitionSize.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
+
+import { useReducedMotion } from '@/composables/useReducedMotion'
 
 interface Props {
   type?: 'width' | 'height'
@@ -13,6 +15,8 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), { type: 'width' })
 
+const prefersReducedMotion = useReducedMotion()
+
 const slotWrapper = ref()
 const slotContent = computed<HTMLElement | null>(() => slotWrapper.value?.children[0])
 
@@ -52,22 +56,33 @@ const updateWrapperSize = async () => {
 
 const observer = ref<MutationObserver>()
 
-const initObserver = () => {
+const startObserving = () => {
+  if (!slotContent.value || observer.value) return
+
   observer.value = new MutationObserver(updateWrapperSize)
   observer.value.observe(slotContent.value as HTMLElement, { childList: true, subtree: false })
 
   updateWrapperSize()
 }
 
+const stopObserving = () => {
+  observer.value?.disconnect()
+  observer.value = undefined
+
+  if (!slotWrapper.value) return
+
+  slotWrapper.value.style.width = ''
+  slotWrapper.value.style.height = ''
+  slotWrapper.value.style.minHeight = ''
+}
+
+watch(prefersReducedMotion, (isReduced) => (isReduced ? stopObserving() : startObserving()))
+
 onMounted(() => {
-  if (slotContent.value) {
-    initObserver()
-  }
+  if (!prefersReducedMotion.value) startObserving()
 })
 
-onBeforeUnmount(() => {
-  if (observer.value) observer.value.disconnect()
-})
+onBeforeUnmount(() => observer.value?.disconnect())
 </script>
 
 <style lang="scss">

package/src/components/CpTransitionTabContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition :duration="duration" mode="out-in" :name="formattedTransitionName" @after-enter="emit('onAfterEnter')">
+  <transition :duration="resolvedDuration" mode="out-in" :name="formattedTransitionName" @after-enter="emit('onAfterEnter')">
     <slot />
   </transition>
 </template>
@@ -7,6 +7,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useReducedMotion } from '@/composables/useReducedMotion'
+
+import { REDUCED_MOTION_FADE_MS } from '@/constants'
+
 type Direction = 'forward' | 'backward'
 
 type EmitType = {
@@ -26,6 +30,9 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<EmitType>()
 
 const formattedTransitionName = computed(() => `tab-content-${props.direction}`)
+
+const prefersReducedMotion = useReducedMotion()
+const resolvedDuration = computed(() => (prefersReducedMotion.value ? REDUCED_MOTION_FADE_MS : props.duration))
 </script>
 
 <style lang="scss">

package/src/components/icons/IconBank.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M11.3389 2.36384C11.6929 2.05223 12.2131 2.0327 12.5879 2.30525L12.6602 2.36384L21.4629 10.1119L20.8027 10.8609V10.8629L21.4629 10.1119C21.7752 10.3867 21.885 10.8262 21.7383 11.2154C21.5914 11.6046 21.2187 11.8627 20.8027 11.8629H20.208V19.6871H20.8027C21.3548 19.6873 21.8026 20.135 21.8027 20.6871C21.8027 21.2392 21.3548 21.6869 20.8027 21.6871H3.19727C2.64509 21.687 2.19731 21.2393 2.19727 20.6871C2.19736 20.1349 2.64512 19.6872 3.19727 19.6871H4.0127V11.8629H3.19727C2.78126 11.8628 2.40861 11.6046 2.26172 11.2154C2.11501 10.8263 2.22413 10.3867 2.53613 10.1119L11.3389 2.36384ZM6.0127 19.6871H8.74414V11.8629H6.0127V19.6871ZM10.7441 19.6871H13.4766V11.8629H10.7441V19.6871ZM15.4766 19.6871H18.208V11.8629H15.4766V19.6871ZM5.84668 9.86286H18.1533L11.999 4.44685L5.84668 9.86286Z" />
+  </svg>
+</template>

package/src/components/index.ts

@@ -13,6 +13,7 @@ import type { App, Plugin } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
 import VueTelInput from 'vue-tel-input'
 
+import { useReducedMotion } from '../composables/useReducedMotion'
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpAccordion from './CpAccordion.vue'
@@ -265,6 +266,7 @@ export {
   IconSupplier,
   IconThirdParty,
   IconTooltip,
+  useReducedMotion,
 }
 
 export default Pimp

package/src/composables/useReducedMotion.ts

@@ -0,0 +1,13 @@
+import { usePreferredReducedMotion } from '@vueuse/core'
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+
+export const useReducedMotion = () => {
+  const preference = usePreferredReducedMotion()
+
+  const isMounted = ref(!getCurrentInstance())
+  if (!isMounted.value) {
+    onMounted(() => (isMounted.value = true))
+  }
+
+  return computed(() => isMounted.value && preference.value === 'reduce')
+}

package/src/constants/CpCustomIcons.ts

@@ -18,6 +18,7 @@ import IconBaggageCheckedNone from '@/components/icons/IconBaggageCheckedNone.vu
 import IconBaggagePersonalNone from '@/components/icons/IconBaggagePersonalNone.vue'
 import IconBaggageSet from '@/components/icons/IconBaggageSet.vue'
 import IconBaggageSetPlus from '@/components/icons/IconBaggageSetPlus.vue'
+import IconBank from '@/components/icons/IconBank.vue'
 import IconBomb from '@/components/icons/IconBomb.vue'
 import IconBottle from '@/components/icons/IconBottle.vue'
 import IconBroadcast from '@/components/icons/IconBroadcast.vue'
@@ -155,6 +156,7 @@ export const CustomCpIcons = {
   'baggage-set': IconBaggageSet,
   'baggage-battery': IconBaggageBattery,
   'baggage-set-plus': IconBaggageSetPlus,
+  bank: IconBank,
   'car-battery': IconCarBattery,
   bomb: IconBomb,
   bottle: IconBottle,

package/src/constants/index.ts

@@ -8,3 +8,5 @@ export { Intent } from './Intent'
 export { Position } from './Position'
 
 export const HUMAN_MAX_AGE = 120
+
+export const REDUCED_MOTION_FADE_MS = 120