@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CTextField.vue

@@ -1,115 +1,472 @@
 <template>
-  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :hide-label="hideLabel">
-    <template #label>
-      {{ label }}
-      <slot name="label" />
-    </template>
-
-    <v-text-field
-      :id="id"
-      ref="input"
-      v-bind="$attrs"
-      :data-test="`${dataTest}-input`"
-      class="text-field__field"
-      :class="{ 'text-field__field--disabled': disabled }"
-      solo
-      flat
-      :aria-label="hideLabel ? label : undefined"
-      :hide-details="hideDetails"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :inputmode="inputmode"
-      :type="_type"
-      :value="value"
-      :rules="rules"
-      validate-on-blur
-      v-on="$listeners"
+  <div
+    class="c-text-field"
+    :class="[
+      {
+        'c-text-field--disabled': disabled,
+        'c-text-field--invalid': !isValidationValid,
+        'c-text-field--hide-label': hideLabel,
+        'c-text-field--focused': isFocused,
+        'c-text-field--medium': size === 'medium',
+        'c-text-field--large': size === 'large',
+      },
+      $attrs.class,
+    ]"
+    :data-test="dataTest"
+    :style="rootStyles"
+  >
+    <label class="c-text-field__label" :for="idWithFallback" :data-test="`${dataTest}-label`">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+
+    <div class="c-text-field__container">
+      <div
+        v-if="prefixSlotHasContent"
+        class="c-text-field__prefix"
+        :data-test="`${dataTest}-prefix`"
+      >
+        <slot name="prepend-inner" />
+      </div>
+
+      <input
+        v-bind="fallthroughAttrs"
+        :id="idWithFallback"
+        ref="input"
+        class="c-text-field__input"
+        :class="{
+          'c-text-field__input--has-prefix': prefixSlotHasContent,
+          'c-text-field__input--has-suffix': suffixSlotHasContent,
+          'c-text-field__input--clearable': clearable && value,
+          'c-text-field__input--hideable': hideable,
+        }"
+        :data-test="`${dataTest}-input`"
+        :aria-label="ariaLabel || label || undefined"
+        :aria-describedby="`${idWithFallback}-validation-message ${idWithFallback}-message`"
+        :aria-invalid="isValidationValid ? 'false' : 'true'"
+        :type="inputType"
+        :placeholder="placeholder"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :disabled="disabled"
+        :value="inputValue"
+        :inputmode="inputmode"
+        :required="required"
+        @keyup="$emit('keyup', $event)"
+        @keydown="$emit('keydown', $event)"
+        @keypress="$emit('keypress', $event)"
+        @click="$emit('click', $event)"
+        @input="onInput"
+        @change="onChange"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+
+      <CIconButton
+        v-if="clearable && value"
+        :aria-label="$t('Clear')"
+        :data-test="`${dataTest}-clear`"
+        class="c-text-field__clear-btn c-text-field__suffix-btn"
+        type="button"
+        tertiary
+        :icon="faXmark"
+        @click="clearInput"
+      />
+
+      <CIconButton
+        v-if="hideable"
+        :aria-label="hideToggleAriaLabel"
+        :data-test="`${dataTest}-hide-toggle`"
+        :data-hidden="inputHidden || undefined"
+        class="c-text-field__suffix-btn"
+        type="button"
+        tertiary
+        :icon="inputHidden ? faEye : faEyeSlash"
+        @click="toggleHidden"
+      />
+
+      <div
+        v-if="suffixSlotHasContent"
+        class="c-text-field__suffix"
+        :data-test="`${dataTest}-suffix`"
+      >
+        <slot name="append" />
+      </div>
+    </div>
+
+    <CValidationMessage
+      :id="`${idWithFallback}-validation-message`"
+      class="c-text-field__validation-message"
+      :data-test="`${dataTest}-validation-message`"
+      :validation-message="errorMessage || validationMessage"
+      :hide="hideDetails"
     >
       <template #append>
-        <slot name="append">
-          <button
-            v-if="hideable"
-            type="button"
-            :data-test="`${dataTest}-hide-toggle`"
-            @click="toggleHideInput"
-          >
-            <font-awesome-icon v-if="hideInput" :icon="faEye" />
-            <font-awesome-icon v-else :icon="faEyeSlash" />
-          </button>
-        </slot>
-      </template>
-      <template #message>
-        <slot name="message" />
+        <CFormFieldCounter
+          v-if="counter"
+          :data-test="`${dataTest}-counter`"
+          :counter="counter"
+          :counter-value="counterValue !== null ? counterValue : undefined"
+          :value="inputValue"
+        />
       </template>
