@citizenplane/pimp 8.9.4 → 8.10.0

package/src/components/index.js

@@ -14,13 +14,13 @@ import CpDialogWrapper from './atomic-elements/CpDialogWrapper.vue'
 import CpTooltip from './atomic-elements/CpTooltip.vue'
 
 // Typography
-import CpHeading from './typography/CpHeading/index.vue'
+import CpHeading from './typography/CpHeading.vue'
 
 // Buttons
 import CpButton from './buttons/CpButton.vue'
 
 // Date pickers
-import CpDate from './date-pickers/CpDate/index.vue'
+import CpDate from './date-pickers/CpDate.vue'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpDatepicker from './date-pickers/CpDatepicker.vue'
 import CpCalendar from './date-pickers/CpCalendar.vue'
@@ -38,15 +38,15 @@ import CpTextarea from './inputs/CpTextarea.vue'
 
 // Selects
 import CpSelect from './selects/CpSelect.vue'
-import CpSelectMenu from './selects/CpSelectMenu/index.vue'
+import CpSelectMenu from './selects/CpSelectMenu.vue'
 
 // Toggles
-import CpCheckbox from './toggles/CpCheckbox/index.vue'
-import CpRadio from './toggles/CpRadio/index.vue'
-import CpSwitch from './toggles/CpSwitch/index.vue'
+import CpCheckbox from './toggles/CpCheckbox.vue'
+import CpRadio from './toggles/CpRadio.vue'
+import CpSwitch from './toggles/CpSwitch.vue'
 
 // List and Tables
-import CpTable from './lists-and-table/CpTable/index.vue'
+import CpTable from './lists-and-table/CpTable.vue'
 
 // Visual
 import CpIcon from './visual/CpIcon.vue'

package/src/components/inputs/CpInput.vue

@@ -32,6 +32,8 @@
         v-maska
         :data-maska="mask"
         v-bind="restAttributes"
+        :aria-invalid="isInputInvalid"
+        :aria-describedby="inputDescribedByAttribute"
         class="cpInput__inner"
       />
       <div v-if="hasAfterIcon" class="cpInput__icon cpInput__icon--isAfter">
@@ -43,21 +45,21 @@
         </transition>
       </div>
     </div>
-    <p v-if="help" class="cpInput__help">
-      {{ help }}
-    </p>
-    <transition-expand>
-      <p v-if="displayErrorMessage" class="cpInput__error">
+    <transition-expand mode="out-in">
+      <p v-if="displayErrorMessage" :id="errorMessageId" class="cpInput__error">
         {{ errorMessage }}
       </p>
+      <p v-else-if="displayHelp" :id="helpMessageId" class="cpInput__help">
+        {{ help }}
+      </p>
     </transition-expand>
   </div>
 </template>
 
 <script setup>
-import { ref, useAttrs, useSlots, computed, nextTick, onMounted } from 'vue'
+import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'vue'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 
 import { randomString } from '@/helpers'
 
@@ -124,6 +126,11 @@ const { ['class']: value, id, ...restAttributes } = attrs
 
 const inputIdentifier = ref(id || randomString())
 
