@citizenplane/pimp 9.4.3 → 9.4.5

package/src/components/CpDate.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="cpDate" :class="dynamicClasses">
-    <label v-if="label" class="cpDate__label" :for="cpDateId">
-      {{ capitalizedLabel }} <span v-if="required" class="u-asterisk">*</span>
-      <cp-icon v-if="!isDateValid" type="alert-circle" />
-    </label>
+    <base-input-label v-if="label" v-bind-once="{ for: cpDateId }" :is-invalid="!isDateValid" :required="required">
+      {{ capitalizedLabel }}
+    </base-input-label>
     <div class="cpDate__inputs">
       <input
         v-model="day"
@@ -56,6 +55,8 @@
 import { Info, DateTime } from 'luxon'
 import { ref, computed, watch } from 'vue'
 
+import BaseInputLabel from '@/components/BaseInputLabel.vue'
+
 import { HUMAN_MAX_AGE } from '@/constants'
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
@@ -293,8 +294,6 @@ watch(year, handleUpdate)
   // Remove select style
   select {
     appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     outline: none;
     border: none;
   }
@@ -306,51 +305,25 @@ watch(year, handleUpdate)
     color: colors.$neutral-dark;
   }
 
-  &__label {
-    display: flex;
-    align-items: center;
-    line-height: fn.px-to-rem(24);
-    margin-bottom: sp.$space;
-    font-size: fn.px-to-em(14);
-
-    > span {
-      margin-left: sp.$space-xs;
-    }
-
-    i {
-      margin-left: sp.$space-sm;
-      width: fn.px-to-rem(16);
-      height: fn.px-to-rem(16);
-      color: colors.$error-color;
-    }
-  }
-
   &__inputs {
     display: flex;
-    height: sizing.$component-size-default;
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    box-shadow: 0 0 0 fn.px-to-rem(1) rgba(0, 0, 0, 0.12);
     border-radius: fn.px-to-em(10);
     overflow: hidden;
     background-color: colors.$neutral-light;
-    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(colors.$neutral-dark, 0.12);
 
-    &:hover,
-    &:focus-within {
-      border-color: colors.$primary-color;
-      background-color: colors.$neutral-light;
+    &:hover {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
     }
 
     &:focus-within {
-      box-shadow:
-        rgba(colors.$primary-color, 0.1) 0 0 0 fn.px-to-rem(4),
-        colors.$primary-color 0 0 0 fn.px-to-rem(0.5);
+      outline: fn.px-to-rem(2) solid colors.$primary-color;
     }
   }
 
   &__divider {
     flex-shrink: 0;
     width: fn.px-to-rem(1);
-    height: 100%;
     background-color: colors.$border-color;
   }
 
@@ -362,7 +335,7 @@ watch(year, handleUpdate)
 
   &__month {
     position: relative;
-    flex: 1 1 50%;
+    flex: 1 1 40%;
 
     &::after {
       position: absolute;
@@ -380,13 +353,14 @@ watch(year, handleUpdate)
     select {
       @extend %u-text-ellipsis;
       width: 100%;
-      padding: fn.px-to-em(12) fn.px-to-em(40) fn.px-to-em(12) fn.px-to-em(12);
+      padding: sp.$space calc(sp.$space-xl + sp.$space-sm) sp.$space sp.$space-md;
       color: inherit;
       cursor: pointer;
+      font-size: fn.px-to-rem(14);
+      line-height: fn.px-to-rem(24);
 
       &:focus-visible {
         text-decoration: underline;
-        font-weight: 500;
       }
     }
 
@@ -397,19 +371,21 @@ watch(year, handleUpdate)
 
   &__day,
   &__year {
-    flex: 0 0 25%;
-    padding: sp.$space-md;
+    flex: 0 0 30%;
+    padding: sp.$space sp.$space-lg;
+    font-size: fn.px-to-rem(14);
+    line-height: fn.px-to-rem(24);
   }
 
   &--isInvalid {
     .cpDate__inputs,
-    .cpDate__inputs:hover,
-    .cpDate__inputs:focus-within {
-      border-color: colors.$error-color;
+    .cpDate__inputs:hover {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$error-color;
     }
 
     .cpDate__inputs:focus-within {
-      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
+      outline: fn.px-to-rem(2) solid colors.$error-color;
+      box-shadow: 0 0 0 fn.px-to-em(1) color.scale(colors.$error-color, $lightness: 60%);
     }
 
     .cpDate__divider {
@@ -435,10 +411,10 @@ watch(year, handleUpdate)
   }
 
   &__errorMessage {
-    margin-top: fn.px-to-rem(6);
-    color: colors.$error-color;
-    font-weight: 500;
+    margin-top: sp.$space;
     font-size: fn.px-to-em(14);
+    line-height: fn.px-to-rem(24);
+    color: colors.$error-color;
   }
 }
 </style>

package/src/components/CpInput.vue

@@ -30,7 +30,7 @@
         class="cpInput__inner"
       />
       <div v-if="hasAfterIcon" class="cpInput__icon cpInput__icon--isAfter">
-        <slot v-if="hasAfterIconSlot" name="trailing-icon" />
+        <slot v-if="displayAfterIcon" name="trailing-icon" />
         <transition name="fade">
           <button v-if="isClearButtonVisible" type="button" class="cpInput__clear" @click="clearInputValue">
             <cp-icon type="x" class="cpInput__clearIcon" />
@@ -145,6 +145,7 @@ const hasBeforeIcon = computed(() => hasBeforeIconSlot.value || props.isSearch)
 
 const hasAfterIconSlot = computed(() => !!slots['trailing-icon'])
 const hasAfterIcon = computed(() => hasAfterIconSlot.value || props.isSearch)
+const displayAfterIcon = computed(() => hasAfterIcon.value && !props.isSearch)
 
 const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inputIdentifier.value))
 
@@ -203,14 +204,14 @@ onMounted(async () => {
   }
 
   &__inner {
-    box-shadow: 0 0 0 fn.px-to-rem(1) rgba(0, 0, 0, 0.12);
+    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
     appearance: none;
-    border-radius: fn.px-to-rem(10);
+    border-radius: fn.px-to-rem(8);
     width: 100%;
     color: inherit;
     padding: sp.$space sp.$space-lg;
     line-height: fn.px-to-rem(24);
-    font-size: fn.px-to-em(14);
+    font-size: fn.px-to-rem(14);
 
     &:hover {
       box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
@@ -272,6 +273,8 @@ onMounted(async () => {
   &__icon {
     @include mx.square-sizing(16);
 
+    display: flex;
+    align-items: center;
     left: fn.px-to-rem(14);
     z-index: 1;
     position: absolute;
@@ -289,6 +292,11 @@ onMounted(async () => {
       stroke-width: 1.6;
     }
 
+    &--isBefore,
+    &--isAfter {
+      font-size: fn.px-to-rem(14);
+    }
+
     &--isAfter {
       left: auto;
       right: fn.px-to-rem(14);
@@ -297,62 +305,80 @@ onMounted(async () => {
     &--isBefore ~ input {
       padding-left: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
     }
+  }
 
-    &--isAfter ~ input {
-      padding-right: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
-    }
+  &:has(.cpInput__icon--isAfter) input {
+    padding-right: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
   }
 
-  &--sm {
+  &--lg {
     .cpInput__inner {
-      padding: sp.$space-sm sp.$space-md;
-      font-size: fn.px-to-rem(14);
+      border-radius: fn.px-to-rem(10);
+      padding: sp.$space-md sp.$space-lg;
+      font-size: fn.px-to-rem(16);
     }
 
     .cpInput__icon {
-      left: fn.px-to-rem(10);
+      @include mx.square-sizing(20);
+
+      left: fn.px-to-rem(12);
     }
 
+    .cpInput__icon--isBefore,
     .cpInput__icon--isAfter {
-      left: auto;
-      right: fn.px-to-rem(10);
+      font-size: fn.px-to-rem(16);
     }
 
-    .cpInput__icon--isBefore ~ input {
-      padding-left: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
+    .cpInput__icon--isAfter {
+      left: auto;
+      right: fn.px-to-rem(12);
     }
 
     .cpInput__icon--isAfter ~ input {
-      padding-right: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
+      padding-right: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
+    }
+
+    .cpInput__icon--isBefore ~ input {
+      padding-left: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
     }
   }
 
-  &--lg {
+  &--sm {
     .cpInput__inner {
-      padding: sp.$space-md sp.$space-lg;
-      font-size: fn.px-to-rem(16);
+      padding: sp.$space-sm sp.$space-md;
+      font-size: fn.px-to-rem(14);
     }
 
     .cpInput__icon {
-      @include mx.square-sizing(20);
+      left: fn.px-to-rem(10);
+    }
 
-      left: fn.px-to-rem(12);
+    .cpInput__icon--isBefore,
+    .cpInput__icon--isAfter {
+      font-size: fn.px-to-rem(12);
     }
 
     .cpInput__icon--isAfter {
       left: auto;
-      right: fn.px-to-rem(12);
+      right: fn.px-to-rem(10);
     }
 
-    .cpInput__icon--isAfter ~ input {
-      padding-right: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
+    .cpInput__icon--isBefore ~ input {
+      padding-left: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
     }
 
-    .cpInput__icon--isBefore ~ input {
-      padding-left: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
+    .cpInput__icon--isAfter ~ input {
+      padding-right: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
     }
   }
 
+  // If icon slot is text (units)
+  .cpInput__icon:not(:has(.cpIcon)) {
+    width: auto;
+    height: auto;
+    aspect-ratio: auto;
+  }
+
   &--isSearch {
     .cpInput__icon--isAfter {
       width: auto;
@@ -368,7 +394,8 @@ onMounted(async () => {
       background-color: colors.$neutral-dark-1;
 
       &:focus-visible {
-        outline: fn.px-to-rem(2) solid color.scale(colors.$primary-color, $lightness: 80%);
+        outline: fn.px-to-rem(2) solid colors.$primary-color;
+        outline-offset: fn.px-to-rem(1);
       }
     }
 

package/src/components/CpMultiselect.vue

@@ -44,9 +44,11 @@
         </slot>
       </template>
       <template #option="{ option }">
-        <button type="button" class="cpMultiselect__option">
-          <slot name="option" :option="option" />
-        </button>
+        <slot name="option" :option="option">
+          <button type="button" class="cpMultiselect__option">
+            {{ option.name }}
+          </button>
+        </slot>
       </template>
       <template #dropdown>
         <div v-if="displayPrefix" class="cpMultiselect__prefix">
@@ -281,11 +283,9 @@ onMounted(() => overrideAlignOverlay())
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: sp.$space;
-    border: none;
-    outline: fn.px-to-rem(1) solid colors.$border-color;
-    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
-    border-radius: fn.px-to-rem(10);
+    padding: sp.$space sp.$space-lg;
+    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+    border-radius: fn.px-to-rem(8);
     gap: sp.$space;
 
     &:has(input:hover) {
@@ -301,7 +301,7 @@ onMounted(() => overrideAlignOverlay())
       cursor: not-allowed;
     }
 
-    &:has([data-p='invalid']) {
+    &:has([data-p*='invalid']) {
       outline: fn.px-to-rem(1) solid colors.$error-color;
       box-shadow: 0 0 0 fn.px-to-em(1) color.scale(colors.$error-color, $lightness: 70%);
 
@@ -375,6 +375,7 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__overlay {
+    padding-block: sp.$space-sm;
     left: 0;
     overflow: hidden;
     background: colors.$neutral-light;
@@ -397,7 +398,10 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__list {
-    padding: sp.$space-sm;
+    display: flex;
+    padding-inline: sp.$space-sm;
+    flex-direction: column;
+    gap: sp.$space-xs;
   }
 
   &__optionWrapper {
@@ -421,6 +425,7 @@ onMounted(() => overrideAlignOverlay())
     }
   }
 
+  &__optionWrapper > *,
   &__option {
     display: flex;
     align-items: center;

package/src/components/CpSelect.vue

@@ -149,10 +149,10 @@ onMounted(() => {
   &__inner {
     @extend %u-text-ellipsis;
 
-    box-shadow: 0 0 0 fn.px-to-rem(1) rgba(0, 0, 0, 0.12);
+    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
     appearance: none;
     border: none;
-    border-radius: fn.px-to-rem(10);
+    border-radius: fn.px-to-rem(8);
     background-color: colors.$neutral-light;
     width: 100%;
     color: colors.$neutral-dark;
@@ -226,6 +226,7 @@ onMounted(() => {
 
   &--lg {
     .cpSelect__inner {
+      border-radius: fn.px-to-rem(10);
       font-size: fn.px-to-rem(16);
       padding: sp.$space-md calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm}) sp.$space-md sp.$space-lg;
     }

package/src/components/CpSwitch.vue

@@ -95,7 +95,7 @@ const handleClick = (value: boolean): void => {
 
 <style lang="scss">
 @mixin cp-switch-style($color, $className) {
-  &--is#{$className}#{&}--isActive &__switch {
+  &--is#{$className}#{&}--isActive:not(#{&}--isDisabled) &__switch {
     background-color: $color;
   }
 
@@ -108,13 +108,13 @@ const handleClick = (value: boolean): void => {
     background-color: colors.$neutral-dark-1;
   }
 
-  &--is#{$className}#{&}--isActive:hover &__switch {
+  &--is#{$className}#{&}--isActive:not(#{&}--isDisabled):hover &__switch {
     background-color: colors.$purple-600;
   }
 }
 
 .cpSwitch {
-  $cp-switch-base-height: fn.px-to-em(20);
+  $cp-switch-base-height: fn.px-to-rem(20);
   align-items: center;
 
   &,
@@ -185,7 +185,7 @@ const handleClick = (value: boolean): void => {
 
   &--isActive .cpSwitch {
     &__knobContainer {
-      transform: translateX(50%);
+      transform: translate3d(50%, 0, 0);
     }
   }
 
@@ -218,7 +218,7 @@ const handleClick = (value: boolean): void => {
     padding: fn.px-to-rem(2);
     display: flex;
     align-items: center;
-    transition: transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+    transition: transform 300ms easings.$easing-elastic;
   }
 
   &__knob {

package/src/components/CpTextarea.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="cpTextarea">
-    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }" class="cpTextarea__label">
+    <base-input-label
+      v-if="label"
+      v-bind-once="{ for: inputIdentifier }"
+      :is-invalid="isInvalid"
+      :required="required"
+      class="cpTextarea__label"
+    >
       {{ capitalizedLabel }}
-      <span v-if="required" class="u-asterisk">*</span>
     </base-input-label>
     <textarea
       v-model="textareaModel"
@@ -15,14 +20,9 @@
       class="cpTextarea__input"
     />
     <transition-expand>
-      <base-input-label
-        v-if="displayErrorMessage"
-        v-bind-once="{ for: inputIdentifier }"
-        is-invalid
-        class="cpTextarea__label cpTextarea__label--isAfter"
-      >
+      <p v-if="displayErrorMessage" class="cpTextarea__error">
         {{ errorMessage }}
-      </base-input-label>
+      </p>
     </transition-expand>
   </div>
 </template>
@@ -86,8 +86,9 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
 
 <style lang="scss">
 .cpTextarea {
+  position: relative;
+
   &__input {
-    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
     appearance: none;
     border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
     border-radius: fn.px-to-em(10);
@@ -104,8 +105,7 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
     }
 
     &:focus {
-      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 80%);
-      border-color: colors.$primary-color;
+      outline: fn.px-to-rem(2) solid colors.$primary-color;
       background-color: colors.$neutral-light;
     }
 
@@ -120,7 +120,6 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
     }
 
     &--isInvalid {
-      box-shadow: 0 0 0 fn.px-to-rem(0.5) colors.$error-color;
       border: fn.px-to-rem(1) solid colors.$error-color;
 
       &:hover,
@@ -129,22 +128,15 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
       }
 
       &:focus {
-        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
+        outline: fn.px-to-rem(2) solid colors.$error-color;
       }
     }
   }
 
-  &__label {
-    display: block;
+  &__error {
+    font-size: fn.px-to-em(14);
     line-height: fn.px-to-rem(24);
-
-    &:not(#{&}--isAfter) {
-      margin-bottom: sp.$space;
-    }
-
-    &--isAfter {
-      margin-top: fn.px-to-em(6);
-    }
+    color: colors.$error-color;
   }
 }
 </style>

package/src/components/icons/IconBaggageSet.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M10.2103 10.0861V8.74317C10.2103 7.6386 11.1057 6.74316 12.2103 6.74316H19C20.1046 6.74316 21 7.63859 21 8.74316V18.0669C21 19.1715 20.1046 20.0669 19 20.0669H14.704"
+    />
+    <path d="M18.911 20.323L18.911 21.0001" />
+    <path
+      d="M8.67485 21H5.10531C3.96046 21 3.04925 20.0408 3.10794 18.8974L3.31108 14.9402C3.36567 13.8769 4.24374 13.0427 5.30845 13.0427H12.4497C13.5144 13.0427 14.3925 13.8769 14.447 14.9402L14.6502 18.8974C14.7089 20.0408 13.7977 21 12.6528 21H9.08328"
+    />
+    <path
+      d="M6.17389 12.9094C6.17389 11.2712 7.38503 9.94312 8.87905 9.94312C10.3731 9.94312 11.5842 11.2712 11.5842 12.9094"
+    />
+    <path
+      d="M13.0109 4C13.0109 3.44772 13.4586 3 14.0109 3H17.1994C17.7517 3 18.1994 3.44772 18.1994 4V5.74304C18.1994 6.29533 17.7517 6.74304 17.1994 6.74304H14.0109C13.4586 6.74304 13.0109 6.29533 13.0109 5.74304V4Z"
+    />
+  </svg>
+</template>

package/src/constants/CpCustomIcons.ts

@@ -8,6 +8,7 @@ import IconArrival from '@/components/icons/IconArrival.vue'
 import IconBaggageCabinNone from '@/components/icons/IconBaggageCabinNone.vue'
 import IconBaggageCheckedNone from '@/components/icons/IconBaggageCheckedNone.vue'
 import IconBaggagePersonalNone from '@/components/icons/IconBaggagePersonalNone.vue'
+import IconBaggageSet from '@/components/icons/IconBaggageSet.vue'
 import IconBaggageSetPlus from '@/components/icons/IconBaggageSetPlus.vue'
 import IconBroadcast from '@/components/icons/IconBroadcast.vue'
 import IconCabinBag from '@/components/icons/IconCabinBag.vue'
@@ -88,6 +89,7 @@ export const CustomCpIcons = {
   'baggage-cabin-none': IconBaggageCabinNone,
   'baggage-checked-none': IconBaggageCheckedNone,
   'baggage-personal-none': IconBaggagePersonalNone,
+  'baggage-set': IconBaggageSet,
   'baggage-set-plus': IconBaggageSetPlus,
   broadcast: IconBroadcast,
   'calendar-2': IconCalendar,

package/src/stories/CpButton.stories.ts

@@ -11,6 +11,11 @@ const meta = {
       options: ['default', 'primary', 'minimal'],
       description: 'The visual style of the button',
     },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'The size of the button',
+    },
     color: {
       control: 'select',
       options: ['Blue', 'Purple', 'Green', 'Orange', 'Red'],
@@ -38,10 +43,6 @@ const meta = {
       control: 'boolean',
       description: 'Whether the button has square corners',
     },
-    isLarge: {
-      control: 'boolean',
-      description: 'Whether the button is large size',
-    },
     onClick: { action: 'clicked' },
   },
 } satisfies Meta<typeof CpButton>
@@ -67,7 +68,6 @@ export const Default: Story = {
     type: 'button',
     isLoading: false,
     isSquare: false,
-    isLarge: false,
   },
   render: defaultRender,
 }
@@ -123,12 +123,38 @@ export const Disabled: Story = {
   render: defaultRender,
 }
 
-export const Large: Story = {
-  args: { ...Default.args, isLarge: true },
-  render: defaultRender,
+export const DifferentSizes: Story = {
+  args: { ...Default.args },
+  render: (args) => ({
+    components: { CpButton },
+    setup: () => ({ args }),
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpButton v-bind="args" color="Purple" appearance="primary" size="xs">Extra Small</CpButton>
+        <CpButton v-bind="args" color="green" appearance="primary" size="sm">Small</CpButton>
+        <CpButton v-bind="args" color="red" appearance="primary" size="md">Medium</CpButton>
+        <CpButton v-bind="args" color="orange" appearance="primary" size="lg" >Large</CpButton>
+      </div>
+    `,
+  }),
 }
 
 export const Square: Story = {
   args: { ...Default.args, isSquare: true },
   render: defaultRender,
 }
+
+export const IconOnly: Story = {
+  args: { ...Default.args },
+  render: (args) => ({
+    components: { CpButton },
+    setup: () => ({ args }),
+    template: `
+      <CpButton v-bind="args">
+        <template #leading-icon>
+          <CpIcon type="arrow-left" />
+        </template>
+      </CpButton>
+    `,
+  }),
+}