@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CSkeletonLoaderCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="c-skeleton-loader-card"
+    data-test="skeleton-loader-card"
+    :style="{ height: `${height}px` }"
+  >
+    <CSkeleton />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import CSkeleton from '@propelinc/citrus-ui/src/components/CSkeleton.vue';
+
+export default defineComponent({
+  components: {
+    CSkeleton,
+  },
+  props: {
+    /** Controls the height of the skeleton loader card */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 100,
+    },
+  },
+});
+</script>

package/src/components/CSkeletonLoaderCircle.vue

@@ -1,24 +1,28 @@
 <template>
-  <div data-test="skeleton-loader-circle" class="skeleton-loader-circle" />
+  <div class="c-skeleton-loader-circle" data-test="skeleton-loader-circle">
+    <CSkeleton />
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { defineComponent } from 'vue';
 
-@Component({ name: 'CSkeletonLoaderCircle' })
-export default class CSkeletonLoaderCircle extends Vue {}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/core.scss';
+import CSkeleton from '@propelinc/citrus-ui/src/components/CSkeleton.vue';
 
-$skeleton-loader-circle-size: 36px;
+export default defineComponent({
+  components: {
+    CSkeleton,
+  },
+});
+</script>
 
-.skeleton-loader-circle {
-  @include skeleton-loader;
+<style scoped>
+.c-skeleton-loader-circle {
+  --size: 36px;
 
-  border-radius: $skeleton-loader-circle-size / 2;
-  height: $skeleton-loader-circle-size;
-  width: $skeleton-loader-circle-size;
+  border-radius: calc(var(--size) / 2);
+  height: var(--size);
+  overflow: hidden;
+  width: var(--size);
 }
 </style>

package/src/components/CSkeletonLoaderText.vue

@@ -1,38 +1,148 @@
 <template>
-  <div data-test="skeleton-loader-text" class="skeleton-loader-text">
-    <div v-for="x in rows" :key="x" class="skeleton-loader-text__line" />
+  <div
+    data-test="skeleton-loader-text"
+    class="c-skeleton-loader-text"
+    :class="{ [`align-${align}`]: align }"
+  >
+    <div
+      v-for="x in rows"
+      :key="x"
+      :class="lineTypeClass"
+      class="c-skeleton-loader-text__line"
+      data-test="skeleton-loader-text-line"
+    >
+      <CSkeleton class="c-skeleton-loader-text__line__skeleton" />
+      <!-- This invisible text ensures the line height matches the real text. -->
+      &nbsp;
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { type PropType, computed, defineComponent } from 'vue';
 
-@Component({ name: 'CSkeletonLoaderText' })
-export default class CSkeletonLoaderText extends Vue {
-  @Prop({ type: Number, default: 2 }) rows!: number;
-}
+import CSkeleton from '@propelinc/citrus-ui/src/components/CSkeleton.vue';
+
+type SkeletonLoaderType =
+  | 'balance'
+  | 'body'
+  | 'caption'
+  | 'eyebrow'
+  | 'headline'
+  | 'large-headline'
+  // @deprecated use 'eyebrow' instead
+  | 'overline'
+  | 'statement'
+  | 'subheadline'
+  | 'wallet-caption'
+  | 'x-large-headline';
+
+const LINE_TYPE_TO_CLASS: Record<SkeletonLoaderType, string> = {
+  'balance': 'c-skeleton-loader-text__line--balance',
+  'body': 'c-skeleton-loader-text__line--body',
+  'caption': 'c-skeleton-loader-text__line--caption',
+  'eyebrow': 'c-skeleton-loader-text__line--eyebrow',
+  'headline': 'c-skeleton-loader-text__line--headline',
+  'large-headline': 'c-skeleton-loader-text__line--large-headline',
+  // @deprecated use 'eyebrow' instead
+  'overline': 'c-skeleton-loader-text__line--eyebrow',
+  'statement': 'c-skeleton-loader-text__line--statement',
+  'subheadline': 'c-skeleton-loader-text__line--subheadline',
+  'wallet-caption': 'c-skeleton-loader-text__line--wallet-caption',
+  'x-large-headline': 'c-skeleton-loader-text__line--x-large-headline',
+};
+
+export default defineComponent({
+  components: {
+    CSkeleton,
+  },
+  props: {
+    /** Applies the align-items css property. */
+    align: { type: String as PropType<'center' | 'start' | 'end'>, default: 'start' },
+    /** Controls how many rows of loading text are shown */
+    rows: { type: Number, default: 2 },
+    /** Controls the appearance of the loading text */
+    type: { type: String as PropType<SkeletonLoaderType>, default: 'body' },
+  },
+  setup(props) {
+    const lineTypeClass = computed(() => {
+      return LINE_TYPE_TO_CLASS[props.type];
+    });
+
+    return { lineTypeClass };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+
+// NOTE(mohan): This ensures that the skeleton loader text is exactly the same size as the text it
+// is replacing including the extra space around the text itself added by the line height.
+@mixin skeleton-loader-text-sizing($font-style) {
+  font-size: map-get($font-style, 'size');
+  line-height: map-get($font-style, 'line-height');
 
-.skeleton-loader-text {
+  // By applying a height equal to the font size, the skeleton takes up the space of the text,
+  // leaving whitespace between each row
+  .c-skeleton-loader-text__line__skeleton {
+    height: map-get($font-style, 'size');
+  }
+}
+
+.c-skeleton-loader-text {
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
-.skeleton-loader-text__line {
-  @include skeleton-loader;
+.c-skeleton-loader-text__line {
+  @include skeleton-loader-text-sizing($body);
 
-  border-radius: 2px;
-  height: $font-size-medium;
+  align-items: center;
+  display: flex;
   width: 100%;
 
-  & + & {
-    margin-top: 4px;
-  }
-
   &:last-child {
     width: calc(100% - 32px);
   }
 }
+
+.c-skeleton-loader-text__line--balance {
+  @include skeleton-loader-text-sizing($balance);
+
+  max-width: 120px;
+}
+
+.c-skeleton-loader-text__line--caption {
+  @include skeleton-loader-text-sizing($caption);
+}
+
+.c-skeleton-loader-text__line--eyebrow {
+  @include skeleton-loader-text-sizing($eyebrow);
+}
+
+.c-skeleton-loader-text__line--headline {
+  @include skeleton-loader-text-sizing($headline);
+}
+
+.c-skeleton-loader-text__line--large-headline {
+  @include skeleton-loader-text-sizing($large-headline);
+}
+
+.c-skeleton-loader-text__line--statement {
+  @include skeleton-loader-text-sizing($statement);
+}
+
+.c-skeleton-loader-text__line--subheadline {
+  @include skeleton-loader-text-sizing($subheadline);
+}
+
+.c-skeleton-loader-text__line--wallet-caption {
+  @include skeleton-loader-text-sizing($wallet-caption);
+}
+
+.c-skeleton-loader-text__line--x-large-headline {
+  @include skeleton-loader-text-sizing($x-large-headline);
+}
 </style>

package/src/components/CSlideFadeTransition.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :class="direction" :style="{ '--slide-fade-amount': `${amount}px` }">
+    <Transition name="slide-fade" mode="out-in">
+      <slot />
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from 'vue';
+
+type Direction = 'to-left' | 'to-right' | 'to-top' | 'to-bottom';
+
+/**
+ * This component can be used to create a slide-fade transition for children.
+ *
+ * FIXME: Vue 3 Conversion - Remove this comment when Vue 3 conversion is complete.
+ * NOTE: For Vue 2 usage: if you are conditionally rendering children, be sure to add unique
+ * keys to each child!
+ *
+ * Example:
+ * ```vue
+ * <CSlideFadeTransition>
+ *   <div v-if="condition" :key="if">This will slide in</div>
+ *   <div v-else :key="else">This will slide out</div>
+ * </CSlideFadeTransition>
+ * ```
+ */
+export default defineComponent({
+  name: 'CSlideFadeTransition',
+  props: {
+    /**
+     * The amount of pixels to slide the elements in or out
+     * @default 20
+     */
+    amount: {
+      type: Number,
+      default: 20,
+      validator(value: number) {
+        return value >= 0;
+      },
+    },
+    /**
+     * Changes the direction of the slide fade transition
+     * @default 'to-left'
+     */
+    direction: {
+      type: String as PropType<Direction>,
+      default: 'to-left',
+    },
+  },
+});
+</script>
+
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+/* TODO: Can remove `*-enter` classes when we upgrade to Vue 3 */
+.slide-fade-enter,
+/* Preemptively adding Vue 3 classes */
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+}
+
+/* TODO: Can remove `*-enter` classes when we upgrade to Vue 3 */
+.to-left .slide-fade-enter,
+/* Preemptively adding Vue 3 classes */
+.to-left .slide-fade-enter-from,
+.to-left .slide-fade-leave-to {
+  transform: translateX(calc(-1 * var(--slide-fade-amount)));
+}
+
+/* TODO: Can remove `*-enter` classes when we upgrade to Vue 3 */
+.to-right .slide-fade-enter,
+/* Preemptively adding Vue 3 classes */
+.to-right .slide-fade-enter-from,
+.to-right .slide-fade-leave-to {
+  transform: translateX(var(--slide-fade-amount));
+}
+
+/* TODO: Can remove `*-enter` classes when we upgrade to Vue 3 */
+.to-top .slide-fade-enter,
+/* Preemptively adding Vue 3 classes */
+.to-top .slide-fade-enter-from,
+.to-top .slide-fade-leave-to {
+  transform: translateY(calc(-1 * var(--slide-fade-amount)));
+}
+
+/* TODO: Can remove `*-enter` classes when we upgrade to Vue 3 */
+.to-bottom .slide-fade-enter,
+/* Preemptively adding Vue 3 classes */
+.to-bottom .slide-fade-enter-from,
+.to-bottom .slide-fade-leave-to {
+  transform: translateY(var(--slide-fade-amount));
+}
+</style>

package/src/components/CSplitInput.vue

@@ -0,0 +1,111 @@
+<template>
+  <CMaskedTextField
+    v-bind="$attrs"
+    :data-test="dataTest"
+    class="c-split-input"
+    :type="type"
+    :label="label"
+    :name="name"
+    :inputmode="inputmode"
+    :value="value"
+    :rules="rules"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :autocomplete="autocomplete"
+    size="large"
+    :mask="mask"
+    @input:masked="maskedValue = $event"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #message>
+      <slot name="message" />
+    </template>
+  </CMaskedTextField>
+</template>
+
+<script lang="ts">
+import type { HTMLAttributes, PropType } from 'vue';
+import { computed, defineComponent, ref, toRefs } from 'vue';
+
+import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import type { SplitInputField } from '@propelinc/citrus-ui/src/types';
+
+export default defineComponent({
+  name: 'CSplitInput',
+  components: { CMaskedTextField },
+  props: {
+    /** Custom data-test selector */
+    dataTest: { type: String, default: 'split-input' },
+    /** The input's type, either text or tel */
+    type: { type: String as PropType<'text' | 'tel'>, default: 'text' },
+    /** The input's label */
+    label: { type: String as PropType<string | null>, default: null },
+    /** The input's name */
+    name: { type: String as PropType<string | undefined>, default: undefined },
+    /** A hint to show the appropriate virtual keyboard, e.g. "numeric". */
+    inputmode: {
+      type: String as PropType<HTMLAttributes['inputmode'] | undefined>,
+      default: undefined,
+    },
+    /** The input's value */
+    value: { type: String, default: '' },
+    /** The fields for each of the split inputs of type SplitInputField */
+    fields: {
+      type: Array as PropType<SplitInputField[]>,
+      required: true,
+    },
+    /** Validation rules */
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    /** Controls whether the input is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Controls the underlying input's autocomplete attribute */
+    autocomplete: { type: String, default: undefined },
+  },
+  setup(props) {
+    const { fields } = toRefs(props);
+
+    const maskedValue = ref('');
+
+    const placeholder = computed(() => {
+      return fields.value
+        .map((field) => `${field.placeholder ?? ''}${field.separator ?? ''}`)
+        .join('');
+    });
+
+    const mask = computed(() => {
+      return fields.value
+        .map((field) => `${Array(field.characters).fill('*').join('')}${field.separator ?? ''}`)
+        .join('');
+    });
+
+    return { placeholder, mask, maskedValue };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+@mixin split-input-text {
+  @include headline;
+
+  letter-spacing: 12px;
+  line-height: 1;
+  text-align: center;
+}
+
+.c-split-input {
+  &::part(input) {
+    @include split-input-text;
+  }
+
+  &::part(input)::placeholder {
+    @include split-input-text;
+
+    font-weight: $font-weight-normal;
+  }
+}
+</style>

package/src/components/CSquaredIcon.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    data-test="squared-icon"
+    :data-icon="icon"
+    :data-color="cssColor"
+    class="c-squared-icon"
+    :class="{ 'c-squared-icon--white-icon': useWhiteIcon, 'c-squared-icon--large': large }"
+    :style="{ backgroundColor: cssColor }"
+  >
+    <slot>
+      <FontAwesomeIcon v-if="icon" data-test="squared-icon-icon" :icon="icon" />
+    </slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { computed, defineComponent, onMounted } from 'vue';
+
+import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+import type { FaIconArray, FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
+
+export default defineComponent({
+  components: { FontAwesomeIcon },
+  props: {
+    /** The Font Awesome icon to display */
+    icon: { type: [String, Array, Object] as FaPropType, default: null },
+    /** The background color */
+    color: { type: String, default: 'gray-100' },
+    /** Makes the icon and background larger */
+    large: { type: Boolean, default: false },
+  },
+  setup(props) {
+    onMounted(() => {
+      const enableCheck = process.env.VUE_APP_DEBUG === 'yes' || process.env.NODE_ENV === 'test';
+      if (enableCheck && Array.isArray(props.icon)) {
+        const [prefix, iconName] = props.icon as FaIconArray;
+        if (prefix === 'fal') {
+          console.error(
+            `We no longer use light Font Awesome icons. Please change ['${prefix}', '${iconName}'] to ['far', '${iconName}'].`
+          );
+        }
+      }
+    });
+
+    const { cssColor } = useCssColor(() => props.color);
+
+    const useWhiteIcon = computed(() => props.color === 'black');
+
+    return { cssColor, useWhiteIcon };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+$squared-icon-size: 40px;
+$squared-icon-large-size: 56px;
+
+.c-squared-icon {
+  align-items: center;
+  border-radius: $border-radius;
+  color: $color-text-primary;
+  display: flex;
+  font-size: $font-size-icon-medium;
+  height: $squared-icon-size;
+  justify-content: center;
+  position: relative;
+  width: $squared-icon-size;
+}
+
+.c-squared-icon--white-icon {
+  color: $color-white;
+}
+
+.c-squared-icon--large {
+  border-radius: $border-radius-next;
+  font-size: $font-size-icon-large;
+  height: $squared-icon-large-size;
+  width: $squared-icon-large-size;
+}
+</style>

package/src/components/CSsnField.vue

@@ -0,0 +1,86 @@
+<template>
+  <CMaskedTextField
+    v-bind="$attrs"
+    :id="id"
+    ref="field"
+    :data-test="dataTest"
+    :value="value"
+    :label="label || defaultLabel"
+    :placeholder="fourDigitSsn ? 'XXXX' : 'XXX-XX-XXXX'"
+    inputmode="numeric"
+    :mask="fourDigitSsn ? '####' : '###-##-####'"
+    :minlength="fourDigitSsn ? 4 : 9"
+    :maxlength="fourDigitSsn ? 4 : 9"
+    :hideable="!fourDigitSsn"
+    autocorrect="off"
+    autocapitalize="none"
+    :rules="computedRules"
+    @input="$emit('input', $event)"
+    @focus="$emit('focus', $event)"
+    @blur="$emit('blur', $event)"
+    @change="$emit('change', $event)"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #message>
+      <slot name="message" />
+    </template>
+    <template #append>
+      <!-- NOTE(mohan): When requesting the full SSN, we have to leave space for
+      the hide/show icon. -->
+      <FontAwesomeIcon v-if="fourDigitSsn" :icon="faLock" fixed-width />
+    </template>
+  </CMaskedTextField>
+</template>
+
+<script lang="ts">
+import { faLock } from '@fortawesome/pro-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { type PropType, computed, defineComponent } from 'vue';
+
+import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
+import { useFocusableField } from '@propelinc/citrus-ui/src/composables/fields';
+import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import { minLengthRule } from '@propelinc/shared-utils';
+
+export default defineComponent({
+  name: 'CSsnField',
+  components: { CMaskedTextField, FontAwesomeIcon },
+  props: {
+    dataTest: { type: String, default: 'ssn-field' },
+    id: { type: String, default: undefined },
+    label: { type: String as PropType<string | null>, default: null },
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    value: { type: String, default: '' },
+    fourDigitSsn: { type: Boolean, default: false },
+  },
+  emits: ['input', 'focus', 'blur', 'change'],
+  setup(props, { expose }) {
+    const { t } = useTranslation();
+    const defaultLabel = computed(() => {
+      return props.fourDigitSsn ? t('Last 4 digits of SSN') : t('Social Security number');
+    });
+    const defaultRules = computed(() => {
+      const fourDigitRule = minLengthRule(4, t('Please enter the last four digits of your SSN'));
+      const fullSsnRule = minLengthRule(
+        9,
+        t('Please enter a valid {inputLabel}', { inputLabel: t('Social Security number') })
+      );
+      return [props.fourDigitSsn ? fourDigitRule : fullSsnRule];
+    });
+
+    const computedRules = computed(() => [...defaultRules.value, ...props.rules]);
+
+    const { field } = useFocusableField(expose);
+
+    return {
+      defaultLabel,
+      computedRules,
+      faLock,
+      field,
+    };
+  },
+});
+</script>

package/src/components/CStatusDot.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="c-status-dot"
+    :class="{
+      'c-status-dot--count': hasCount,
+      'c-status-dot--bordered': bordered,
+    }"
+    data-test="status-dot"
+    role="img"
+  >
+    {{ displayCount }}
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
+
+import { useA11yLabelCheck } from '@propelinc/citrus-ui/src/composables/accessibility';
+
+export default defineComponent({
+  props: {
+    count: { type: Number as PropType<number | null>, default: null },
+    bordered: { type: Boolean, default: false },
+  },
+  setup(props) {
+    useA11yLabelCheck('CStatusDot');
+
+    const hasCount = computed(() => props.count !== null);
+    const displayCount = computed(() => {
+      return props.count && props.count > 9 ? '9+' : props.count;
+    });
+
+    return { displayCount, hasCount };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-status-dot {
+  background-color: $color-status-error;
+  border-radius: 9999px;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+}
+
+.c-status-dot--bordered {
+  box-shadow: 0 0 0 1.5px $color-white;
+}
+
+/**
+ * For users that may increase their font size for legibility,
+ * we use rems so the circle grows if the font size increases.
+ */
+.c-status-dot--count {
+  align-items: center;
+  color: $color-white;
+  display: flex;
+  font-size: 0.625rem;
+  font-weight: $font-weight-bold;
+  height: 1rem;
+  justify-content: center;
+  line-height: 1;
+  text-align: center;
+  width: 1rem;
+}
+</style>