@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CCardHeader.vue

@@ -1,43 +1,52 @@
 <template>
-  <v-card-title class="card__header">
-    <div class="card__header__title-container">
-      <span data-test="card-title" class="card__header__title">
-        <slot />
-      </span>
+  <div v-bind="$attrs" class="c-card-header" data-test="card-header">
+    <div data-test="card-title" class="c-card-header__title">
+      <slot />
     </div>
 
-    <div class="card__header__append">
+    <div class="c-card-header__append">
       <slot name="append" />
     </div>
-  </v-card-title>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { defineComponent, provide, ref } from 'vue';
 
-@Component({ name: 'CCardHeader' })
-export default class CCardHeader extends Vue {}
+import { TERTIARY as TERTIARY_ICON_BUTTON } from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
+
+export default defineComponent({
+  setup() {
+    provide(TERTIARY_ICON_BUTTON, ref(true));
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-card-header {
+  @include subheadline;
 
-.card__header {
-  align-items: flex-start;
   display: flex;
-  flex-wrap: nowrap;
 }
 
-.card__header__title-container {
+.c-card-header__title {
   flex: 1 1 auto;
+  padding: 16px 16px 8px;
 }
 
-.card__header__title {
-  vertical-align: -4px;
-}
-
-.card__header__append:not(:empty) {
+.c-card-header__append {
+  align-items: center;
+  display: flex;
   flex: none;
-  margin: -6px -12px -8px $card-h-spacing;
+
+  .c-icon-button {
+    margin-right: 8px;
+  }
+
+  .c-badge {
+    margin-right: 8px;
+  }
 }
 </style>

package/src/components/CCardSection.vue

@@ -1,26 +1,37 @@
 <template>
-  <v-card-text
+  <div
+    v-bind="$attrs"
     data-test="card-section"
-    class="card__section"
-    :class="{ 'card__section--fluid': fluid }"
+    class="c-card-section"
+    :class="{ 'c-card-section--fluid': fluid }"
   >
     <slot />
-  </v-card-text>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { defineComponent } from 'vue';
 
-@Component({ name: 'CCardSection' })
-export default class CCardSection extends Vue {
-  @Prop({ type: Boolean, default: false }) fluid!: boolean;
-}
+export default defineComponent({
+  props: {
+    /** Removes the padding from the section */
+    fluid: { type: Boolean, default: false },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-card-section {
+  padding: 0 16px 16px;
+
+  &:first-child:not(.c-card-section--fluid) {
+    padding-top: 16px;
+  }
+}
 
-.card__section--fluid {
-  padding: 0 !important;
+.c-card-section--fluid {
+  padding: 0;
 }
 </style>

package/src/components/CCheckbox.vue

@@ -1,27 +1,197 @@
 <template>
-  <v-checkbox
-    v-bind="$attrs"
-    :input-value="value"
-    data-test="checkbox"
-    on-icon="$citrusCheckboxOn"
-    off-icon="$citrusCheckboxOff"
-    :ripple="false"
-    :rules="rules"
-    :hide-details="rules.length === 0"
-    v-on="$listeners"
-  >
-    <template #label>
-      <slot name="label" />
-    </template>
-  </v-checkbox>
+  <div class="c-checkbox__container">
+    <label
+      class="c-checkbox"
+      :class="{
+        'c-checkbox--checked': internalValue,
+        'c-checkbox--invalid': !isValidationValid,
+        'c-checkbox--contained': variant === 'contained',
+      }"
+      :data-test="dataTest"
+    >
+      <input
+        :id="idWithFallback"
+        type="checkbox"
+        :data-test="`${dataTest}-input`"
+        class="c-checkbox__input"
+        :aria-checked="internalValue"
+        :aria-describedby="`${idWithFallback}-message`"
+        :aria-invalid="!isValidationValid"
+        :checked="internalValue || undefined"
+        @change="onChange"
+        @blur="$emit('blur')"
+        @focus="$emit('focus')"
+        v-on="validationListeners"
+      />
+      <span class="c-checkbox__control" :data-test="`${dataTest}-control`">
+        <FontAwesomeIcon v-if="internalValue" :icon="faCheck" />
+      </span>
+      <slot name="label">{{ label }}</slot>
+    </label>
+
+    <CValidationMessage
+      class="c-checkbox__message"
+      :data-test="`${dataTest}-message`"
+      :validation-message="validationMessage"
+      :hide="hideDetails"
+    >
+      <slot name="message" />
+    </CValidationMessage>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { faCheck } from '@fortawesome/pro-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { PropType } from 'vue';
+import { defineComponent, ref, toRefs } from 'vue';
 
-@Component({ name: 'CCheckbox' })
-export default class CCheckbox extends Vue {
-  @Prop({ type: Boolean, default: false }) value!: boolean;
-  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
-}
+import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
+import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
+import { useId } from '@propelinc/citrus-ui/src/composables/id';
+import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
+
+export default defineComponent({
+  name: 'CCheckbox',
+  components: { FontAwesomeIcon, CValidationMessage },
+  props: {
+    /** Assigns the checkbox's id */
+    id: { type: String as PropType<string | null>, default: null },
+    /** The label text for the checkbox. */
+    label: { type: String, default: undefined },
+    /** Whether the checkbox is checked */
+    value: { type: Boolean, default: false },
+    /** A custom data-test selector */
+    dataTest: { type: String, default: 'checkbox' },
+    /**
+     * An array of functions that either return either true / false or a string
+     * containing an error message. The component passes the input value as an
+     * argument. The input field will enter an error state if a function does
+     * not return true.
+     * */
+    rules: {
+      type: Array as PropType<((value: boolean) => string | boolean)[]>,
+      default: () => [],
+    },
+    /** Hides the validation message area. */
+    hideDetails: {
+      type: [Boolean, String] as PropType<boolean | 'auto'>,
+      default: false,
+    },
+    /** Controls the appearance of the checkbox. */
+    variant: {
+      type: String as PropType<'contained' | 'minimal'>,
+      default: 'contained',
+    },
+  },
+  emits: ['change', 'focus', 'blur'],
+  setup(props, { emit }) {
+    const { value, rules, id } = toRefs(props);
+    const idWithFallback = useId(id);
+
+    const internalValue = useInternalValue(value, {
+      onChange: (value) => emit('change', value),
+    });
+
+    const checkbox = ref<HTMLInputElement | null>(null);
+
+    const {
+      message: validationMessage,
+      valid: isValidationValid,
+      listeners: validationListeners,
+    } = useValidations({
+      id: idWithFallback,
+      value: internalValue,
+      rules,
+      validateOn: 'change',
+      field: checkbox,
+    });
+
+    const onChange = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+      internalValue.value = !!target.checked;
+    };
+
+    return {
+      checkbox,
+      faCheck,
+      idWithFallback,
+      internalValue,
+      onChange,
+      validationMessage,
+      isValidationValid,
+      validationListeners,
+    };
+  },
+});
 </script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/form-fields';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
+
+.c-checkbox {
+  align-items: flex-start;
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  transition: border-color $citrus-field-transition-duration ease;
+
+  --padding: 12px;
+
+  &--contained {
+    background-color: $color-background;
+    border: $border;
+    border-radius: $border-radius-next;
+    padding: var(--padding);
+    width: 100%;
+
+    &.c-checkbox--checked {
+      border-color: $color-black;
+      border-width: $border-width;
+    }
+
+    &.c-checkbox--invalid {
+      border-color: $color-status-error;
+    }
+  }
+
+  &--invalid {
+    color: $color-status-error;
+  }
+}
+
+.c-checkbox__input {
+  @include sr-only;
+}
+
+.c-checkbox__control {
+  align-items: center;
+  border: $color-gray-300 solid $border-width;
+  border-radius: 4px;
+  color: $color-white;
+  display: flex;
+  flex-shrink: 0;
+  height: 22px;
+  justify-content: center;
+  width: 22px;
+
+  .c-checkbox--checked & {
+    background-color: $color-black;
+    border-color: $color-black;
+  }
+
+  .c-checkbox--invalid & {
+    border-color: $color-status-error;
+  }
+}
+
+.c-checkbox__input:focus-visible ~ .c-checkbox__control {
+  @include focus-ring;
+}
+
+.c-checkbox__message {
+  margin-top: 4px;
+}
+</style>

package/src/components/CCol.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="c-col" :class="{ [`c-col-${cols}`]: cols }">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    /** Sets the default number of columns the component extends.
+     * Available options are: 1 -> 12 and auto. */
+    cols: {
+      type: String,
+      default: null,
+      validator: (value: string) => {
+        if (value === 'auto' || !value) {
+          return true;
+        }
+
+        return Array.from(Array(12))
+          .map((_, i) => `${i + 1}`)
+          .includes(value);
+      },
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.c-col {
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+
+  &:not(.c-col-auto) {
+    padding: 12px;
+    width: 100%;
+  }
+}
+
+.c-col-auto {
+  flex: 0 0 auto;
+  max-width: 100%;
+  width: auto;
+}
+
+@for $i from 1 through 12 {
+  .c-col-#{$i} {
+    flex: 0 0 calc(#{$i} / 12 * 100%);
+    max-width: calc(#{$i} / 12 * 100%);
+  }
+}
+</style>

package/src/components/CDivider.vue

@@ -0,0 +1,46 @@
+<template>
+  <hr
+    class="c-divider"
+    :class="{ 'c-divider--vertical': vertical }"
+    :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    /** Displays dividers vertically. */
+    vertical: { type: Boolean, default: false },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-divider {
+  border: solid $color-gray-200;
+  border-width: thin 0 0;
+  display: block;
+  flex: 1 1 0px;
+  height: 0;
+  max-height: 0;
+  max-width: 100%;
+  transition: inherit;
+}
+
+.c-divider--vertical {
+  align-self: stretch;
+  border-width: 0 thin 0 0;
+  display: inline-flex;
+  height: inherit;
+  margin: 0 -1px;
+  max-height: 100%;
+  max-width: 0;
+  min-height: 100%;
+  vertical-align: text-bottom;
+  width: 0;
+}
+</style>

package/src/components/CDobField.vue

@@ -0,0 +1,153 @@
+<template>
+  <CMaskedTextField
+    v-bind="$attrs"
+    :id="id"
+    :data-test="dataTest"
+    :value="formattedDate"
+    inputmode="numeric"
+    name="dob"
+    :label="computedLabel"
+    :placeholder="computedPlaceholder"
+    :mask="mask"
+    :minlength="dateLength"
+    :maxlength="dateLength"
+    :unmask-rules="false"
+    :rules="computedRules"
+    autocorrect="off"
+    autocapitalize="none"
+    @blur="$emit('blur', $event)"
+    @focus="$emit('focus', $event)"
+    @input="emitIsoDate($event)"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #message>
+      <slot name="message" />
+    </template>
+  </CMaskedTextField>
+</template>
+
+<script lang="ts">
+import dayjs from 'dayjs';
+import { computed, defineComponent, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
+import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import {
+  isValidDateInAgeRange,
+  minLengthRule as createMinLengthRule,
+} from '@propelinc/shared-utils';
+
+export default defineComponent({
+  name: 'CDobField',
+  components: { CMaskedTextField },
+  props: {
+    /** A custom data-test attribute for the input. */
+    dataTest: { type: String, default: 'dob-field' },
+    /** A unique id for the input. */
+    id: { type: String as PropType<string | undefined>, default: undefined },
+    /** The input's label text. */
+    label: { type: String as PropType<string | null>, default: null },
+    /** The input's placeholder. */
+    placeholder: { type: String, default: '' },
+    /** Additional validation rules. */
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    /** The value of the input, must have the format YYYY-MM-DD or YYYY. */
+    value: { type: String, default: '' },
+    /** Toggles the field's year only variant. Changes default label, placeholder, mask and validation
+     * behavior */
+    yearOnly: { type: Boolean, default: false },
+  },
+  emits: ['input', 'blur', 'focus', 'change'],
+  setup(props, { emit }) {
+    const { t } = useTranslation();
+
+    const parseDate = (value: string): string => {
+      if (props.yearOnly) {
+        return value;
+      }
+
+      if (!value) {
+        return '';
+      }
+
+      const [year, month, day] = value.split('-');
+      if (!year || !month || !day) {
+        console.warn(`Invalid date format. Expected YYYY-MM-DD, received: ${value}.`);
+        return '';
+      }
+
+      return `${month}${day}${year}`;
+    };
+
+    const formattedDate = ref<string>(parseDate(props.value));
+
+    let lastEmittedValue = props.value;
+
+    watch(
+      () => props.value,
+      (newValue: string) => {
+        if (newValue !== lastEmittedValue) {
+          formattedDate.value = props.yearOnly ? newValue : parseDate(newValue);
+        }
+      }
+    );
+
+    const emitIsoDate = (value: string): void => {
+      if (props.yearOnly) {
+        emit('input', value);
+      } else {
+        const month = value.substring(0, 2);
+        const day = value.substring(2, 4);
+        const year = value.substring(4, 8);
+        lastEmittedValue = year && month && day ? `${year}-${month}-${day}` : '';
+        emit('input', lastEmittedValue);
+      }
+    };
+
+    const defaultLabel = computed(() => {
+      return props.yearOnly ? t('Year of birth') : t('Date of birth');
+    });
+
+    const defaultPlaceholder = computed(() => {
+      return props.yearOnly ? t('YYYY') : t('MM/DD/YYYY');
+    });
+
+    const validationMessage = computed(() => {
+      const inputLabel = props.yearOnly ? t('year of birth') : t('date of birth');
+      return t('Please enter a valid {inputLabel}', { inputLabel });
+    });
+
+    const defaultRules = computed(() => {
+      const minLengthRule = createMinLengthRule(props.yearOnly ? 4 : 10, validationMessage.value);
+      const maxAgeRule = (v: string): boolean | string =>
+        isValidDateInAgeRange(0, 125)(v) || validationMessage.value;
+      const validDateRule = (v: string): boolean | string =>
+        dayjs(v, 'MM/DD/YYYY', true).isValid() || validationMessage.value;
+
+      return [minLengthRule, maxAgeRule, !props.yearOnly ? validDateRule : undefined].filter(
+        Boolean
+      ) as Rules<string>;
+    });
+
+    const computedLabel = computed(() => props.label || defaultLabel.value);
+    const computedPlaceholder = computed(() => props.placeholder || defaultPlaceholder.value);
+    const computedRules = computed(() => [...defaultRules.value, ...props.rules]);
+    const dateLength = computed(() => (props.yearOnly ? 4 : 8));
+    const mask = computed(() => (props.yearOnly ? '####' : '##/##/####'));
+
+    return {
+      computedLabel,
+      computedPlaceholder,
+      computedRules,
+      emitIsoDate,
+      formattedDate,
+      dateLength,
+      mask,
+    };
+  },
+});
+</script>