@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CDobSelect.vue

@@ -0,0 +1,274 @@
+<template>
+  <div :id="id" class="c-dob-select" :data-test="dataTest">
+    <slot name="label">
+      <label
+        v-if="!hideLabel"
+        class="c-dob-select__label"
+        :for="`${id}-month`"
+        :data-test="`${dataTest}-label`"
+        >{{ computedLabel }}</label
+      >
+    </slot>
+    <div class="c-dob-select__container">
+      <c-select
+        :id="`${id}-month`"
+        class="c-dob-select__field"
+        hide-label
+        hide-details
+        :value="localMonth"
+        :data-test="`${dataTest}-month`"
+        :aria-label="$t('Month')"
+        :placeholder="$t('Month')"
+        :items="monthOptions"
+        :rules="monthRules"
+        :required="required"
+        :disabled="disabled"
+        @input="(localMonth = $event) && emitDate()"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+      />
+      <c-select
+        :id="`${id}-day`"
+        class="c-dob-select__field"
+        hide-label
+        hide-details
+        :value="localDay"
+        :aria-label="$t('Day')"
+        :placeholder="$t('Day')"
+        :data-test="`${dataTest}-day`"
+        :items="dayOptions"
+        :rules="dayRules"
+        :required="required"
+        :disabled="disabled"
+        @input="(localDay = $event) && emitDate()"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+      />
+      <c-select
+        :id="`${id}-year`"
+        class="c-dob-select__field"
+        hide-label
+        hide-details
+        :value="localYear"
+        :aria-label="$t('Year')"
+        :placeholder="$t('Year')"
+        :data-test="`${dataTest}-year`"
+        :items="yearOptions"
+        :rules="yearRules"
+        :required="required"
+        :disabled="disabled"
+        @input="(localYear = $event) && emitDate()"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+      />
+    </div>
+    <CValidationMessage
+      class="c-dob-select__messages"
+      :data-test="`${dataTest}-messages`"
+      :validation-message="message"
+      :hide="hideDetails"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import dayjs from 'dayjs';
+import { type PropType, computed, defineComponent, ref, watch } from 'vue';
+
+import CSelect from '@propelinc/citrus-ui/src/components/CSelect.vue';
+import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
+import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
+import {
+  type Rules,
+  useFormValidationSupport,
+} from '@propelinc/citrus-ui/src/composables/validations';
+
+export default defineComponent({
+  name: 'CDobSelect',
+  components: { CSelect, CValidationMessage },
+  props: {
+    dataTest: { type: String, default: 'dob-select' },
+    id: { type: String, default: undefined },
+    label: { type: String as PropType<string | null>, default: null },
+    required: { type: Boolean, default: false },
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    hideLabel: { type: Boolean, default: false },
+    hideDetails: { type: Boolean, default: false },
+    value: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ['input', 'focus', 'blur'],
+  setup(props, { emit }) {
+    const { t } = useTranslation();
+
+    const computedLabel = computed(() => props.label ?? t('Date of birth'));
+
+    const localMonth = ref('');
+    const localDay = ref('');
+    const localYear = ref('');
+
+    const hasError = ref(props.required && props.value === '');
+    const messages = ref<string[]>([]);
+
+    const localValue = computed(() => {
+      if (localDay.value && localMonth.value && localYear.value) {
+        return `${localYear.value}-${localMonth.value}-${localDay.value}`;
+      }
+      return '';
+    });
+
+    const monthRules = computed(() => {
+      if (!props.required && !localMonth.value) {
+        return [];
+      }
+      return [(): boolean => localMonth.value !== ''];
+    });
+    const dayRules = computed(() => {
+      if (!props.required && !localDay.value) {
+        return [];
+      }
+      return [(): boolean => localDay.value !== ''];
+    });
+    const yearRules = computed(() => {
+      if (!props.required && !localYear.value) {
+        return [];
+      }
+      return [(): boolean => localYear.value !== ''];
+    });
+    const message = computed(() => messages.value[0] ?? '');
+
+    const monthOptions = Array.from({ length: 12 }, (_, i) => ({
+      value: (i + 1).toString().padStart(2, '0'),
+      label: dayjs().set('month', i).format('MMM'),
+    }));
+
+    const dayOptions = computed(() => {
+      const year = Number(localYear.value) || 2000;
+      const month = Number(localMonth.value) - 1 || 0;
+      const daysInMonth = dayjs().year(year).month(month).daysInMonth();
+      return Array.from({ length: daysInMonth }, (_, i) => {
+        const day = (i + 1).toString();
+        return { value: day.padStart(2, '0'), label: day };
+      });
+    });
+
+    const currentYear = dayjs().year();
+    const yearOptions = Array.from({ length: 120 }, (_, age) => {
+      const year = (currentYear - age).toString();
+      return { value: year, label: year };
+    });
+
+    const validationMessage = t('Please enter a valid {inputLabel}', {
+      inputLabel: t('date of birth'),
+    });
+
+    const localRules = computed(() => {
+      if (!props.required && !localValue.value) {
+        return [];
+      }
+      const validDateRule = (v: string): boolean | string =>
+        dayjs(v, 'YYYY-MM-DD', true).isValid() || validationMessage;
+      return [validDateRule, ...props.rules];
+    });
+
+    const valid = computed(() => !hasError.value);
+
+    const validate = (): boolean => {
+      messages.value = localRules.value
+        .map((validation) => {
+          const validationResult = validation(localValue.value);
+          return typeof validationResult === 'string' ? validationResult : '';
+        })
+        .filter((message) => message !== '');
+
+      hasError.value = (props.required && localValue.value === '') || messages.value.length > 0;
+      return !hasError.value;
+    };
+
+    const emitDate = (): void => {
+      if (!localValue.value) {
+        return;
+      }
+
+      if (!validate()) {
+        // NOTE(ram): An invalid date can only be caused by the day being invalid.
+        localDay.value = '';
+        emit('input', '');
+        return;
+      }
+
+      emit('input', localValue.value);
+    };
+
+    watch(
+      () => props.value,
+      (value) => {
+        if (!value || value === localValue.value) {
+          return;
+        }
+
+        const date = dayjs(value, 'YYYY-MM-DD', true);
+        if (!date.isValid()) {
+          console.error('Invalid date in CDobSelect', value);
+          return;
+        }
+
+        localMonth.value = date.format('MM');
+        localDay.value = date.format('DD');
+        localYear.value = date.format('YYYY');
+      },
+      { immediate: true }
+    );
+
+    useFormValidationSupport({
+      id: props.id,
+      valid,
+      validate,
+    });
+
+    return {
+      localDay,
+      localMonth,
+      localYear,
+      dayRules,
+      monthRules,
+      yearRules,
+      dayOptions,
+      monthOptions,
+      yearOptions,
+
+      computedLabel,
+      hasError,
+      messages,
+      localValue,
+      message,
+
+      emitDate,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-dob-select__label {
+  @include body-emphasized;
+
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
+.c-dob-select__container {
+  display: flex;
+  gap: 12px;
+}
+
+.c-dob-select__field {
+  flex: auto;
+}
+
+.c-dob-select__messages {
+  margin-top: 4px;
+}
+</style>

package/src/components/CEmailField.vue

@@ -0,0 +1,61 @@
+<template>
+  <CTextField
+    v-bind="$attrs"
+    :id="id"
+    :value="value"
+    :data-test="dataTest"
+    type="email"
+    name="email"
+    :rules="[...defaultRules, ...rules]"
+    :label="label || $t('Email')"
+    :placeholder="placeholder || $t('example@email.com')"
+    @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>
+  </CTextField>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from 'vue';
+
+import CTextField from '@propelinc/citrus-ui/src/components/CTextField.vue';
+import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import { isValidEmail } from '@propelinc/shared-utils';
+
+export default defineComponent({
+  name: 'CEmailField',
+  components: { CTextField },
+  props: {
+    dataTest: { type: String, default: 'email-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() {
+    const { t } = useTranslation();
+
+    const defaultRules = [
+      (v: string): string | boolean =>
+        !v || isValidEmail(v)
+          ? true
+          : t('Please enter a valid {inputLabel}', { inputLabel: t('email') }),
+    ];
+
+    return {
+      defaultRules,
+    };
+  },
+});
+</script>

package/src/components/CExpandTransition.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    data-test="expand-transition"
+    class="c-expand-transition"
+    :class="{ 'c-expand-transition--disabled': isDisabled }"
+    :style="{ height: isDisabled ? undefined : height }"
+  >
+    <div ref="content" class="c-expand-transition__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, ref } from 'vue';
+
+import { useResizeObserver } from '@propelinc/citrus-ui/src/composables/elements';
+import { ANIMATIONS_DISABLED } from '@propelinc/citrus-ui/src/services/injections/animations';
+
+export default defineComponent({
+  name: 'CExpandTransition',
+  props: { disabled: { type: Boolean, default: false } },
+  setup(props) {
+    const injectedDisabled = inject(ANIMATIONS_DISABLED, ref(false));
+    const isDisabled = computed(() => props.disabled || injectedDisabled.value);
+    const content = ref<HTMLElement | null>(null);
+    const height = ref<string>('auto');
+
+    useResizeObserver(content, ([entry]) => {
+      height.value = `${entry.contentRect.height}px`;
+    });
+
+    return { content, height, isDisabled };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-expand-transition {
+  overflow: hidden;
+  transition: height 300ms ease;
+}
+
+.c-expand-transition__content {
+  // Create a new block formatting context that includes outer margins of children so
+  // CExpandTransition measures the height correctly.
+  overflow: hidden;
+}
+
+.c-expand-transition--disabled {
+  transition: none;
+}
+</style>

package/src/components/CFadeTransition.vue

@@ -0,0 +1,23 @@
+<template>
+  <Transition mode="out-in" name="fade">
+    <slot />
+  </Transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 300ms ease-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/CFileInput.vue

@@ -0,0 +1,186 @@
+<template>
+  <label class="c-file-input" :class="{ 'c-file-input--disabled': disabled }">
+    <p :id="`${idWithFallback}-label`" class="c-file-input__label" :data-test="`${dataTest}-label`">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </p>
+    <span :for="idWithFallback" class="c-file-input__prompt" :data-test="`${dataTest}-prompt`">
+      <slot name="prompt">
+        {{ prompt }}
+      </slot>
+    </span>
+    <input
+      :id="idWithFallback"
+      :data-test="`${dataTest}-input`"
+      class="c-file-input__input"
+      type="file"
+      :aria-describedby="`${idWithFallback}-files`"
+      :multiple="multiple"
+      :disabled="disabled"
+      :required="required"
+      @change="onFileChange"
+    />
+
+    <div v-if="hasValue" :id="`${idWithFallback}-files`" class="c-file-input__files">
+      <span v-if="!Array.isArray(inputValue) && inputValue" class="c-file-input__file">{{
+        inputValue.name
+      }}</span>
+      <template v-if="Array.isArray(inputValue)">
+        <span v-for="file in inputValue" :key="file.name" class="c-file-input__file">
+          {{ file.name }}
+        </span></template
+      >
+    </div>
+  </label>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent, toRefs } from 'vue';
+
+import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
+import { useId } from '@propelinc/citrus-ui/src/composables/id';
+
+export default defineComponent({
+  name: 'CFileInput',
+  props: {
+    /** The input's label, both visual and screenreader-only */
+    label: { type: String, required: true },
+    /** Placholder text to display before a user has selected any files */
+    prompt: { type: String, required: true },
+    /** The input's value. Either one file or an array of files */
+    value: { type: [Array, Object, null] as PropType<File[] | File | null>, default: null },
+    /** A unique id for the input */
+    id: { type: String, required: true },
+    /** Allow the user to upload multiple files */
+    multiple: { type: Boolean, default: false },
+    /** Controls whether the input is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Controls whether the input is required */
+    required: { type: Boolean, default: false },
+    /** A custom data-test string applied to the form field, text field and hide icon */
+    dataTest: { type: String, default: 'file-input' },
+  },
+  emits: ['input'],
+  setup(props, { emit }) {
+    const { id, value } = toRefs(props);
+    const idWithFallback = useId(id);
+    const inputValue = useInternalValue(value, {
+      onChange: (newValue) => {
+        emit('input', newValue);
+      },
+    });
+    const hasValue = computed(() => {
+      if (Array.isArray(inputValue.value)) {
+        return inputValue.value.length > 0;
+      }
+      return !!inputValue.value;
+    });
+
+    function onFileChange(event: Event): void {
+      const files = (event.target as HTMLInputElement).files;
+      if (!files) {
+        inputValue.value = null;
+      } else {
+        inputValue.value = props.multiple ? Array.from(files) : files[0];
+      }
+    }
+
+    return {
+      idWithFallback,
+      inputValue,
+      hasValue,
+      onFileChange,
+    };
+  },
+});
+</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/button';
+
+.c-file-input {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &:focus-within {
+    .c-file-input__prompt {
+      outline: var(--sl-focus-ring);
+      outline-offset: var(--sl-focus-ring-offset);
+    }
+  }
+}
+
+.c-file-input--disabled {
+  &:hover {
+    .c-file-input__prompt {
+      @include button-theme($color-gray-300, $color-gray-300, transparent);
+    }
+  }
+
+  .c-file-input__label {
+    color: $color-text-disabled;
+  }
+
+  .c-file-input__prompt {
+    @include button-theme($color-gray-300, $color-gray-300, transparent);
+  }
+
+  .c-file-input__input {
+    cursor: not-allowed;
+  }
+}
+
+.c-file-input__label {
+  @include body-emphasized;
+
+  margin-bottom: var(--sl-spacing-3x-small);
+}
+
+.c-file-input__prompt {
+  // NOTE(slanden): these styles are largely copied from sl-button defaults.
+  @include button-theme-secondary;
+
+  align-items: center;
+  border-radius: var(--sl-input-border-radius-medium);
+  border-style: solid;
+  border-width: $border-width;
+  display: inline-flex;
+  font-family: var(--sl-input-font-family);
+  font-weight: var(--sl-font-weight-semibold);
+  height: $button-size-medium;
+  justify-content: center;
+  padding: 0 20px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.c-file-input__input {
+  cursor: pointer;
+  height: 100%;
+  inset: 0;
+  opacity: 0;
+
+  // NOTE(slanden): Rather than using the sr-only utility, we actually want to have
+  // the file input take up the full space of the label. This allows us to support
+  // default file input behavior, like drag-and-drop upload.
+  position: absolute;
+  width: 100%;
+}
+
+.c-file-input__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-spacing-3x-small);
+  margin-top: var(--sl-spacing-2x-small);
+}
+
+.c-file-input__file {
+  @include caption;
+
+  word-break: break-word;
+}
+</style>

package/src/components/CFixedPageFooter.vue

@@ -0,0 +1,76 @@
+<template>
+  <CButtonStack
+    ref="footer"
+    data-test="fixed-page-footer"
+    :tag="tag"
+    large
+    class="c-fixed-page-footer"
+  >
+    <div class="c-fixed-page-footer__content">
+      <slot />
+    </div>
+  </CButtonStack>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeUnmount, ref } from 'vue';
+
+import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
+import { useResizeObserver } from '@propelinc/citrus-ui/src/composables/elements';
+
+export default defineComponent({
+  name: 'CFixedPageFooter',
+  components: { CButtonStack },
+  props: {
+    /** The HTML tag to render as. Avoid changing this if possible. */
+    tag: { type: String, default: 'footer' },
+  },
+  emits: ['change:height'],
+  setup(_, { emit }) {
+    const footer = ref<InstanceType<typeof CButtonStack> | null>(null);
+    const footerElement = computed(() => (footer.value?.$el as HTMLElement) ?? null);
+    useResizeObserver(footerElement, ([entry]) => emit('change:height', entry.contentRect.height));
+    onBeforeUnmount(() => emit('change:height', 0));
+
+    return { footer };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+$gradient-height: 32px;
+
+.c-fixed-page-footer {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+
+  // This places the footer above any Swiper components in the body which have z-index 1.
+  z-index: 1;
+
+  &::before {
+    // NOTE(mohan): We use rgba instead of `transparent` to avoid a bug in
+    // Safari where the gradient starts as tranparent black and fades into a
+    // gray.
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0) 0,
+      var(--fixed-page-footer-color, white) $gradient-height
+    );
+    content: '';
+    inset: -$gradient-height 0 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: -1;
+  }
+}
+
+// NOTE(mohan): ResizeObservers don't measure padding (at least not in all
+// browsers), so we have to add it to a child element.
+.c-fixed-page-footer__content {
+  padding: 0 16px max(env(safe-area-inset-bottom, 0), 8px);
+}
+</style>