@citizenplane/pimp 9.6.6 → 9.7.1

package/src/components/CpTelInput.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="cpTelInput" :class="componentDynamicClass">
+    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }" :is-invalid :required :tooltip>
+      {{ capitalizedLabel }}
+    </base-input-label>
+    <div class="cpTelInput__container">
+      <vue-tel-input
+        ref="telInputRef"
+        v-model="telModel"
+        class="cpTelInput__wrapper"
+        :class="wrapperDynamicClasses"
+        :disabled
+        :input-options
+        mode="international"
+        placeholder="Enter your phone number"
+        valid-characters-only
+        @country-changed="focusOnInput"
+      >
+        <template #arrow-icon>
+          <cp-icon class="cpTelInput__arrow" size="20" type="chevron-down" />
+        </template>
+      </vue-tel-input>
+    </div>
+    <transition-expand mode="out-in">
+      <p v-if="displayErrorMessage" :id="errorMessageId" class="cpTelInput__error">
+        {{ errorMessage }}
+      </p>
+      <p v-else-if="displayHelp" :id="helpMessageId" class="cpTelInput__help">
+        {{ help }}
+      </p>
+    </transition-expand>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, ref, useId, computed, useTemplateRef } from 'vue'
+
+import BaseInputLabel from '@/components/BaseInputLabel.vue'
+
+import { Sizes } from '@/constants'
+import { capitalizeFirstLetter } from '@/helpers'
+
+interface Props {
+  disabled?: boolean
+  errorMessage?: string
+  help?: string
+  isInvalid?: boolean
+  label?: string
+  placeholder?: string
+  required?: boolean
+  size?: Sizes
+  tooltip?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: 'Enter phone number',
+  errorMessage: '',
+  help: '',
+  disabled: false,
+  isInvalid: false,
+  required: false,
+  tooltip: '',
+  size: Sizes.MD,
+})
+
+const telInputRef = useTemplateRef<HTMLInputElement>('telInputRef')
+
+const helpMessageId = useId()
+const errorMessageId = useId()
+
+const attrs = useAttrs()
+
+const componentDynamicClass = computed(() => [`cpTelInput--${props.size}`])
+
+const wrapperDynamicClasses = computed(() => ({
+  'cpTelInput__wrapper--isInvalid': props.isInvalid,
+  'cpTelInput__wrapper--isDisabled': props.disabled,
+}))
+
+const inputOptions = computed(() => ({
+  autofocus: true,
+  placeholder: props.placeholder,
+  styleClasses: {
+    cpTelInput__input: true,
+    'cpTelInput__input--isInvalid': props.isInvalid,
+    'cpTelInput__input--isDisabled': props.disabled,
+  },
+}))
+
+const telModel = defineModel<string>('telModel')
+
+const inputIdentifier = ref<string>((attrs.id as string | undefined) || useId())
+
+const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
+
+const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage.length)
+
+const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
+
+const focusOnInput = () => {
+  if (!telInputRef.value) return
+  telInputRef.value.focus()
+}
+</script>
+
+<style lang="scss">
+.cpTelInput {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  &:has(.cpTelInput__help, .cpTelInput__error) .cpTelInput__container {
+    margin-bottom: sp.$space;
+  }
+
+  &__container {
+    z-index: 1;
+    position: relative;
+    display: flex;
+  }
+
+  &__wrapper {
+    border: none;
+    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+    appearance: none;
+    border-radius: fn.px-to-rem(10);
+    width: 100%;
+    color: inherit;
+
+    &:focus-within {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+    }
+
+    &:not(.cpTelInput__wrapper--isInvalid, .cpTelInput__wrapper--isDisabled):hover {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
+    }
+
+    &--isInvalid {
+      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$error-color;
+    }
+
+    &.disabled {
+      overflow: hidden;
+    }
+  }
+
+  &__input {
+    padding: sp.$space sp.$space-lg;
+    color: inherit;
+    line-height: fn.px-to-rem(24);
+    font-size: fn.px-to-rem(14);
+    border-top-right-radius: fn.px-to-rem(10);
+    border-bottom-right-radius: fn.px-to-rem(10);
+
+    &:is(:hover, :focus) {
+      z-index: 1;
+    }
+
+    &:not(.cpTelInput__input--isInvalid, .cpTelInput__input--isDisabled):focus {
+      outline: fn.px-to-rem(2) solid colors.$primary-color;
+      background-color: colors.$neutral-light;
+    }
+
+    &::placeholder {
+      color: colors.$neutral-dark-1;
+    }
+
+    &--isDisabled {
+      pointer-events: none;
+      background-color: colors.$neutral-light-1;
+    }
+  }
+
+  &__input--isInvalid {
+    &:focus {
+      outline: fn.px-to-rem(2) solid colors.$error-color;
+    }
+
+    .cpTelInput__input:focus {
+      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%);
+    }
+  }
+
+  &__arrow {
+    color: colors.$neutral-dark-1;
+    transition: transform 150ms ease;
+  }
+
+  .vti__dropdown.open .cpTelInput__arrow {
+    transform: rotate(180deg);
+  }
+
+  .vti__dropdown {
+    z-index: 1;
+    position: unset;
+    border-right: fn.px-to-rem(1) solid colors.$neutral-dark-5;
+
+    &:focus,
+    &:focus-within {
+      outline: fn.px-to-rem(2) solid colors.$primary-color;
+    }
+  }
+
+  &__wrapper--isInvalid {
+    .vti__dropdown:focus,
+    .vti__dropdown:focus-within {
+      outline: fn.px-to-rem(2) solid colors.$error-color;
+    }
+  }
+
+  &__wrapper--isDisabled {
+    background-color: colors.$neutral-light-1;
+    color: colors.$neutral-dark-1;
+    cursor: not-allowed;
+
+    .vti__dropdown:focus {
+      outline: none;
+    }
+  }
+
+  .vti__selection {
+    gap: sp.$space;
+
+    .vti__flag {
+      margin: 0;
+    }
+  }
+
+  .vti__flag {
+    max-width: fn.px-to-rem(20);
+    border-radius: fn.px-to-rem(2);
+  }
+
+  .vti__dropdown {
+    padding: sp.$space sp.$space sp.$space sp.$space-md;
+    border-bottom-left-radius: fn.px-to-rem(10);
+    border-top-left-radius: fn.px-to-rem(10);
+  }
+
+  .vti__dropdown-list {
+    width: 100%;
+    padding: sp.$space-sm;
+    border-radius: fn.px-to-rem(10);
+
+    &.below {
+      top: fn.px-to-rem(40) + sp.$space;
+    }
+  }
+
+  .vti__dropdown-item {
+    padding: sp.$space-md sp.$space-lg sp.$space-md sp.$space-md;
+    display: flex;
+    align-items: flex-start;
+    border-radius: fn.px-to-rem(4);
+    font-size: fn.px-to-rem(14);
+    line-height: fn.px-to-rem(24);
+
+    .vti__flag {
+      margin: auto sp.$space-lg auto 0;
+    }
+
+    strong,
+    span:not(.vti__flag) {
+      font-weight: 400;
+    }
+
+    strong {
+      @extend %u-text-ellipsis;
+
+      white-space: nowrap;
+    }
+
+    span:not(.vti__flag) {
+      margin-left: 4px;
+    }
+  }
+
+  &--lg {
+    .cpTelInput__input {
+      font-size: fn.px-to-rem(16);
+      padding: sp.$space-md sp.$space-lg;
+    }
+
+    .vti__dropdown {
+      padding: sp.$space-md sp.$space sp.$space-md sp.$space-md;
+    }
+
+    .vti__dropdown-list.below {
+      top: fn.px-to-rem(48) + sp.$space;
+    }
+
+    .vti__dropdown-item {
+      font-size: 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;
+
+    &::first-letter {
+      text-transform: capitalize;
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -31,6 +31,7 @@ import CpSelect from './CpSelect.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
 import CpSwitch from './CpSwitch.vue'
 import CpTable from './CpTable.vue'
+import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToaster from './CpToaster.vue'
 import CpTooltip from './CpTooltip.vue'
@@ -73,6 +74,7 @@ const Components = {
   CpSwitch,
   CpTable,
   CpIcon,
+  CpTelInput,
   CpTooltip,
   CpPartnerBadge,
   CpAirlineLogo,

package/src/stories/CpTelInput.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpTelInput from '@/components/CpTelInput.vue'
+
+const meta = {
+  title: 'CpTelInput',
+  component: CpTelInput,
+  argTypes: {
+    telModel: {
+      control: 'text',
+      description: 'The phone number value',
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'The size of the input',
+    },
+  },
+} satisfies Meta<typeof CpTelInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    telModel: '',
+  },
+  render: (args) => ({
+    components: { CpTelInput },
+    setup() {
+      return { args }
+    },
+    template: `<CpTelInput v-bind="args" />`,
+  }),
+}