@citizenplane/pimp 9.4.1 → 9.4.3

package/src/components/CpInput.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
-    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }">
-      {{ capitalizedLabel }} <span v-if="isRequired" class="u-asterisk">*</span>
-      <cp-tooltip v-if="tooltip" :content="tooltip">
-        <button type="button" class="cpInput__tooltip">
-          <cp-icon class="cpInput__tooltipIcon" type="tooltip" />
-        </button>
-      </cp-tooltip>
+    <base-input-label
+      v-if="label"
+      v-bind-once="{ for: inputIdentifier }"
+      :is-invalid="isInputInvalid"
+      :tooltip="tooltip"
+      :required="isRequired"
+    >
+      {{ capitalizedLabel }}
     </base-input-label>
     <div
       ref="cpInputContainer"
@@ -17,21 +18,13 @@
         <cp-icon v-if="isSearch" type="search" />
         <slot v-else name="leading-icon" />
       </div>
-      <transition name="fade-in">
-        <div
-          v-if="displayInvalidityIcon"
-          class="cpInput__icon cpInput__icon--isInvalidity"
-          :class="iconInvalidityClasses"
-        >
-          <cp-icon type="alert-circle" />
-        </div>
-      </transition>
       <input
         v-model="inputModel"
         v-bind-once="{ id: inputIdentifier }"
         v-maska
         :data-maska="mask"
         v-bind="restAttributes"
+        :disabled="isDisabled"
         :aria-invalid="isInputInvalid"
         :aria-describedby="inputDescribedByAttribute"
         class="cpInput__inner"
@@ -61,6 +54,7 @@ import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'v
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
+import { Sizes } from '@/constants'
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -70,15 +64,14 @@ interface Emits {
 interface Props {
   errorMessage?: string
   help?: string
-  hideInvalidityIcon?: boolean
   inputId?: string | null
   isInvalid?: boolean
-  isLarge?: boolean
   isSearch?: boolean
   label?: string
   mask?: string | Record<string, unknown> | null
   modelValue?: string | number | boolean
   removeBorder?: boolean
+  size?: Sizes
   tooltip?: string
 }
 
@@ -90,11 +83,10 @@ const props = withDefaults(defineProps<Props>(), {
   isInvalid: false,
   errorMessage: '',
   mask: null,
-  hideInvalidityIcon: false,
   removeBorder: false,
-  isLarge: false,
   isSearch: false,
   help: '',
+  size: Sizes.MD,
 })
 
 const emit = defineEmits<Emits>()
@@ -136,18 +128,17 @@ const isRequired = computed(() => checkAttribute('required'))
 const dynamicClasses = computed(() => {
   return [
     attrs.class,
+    `cpInput--${props.size}`,
     {
       'cpInput--isInvalid': isInputInvalid.value,
       'cpInput--isDisabled': isDisabled.value,
       'cpInput--hasNoBorder': props.removeBorder,
-      'cpInput--isLarge': props.isLarge,
       'cpInput--isSearch': props.isSearch,
     },
   ]
 })
 
 const isInputInvalid = computed(() => props.isInvalid || !isDOMElementValid.value)
-const displayInvalidityIcon = computed(() => !props.hideInvalidityIcon && isInputInvalid.value)
 
 const hasBeforeIconSlot = computed(() => !!slots['leading-icon'])
 const hasBeforeIcon = computed(() => hasBeforeIconSlot.value || props.isSearch)
@@ -155,16 +146,10 @@ const hasBeforeIcon = computed(() => hasBeforeIconSlot.value || props.isSearch)
 const hasAfterIconSlot = computed(() => !!slots['trailing-icon'])
 const hasAfterIcon = computed(() => hasAfterIconSlot.value || props.isSearch)
 
-const iconInvalidityClasses = computed(() => {
-  return {
-    'cpInput__icon--hasAfterAndInvalidityIcon': hasAfterIconSlot.value,
-  }
-})
-
 const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inputIdentifier.value))
 
 const displayErrorMessage = computed(() => isInputInvalid.value && props.errorMessage.length)
