@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CThirdPartyLogo.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="c-third-party-logo" :style="{ '--size': SIZE_TO_VALUE[size] }">
+    <img
+      v-if="imageState === 'loaded' || imageState === 'loading'"
+      class="c-third-party-logo__img transition-opacity"
+      :class="{ 'opacity-0': imageState === 'loading' }"
+      :src="src"
+      :alt="alt"
+      @error="handleImageError"
+      @load="handleImageLoad"
+    />
+    <c-squared-icon
+      class="transition-opacity"
+      :class="{ 'opacity-0': imageState === 'loaded' }"
+      :icon="icon"
+      :color="color"
+      :large="size === 'large'"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent, ref } from 'vue';
+
+import CSquaredIcon from '@propelinc/citrus-ui/src/components/CSquaredIcon.vue';
+
+type Size = 'medium' | 'large';
+
+type ImageState = 'loading' | 'loaded' | 'failed';
+
+const SIZES = new Set<Size>(['medium', 'large']);
+
+const SIZE_TO_VALUE: Record<Size, `${number}px`> = {
+  medium: '40px',
+  large: '56px',
+};
+
+/**
+ * A component that displays a third party logo with a fallback icon.
+ *
+ * The fallback icon is displayed while the image is loading or if the image fails to load.
+ *
+ * The image is rendered, but hidden, while loading, and displayed when loaded.
+ */
+export default defineComponent({
+  name: 'CThirdPartyLogo',
+  components: {
+    CSquaredIcon,
+  },
+  props: {
+    /**
+     * The alt text for the logo.
+     */
+    alt: { type: String, required: true },
+    /**
+     * The color of the fallback icon logo
+     */
+    color: CSquaredIcon.props.color,
+    /**
+     * The Font Awesome icon to display as a fallback
+     */
+    icon: CSquaredIcon.props.icon,
+    /**
+     * The size of the logo. Defaults to `medium`.
+     */
+    size: {
+      type: String as PropType<Size>,
+      required: false,
+      default: 'medium',
+      validator: (value: string) => SIZES.has(value as Size),
+    },
+    /**
+     * The URL of the logo image
+     */
+    src: { type: String, required: false, default: '' },
+  },
+  setup() {
+    const imageState = ref<ImageState>('loading');
+
+    const handleImageError = (): void => {
+      imageState.value = 'failed';
+    };
+
+    const handleImageLoad = (): void => {
+      imageState.value = 'loaded';
+    };
+
+    return {
+      handleImageError,
+      handleImageLoad,
+      imageState,
+      SIZE_TO_VALUE,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.c-third-party-logo {
+  border-radius: 8px;
+  height: var(--size);
+  isolation: isolate;
+  object-fit: contain;
+  overflow: hidden;
+  position: relative;
+  width: var(--size);
+}
+
+.c-third-party-logo__img {
+  display: block;
+  height: 100%;
+  left: 0;
+  object-fit: contain;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.transition-opacity {
+  transition: opacity 0.1s ease-in-out;
+}
+</style>

package/src/components/CTimeago.vue

@@ -0,0 +1,63 @@
+<template>
+  <time v-bind="$attrs" :datetime="isoString">{{ timeago }}</time>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    datetime: string | number | Date;
+    converter: (datetime: string | number | Date, locale: string, count?: number) => string;
+    locale?: string;
+    autoUpdate?: number | false;
+  }>(),
+  {
+    locale: 'en',
+    autoUpdate: 60,
+  }
+);
+
+// NOTE(ram): Used to trigger reactivity in the computed property for auto updates.
+const counter = ref(0);
+let timer: number | null = null;
+
+const isoString = computed((): string => new Date(props.datetime).toISOString());
+const timeago = computed((): string =>
+  props.converter(props.datetime, props.locale, counter.value)
+);
+
+const startAutoUpdate = (): void => {
+  if (props.autoUpdate) {
+    // TODO(ram): This is a workaround to make sure the timer is of type number.
+    // The type of setInterval is NodeJS.Timeout in Node.js and number in the browser.
+    // This is causing issues in apps/healthcare-app.
+    timer = setInterval(() => counter.value++, props.autoUpdate * 1000) as unknown as number;
+  }
+};
+
+const stopAutoUpdate = (): void => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+watch(
+  () => props.autoUpdate,
+  (value: number | false) => {
+    stopAutoUpdate();
+    if (value) {
+      startAutoUpdate();
+    }
+  }
+);
+
+onMounted(() => {
+  startAutoUpdate();
+});
+
+onBeforeUnmount(() => {
+  stopAutoUpdate();
+});
+</script>

package/src/components/CToast.vue

@@ -0,0 +1,259 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
+<template>
+  <sl-alert
+    ref="alert"
+    class="c-toast"
+    :data-test="dataTest"
+    :data-open="isOpen || undefined"
+    :data-variant="computedVariant"
+    :class="`c-toast--${computedVariant}`"
+    :duration="duration"
+    :style="{ '--toast-base-transform': transform }"
+    @sl-hide="onHide"
+    @sl-after-hide="resetAnimation"
+  >
+    <div class="flex-grow-1 d-flex flex-row align-center gap-4">
+      <slot name="icon">
+        <FontAwesomeIcon data-test="toast-icon" fixed-width class="c-toast__icon" :icon="icon" />
+      </slot>
+
+      <div class="c-toast__message flex-grow-1" data-test="toast-message">
+        <slot>{{ message }}</slot>
+      </div>
+    </div>
+
+    <CIconButton
+      data-test="toast-dismiss"
+      variant="tertiary"
+      :aria-label="$t('Close')"
+      :icon="faXmark"
+      @click="close"
+    />
+  </sl-alert>
+</template>
+
+<script lang="ts">
+import {
+  faCircleCheck,
+  faCircleExclamation,
+  faInfoCircle,
+  faXmark,
+} from '@fortawesome/pro-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import type SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import type { ElementAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry';
+import type { PropType } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, ref, watchEffect } from 'vue';
+
+import CIconButton from '@propelinc/citrus-ui/src/components/CIconButton.vue';
+import { useShoelaceAnimation } from '@propelinc/citrus-ui/src/composables/animation';
+import { useShoelaceShadowParts } from '@propelinc/citrus-ui/src/composables/elements';
+import { useDragListener } from '@propelinc/citrus-ui/src/composables/gestures';
+import { slideLeft, slideRight } from '@propelinc/citrus-ui/src/services/animation';
+import type { ToastVariant } from '@propelinc/citrus-ui/src/types';
+
+/** Default duration for the toast to be visible. */
+const DEFAULT_DURATION = 5000;
+/** The minimum distance, in pixels, the user has to drag left or right for
+ * it to be considered a successful swipe. */
+const MIN_SWIPE_DISTANCE = 150;
+/** The minimum speed, in pixels per millisecond, the user has to swipe for
+ * it to be considered a successful swipe. */
+const MIN_SWIPE_VELOCITY = 0.75;
+
+export default defineComponent({
+  name: 'CToast',
+  components: { FontAwesomeIcon, CIconButton },
+  props: {
+    /** Show/hides the toast */
+    value: { type: Boolean, default: false },
+    /** The message rendered in the toast, using the default slot overrides this value */
+    message: { type: String, default: '' },
+    /**
+     * @deprecated use `variant` prop instead
+     * Renders the error state
+     */
+    error: { type: Boolean, default: false, deprecated: true },
+    /**
+     * @deprecated use `variant` prop instead
+     * Renders the success state
+     */
+    success: { type: Boolean, default: false, deprecated: true },
+    /**
+     * @deprecated use `variant` prop instead
+     * Renders the warning state
+     */
+    warning: { type: Boolean, default: false, deprecated: true },
+    /** The variant of the toast */
+    variant: { type: String as PropType<ToastVariant>, default: 'info' },
+    /** Controls (overrides) whether the toast is dismissible. */
+    dismissible: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+    /** The data-test attribute for the toast. */
+    dataTest: { type: String, default: 'toast' },
+  },
+  emits: ['hide', 'input'],
+  setup(props, { emit }) {
+    const alert = ref<SlAlert | null>(null);
+    const isOpen = ref(props.value);
+
+    /**
+     * Handle merging the deprecated `error`, `success`, and `warning` props
+     * with the `variant` prop.
+     */
+    const computedVariant = computed(() => {
+      if (props.error) {
+        return 'error';
+      } else if (props.success) {
+        return 'success';
+      } else if (props.warning) {
+        return 'warning';
+      }
+      return props.variant;
+    });
+
+    const show = async (): Promise<void> => {
+      isOpen.value = true;
+      alert.value?.toast();
+    };
+
+    const onHide = (): void => {
+      isOpen.value = false;
+      emit('input', false);
+      emit('hide');
+    };
+
+    const close = async (): Promise<void> => {
+      alert.value?.hide();
+    };
+
+    // If our value changes, show or hide the toast respectively
+    watchEffect(() => (props.value ? show() : close()));
+
+    // Close the toast when the component is unmounted
+    onBeforeUnmount(() => close());
+
+    const shouldAutoDismiss = computed(() => {
+      if (props.dismissible !== undefined) {
+        return !props.dismissible;
+      }
+      return computedVariant.value === 'success';
+    });
+
+    const duration = computed(() => {
+      return shouldAutoDismiss.value ? DEFAULT_DURATION : Infinity;
+    });
+
+    const icon = computed(() => {
+      if (computedVariant.value === 'error') {
+        return faCircleExclamation;
+      } else if (computedVariant.value === 'success') {
+        return faCircleCheck;
+      } else {
+        return faInfoCircle;
+      }
+    });
+
+    const alertHideAnimation = ref<ElementAnimation | 'default'>('default');
+    useShoelaceAnimation(alert, 'alert.hide', alertHideAnimation);
+
+    const resetAnimation = (): void => {
+      alertHideAnimation.value = 'default';
+    };
+
+    const { base } = useShoelaceShadowParts(alert, ['base']);
+    const { dragDistance } = useDragListener(base, {
+      onDragEnd: async ({ distance, velocity }) => {
+        const absoluteDistance = Math.abs(distance.x);
+        const absoluteVelocity = Math.abs(velocity.x);
+        const shouldDismiss =
+          absoluteDistance > MIN_SWIPE_DISTANCE || absoluteVelocity > MIN_SWIPE_VELOCITY;
+        const dismissStart = absoluteDistance / base.value!.clientWidth;
+        if (shouldDismiss) {
+          const remainingDismissDistance = Math.max(base.value!.clientWidth - absoluteDistance, 0);
+          const dismissDuration =
+            remainingDismissDistance / Math.max(absoluteVelocity, MIN_SWIPE_VELOCITY);
+          const slideDirection = velocity.x > 0 ? slideRight : slideLeft;
+          alertHideAnimation.value = slideDirection({
+            start: dismissStart,
+            duration: dismissDuration,
+            end: 1.1,
+          });
+          close();
+        } else {
+          const slideDirection = velocity.x > 0 ? slideRight : slideLeft;
+          const slideBack = slideDirection({ start: dismissStart, end: 0 });
+          base.value?.animate(slideBack.keyframes, slideBack.options);
+        }
+      },
+    });
+
+    const transform = computed(() => {
+      return `translateX(${dragDistance.value?.x ?? 0}px)`;
+    });
+
+    return {
+      duration,
+      alert,
+      icon,
+      faXmark,
+      isOpen,
+      computedVariant,
+      close,
+      onHide,
+      transform,
+      resetAnimation,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-toast {
+  margin: 16px;
+
+  &::part(base) {
+    background-color: $color-blue-200;
+    border: none;
+    border-radius: $border-radius-next;
+    box-shadow: $box-shadow-toast;
+    color: $color-black;
+    transform: var(--toast-base-transform);
+  }
+
+  &::part(message) {
+    @include body;
+
+    align-items: center;
+    display: flex;
+    padding: 16px 0 16px 16px;
+  }
+
+  &::part(icon) {
+    padding-left: 12px;
+  }
+}
+
+.c-toast--error::part(base) {
+  background-color: $color-red-200;
+}
+
+.c-toast--success::part(base) {
+  background-color: $color-green-200;
+}
+
+.c-toast--warning::part(base) {
+  background-color: $color-gold-200;
+}
+
+.c-toast__message {
+  flex: auto;
+}
+
+.c-toast__icon {
+  color: $color-black;
+  font-size: $font-size-icon-medium;
+}
+</style>

package/src/components/CToastsList.vue

@@ -0,0 +1,32 @@
+<template>
+  <CToast
+    v-for="toast in toasts"
+    :key="toast.id"
+    :value="true"
+    :data-test="toast.dataTest || 'c-toast'"
+    :message="toast.message"
+    :variant="toast.variant"
+    @hide="dismissToast(toast.id)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import CToast from '@propelinc/citrus-ui/src/components/CToast.vue';
+
+import { useToast } from '../composables/toast';
+
+export default defineComponent({
+  name: 'CToastsList',
+  components: { CToast },
+  setup() {
+    const { toasts, dismissToast } = useToast();
+
+    return {
+      toasts,
+      dismissToast,
+    };
+  },
+});
+</script>

package/src/components/CValidationMessage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-if="!isHidden"
+    :data-test="dataTest"
+    class="c-validation-message"
+    :class="{ 'c-validation-message--invalid': !!validationMessage }"
+  >
+    <CFadeTransition aria-live="polite">
+      <span v-if="validationMessage" key="message" role="alert" :data-test="`${dataTest}-text`">
+        {{ validationMessage }}
+      </span>
+      <!-- NOTE(mohan): Always keep an empty span to make sure the flex layout is stable. -->
+      <span v-else key="empty">
+        <slot />
+      </span>
+    </CFadeTransition>
+
+    <slot name="append" />
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
+
+import CFadeTransition from '@propelinc/citrus-ui/src/components/CFadeTransition.vue';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+
+export default defineComponent({
+  name: 'CValidationMessage',
+  components: { CFadeTransition },
+  props: {
+    /** Test selector for the component */
+    dataTest: { type: String, default: 'validation-message' },
+    /** Validation message to display */
+    validationMessage: { type: String as PropType<string | null>, default: null },
+    /** Whether to hide the component. If "auto", the component will automatically
+     * hide itself if it has no content. */
+    hide: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
+  },
+  setup(props) {
+    const appendSlotHasContent = useSlotHasContent('append');
+    const isHidden = computed(() => {
+      if (props.hide === 'auto') {
+        return !props.validationMessage && !appendSlotHasContent.value;
+      } else {
+        return props.hide;
+      }
+    });
+
+    return { isHidden };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-validation-message {
+  @include caption;
+
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.c-validation-message--invalid {
+  color: $color-status-error;
+}
+</style>

package/src/components/CZipcodeField.vue

@@ -0,0 +1,69 @@
+<template>
+  <CMaskedTextField
+    v-bind="$attrs"
+    :id="id"
+    ref="field"
+    :data-test="dataTest"
+    :value="value"
+    name="zip"
+    :label="label || $t('ZIP Code')"
+    mask="#####"
+    :placeholder="placeholder || '12345'"
+    :minlength="5"
+    :maxlength="5"
+    type="tel"
+    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>
+  </CMaskedTextField>
+</template>
+
+<script lang="ts">
+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: 'CZipcodeField',
+  components: { CMaskedTextField },
+  props: {
+    dataTest: { type: String, default: 'zipcode-field' },
+    id: { type: String, default: undefined },
+    label: { type: String as PropType<string | null>, default: null },
+    placeholder: { type: String as PropType<string | null>, default: null },
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    value: { type: String, default: '' },
+  },
+  emits: ['input', 'focus', 'blur', 'change'],
+  setup(props, { expose }) {
+    const { t } = useTranslation();
+
+    const defaultRules = [
+      minLengthRule(5, t('Please enter a valid {inputLabel}', { inputLabel: t('ZIP Code') })),
+    ];
+    const computedRules = computed(() => [...defaultRules, ...props.rules]);
+
+    const { field } = useFocusableField(expose);
+
+    return {
+      computedRules,
+      field,
+    };
+  },
+});
+</script>