@citizenplane/pimp 9.4.1 → 9.4.2

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/CpTooltip.vue

@@ -30,6 +30,7 @@ const ariaId = useId()
 <style lang="scss">
 .cpTooltip.v-popper--theme-tooltip {
   display: inline-flex;
+  white-space: pre-wrap;
 
   .v-popper__inner {
     padding: sp.$space sp.$space-md;

package/src/stories/CpInput.stories.ts

@@ -4,6 +4,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpInput from '@/components/CpInput.vue'
 
+import { Sizes } from '@/constants'
+
 const meta = {
   title: 'CpInput',
   component: CpInput,
@@ -12,6 +14,11 @@ const meta = {
       control: 'text',
       description: 'The input value',
     },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the input',
+    },
     type: {
       control: 'select',
       options: ['text', 'email', 'password', 'number', 'tel', 'url'],
@@ -55,15 +62,14 @@ export const Default: Story = {
   args: {
     label: 'Input Label',
     placeholder: 'Enter text here',
+    size: Sizes.MD,
     type: 'text',
     required: false,
     disabled: false,
     autocomplete: 'off',
     isInvalid: false,
     errorMessage: '',
-    hideInvalidityIcon: false,
     removeBorder: false,
-    isLarge: false,
     isSearch: false,
     help: '',
   },
@@ -155,3 +161,32 @@ export const Mask: Story = {
     mask: '## ## ## ## ##',
   },
 }
+export const WithIcon: Story = {
+  args: {
+    ...Default.args,
+    required: false,
+    disabled: false,
+    autocomplete: 'off',
+    isInvalid: false,
+    errorMessage: '',
+    removeBorder: false,
+    isSearch: true,
+    help: '',
+  },
+  render: (args) => ({
+    components: { CpInput },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpInput
+          v-model="value"
+          v-bind="args"
+        >
+        </CpInput>
+      </div>
+    `,
+  }),
+}