@citizenplane/pimp 8.26.1 → 8.28.1

package/src/components/CpToaster.vue

@@ -0,0 +1,377 @@
+<template>
+  <transition @enter="enter" @leave="leave">
+    <div
+      v-show="isOpen"
+      :id="toasterId"
+      :key="toasterId"
+      class="cpToaster"
+      :class="dynamicClass"
+      role="alert"
+      @mouseenter="setHoverState()"
+      @mouseleave="setHoverState(false)"
+    >
+      <div class="cpToaster__content">
+        <cp-icon :type="toasterIcon" class="cpToaster__icon" />
+        <div class="cpToaster__body">
+          <cp-heading :heading-level="HeadingLevels.H4" :size="400" class="cpToaster__title">{{ title }}</cp-heading>
+          <p v-if="description" class="cpToaster__description">{{ description }}</p>
+        </div>
+      </div>
+      <button type="button" class="cpToaster__close" @click="closeToaster"><cp-icon type="x" /></button>
+      <div v-if="actionLabel" class="cpToaster__footer">
+        <button type="button" class="cpToaster__button" @click="handleActionMethod">
+          {{ actionLabel }}
+        </button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { animate } from 'animejs'
+import { ref, computed, watch, onBeforeMount, onMounted, nextTick, getCurrentInstance } from 'vue'
+
+import CpHeading from '@/components/CpHeading.vue'
+import CpIcon from '@/components/CpIcon.vue'
+
+import { HeadingLevels, Intent } from '@/constants'
+import { randomString } from '@/helpers'
+
+interface Props {
+  actionLabel?: string
+  actionMethod?: (vmProperties: Record<string, unknown>) => void
+  delayBeforeCloseInMs?: number
+  description?: string
+  isUnique?: boolean
+  title: string
+  type?: string
+}
+
+interface PublicMethods {
+  closeToaster: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  type: 'info',
+  delayBeforeCloseInMs: 5000,
+  actionLabel: '',
+  actionMethod: () => {},
+  isUnique: false,
+})
+
+const validateType = (value: string): boolean => {
+  const intentValues = Object.values(Intent).map((item) => item.value)
+  return intentValues.includes(value)
+}
+
+if (!validateType(props.type)) {
+  console.warn(`Type de toaster invalide: ${props.type}`)
+}
+
+const toasterId = ref<string>()
+const toastersContainer = ref<HTMLElement | null>(null)
+const isOpen = ref<boolean>(false)
+const isHovered = ref<boolean>(false)
+const deleteCountDown = ref<number>(props.delayBeforeCloseInMs)
+const timeoutID = ref<ReturnType<typeof setTimeout>>()
+const countDownInterval = ref<ReturnType<typeof setInterval>>()
+
+const instance = getCurrentInstance()
+
+const toasterIcon = computed(() => {
+  const intentValues = Object.values(Intent)
+  const intent = intentValues.find((intentItem) => intentItem.value === props.type)
+  return intent ? intent.icon : Intent.INFO.icon
+})
+
+const dynamicClass = computed(() => {
+  return `cpToaster--${props.type || Intent.INFO.value}`
+})
+
+watch(isHovered, (newValue: boolean) => {
+  if (!newValue) {
+    handleDeleteEvent()
+  } else {
+    cancelDelete()
+  }
+})
+
+const createContainer = (): void => {
+  toastersContainer.value = document.querySelector('.cpToaster__container')
+
+  if (toastersContainer.value) return
+
+  if (!toastersContainer.value) {
+    toastersContainer.value = document.createElement('section')
+    toastersContainer.value.className = 'cpToaster__container'
+  }
+}
+
+const setupContainer = (): void => {
+  if (toastersContainer.value) {
+    document.body.appendChild(toastersContainer.value)
+  }
+}
+
+const removeSiblings = (): void => {
+  if (!props.isUnique) return
+
+  const siblings = document.querySelectorAll('.cpToaster')
+  siblings.forEach(removeElement)
+}
+
+const setToasterId = (): void => {
+  toasterId.value = randomString()
+}
+
+const showToaster = (): void => {
+  isOpen.value = true
+
+  nextTick(() => {
+    if (toastersContainer.value && instance?.proxy?.$el) {
+      toastersContainer.value.insertAdjacentElement('afterbegin', instance.proxy.$el)
+    }
+  })
+}
+
+const setHoverState = (state: boolean = true): void => {
+  isHovered.value = state
+}
+
+const handleDeleteEvent = (): void => {
+  startCountDown()
+
+  timeoutID.value = setTimeout(() => {
+    closeToaster()
+  }, props.delayBeforeCloseInMs)
+}
+
+const cancelDelete = (): void => {
+  if (timeoutID.value) {
+    clearTimeout(timeoutID.value)
+  }
+  if (countDownInterval.value) {
+    clearInterval(countDownInterval.value)
+  }
+  resetCountDown()
+}
+
+const startCountDown = (): void => {
+  countDownInterval.value = setInterval(() => {
+    deleteCountDown.value -= 1000
+    if (deleteCountDown.value <= 0 && countDownInterval.value) {
+      clearInterval(countDownInterval.value)
+    }
+  }, 1000)
+}
+
+const resetCountDown = (): void => {
+  deleteCountDown.value = props.delayBeforeCloseInMs
+}
+
+const handleActionMethod = (): void => {
+  const vmProperties: Record<string, unknown> = {
+    closeToaster,
+  }
+
+  return props.actionMethod(vmProperties)
+}
+
+const closeToaster = (): void => {
+  cancelDelete()
+  isOpen.value = false
+
+  setTimeout(() => {
+    if (instance?.proxy?.$el) {
+      removeElement(instance.proxy.$el)
+    }
+  }, 240)
+}
+
+const removeElement = (el: Element): void => {
+  if (typeof (el as HTMLElement).remove !== 'undefined') {
+    ;(el as HTMLElement).remove()
+  } else if (el.parentNode) {
+    el.parentNode.removeChild(el)
+  }
+}
+
+const enter = async (el: Element, done: () => void): Promise<void> => {
+  animate(el, {
+    translateY: [-60, 0],
+    opacity: [0, 1],
+    duration: 240,
+    ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
+    complete: function () {
+      done()
+    },
+  })
+}
+
+const leave = async (el: Element, done: () => void): Promise<void> => {
+  animate(el, {
+    scale: [1, 0.8],
+    opacity: [1, 0],
+    duration: 240,
+    ease: 'cubicBezier(0.0, 0.0, 0.2, 1)',
+    complete: function () {
+      done()
+    },
+  })
+}
+
+onBeforeMount(() => {
+  createContainer()
+  setupContainer()
+  removeSiblings()
+  setToasterId()
+})
+
+onMounted(() => {
+  showToaster()
+  handleDeleteEvent()
+})
+
+defineExpose<PublicMethods>({
+  closeToaster,
+})
+</script>
+
+<style lang="scss">
+@mixin cp-toaster-style($color, $className) {
+  &--#{$className} &__icon {
+    color: $color;
+  }
+
+  &--#{$className}:before {
+    background-color: $color;
+  }
+}
+
+.cpToaster {
+  position: relative;
+  box-shadow:
+    rgba(67, 90, 111, 0.3) 0 0 1px,
+    rgba(67, 90, 111, 0.47) 0 8px 10px -4px;
+  background: colors.$neutral-light;
+  padding: sp.$space-md;
+  overflow: hidden;
+  width: max-content;
+  max-width: 100%;
+  margin: auto;
+  pointer-events: auto;
+  font-size: fn.px-to-rem(14);
+
+  @media (min-width: 769px) {
+    border-radius: fn.px-to-rem(8);
+  }
+
+  @media (max-width: 768px) {
+    min-width: 100%;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: fn.px-to-rem(3);
+    height: 100%;
+  }
+
+  &__container {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    padding: sp.$space-lg;
+    max-width: fn.px-to-rem(400);
+    pointer-events: none;
+
+    & > *:not(:last-child) {
+      margin-bottom: sp.$space;
+    }
+
+    @media (max-width: 768px) {
+      max-width: 100%;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__body {
+    flex: 1;
+    margin-left: sp.$space;
+    padding-right: calc(sp.$space-lg + sp.$space-lg);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    height: fn.px-to-rem(16);
+    width: fn.px-to-rem(16);
+  }
+
+  &__content,
+  &__title {
+    line-height: fn.px-to-rem(16);
+  }
+
+  &__title {
+    font-weight: 600;
+
+    &:not(:only-child) {
+      margin-bottom: sp.$space-sm;
+    }
+  }
+
+  &__description {
+    font-size: fn.px-to-rem(14);
+  }
+
+  &__close {
+    position: absolute;
+    right: sp.$space;
+    top: sp.$space;
+    display: flex;
+    border-radius: fn.px-to-rem(4);
+    padding: sp.$space-sm;
+    color: colors.$neutral-dark-1;
+
+    svg {
+      margin: 0;
+      width: fn.px-to-rem(18);
+      height: fn.px-to-rem(18);
+    }
+
+    &:hover {
+      background-color: rgba(colors.$neutral-dark-1, 0.1);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: sp.$space-lg;
+  }
+
+  &__button {
+    font-size: fn.px-to-rem(12);
+    color: colors.$secondary-color;
+
+    &:not(:hover) {
+      text-decoration: underline;
+    }
+  }
+
+  @include cp-toaster-style(colors.$secondary-color, 'info');
+  @include cp-toaster-style(colors.$warning-color, 'warning');
+  @include cp-toaster-style(colors.$success-color, 'success');
+  @include cp-toaster-style(colors.$error-color, 'critical');
+}
+</style>

package/src/components/{atomic-elements/CpTooltip.vue → CpTooltip.vue}

@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip :aria-id="ariaId" popper-class="cpTooltip" :distance :container="false">
+  <v-tooltip :aria-id="ariaId" class="cpTooltip" :distance :container="false">
     <slot />
     <template #popper>
       <span v-if="content">
@@ -10,19 +10,18 @@
   </v-tooltip>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Tooltip as VTooltip } from 'floating-vue'
 import { useId } from 'vue'
 
-defineProps({
-  content: {
-    type: String,
-    default: '',
-  },
-  distance: {
-    type: Number,
-    default: 8,
-  },
+interface Props {
+  content?: string
+  distance?: number
+}
+
+withDefaults(defineProps<Props>(), {
+  content: '',
+  distance: 8,
 })
 
 const ariaId = useId()
@@ -30,6 +29,8 @@ const ariaId = useId()
 
 <style lang="scss">
 .cpTooltip.v-popper--theme-tooltip {
+  display: inline-flex;
+
   .v-popper__inner {
     padding: sp.$space sp.$space-md;
     border-radius: fn.px-to-rem(8);

package/src/components/TransitionExpand.vue

@@ -0,0 +1,70 @@
+<template>
+  <transition name="expand" @enter="enter" @after-enter="afterEnter" @leave="leave">
+    <slot />
+  </transition>
+</template>
+
+<script setup lang="ts">
+const afterEnter = (element: HTMLElement): void => {
+  element.style.height = `auto`
+}
+
+const enter = (element: HTMLElement): void => {
+  const { width } = getComputedStyle(element)
+
+  element.style.width = width
+  element.style.position = `absolute`
+  element.style.visibility = `hidden`
+  element.style.height = `auto`
+
+  const { height } = getComputedStyle(element)
+
+  element.style.width = ''
+  element.style.position = ''
+  element.style.visibility = ''
+  element.style.height = '0'
+
+  // Force repaint to make sure the
+  // animation is triggered correctly.
+  requestAnimationFrame(() => {
+    element.style.height = height
+  })
+}
+
+const leave = (element: HTMLElement): void => {
+  const { height } = getComputedStyle(element)
+
+  element.style.height = height
+
+  // Force repaint to make sure the
+  // animation is triggered correctly.
+  requestAnimationFrame(() => {
+    element.style.height = '0'
+  })
+}
+</script>
+
+<style scoped>
+* {
+  will-change: height;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+</style>
+
+<style lang="scss">
+.expand-enter-active,
+.expand-leave-active {
+  transition-property: opacity, height;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-out;
+  overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  height: 0;
+  opacity: 0;
+}
+</style>

package/src/components/icons/IconBaggageCabinNone.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.8056 20.0955H8.18876C7.63648 20.0955 7.18876 19.6478 7.18876 19.0955V11.4758M9.80047 8.87244H11.4122H15.8056C16.3579 8.87244 16.8056 9.32015 16.8056 9.87244V16.219"
+    />
+    <path d="M14.4593 20.0955V21.051" />
+    <path d="M9.44919 20.0955V21.051" />
+    <path d="M13.4143 3L13.4143 8.80565" />
+    <path d="M10.58 3L10.58 8.80565" />
+    <path d="M3 3L21 21" />
+    <path d="M12.4378 12.1178H14.0499" />
+    <path d="M8.99997 3L14.9944 3" />
+  </svg>
+</template>

package/src/components/icons/IconBaggageCheckedNone.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M17.631 17.5374V7.54905C17.631 6.87124 17.1064 6.32178 16.4593 6.32178H7.53504M6.36339 11.8682V18.8682C6.36339 19.546 6.88796 20.0955 7.53505 20.0955H11.9972L14.7447 20.0955"
+    />
+    <path d="M14.8912 20.0955V21.051" />
+    <path d="M9.10875 20.0955V21.051" />
+    <path d="M10.2928 15L10.2928 16.0056" />
+    <path d="M13.4143 3L13.4143 6" />
+    <path d="M10.5801 3L10.5801 6" />
+    <path d="M8.99996 3L14.9944 3" />
+    <path d="M2.99999 3L21 21" />
+    <path d="M13.7071 10.4117L13.7071 13.4147" />
+  </svg>
+</template>

package/src/components/icons/IconBaggagePersonalNone.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  >
+    <path
+      d="M14.0343 6.9345C14.4899 7.45647 14.7131 8.09578 14.773 8.48765C14.8564 9.0336 15.3666 9.40855 15.9126 9.32512C16.4585 9.24169 16.8335 8.73148 16.7501 8.18554C16.6421 7.47892 16.284 6.47051 15.5411 5.61937C14.7711 4.73714 13.5973 4.04114 11.9625 4.04114C11.4102 4.04114 10.9625 4.48885 10.9625 5.04114C10.9625 5.59342 11.4102 6.04114 11.9625 6.04114C12.964 6.04114 13.6059 6.44362 14.0343 6.9345Z"
+    />
+    <path
+      d="M11.9625 6.04114C10.3168 6.04114 9.53709 7.17285 9.24483 8.10042C9.07885 8.62717 8.51729 8.91964 7.99053 8.75367C7.46378 8.58769 7.17131 8.02612 7.33728 7.49937C7.77121 6.12221 9.09963 4.04114 11.9625 4.04114C12.5148 4.04114 12.9625 4.48885 12.9625 5.04114C12.9625 5.59342 12.5148 6.04114 11.9625 6.04114Z"
+    />
+    <path
+      d="M16.6758 11.7963C16.6758 11.3821 16.34 11.0463 15.9258 11.0463L11.9625 11.0463C11.5483 11.0463 11.2125 11.3821 11.2125 11.7963C11.2125 12.2105 11.5483 12.5463 11.9625 12.5463L15.9258 12.5463C16.34 12.5463 16.6758 12.2105 16.6758 11.7963Z"
+    />
+    <path
+      d="M14.6224 11.5962C14.2082 11.5962 13.8724 11.932 13.8724 12.3462L13.8724 13.5055C13.8724 13.9197 14.2082 14.2555 14.6224 14.2555C15.0367 14.2555 15.3724 13.9197 15.3724 13.5055L15.3724 12.3462C15.3724 11.932 15.0367 11.5962 14.6224 11.5962Z"
+    />
+    <path
+      d="M18.3657 10.4998C18.3352 9.97078 17.8973 9.55737 17.3674 9.55737L9.20555 9.55737C8.65326 9.55737 8.20555 9.10966 8.20555 8.55737C8.20555 8.00509 8.65326 7.55737 9.20555 7.55737H17.3674C18.9572 7.55737 20.2709 8.79759 20.3624 10.3848L20.7609 17.2995C20.8375 18.6278 20.0399 19.7948 18.8794 20.2589L17.1135 18.4721H17.7659C18.3408 18.4721 18.7973 17.9885 18.7642 17.4146L18.3657 10.4998ZM3.62566 9.32591C3.65807 8.77458 4.13128 8.3539 4.68262 8.38631C5.23395 8.41872 5.65462 8.89193 5.62222 9.44327L5.16061 17.4148C5.12766 17.9886 5.58415 18.4721 6.15897 18.4721H14.7887C15.3409 18.4721 15.7887 18.9198 15.7887 19.4721C15.7887 20.0244 15.3409 20.4721 14.7887 20.4721H6.15897C4.43451 20.4721 3.06505 19.0217 3.1639 17.3001L3.45651 12.2038L3.62566 9.32591Z"
+    />
+    <path
+      d="M2.49956 2.56633C2.10903 2.95685 2.10903 3.59002 2.49956 3.98054L20.0488 21.5298C20.4393 21.9203 21.0724 21.9203 21.463 21.5298C21.8535 21.1392 21.8535 20.5061 21.463 20.1155L3.91377 2.56633C3.52325 2.17581 2.89008 2.17581 2.49956 2.56633Z"
+    />
+    <path
+      d="M7.25294 11.7849C7.25294 12.1899 7.58123 12.5182 7.9862 12.5182C8.39117 12.5182 8.71947 12.1899 8.71947 11.7849C8.71947 11.3799 8.39117 11.0516 7.9862 11.0516C7.58123 11.0516 7.25294 11.3799 7.25294 11.7849Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconCalendar.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+  >
+    <rect x="3.03387" y="5.4895" width="17.9328" height="15.4378" rx="2.52177" />
+    <path d="M6.88023 10.4016H16.9642" />
+    <path d="M7.03662 3.07251V7.3348" />
+    <path d="M16.9646 3.07251V7.3348" />
+  </svg>
+</template>

package/src/components/icons/IconCalendarDelay.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M7.01345 3V7.28155" />
+    <path d="M16.9868 3V7.28155" />
+    <path
+      d="M21.0073 8.7705V7.88929C21.0073 6.53001 19.9054 5.4281 18.5461 5.4281H5.45462C4.09534 5.4281 2.99343 6.53001 2.99343 7.88929V18.4744C2.99343 19.8337 4.09534 20.9356 5.45462 20.9356H8.44034"
+    />
+    <circle cx="15.6421" cy="15.8132" r="5.36444" />
+    <path d="M15.5908 14.2495V15.8384L17.2175 17.4651" />
+  </svg>
+</template>

package/src/components/icons/IconEndDate.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <rect x="3.03387" y="5.4895" width="17.9328" height="15.4378" rx="2.52177" />
+    <path d="M7.03662 3.07251V7.3348" />
+    <path d="M16.9646 3.07251V7.3348" />
+    <path d="M16.7501 14.1487L9.17437 14.1487" />
+    <path d="M9.45959 16.321L7.25 14.1488L9.4596 11.9766" />
+  </svg>
+</template>

package/src/components/icons/IconFlightSchedule.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M7.01345 3V7.28155" />
+    <path d="M16.9868 3V7.28155" />
+    <path
+      d="M21.0073 8.7705V7.88929C21.0073 6.53001 19.9054 5.4281 18.5461 5.4281H5.45462C4.09534 5.4281 2.99343 6.53001 2.99343 7.88929V18.4744C2.99343 19.8337 4.09534 20.9356 5.45462 20.9356H8.44033"
+    />
+    <path
+      d="M16.4936 13.2807L18.4809 11.3159C18.9519 10.8502 19.7135 10.8523 20.1819 11.3207C20.6503 11.7891 20.6481 12.5464 20.1771 13.0121L18.1898 14.9769L18.8803 19.5107C18.914 19.7322 18.8395 19.9565 18.6797 20.1145L17.8727 20.9124C17.6984 21.0847 17.405 21.032 17.3023 20.8101L15.7283 17.4106L13.9295 19.189L14.0661 20.1562C14.0971 20.3754 14.0224 20.5964 13.8645 20.7525L13.2008 21.4086C13.0464 21.5613 12.7866 21.5163 12.6932 21.3208L11.8507 19.5578L10.0824 18.71C9.8863 18.616 9.84256 18.3574 9.99696 18.2048L10.6606 17.5486C10.8185 17.3925 11.0411 17.3195 11.2615 17.3515L12.2333 17.4928L14.0321 15.7144L10.6222 14.1301C10.3996 14.0266 10.3484 13.7346 10.5226 13.5623L11.3296 12.7644C11.4894 12.6064 11.7154 12.5336 11.938 12.5684L16.4936 13.2807Z"
+      fill="#3E3E5B"
+    />
+  </svg>
+</template>