-    </v-text-field>
-  </form-field>
+    </CValidationMessage>
+
+    <div
+      v-if="messageSlotHasContent"
+      :id="`${idWithFallback}-message`"
+      class="c-text-field__message"
+      :data-test="`${dataTest}-message`"
+    >
+      <slot name="message" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { faEye, faEyeSlash } from '@fortawesome/pro-light-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-import FormField from '@/components/helpers/FormField.vue';
-
-type VTextField = Vue & { focus: () => void };
-
-@Component({ name: 'CTextField', inheritAttrs: false, components: { FormField, FontAwesomeIcon } })
-export default class CTextField extends Vue {
-  faEye = faEye;
-  faEyeSlash = faEyeSlash;
-
-  @Prop(String) label?: string;
-  @Prop(String) placeholder?: string;
-  @Prop({ type: String, required: true }) id!: string;
-  @Prop({ type: String, default: 'text' }) type!: string;
-  /** HTML property that tells browser what kind of data is being entered.
-   * Be sure to set this if you're using an hideable input, so the keyboard doesn't change as the user toggles. */
-  @Prop(String) inputmode?: string;
-  @Prop({ type: Boolean, default: false }) disabled!: boolean;
-  @Prop({ type: Boolean, default: false }) hideable!: boolean;
-  @Prop({ type: Boolean, default: true }) hideByDefault!: boolean;
-  /** Hides the label and instead labels the field with `aria-label` */
-  @Prop({ type: Boolean, default: false }) hideLabel!: boolean;
-  /** Hides the validation message area. Defaults to `false` (show message area even when valid), so validations transition in gracefully. */
-  @Prop({ type: [Boolean, String], default: false }) hideDetails!: boolean | 'auto';
-  @Prop({ type: String, default: '' }) value!: string;
-  @Prop({ type: String, default: 'text-field' }) dataTest!: string;
-  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
-
-  hideInput: boolean = false;
-
-  created(): void {
-    this.hideInput = this.hideByDefault;
+import { faEye, faEyeSlash, faXmark } from '@fortawesome/pro-regular-svg-icons';
+import {
+  type PropType,
+  type Ref,
+  type StyleValue,
+  computed,
+  defineComponent,
+  onMounted,
+  ref,
+  toRefs,
+} from 'vue';
+
+import CFormFieldCounter from '@propelinc/citrus-ui/src/components/CFormFieldCounter.vue';
+import CIconButton from '@propelinc/citrus-ui/src/components/CIconButton.vue';
+import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
+import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
+import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
+import { useId } from '@propelinc/citrus-ui/src/composables/id';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
+
+// Export the interface for what this component exposes
+export interface CTextFieldExposed {
+  input: Ref<HTMLInputElement | null>;
+  focus: () => void;
+  blur: () => void;
+  startValidating: () => void;
+}
+
+export default defineComponent({
+  name: 'CTextField',
+  components: { CFormFieldCounter, CIconButton, CValidationMessage },
+  inheritAttrs: false,
+  props: {
+    id: { type: String as PropType<string | null>, default: null },
+    label: { type: String as PropType<string | null>, default: null },
+    ariaLabel: { type: String as PropType<string | null>, default: null },
+    placeholder: { type: String, default: '' },
+    type: {
+      type: String as PropType<
+        'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'decimal' | 'numeric'
+      >,
+      default: 'text',
+    },
+    clearable: { type: Boolean, default: false },
+    size: { type: String as PropType<'medium' | 'large'>, default: 'medium' },
+    inputmode: {
+      type: String as PropType<
+        'text' | 'search' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal'
+      >,
+      default: undefined,
+    },
+    minlength: { type: [Number, String], default: undefined },
+    maxlength: { type: [Number, String], default: undefined },
+    disabled: { type: Boolean, default: false },
+    hideable: { type: Boolean, default: false },
+    hideLabel: { type: Boolean, default: false },
+    hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
+    value: { type: String, default: '' },
+    dataTest: { type: String, default: 'text-field' },
+    counter: { type: Number as PropType<number | null>, default: null },
+    counterValue: {
+      type: [Number, Function] as PropType<number | (() => number | null)>,
+      default: null,
+    },
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    validateOnBlur: { type: Boolean, default: true },
+    required: { type: Boolean, default: false },
+    /**
+     * Overrides the default validation message. If provided, this error message will always
+     * be shown, regardless of any other failing validation rules.
+     */
+    errorMessage: { type: String, default: null },
+  },
+  emits: [
+    'keyup',
+    'keydown',
+    'keypress',
+    'input',
+    'focus',
+    'blur',
+    'change',
+    'click',
+    'click:hide',
+  ],
+  setup(props, { attrs, emit, slots, expose }) {
+    const { t } = useTranslation();
+
+    const isFocused = ref(false);
+    const inputHidden = ref(true);
+    const inputType = computed(() =>
+      props.hideable && inputHidden.value ? 'password' : props.type
+    );
+    const hideToggleAriaLabel = computed(() => {
+      return props.hideable && inputHidden.value ? t('Show input value') : t('Hide input value');
+    });
+
+    const { id, value, rules, required } = toRefs(props);
+
+    const idWithFallback = useId(id);
+
+    const inputValue = useInternalValue(value, {
+      onChange: (newValue) => {
+        emit('input', newValue);
+      },
+    });
+
+    const input: Ref<HTMLInputElement | null> = ref(null);
+    const {
+      message: validationMessage,
+      valid: isValidationValid,
+      listeners: validationListeners,
+      startValidating,
+    } = useValidations({
+      id: idWithFallback,
+      value: inputValue,
+      rules,
+      required,
+      validateOn: computed(() => (props.validateOnBlur ? 'blur' : 'input')),
+      field: input,
+    });
+
+    const prefixSlotHasContent = useSlotHasContent('prepend-inner');
+    const suffixSlotHasContent = useSlotHasContent('append');
+    const messageSlotHasContent = useSlotHasContent('message');
+
+    const toggleHidden = (): void => {
+      inputHidden.value = !inputHidden.value;
+      emit('click:hide', inputHidden.value);
+    };
+
+    const onInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+      if (target.value !== inputValue.value) {
+        inputValue.value = target.value;
+        validationListeners.input(event);
+      }
+    };
+
+    const onChange = (event: Event): void => {
+      validationListeners.change(event);
+      const target = event.target as HTMLInputElement;
+      emit('change', target.value);
+    };
+
+    const onFocus = (event: Event): void => {
+      isFocused.value = true;
+      emit('focus', event);
+    };
+
+    const onBlur = (event: Event): void => {
+      isFocused.value = false;
+      validationListeners.blur(event);
+      emit('blur', event);
+    };
+
+    const clearInput = (): void => {
+      emit('input', '');
+    };
+
+    const focus = (): void => {
+      input.value?.focus();
+    };
+
+    const blur = (): void => {
+      input.value?.blur();
+    };
+
+    onMounted(() => {
+      if (!props.label && !slots.label && !props.ariaLabel) {
+        console.error(
+          'Missing CTextField label. Please provide a label prop, an ariaLabel prop or pass a label via the label slot.'
+        );
+      }
+    });
+
+    const exposedAPI: CTextFieldExposed = { input, focus, blur, startValidating };
+    expose(exposedAPI);
+
+    const fallthroughAttrs = computed(() => {
+      const { class: _, style: __, ...rest } = attrs;
+      return rest;
+    });
+
+    // Need to compute these to cast the type to avoid type errors
+    const rootStyles = computed(() => attrs.style as StyleValue);
+
+    return {
+      faXmark,
+      faEye,
+      faEyeSlash,
+
+      fallthroughAttrs,
+      hideToggleAriaLabel,
+      idWithFallback,
+      input,
+      inputHidden,
+      inputType,
+      inputValue,
+      isFocused,
+      messageSlotHasContent,
+      prefixSlotHasContent,
+      rootStyles,
+      suffixSlotHasContent,
+      isValidationValid,
+      validationMessage,
+
+      clearInput,
+      onBlur,
+      onChange,
+      onFocus,
+      onInput,
+      toggleHidden,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
+@import '@propelinc/citrus-ui/src/styles/form-fields';
+
+.c-text-field__label {
+  @include body-emphasized;
+
+  display: inline-block;
+  margin-bottom: 8px;
+  transition: color $citrus-field-transition-duration ease;
+}
+
+.c-text-field__container {
+  align-items: center;
+  background-color: $color-background;
+  border: $border-width solid $color-gray-200;
+  border-radius: $border-radius-next;
+  display: flex;
+  transition: border-color $citrus-field-transition-duration ease;
+}
+
+.c-text-field--focused .c-text-field__container,
+.c-text-field--invalid .c-text-field__container {
+  border-color: $color-black;
+}
+
+.c-text-field--invalid .c-text-field__container {
+  color: $color-status-error;
+}
+
+.c-text-field--hide-label .c-text-field__label {
+  @include sr-only;
+}
+
+.c-text-field--disabled .c-text-field__label {
+  color: $color-text-disabled;
+}
+
+.c-text-field--disabled .c-text-field__container {
+  background-color: $color-gray-100;
+  color: $color-text-disabled;
+}
+
+.c-text-field__input {
+  background-color: transparent;
+  border: none;
+  border-radius: $border-radius-next;
+  flex: 1 1 0%;
+  outline: none;
+  width: 100%;
+
+  &--has-prefix {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
   }
 
-  get _type(): string {
-    return this.hideInput && this.hideable ? 'password' : this.type;
+  &--has-suffix {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
   }
+}
+
+.c-text-field__suffix-btn {
+  margin-right: 4px;
+}
+
+.c-text-field__clear-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  margin-left: 0.5rem;
+}
 
-  toggleHideInput(): void {
-    if (!this.hideable) {
-      return;
-    }
+/* Size Variants */
+.c-text-field--medium .c-text-field__input {
+  padding: 12px 16px;
 
-    this.hideInput = !this.hideInput;
-    this.$emit('click:hide', this.hideInput);
+  &--clearable,
+  &--hideable {
+    padding-right: 0;
   }
 
-  focus(): void {
-    (this.$refs.input as VTextField).focus();
+  &--has-suffix {
+    padding-right: 8px;
   }
 }
-</script>
 
-<style lang="scss" scoped>
-@import '~@/styles/form-fields.scss';
+.c-text-field--large .c-text-field__input {
+  padding: 24px;
+
+  &--clearable,
+  &--hideable {
+    padding-right: 0;
+  }
 
-.text-field__field {
-  @include form-field;
+  &--has-suffix {
+    padding-right: 8px;
+  }
+}
+
+.c-text-field__prefix {
+  flex: 0 0 auto;
+  margin-left: 16px;
+}
+
+.c-text-field__suffix {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 12px;
+  margin-right: 16px;
+}
+
+.c-text-field__validation-message {
+  margin-top: 4px;
 }
 
-.text-field__field--disabled {
-  @include form-field-disabled;
+.c-text-field__message {
+  @include caption;
+
+  color: $color-gray-500;
+  margin-bottom: 16px;
 }
 </style>

package/src/components/CTextLink.vue

@@ -1,53 +1,63 @@
 <template>
-  <component
-    :is="component"
-    :to="to"
-    :href="href"
+  <a
+    v-bind="$attrs"
     :target="target"
-    :tabindex="isRoleButton ? 0 : null"
-    :role="isRoleButton ? 'button' : null"
-    class="text-link"
-    :class="{ 'text-link--light': light }"
-    v-on="$listeners"
+    :href="routerDestinationOrHref"
+    :tabindex="isRoleButton ? 0 : undefined"
+    :role="isRoleButton ? 'button' : undefined"
+    class="c-text-link"
+    :class="{ 'c-text-link--underline': underline }"
+    @click="navigate"
   >
     <slot />
-  </component>
+  </a>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { RawLocation } from 'vue-router';
-
-@Component({ name: 'CTextLink' })
-export default class CTextLink extends Vue {
-  @Prop([String, Object]) to?: RawLocation;
-  @Prop(String) href?: string;
-  @Prop(String) target?: string;
-  @Prop({ type: Boolean, default: false }) light!: boolean;
-
-  get component(): string {
-    if (this.to) {
-      return 'router-link';
-    } else {
-      return 'a';
-    }
-  }
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
-  get isRoleButton(): boolean {
-    return !this.to && !this.href;
-  }
-}
+import { useRouterLink } from '@propelinc/citrus-ui/src/composables/router';
+
+export default defineComponent({
+  props: {
+    /** Controls whether the text link functions as a router-link */
+    to: { type: [String, Object] as PropType<RouteLocationRaw>, default: undefined },
+    /** Designates the text link as an anchor and applies the href attribute */
+    href: { type: String, default: undefined },
+    /** Designates the target attribute. Only use with the href prop. */
+    target: { type: String, default: undefined },
+    /** Toggles whether the link should have an underline */
+    underline: { type: Boolean, default: true },
+  },
+  setup(props) {
+    const to = computed(() => props.to);
+    const { href: routerDestination, navigate } = useRouterLink(to);
+    const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
+
+    const isRoleButton = computed(() => {
+      return !props.to && !props.href;
+    });
+
+    return {
+      isRoleButton,
+      navigate,
+      routerDestinationOrHref,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
 
-.text-link {
-  font-weight: $font-weight-bold;
-  text-decoration: none;
-}
+.c-text-link {
+  color: $color-black;
+  font-weight: $font-weight-semibold;
 
-.text-link--light {
-  color: $color-white;
+  &--underline {
+    @include link-underline;
+  }
 }
 </style>