@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CRadioGroup.vue

@@ -0,0 +1,142 @@
+<template>
+  <fieldset
+    :id="idWithFallback"
+    ref="radioGroup"
+    :data-test="dataTest"
+    role="radiogroup"
+    class="c-radio-group"
+    :class="{
+      'c-radio-group--column': column,
+      'c-radio-group--row': !column,
+      'c-radio-group--invalid': !isValidationValid,
+    }"
+    :aria-invalid="isValidationValid ? 'false' : 'true'"
+    :aria-labelledby="`${idWithFallback}-label`"
+    :aria-errormessage="`${idWithFallback}-message`"
+  >
+    <span :id="`${idWithFallback}-label`" :data-test="`${dataTest}-label`">
+      <slot name="label">{{ label }}</slot>
+    </span>
+
+    <slot />
+
+    <CValidationMessage
+      :id="`${idWithFallback}-message`"
+      :data-test="`${dataTest}-message`"
+      :validation-message="validationMessage"
+      :hide="hideDetails"
+    >
+      <slot name="message" />
+    </CValidationMessage>
+  </fieldset>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent, provide, ref, toRefs, watch } from 'vue';
+
+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 type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
+import { RADIO_STATE } from '@propelinc/citrus-ui/src/services/injections/radio';
+
+export default defineComponent({
+  name: 'CRadioGroup',
+  components: { CValidationMessage },
+  props: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: { type: null as unknown as PropType<any>, default: null },
+    id: { type: String as PropType<string | null>, default: null },
+    dataTest: { type: String, default: 'radio-group' },
+    label: { type: String as PropType<string | null>, default: null },
+    column: { type: Boolean, default: true },
+    mandatory: { type: Boolean, default: false },
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    hideDetails: { type: Boolean as PropType<boolean | 'auto'>, default: false },
+  },
+  emits: ['change', 'input'],
+  setup(props, { emit }) {
+    const { value, rules, id, mandatory } = toRefs(props);
+    const idWithFallback = useId(id);
+    const radioGroup = ref<HTMLElement | null>(null);
+
+    const internalValue = useInternalValue(value, {
+      onChange: (newValue) => {
+        emit('change', newValue);
+        emit('input', newValue);
+      },
+    });
+
+    const {
+      startValidating,
+      message: validationMessage,
+      valid: isValidationValid,
+    } = useValidations({
+      id: idWithFallback,
+      value: internalValue,
+      rules,
+      required: mandatory,
+      validateOn: 'change',
+    });
+
+    provide(
+      RADIO_STATE,
+      computed(() => ({
+        invalid: !isValidationValid.value,
+        value: internalValue.value,
+        name: idWithFallback.value,
+        update: (newValue: unknown): void => {
+          internalValue.value = newValue;
+        },
+        register: (value: unknown): void => {
+          if (props.mandatory && internalValue.value === null) {
+            internalValue.value = value;
+          }
+        },
+        unregister: (value: unknown): void => {
+          if (internalValue.value === value) {
+            internalValue.value = null;
+          }
+        },
+      }))
+    );
+
+    watch(internalValue, () => {
+      startValidating();
+    });
+
+    return {
+      idWithFallback,
+      isValidationValid,
+      radioGroup,
+      validationMessage,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/form-fields';
+
+.c-radio-group {
+  border: none;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  width: 100%;
+
+  &.c-radio-group--column {
+    flex-direction: column;
+  }
+
+  &--row {
+    align-items: center;
+
+    :deep(.c-radio) {
+      width: auto;
+    }
+  }
+}
+</style>

package/src/components/CRebrand.vue

@@ -0,0 +1,28 @@
+<template>
+  <div :class="{ 'w-100': fullWidth }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * NOTE(slanden): This component is no longer used. We are keeping it around for now
+ * because it is used in the CMS, but other than applying the w-100 class, it has
+ * no effect. We will remove this component in a future PR.
+ */
+
+withDefaults(
+  defineProps<{
+    fullWidth?: boolean;
+  }>(),
+  {
+    fullWidth: false,
+  }
+);
+</script>
+
+<style scoped>
+.w-100 {
+  width: 100%;
+}
+</style>

package/src/components/CRow.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="c-row"
+    :class="{
+      'c-row--dense': dense,
+      'c-row--no-gutters': noGutters,
+      [`align-${align}`]: align,
+      [`align-content-${alignContent}`]: alignContent,
+      [`justify-${justify}`]: justify,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    /** Applies the align-items css property.
+     * Available options are: start, center, end and stretch. */
+    align: {
+      type: String as PropType<'center' | 'start' | 'end' | 'stretch'>,
+      default: null,
+    },
+    /** Applies the align-content css property.
+     * Available options are: start, center, end, and stretch. */
+    alignContent: {
+      type: String as PropType<'center' | 'start' | 'end' | 'stretch'>,
+      default: null,
+    },
+    /**  Reduces the gutter between c-cols. */
+    dense: { type: Boolean, default: false },
+    /** Removes the gutter between c-cols. */
+    noGutters: { type: Boolean, default: false },
+    /** Applies the justify-content css property.
+     * Available options are: start, center, end, space-between and space-around. */
+    justify: {
+      type: String as PropType<'center' | 'start' | 'end' | 'space-between' | 'space-around'>,
+      default: null,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.c-row {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  margin: 0 -12px;
+}
+
+.c-row--dense {
+  margin: 0 -4px;
+}
+
+.c-row--no-gutters {
+  margin: 0;
+}
+</style>

package/src/components/CSafeArea.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="c-safe-area">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.c-safe-area {
+  --full-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  height: calc(var(--full-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+  max-width: 100%;
+  overflow: scroll;
+}
+
+@supports (height: 100dvh) {
+  .c-safe-area {
+    --full-height: 100dvh;
+  }
+}
+</style>

package/src/components/CSectionHeader.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="c-section-header" data-test="section-header">
+    <component :is="tag" class="c-section-header__title" data-test="section-header-title">
+      {{ title }}
+    </component>
+    <slot name="append" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref } from 'vue';
+
+import { TERTIARY as TERTIARY_ICON_BUTTON } from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
+
+export default defineComponent({
+  props: {
+    /** The title text to display. */
+    title: { type: String, default: '' },
+    /** The tag used for the title text. */
+    tag: { type: String, default: 'h2' },
+  },
+  setup(): void {
+    provide(TERTIARY_ICON_BUTTON, ref(true));
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/typography';
+
+.c-section-header {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  height: 48px;
+  justify-content: space-between;
+}
+
+.c-section-header__title {
+  @include headline;
+  @include text-overflow-ellipsis;
+
+  flex: 1 1 auto;
+}
+
+.c-card + .c-section-header {
+  margin-top: 16px;
+}
+</style>

package/src/components/CSelect.vue

@@ -1,90 +1,239 @@
 <template>
-  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :hide-label="hideLabel">
-    <template #label>
-      {{ label }}
-      <slot name="label" />
-    </template>
-
-    <select-input
-      :id="id"
-      v-bind="$attrs"
-      :data-test="`${dataTest}-select`"
-      class="select__field"
-      :class="{ 'select__field--disabled': disabled }"
-      :aria-label="hideLabel ? label : undefined"
-      solo
-      flat
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :value="value"
-      :rules="rules"
-      :items="items"
-      :hide-details="hideDetails"
-      validate-on-blur
-      v-on="$listeners"
+  <div
+    class="c-select"
+    :class="{
+      'c-select--disabled': disabled,
+      'c-select--invalid': !isValidationValid,
+    }"
+    :data-test="dataTest"
+  >
+    <label
+      :for="id"
+      class="c-select__label"
+      :class="{ 'c-select__label--hidden': hideLabel }"
+      :data-test="`${dataTest}-label`"
     >
-      <template #append>
-        <font-awesome-icon
-          v-if="loading"
-          :data-test="`${dataTest}-icon-loading`"
-          class="fa-spin select__field__icon"
-          :icon="faSpinner"
-        />
-        <font-awesome-icon
-          v-else
-          :data-test="`${dataTest}-icon-dropdown`"
-          class="select__field__icon"
-          :icon="faChevronDown"
-        />
-      </template>
-    </select-input>
-  </form-field>
+      <slot name="label">{{ label }}</slot>
+    </label>
+    <div class="c-select__input-container">
+      <select
+        :id="id"
+        ref="select"
+        class="c-select__input"
+        :class="{
+          'c-select__input--has-value': inputValue && !disabled,
+          'c-select__input--invalid': !isValidationValid,
+          'c-select__input--loading': loading,
+          'c-select__input--disabled': disabled,
+        }"
+        :aria-label="ariaLabel || label"
+        :data-test="`${dataTest}-select`"
+        :value="inputValue"
+        :disabled="disabled"
+        :required="required"
+        @input="onInput"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        @keydown="$emit('keydown', $event)"
+        v-on="validationListeners"
+      >
+        <option v-if="placeholder" value disabled selected>{{ placeholder }}</option>
+        <option
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          :disabled="item.disabled"
+          data-test="option"
+        >
+          {{ item.label }}
+        </option>
+      </select>
+      <CLoader v-if="loading" small class="c-select__icon" data-test="select-icon-loading" />
+      <FontAwesomeIcon v-else class="c-select__icon" :icon="faChevronDown" />
+    </div>
+    <CValidationMessage
+      class="c-select__message"
+      :data-test="`${dataTest}-message`"
+      :validation-message="validationMessage"
+      :hide="hideDetails"
+    >
+      <slot name="message" />
+    </CValidationMessage>
+  </div>
 </template>
 
 <script lang="ts">
-import { faChevronDown, faSpinner } from '@fortawesome/pro-light-svg-icons';
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { type PropType, defineComponent, ref, toRefs } from 'vue';
 
-import FormField from '@/components/helpers/FormField.vue';
-import SelectInput from '@/components/helpers/SelectInput.vue';
+import CLoader from '@propelinc/citrus-ui/src/components/CLoader.vue';
+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';
 
-// @ts-ignore
-@Component({
+export default defineComponent({
   name: 'CSelect',
-  inheritAttrs: false,
-  components: { FormField, SelectInput, FontAwesomeIcon },
-})
-export default class CSelect extends Vue {
-  faChevronDown = faChevronDown;
-  faSpinner = faSpinner;
-
-  @Prop(String) label?: string;
-  @Prop(String) placeholder?: string;
-  @Prop({ type: String, required: true }) id!: string;
-  /** List of options like `{ label: 'Yes', value: 'yes' }` */
-  @Prop({ type: Array, default: () => [] }) items!: { label: string; value: string }[];
-  @Prop({ type: Boolean, default: false }) disabled!: boolean;
-  @Prop({ type: String, default: '' }) value!: string;
-  /** Prefix for test selectors */
-  @Prop({ type: String, default: 'select-field' }) dataTest!: string;
-  /** 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: Boolean, default: false }) loading!: boolean;
-  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
-}
+  components: { CLoader, CValidationMessage, FontAwesomeIcon },
+  props: {
+    /** The select's label, both visual and screenreader-only */
+    label: { type: String, default: undefined },
+    /** Overrides label for screenreader-only */
+    ariaLabel: { type: String, default: undefined },
+    /** Set the select's placeholder text */
+    placeholder: { type: String, default: undefined },
+    /** Assigns the select input's id */
+    id: { type: String, default: undefined },
+    /** List of options like `{ label: 'Yes', value: 'yes' }` */
+    items: {
+      type: Array as PropType<{ label: string; value: string; disabled?: boolean }[]>,
+      default: () => [],
+    },
+    /** Controls whether the select is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Controls the value of the select */
+    value: { type: String, default: '' },
+    /** Prefix for test selectors */
+    dataTest: { type: String, default: 'select' },
+    /** Hides the label and instead labels the field with `aria-label` */
+    hideLabel: { type: Boolean, default: false },
+    /**
+     * Hides the validation message area. Defaults to `false` (show message area even
+     * when valid), so validations transition in gracefully.
+     *
+     * If set to 'auto', the validation message area will only display if there is a message.
+     */
+    hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
+    /** Controls whether the select is loading */
+    loading: { type: Boolean, default: false },
+    /**
+     * 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: string) => string | boolean)[]>, default: () => [] },
+    /**  If true, the select will be required */
+    required: { type: Boolean, default: false },
+  },
+  emits: ['input', 'focus', 'blur', 'keydown'],
+  setup(props, { emit, expose }) {
+    const { id, value, rules, required } = toRefs(props);
+    const idWithFallback = useId(id);
+    const inputValue = useInternalValue(value, {
+      onChange: (newValue) => emit('input', newValue),
+    });
+    const select = ref<HTMLSelectElement | null>(null);
+    const {
+      message: validationMessage,
+      valid: isValidationValid,
+      listeners: validationListeners,
+      startValidating,
+      clearValidations,
+    } = useValidations({
+      id: idWithFallback,
+      field: select,
+      value: inputValue,
+      rules,
+      required,
+      validateOn: 'blur',
+    });
+
+    function onInput(event: Event): void {
+      const target = event.target as HTMLSelectElement;
+      inputValue.value = target.value;
+    }
+
+    expose({ startValidating, clearValidations });
+
+    return {
+      inputValue,
+      validationListeners,
+      validationMessage,
+      isValidationValid,
+      select,
+      faChevronDown,
+
+      onInput,
+    };
+  },
+});
 </script>
 
-<style lang="scss" scoped>
-@import '~@/styles/form-fields.scss';
+<style scoped lang="scss">
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/form-fields';
+
+.c-select {
+  display: flex;
+  flex-direction: column;
+
+  &--disabled {
+    color: $color-text-disabled;
+  }
+}
+
+.c-select__label {
+  @include body-emphasized;
+
+  margin-bottom: 8px;
+  transition: color $sl-field-transition-duration ease;
+
+  &--hidden {
+    @include sr-only;
+  }
+}
+
+.c-select__input-container {
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.c-select__icon {
+  pointer-events: none;
+  position: absolute;
+  right: 16px;
+}
+
+.c-select__input {
+  appearance: none;
+  background-color: $color-white;
+  border: $border-width solid $color-border;
+  border-radius: $border-radius-next;
+  color: $color-placeholder-text;
+  cursor: pointer;
+  flex-grow: 1;
+  letter-spacing: $letter-spacing-extend-small;
+  max-width: 100%;
+  min-height: $button-size-large;
+  outline: 0.5px solid transparent;
+  padding: 0 36px 0 16px;
+  text-overflow: ellipsis;
+  transition:
+    border-color ease 0.2s,
+    outline-color ease 0.2s;
+
+  &:focus {
+    border-color: $color-black;
+  }
+
+  &--has-value {
+    color: $color-black;
+  }
+
+  &--invalid {
+    border-color: $color-black;
+    outline-color: $color-black;
+  }
 
-.select__field {
-  @include form-field;
+  &[disabled] {
+    background-color: $color-gray-100;
+  }
 }
 
-.select__field--disabled {
-  @include form-field-disabled;
+.c-select__message {
+  margin-top: 4px;
 }
 </style>

package/src/components/CSkeleton.vue

@@ -0,0 +1,65 @@
+<!--
+  This Skeleton component is the foundation for all of our skeleton loader components.
+
+  In most cases, you will use a more specific version of this component, such as
+  CSkeletonLoaderCard, CSkeletonLoaderText, CSkeletonLoaderCircle, etc.
+
+  However, you can create custom skeleton loaders ad-hoc through composition. For example, a custom
+  loader text component could be created like this:
+
+  ```vue
+  <div v-for="x in 3" :key="x">
+    <div class="d-flex w-full" style="font-size: 42px; line-height: 130%;">
+      <div style="height: 16px;">
+        <CSkeleton />
+      </div>
+      <span>&nbsp;</span>
+    </div>
+  </div>
+  ```
+-->
+
+<template>
+  <div class="c-skeleton" data-test="skeleton">
+    <div class="c-skeleton__indicator" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-skeleton {
+  display: flex;
+  height: 100%;
+  min-height: 1rem;
+  position: relative;
+  width: 100%;
+}
+
+.c-skeleton__indicator {
+  --color: #{$color-gray-100};
+  --sheen-color: #{$color-gray-200};
+
+  animation: sheen 8s ease-in-out infinite;
+  background: linear-gradient(
+    270deg,
+    var(--sheen-color),
+    var(--color),
+    var(--color),
+    var(--sheen-color)
+  );
+  background-size: 400% 100%;
+  border-radius: $border-radius-next;
+  flex: 1 1 auto;
+}
+
+@keyframes sheen {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>