-const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.toString().length)
+const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.toString().length && !isDisabled.value)
 
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 
@@ -197,11 +182,6 @@ onMounted(async () => {
 </script>
 
 <style lang="scss">
-// Mixins
-@mixin cp-input-hover-style() {
-  outline: fn.px-to-rem(1) solid colors.$primary-color;
-}
-
 // Main
 .cpInput {
   position: relative;
@@ -222,41 +202,21 @@ onMounted(async () => {
     }
   }
 
-  &__clear {
-    display: flex;
-    padding: fn.px-to-em(3);
-    color: colors.$neutral-light;
-    border-radius: 50%;
-    background-color: colors.$neutral-dark-1;
-
-    &:focus-visible {
-      outline: fn.px-to-em(3) solid color.scale(colors.$primary-color, $lightness: 80%);
-    }
-  }
-
-  &__clearIcon {
-    width: fn.px-to-em(12);
-    height: fn.px-to-em(12);
-    pointer-events: none;
-  }
-
   &__inner {
-    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
+    box-shadow: 0 0 0 fn.px-to-rem(1) rgba(0, 0, 0, 0.12);
     appearance: none;
-    outline: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-em(10);
+    border-radius: fn.px-to-rem(10);
     width: 100%;
     color: inherit;
-    padding: sp.$space;
+    padding: sp.$space sp.$space-lg;
     line-height: fn.px-to-rem(24);
     font-size: fn.px-to-em(14);
 
     &:hover {
-      @include cp-input-hover-style;
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
     }
 
     &:focus {
-      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$primary-color, $lightness: 80%);
       outline: fn.px-to-rem(2) solid colors.$primary-color;
       background-color: colors.$neutral-light;
     }
@@ -271,7 +231,7 @@ onMounted(async () => {
     .cpInput__inner:hover,
     .cpInput__inner:focus,
     .cpInput__icon:hover ~ .cpInput__inner {
-      outline: fn.px-to-rem(1) solid colors.$error-color;
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$error-color;
     }
 
     .cpInput__inner:focus {
@@ -281,7 +241,7 @@ onMounted(async () => {
   }
 
   &--isDisabled {
-    color: colors.$neutral-dark-2 !important;
+    color: colors.$neutral-dark-2;
 
     .cpInput__container * {
       cursor: not-allowed;
@@ -293,11 +253,11 @@ onMounted(async () => {
 
     .cpInput__inner,
     .cpInput__inner:hover {
-      outline: fn.px-to-rem(1) solid colors.$neutral-dark-4 !important;
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$neutral-dark-4;
     }
 
     .cpInput__icon svg {
-      stroke: colors.$neutral-dark-2 !important;
+      stroke: colors.$neutral-dark-2;
     }
   }
 
@@ -309,63 +269,18 @@ onMounted(async () => {
     box-shadow: none;
   }
 
-  &__tooltip {
-    display: flex;
-    padding: sp.$space-sm;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    color: colors.$neutral-dark-3;
-    outline-offset: fn.px-to-em(-3);
-
-    &:hover,
-    &:focus {
-      color: colors.$primary-color;
-    }
-
-    &:focus-visible {
-      outline: fn.px-to-em(2) solid colors.$primary-color;
-    }
-  }
-
-  &__tooltipIcon {
-    width: fn.px-to-rem(16);
-    height: fn.px-to-rem(16);
-  }
-
-  &__help,
-  &__error {
-    font-size: fn.px-to-em(14);
-    line-height: fn.px-to-rem(24);
-  }
-
-  &__help {
-    color: colors.$neutral-dark-1;
-  }
-
-  &__error {
-    color: colors.$error-color;
-    font-weight: 500;
-
-    &::first-letter {
-      text-transform: capitalize;
-    }
-  }
-
-  $cp-input-icon-size: fn.px-to-em(20);
-
   &__icon {
-    left: fn.px-to-rem(8);
+    @include mx.square-sizing(16);
+
+    left: fn.px-to-rem(14);
     z-index: 1;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: $cp-input-icon-size;
-    height: $cp-input-icon-size;
     overflow: hidden;
 
     &:hover ~ .cpInput__inner {
-      @include cp-input-hover-style;
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
     }
 
     svg {
@@ -374,102 +289,115 @@ onMounted(async () => {
       stroke-width: 1.6;
     }
 
-    &--isInvalidity svg {
-      stroke: colors.$error-color;
-    }
-
-    &--isAfter,
-    &--isInvalidity {
+    &--isAfter {
       left: auto;
-      right: fn.px-to-rem(8);
-      justify-content: flex-end;
+      right: fn.px-to-rem(14);
     }
 
-    &--isAfter {
-      transition: 50ms right 0.25s cubic-bezier(0.17, 0.84, 0.44, 1);
+    &--isBefore ~ input {
+      padding-left: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
     }
 
     &--isAfter ~ input {
-      padding-right: calc(#{fn.px-to-rem(8)} + #{$cp-input-icon-size} * 2 + #{fn.px-to-em(8)});
+      padding-right: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
     }
+  }
 
-    &--isBefore ~ input {
-      padding-left: calc(#{fn.px-to-rem(8)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
+  &--sm {
+    .cpInput__inner {
+      padding: sp.$space-sm sp.$space-md;
+      font-size: fn.px-to-rem(14);
     }
 
-    &--isInvalidity ~ input {
-      padding-right: calc(#{fn.px-to-rem(8)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
+    .cpInput__icon {
+      left: fn.px-to-rem(10);
     }
 
-    &--hasAfterAndInvalidityIcon ~ input {
-      padding-right: calc(#{fn.px-to-rem(8)} + #{$cp-input-icon-size} * 2 + #{fn.px-to-em(8)} * 2);
+    .cpInput__icon--isAfter {
+      left: auto;
+      right: fn.px-to-rem(10);
     }
 
-    &--isInvalidity {
-      & ~ .cpInput__icon--isAfter {
-        right: calc(#{fn.px-to-rem(8)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
-        transition: right 0.25s cubic-bezier(0.17, 0.84, 0.44, 1);
-      }
+    .cpInput__icon--isBefore ~ input {
+      padding-left: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
     }
-  }
 
-  &--isLarge {
-    $cp-input-large-icon-size: fn.px-to-em(24);
-    $cp-input-large-spacing: fn.px-to-em(12);
-    $cp-input-large-padding: fn.px-to-em(16);
+    .cpInput__icon--isAfter ~ input {
+      padding-right: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
+    }
+  }
 
+  &--lg {
     .cpInput__inner {
-      height: sizing.$component-size-large;
-      padding: $cp-input-large-padding;
+      padding: sp.$space-md sp.$space-lg;
+      font-size: fn.px-to-rem(16);
     }
 
     .cpInput__icon {
-      left: $cp-input-large-padding;
-      width: $cp-input-large-icon-size;
-      height: $cp-input-large-icon-size;
+      @include mx.square-sizing(20);
+
+      left: fn.px-to-rem(12);
     }
 
-    .cpInput__icon--isInvalidity,
     .cpInput__icon--isAfter {
       left: auto;
-      right: $cp-input-large-padding;
+      right: fn.px-to-rem(12);
     }
 
     .cpInput__icon--isAfter ~ input {
-      padding-right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} * 2 + #{$cp-input-large-spacing});
+      padding-right: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
     }
 
     .cpInput__icon--isBefore ~ input {
-      padding-left: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{$cp-input-large-spacing});
+      padding-left: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
     }
+  }
 
-    .cpInput__icon--isInvalidity ~ input {
-      padding-right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{$cp-input-large-spacing});
+  &--isSearch {
+    .cpInput__icon--isAfter {
+      width: auto;
+      height: auto;
+      overflow: visible;
     }
 
-    .cpInput__icon--hasAfterAndInvalidityIcon ~ input {
-      padding-right: calc(
-        #{$cp-input-large-padding} + #{$cp-input-large-icon-size} * 2 + #{$cp-input-large-spacing} * 2
-      );
-    }
+    .cpInput__clear {
+      display: flex;
+      color: colors.$neutral-light;
+      padding: sp.$space-xs;
+      border-radius: 50%;
+      background-color: colors.$neutral-dark-1;
 
-    .cpInput__icon--isInvalidity ~ .cpInput__icon--isAfter {
-      & ~ .cpInput__icon--isAfter {
-        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{fn.px-to-em(8)});
+      &:focus-visible {
+        outline: fn.px-to-rem(2) solid color.scale(colors.$primary-color, $lightness: 80%);
       }
     }
-  }
 
-  &--isSearch {
-    .cpInput__icon--isAfter {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: visible;
+    .cpInput__clearIcon {
+      @include mx.square-sizing(12);
+
+      pointer-events: none;
     }
 
-    .cpInput__inner {
-      padding-right: calc(#{$cp-input-icon-size} * 2);
+    &.cpInput--lg .cpInput__clearIcon {
+      @include mx.square-sizing(16);
+    }
+  }
+
+  &__help,
+  &__error {
+    font-size: fn.px-to-em(14);
+    line-height: fn.px-to-rem(24);
+  }
+
+  &__help {
+    color: colors.$neutral-dark-1;
+  }
+
+  &__error {
+    color: colors.$error-color;
+
+    &::first-letter {
+      text-transform: capitalize;
     }
   }
 }

package/src/components/CpSelect.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="cpSelect" :class="dynamicClasses">
-    <base-input-label v-if="label" :for="selectReferenceId" class="cpSelect__label">
-      {{ capitalizedLabel }} <span v-if="required" class="u-asterisk">*</span>
+    <base-input-label
+      v-if="label"
+      :for="selectReferenceId"
+      :tooltip="tooltip"
+      :is-invalid="isInvalid"
+      :required="required"
+      class="cpSelect__label"
+    >
+      {{ capitalizedLabel }}
     </base-input-label>
     <div class="cpSelect__container">
       <select
@@ -18,25 +25,24 @@
         <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
       </select>
     </div>
-    <transition-expand>
-      <base-input-label
-        v-if="displayErrorMessage"
-        :is-invalid="isInvalid"
-        :for="selectReferenceId"
-        class="cpSelect__label cpSelect__label--isAfter"
-      >
+    <transition-expand mode="out-in">
+      <p v-if="displayErrorMessage" :id="errorMessageId" class="cpSelect__error">
         {{ errorMessage }}
-      </base-input-label>
+      </p>
+      <p v-else-if="displayHelp" :id="helpMessageId" class="cpSelect__help">
+        {{ help }}
+      </p>
     </transition-expand>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
+import { Sizes } from '@/constants'
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -53,14 +59,16 @@ interface Props {
   defaultValue?: string
   disabled?: boolean
   errorMessage?: string
+  help?: string
   hideDefaultValue?: boolean
   isInvalid?: boolean
-  isLarge?: boolean
   label?: string
   modelValue?: string | number
   name?: string
   options: SelectOption[]
   required?: boolean
+  size?: Sizes
+  tooltip?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -74,28 +82,34 @@ const props = withDefaults(defineProps<Props>(), {
   autocomplete: 'on',
   isInvalid: false,
   errorMessage: '',
-  isLarge: false,
+  size: Sizes.MD,
+  help: '',
+  tooltip: '',
 })
 
 const emit = defineEmits<Emits>()
 
 const selectReferenceId = ref('')
 
+const helpMessageId = useId()
+const errorMessageId = useId()
+
 const capitalizedLabel = computed(() => {
   return capitalizeFirstLetter(props.label)
 })
 
 const dynamicClasses = computed(() => {
-  return {
-    'cpSelect--isInvalid': props.isInvalid,
-    'cpSelect--isDisabled': props.disabled,
-    'cpSelect--isLarge': props.isLarge,
-  }
+  return [
+    `cpSelect--${props.size}`,
+    {
+      'cpSelect--isInvalid': props.isInvalid,
+      'cpSelect--isDisabled': props.disabled,
+    },
+  ]
 })
 
-const displayErrorMessage = computed(() => {
-  return props.isInvalid && props.errorMessage.length
-})
+const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
+const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage.length)
 
 const handleChange = (e: Event): void => {
   const target = e.target as HTMLSelectElement
@@ -109,19 +123,23 @@ onMounted(() => {
 
 <style lang="scss">
 .cpSelect {
-  $cp-select-icon-size: fn.px-to-em(16);
+  position: relative;
+
+  &:has(.cpSelect__help, .cpSelect__error) .cpSelect__container {
+    margin-bottom: sp.$space;
+  }
 
   &__container {
     position: relative;
 
     &:after {
+      @include mx.square-sizing(16);
+
       content: '';
       position: absolute;
       right: fn.px-to-em(12);
       top: 50%;
       transform: translateY(-50%);
-      width: $cp-select-icon-size;
-      height: $cp-select-icon-size;
       background-image: url('@/assets/images/icons/chevron-down-icon.svg');
       background-size: cover;
       pointer-events: none;
@@ -130,50 +148,50 @@ onMounted(() => {
 
   &__inner {
     @extend %u-text-ellipsis;
-    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
+
+    box-shadow: 0 0 0 fn.px-to-rem(1) rgba(0, 0, 0, 0.12);
     appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     border: none;
-    outline: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-em(10);
+    border-radius: fn.px-to-rem(10);
     background-color: colors.$neutral-light;
     width: 100%;
     color: colors.$neutral-dark;
     cursor: pointer;
-    padding: fn.px-to-rem(8) calc(#{$cp-select-icon-size} + #{fn.px-to-rem(8)} + #{fn.px-to-rem(8)}) fn.px-to-rem(8)
-      fn.px-to-rem(8);
+    padding: sp.$space calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space}) 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,
-    &:focus {
-      outline: fn.px-to-rem(1) solid colors.$primary-color;
-      background-color: colors.$neutral-light;
+    &:hover {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
     }
 
     &:focus {
       outline: fn.px-to-rem(2) solid colors.$primary-color;
-      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$primary-color, $lightness: 80%);
+      background-color: colors.$neutral-light;
     }
   }
 
-  &__label {
-    display: block;
+  &__help,
+  &__error {
+    font-size: fn.px-to-em(14);
     line-height: fn.px-to-rem(24);
+  }
 
-    &:not(#{&}--isAfter) {
-      margin-bottom: sp.$space;
-    }
+  &__help {
+    color: colors.$neutral-dark-1;
+  }
+
+  &__error {
+    color: colors.$error-color;
 
-    &--isAfter {
-      margin-top: fn.px-to-em(6);
+    &::first-letter {
+      text-transform: capitalize;
     }
   }
 
   &--isDisabled {
     .cpSelect__inner {
-      outline: fn.px-to-rem(1) solid colors.$neutral-dark-4 !important;
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$neutral-dark-4;
       background: colors.$neutral-light-1;
     }
 
@@ -192,28 +210,28 @@ onMounted(() => {
     .cpSelect__inner,
     .cpSelect__inner:hover,
     .cpSelect__inner:focus {
-      outline-color: colors.$error-color;
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$error-color;
     }
 
     .cpSelect__inner:focus {
-      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$error-color, $lightness: 60%);
+      outline: fn.px-to-rem(2) solid colors.$error-color;
     }
   }
 
-  &--isLarge {
-    $cp-select-large-icon-size: fn.px-to-em(24);
-    $cp-select-large-padding: fn.px-to-em(16);
-
-    .cpSelect__container:after {
-      right: fn.px-to-em(16);
-      width: $cp-select-large-icon-size;
-      height: $cp-select-large-icon-size;
+  &--sm {
+    .cpSelect__inner {
+      padding: sp.$space-sm calc(sp.$space-xl + fn.px-to-rem(12)) sp.$space-sm sp.$space-md;
     }
+  }
 
+  &--lg {
     .cpSelect__inner {
-      padding: fn.px-to-em(16) calc(#{$cp-select-large-icon-size} + #{fn.px-to-em(16)} + #{fn.px-to-em(8)})
-        fn.px-to-em(16) fn.px-to-em(16);
-      height: sizing.$component-size-large;
+      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;
+    }
+
+    .cpSelect__container:after {
+      @include mx.square-sizing(20);
     }
   }
 }