+const helpMessageId = useId()
+const errorMessageId = useId()
+
+const inputDescribedByAttribute = computed(() => `${helpMessageId} ${errorMessageId}`)
+
 const slots = useSlots()
 
 const inputModel = defineModel({
@@ -174,6 +181,8 @@ const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inpu
 const displayErrorMessage = computed(() => isInputInvalid.value && props.errorMessage.length)
 const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.length)
 
+const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
+
 const handleChange = (newValue) => {
   emit('update:modelValue', newValue)
   checkInputValidity()
@@ -205,7 +214,7 @@ onMounted(async () => {
 <style lang="scss">
 // Mixins
 @mixin cp-input-hover-style() {
-  border-color: $secondary-color;
+  border-color: colors.$primary-color;
 }
 
 // Main
@@ -214,8 +223,8 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
 
-  &:has(.cpInput__help) .cpInput__container {
-    margin-bottom: $space;
+  &:has(.cpInput__help, .cpInput__error) .cpInput__container {
+    margin-bottom: sp.$space;
   }
 
   &__container {
@@ -230,46 +239,46 @@ onMounted(async () => {
 
   &__clear {
     display: flex;
-    padding: px-to-em(3);
-    color: $neutral-light;
+    padding: fn.px-to-em(3);
+    color: colors.$neutral-light;
     border-radius: 50%;
-    background-color: $neutral-dark-1;
+    background-color: colors.$neutral-dark-1;
 
     &:focus-visible {
-      outline: px-to-em(3) solid scale-color($secondary-color, $lightness: 80%);
+      outline: fn.px-to-em(3) solid color.scale(colors.$primary-color, $lightness: 80%);
     }
   }
 
   &__clearIcon {
-    width: px-to-em(12);
-    height: px-to-em(12);
+    width: fn.px-to-em(12);
+    height: fn.px-to-em(12);
     pointer-events: none;
   }
 
   &__inner {
-    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
     appearance: none;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
     outline: none;
     width: 100%;
-    height: $component-size-default;
+    height: sizing.$component-size-default;
     color: inherit;
-    padding: px-to-em(12);
-    font-size: px-to-em(16);
+    padding: fn.px-to-em(12);
+    font-size: fn.px-to-em(16);
 
     &:hover {
       @include cp-input-hover-style;
     }
 
     &:focus {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
-      border-color: $secondary-color;
-      background-color: $neutral-light;
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 80%);
+      border-color: colors.$primary-color;
+      background-color: colors.$neutral-light;
     }
 
     &::placeholder {
-      color: $neutral-dark-1;
+      color: colors.$neutral-dark-1;
     }
   }
 
@@ -278,32 +287,32 @@ onMounted(async () => {
     .cpInput__inner:hover,
     .cpInput__inner:focus,
     .cpInput__icon:hover ~ .cpInput__inner {
-      border: px-to-rem(1) solid $error-color;
+      border: fn.px-to-rem(1) solid colors.$error-color;
     }
 
     .cpInput__inner:focus {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
     }
   }
 
   &--isDisabled {
-    color: $neutral-dark-2 !important;
+    color: colors.$neutral-dark-2 !important;
 
     .cpInput__container * {
       cursor: not-allowed;
     }
 
     .cpInput__inner {
-      background: $neutral-light-1;
+      background: colors.$neutral-light-1;
     }
 
     .cpInput__inner,
     .cpInput__inner:hover {
-      border-color: $neutral-dark-4 !important;
+      border-color: colors.$neutral-dark-4 !important;
     }
 
     .cpInput__icon svg {
-      stroke: $neutral-dark-2 !important;
+      stroke: colors.$neutral-dark-2 !important;
     }
   }
 
@@ -318,50 +327,52 @@ onMounted(async () => {
   &__label {
     display: flex;
     align-items: center;
-    font-size: px-to-em(14);
-    line-height: px-to-rem(24);
-    margin-bottom: $space;
-    gap: $space-sm;
+    font-size: fn.px-to-em(14);
+    line-height: fn.px-to-rem(24);
+    margin-bottom: sp.$space;
+    gap: sp.$space-sm;
 
     sup {
-      color: $error-color;
+      color: colors.$error-color;
     }
   }
 
   &__tooltip {
     display: flex;
-    padding: $space-sm;
+    padding: sp.$space-sm;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    color: $neutral-dark-3;
-    outline-offset: px-to-em(-3);
+    color: colors.$neutral-dark-3;
+    outline-offset: fn.px-to-em(-3);
 
     &:hover,
     &:focus {
-      color: $primary-color;
+      color: colors.$primary-color;
     }
 
     &:focus-visible {
-      outline: px-to-em(2) solid $primary-color;
+      outline: fn.px-to-em(2) solid colors.$primary-color;
     }
   }
 
   &__tooltipIcon {
-    width: px-to-rem(16);
-    height: px-to-rem(16);
+    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: $neutral-dark-1;
-    font-size: px-to-em(14);
-    line-height: px-to-rem(24);
+    color: colors.$neutral-dark-1;
   }
 
   &__error {
-    margin-top: px-to-em(6);
-    color: $error-color;
-    font-size: px-to-em(14);
+    color: colors.$error-color;
     font-weight: 500;
 
     &::first-letter {
@@ -369,10 +380,10 @@ onMounted(async () => {
     }
   }
 
-  $cp-input-icon-size: px-to-em(20);
+  $cp-input-icon-size: fn.px-to-em(20);
 
   &__icon {
-    left: px-to-em(12);
+    left: fn.px-to-em(12);
     z-index: 1;
     position: absolute;
     top: 50%;
@@ -392,13 +403,13 @@ onMounted(async () => {
     }
 
     &--isInvalidity svg {
-      stroke: $error-color;
+      stroke: colors.$error-color;
     }
 
     &--isAfter,
     &--isInvalidity {
       left: auto;
-      right: px-to-em(12);
+      right: fn.px-to-em(12);
       justify-content: flex-end;
     }
 
@@ -407,36 +418,36 @@ onMounted(async () => {
     }
 
     &--isAfter ~ input {
-      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{px-to-em(8)});
+      padding-right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{fn.px-to-em(8)});
     }
 
     &--isBefore ~ input {
-      padding-left: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
+      padding-left: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
     }
 
     &--isInvalidity ~ input {
-      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
+      padding-right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
     }
 
     &--hasAfterAndInvalidityIcon ~ input {
-      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{px-to-em(8)} * 2);
+      padding-right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{fn.px-to-em(8)} * 2);
     }
 
     &--isInvalidity {
       & ~ .cpInput__icon--isAfter {
-        right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
+        right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
         transition: right 0.25s cubic-bezier(0.17, 0.84, 0.44, 1);
       }
     }
   }
 
   &--isLarge {
-    $cp-input-large-icon-size: px-to-em(24);
-    $cp-input-large-spacing: px-to-em(12);
-    $cp-input-large-padding: px-to-em(16);
+    $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__inner {
-      height: $component-size-large;
+      height: sizing.$component-size-large;
       padding: $cp-input-large-padding;
     }
 
@@ -472,7 +483,7 @@ onMounted(async () => {
 
     .cpInput__icon--isInvalidity ~ .cpInput__icon--isAfter {
       & ~ .cpInput__icon--isAfter {
-        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{px-to-em(8)});
+        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{fn.px-to-em(8)});
       }
     }
   }

package/src/components/inputs/CpTextarea.vue

@@ -29,7 +29,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
 import { randomString } from '@/helpers'
@@ -109,49 +109,49 @@ const handleChange = (newValue) => emit('update:modelValue', newValue)
 <style lang="scss">
 .cpTextarea {
   &__input {
-    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
     appearance: none;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
     outline: none;
-    padding: px-to-em(16);
+    padding: fn.px-to-em(16);
     width: 100%;
     max-width: 100%;
     height: 100%;
-    font-size: px-to-em(16);
-    color: $neutral-dark;
+    font-size: fn.px-to-em(16);
+    color: colors.$neutral-dark;
 
     &:hover {
-      border-color: $secondary-color;
+      border-color: colors.$primary-color;
     }
 
     &:focus {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
-      border-color: $secondary-color;
-      background-color: $neutral-light;
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 80%);
+      border-color: colors.$primary-color;
+      background-color: colors.$neutral-light;
     }
 
     &:disabled {
-      background: $neutral-light-1;
+      background: colors.$neutral-light-1;
       cursor: not-allowed;
-      color: $neutral-dark-1;
+      color: colors.$neutral-dark-1;
     }
 
     &::placeholder {
-      color: rgba($neutral-dark, 0.6);
+      color: rgba(colors.$neutral-dark, 0.6);
     }
 
     &--isInvalid {
-      box-shadow: 0 0 0 px-to-rem(0.5) $error-color;
-      border: px-to-rem(1) solid $error-color;
+      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,
       &:focus {
-        border: px-to-rem(1) solid $error-color;
+        border: fn.px-to-rem(1) solid colors.$error-color;
       }
 
       &:focus {
-        box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
+        box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
       }
     }
   }
@@ -160,11 +160,11 @@ const handleChange = (newValue) => emit('update:modelValue', newValue)
     display: block;
 
     &:not(#{&}--isAfter) {
-      margin-bottom: px-to-em(6);
+      margin-bottom: fn.px-to-em(6);
     }
 
     &--isAfter {
-      margin-top: px-to-em(6);
+      margin-top: fn.px-to-em(6);
     }
   }
 }