@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CForm.vue

@@ -0,0 +1,86 @@
+<template>
+  <form ref="form" :data-test="dataTest" novalidate @submit.prevent="$emit('submit', $event)">
+    <slot />
+  </form>
+</template>
+
+<script lang="ts">
+import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
+import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
+
+import { VALIDATIONS } from '@propelinc/citrus-ui/src/services/injections/forms';
+import type { ValidationState } from '@propelinc/citrus-ui/src/types/CForm';
+
+interface FormValidation {
+  id: string;
+  validate: () => boolean;
+  valid: boolean;
+  field?: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+}
+
+export default defineComponent({
+  name: 'CForm',
+  props: {
+    dataTest: { type: String, default: 'form' },
+    // eslint-disable-next-line vue/no-unused-properties
+    value: { type: Boolean, default: false },
+  },
+  emits: ['submit', 'input'],
+  setup(_, { expose, emit }) {
+    const form = ref<HTMLFormElement | null>(null);
+    const inputs = ref<Record<string, FormValidation>>({});
+
+    provide(VALIDATIONS, {
+      register: (input: ValidationState) => {
+        // NOTE(ram): Vue collapses the ref to input.field automatically so we need to adjust types.
+        inputs.value = { ...inputs.value, [input.id]: input as unknown as FormValidation };
+      },
+      unregister: (id: string) => {
+        const filteredInputs = { ...inputs.value };
+        delete filteredInputs[id];
+        inputs.value = filteredInputs;
+      },
+    });
+
+    const inputArray = computed(() => Object.values(inputs.value));
+    const getInvalidInputs = (startValidating?: boolean): FormValidation[] => {
+      return inputArray.value.filter((input) => {
+        return startValidating ? !input.validate() : !input.valid;
+      });
+    };
+
+    // NOTE(mohan): I would love for this to be a computed property, but Vue 2's
+    // the reactivity system can't seem to track refs inside of refs, though it
+    // should work in Vue 3.
+    watch(getInvalidInputs, (newInvalidInputs, oldInvalidInputs) => {
+      const newValid = newInvalidInputs.length === 0;
+      const oldValid = oldInvalidInputs?.length === 0;
+      if (newValid !== oldValid) {
+        emit('input', newValid);
+      }
+    });
+    onMounted(() => emit('input', getInvalidInputs().length === 0));
+
+    const validate = (): boolean => {
+      if (!form.value) {
+        return false;
+      }
+
+      const invalidInputs = getInvalidInputs(true);
+      const firstInvalidField = invalidInputs.find((input) => input.field)?.field;
+      if (firstInvalidField) {
+        scrollIntoViewIfNeeded(firstInvalidField, {
+          behavior: 'smooth',
+          block: 'center',
+          scrollMode: 'if-needed',
+        });
+      }
+
+      return invalidInputs.length === 0;
+    };
+
+    expose({ validate, inputs: inputArray });
+    return { form };
+  },
+});
+</script>

package/src/components/CFormFieldCounter.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>{{ displayText }}</div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CFormFieldCounter',
+  props: {
+    /** Sets the denominator of the counter. */
+    counter: { type: Number as PropType<number | null>, default: null },
+    /** Function or number that determines the numerator of the counter. */
+    counterValue: {
+      type: [Number, Function] as PropType<number | (() => number | null)>,
+      default: null,
+    },
+    /** Input value of the parent form field */
+    value: { type: String, default: '' },
+  },
+  setup(props) {
+    const numerator = computed(() => {
+      if (typeof props.counterValue === 'function') {
+        return props.counterValue();
+      } else if (typeof props.counterValue === 'number') {
+        return props.counterValue;
+      } else {
+        return props.value.length;
+      }
+    });
+
+    const displayText = computed(() => {
+      return `${numerator.value}/${props.counter}`;
+    });
+
+    return { numerator, displayText };
+  },
+});
+</script>

package/src/components/CIconButton.vue

@@ -1,73 +1,189 @@
 <template>
-  <v-btn
-    class="icon-button"
+  <CButton
+    v-bind="$attrs"
+    class="c-icon-button"
+    :class="{
+      'c-icon-button--inherit': inheritColor,
+      [`c-icon-button-size--${computedSize}`]: computedSize,
+    }"
+    :data-inherit-color="inheritColor"
+    :data-size="computedSize"
     data-test="icon-button"
-    :class="{ [colorScheme.container]: colorScheme.container }"
-    icon
-    :color="colorScheme.icon"
-    :ripple="false"
-    :to="to"
+    :disabled="disabled"
     :href="href"
+    :level="level"
+    :loading="loading"
+    :size="computedSize"
     :target="target"
-    v-on="$listeners"
+    :to="to"
+    :variant="computedVariant"
+    @blur="$emit('blur', $event)"
+    @click="$emit('click', $event)"
+    @focus="$emit('focus', $event)"
   >
-    <font-awesome-icon data-test="icon-button-icon" :class="{ 'fa-spin': spinIcon }" :icon="icon" />
-  </v-btn>
+    <div
+      role="img"
+      data-test="icon-button-a11y"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
+    >
+      <slot>
+        <font-awesome-icon
+          v-if="icon"
+          class="c-icon-button__icon"
+          :class="{ 'c-icon-button__icon--spin': spinIcon }"
+          data-test="icon-button-icon"
+          :icon="icon"
+        />
+      </slot>
+    </div>
+  </CButton>
 </template>
 
 <script lang="ts">
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { RawLocation } from 'vue-router';
+import type { PropType } from 'vue';
+import { computed, defineComponent, inject, provide } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
-interface ColorScheme {
-  icon: string;
-  container?: string;
-}
+import CButton from '@propelinc/citrus-ui/src/components/CButton/CButton.vue';
+import type {
+  ButtonLevel,
+  ButtonSize,
+  ButtonVariant,
+} from '@propelinc/citrus-ui/src/components/CButton/types';
+import { useA11yLabelCheck } from '@propelinc/citrus-ui/src/composables/accessibility';
+import { BOUNCE_AMOUNT } from '@propelinc/citrus-ui/src/services/injections/buttons';
+import { INHERIT_COLOR, TERTIARY } from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
 
-@Component({ name: 'CIconButton', components: { FontAwesomeIcon } })
-export default class CIconButton extends Vue {
-  /** Renders a filled circle around the button */
-  @Prop({ type: Boolean, default: false }) contained!: boolean;
-  /** Renders the navy variant */
-  @Prop({ type: Boolean, default: false }) dark!: boolean;
-  /** Renders the white variant */
-  @Prop({ type: Boolean, default: false }) light!: boolean;
-  @Prop({ type: [String, Array, Object], required: true }) icon!: IconDefinition;
-  /** Spins the icon for loading states */
-  @Prop({ type: Boolean, default: false }) spinIcon!: boolean;
-  @Prop([Object, String]) to?: RawLocation;
-  @Prop(String) href?: string;
-  @Prop(String) target?: string;
-
-  get colorScheme(): ColorScheme {
-    if (this.contained) {
-      if (this.light) {
-        return {
-          icon: 'navy',
-          container: 'white',
-        };
-      } else if (this.dark) {
-        return {
-          icon: 'white',
-          container: 'navy',
-        };
-      } else {
-        return {
-          icon: 'white',
-          container: 'primary',
-        };
+export default defineComponent({
+  components: { FontAwesomeIcon, CButton },
+  props: {
+    /** ARIA label for the button. You must use either this or ariaLabelledby. */
+    ariaLabel: { type: String, default: undefined },
+    /** ARIA labelledby for the button. You must use either this or ariaLabel. */
+    ariaLabelledby: { type: String, default: undefined },
+    /** Controls whether button is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Designates the button as an anchor and applies the href attribute */
+    href: { type: String, default: undefined },
+    /** Specifies a Font Awesome icon */
+    icon: {
+      type: [String, Array, Object] as PropType<string | string[] | IconDefinition>,
+      default: undefined,
+    },
+    /**
+     * Controls whether button uses the large variant
+     * @deprecated Use `size="large"` instead
+     */
+    large: { type: Boolean, default: false, deprecated: true },
+    /**
+     * Controls the level of the button
+     * @default 'normal'
+     */
+    level: { type: String as PropType<ButtonLevel>, default: 'normal' },
+    /** Controls whether button is loading */
+    loading: { type: Boolean, default: false },
+    /**
+     * Controls whether button uses the secondary variant
+     * @deprecated Use `variant="secondary"` instead
+     */
+    secondary: { type: Boolean, default: false, deprecated: true },
+    /**
+     * Controls the size of the button
+     * @default 'medium'
+     */
+    size: { type: String as PropType<ButtonSize>, default: 'medium' },
+    /** Spins the icon for loading states */
+    spinIcon: { type: Boolean, default: false },
+    /** Designates the target attribute. Only use with the href prop. */
+    target: { type: String, default: undefined },
+    /**
+     * Controls whether button uses the tertiary variant
+     * @deprecated Use `variant="tertiary"` instead
+     */
+    tertiary: { type: Boolean, default: false, deprecated: true },
+    /** Controls whether button functions as a router-link */
+    to: { type: [Object, String] as PropType<RouteLocationRaw>, default: undefined },
+    /**
+     * Controls the variant of the button
+     * @default 'primary'
+     */
+    variant: { type: String as PropType<ButtonVariant>, default: 'primary' },
+  },
+  emits: ['blur', 'click', 'focus'],
+  setup(props) {
+    useA11yLabelCheck('CIconButton', props);
+
+    const injectedTertiary = inject(TERTIARY, undefined);
+    const injectedOrPropTertiary = computed(() => injectedTertiary?.value ?? props.tertiary);
+    /**
+     * Handle the `variant` prop. `secondary` and `tertiary` are deprecated, but because we set a
+     * default `variant`, we need to give them precedence.
+     *
+     * This is slightly different than the implementation of `computedVariant` in CButton, as
+     * `CButton` does not make use of an injected `TERTIARY` value.
+     */
+    const computedVariant = computed((): ButtonVariant => {
+      if (props.secondary) {
+        return 'secondary';
       }
-    } else {
-      if (this.light) {
-        return { icon: 'white' };
-      } else if (this.dark) {
-        return { icon: 'navy' };
-      } else {
-        return { icon: 'primary' };
+
+      if (injectedOrPropTertiary.value) {
+        return 'tertiary';
       }
-    }
-  }
-}
+
+      return props.variant;
+    });
+
+    /**
+     * Handle the `size` prop. `large` is deprecated, but because we set a default `size`, we need
+     * to give it precedence.
+     */
+    const computedSize = computed((): ButtonSize => {
+      if (props.large) {
+        return 'large';
+      }
+
+      return props.size;
+    });
+
+    const inheritColor = inject(INHERIT_COLOR, undefined);
+
+    provide(BOUNCE_AMOUNT, 0.9);
+
+    return { computedSize, computedVariant, inheritColor };
+  },
+});
 </script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-icon-button::part(base) {
+  font-size: $font-size-icon-medium;
+  line-height: 0;
+  padding: 0;
+  width: $button-size-medium;
+}
+
+.c-icon-button--inherit::part(base) {
+  color: inherit;
+}
+
+.c-icon-button::part(label) {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+}
+
+.c-icon-button-size--large::part(base) {
+  width: $button-size-large;
+}
+
+.c-icon-button__icon--spin {
+  animation: $loader-spin-animation;
+}
+</style>

package/src/components/CLabel.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="c-label" :data-test="dataTest">
+    <slot name="icon">
+      <FontAwesomeIcon v-if="icon" data-test="label-icon" :icon="icon" size="xs" />
+    </slot>
+    <div class="c-label__text" data-test="label-text">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { FontAwesomeIcon },
+  props: {
+    /** Specifies the label's icon, overwritten if icon slot is used */
+    icon: {
+      type: [Array, String, Object] as PropType<string | string[] | IconDefinition>,
+      default: null,
+    },
+    /** A custom data test string */
+    dataTest: { type: String, default: 'label' },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-label {
+  align-items: center;
+  background-color: $color-gray-100;
+  border-radius: 4px;
+  color: $color-text-secondary;
+  display: inline-flex;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  gap: 4px;
+  height: 24px;
+  margin-bottom: 6px;
+  padding: 0 12px;
+}
+
+.c-label:not(:last-child) {
+  margin-right: 8px;
+}
+</style>

package/src/components/CListItem.vue

@@ -1,69 +1,173 @@
 <template>
-  <v-list-item
-    :role="isButton ? 'button' : undefined"
-    :to="to"
-    :href="href"
+  <component
+    :is="tag"
+    v-bind="allAttrs"
+    class="c-list-item d-flex flex-col justify-center w-full"
+    :class="{ 'c-list-item--is-tappable': isTappable }"
+    :href="routerDestinationOrHref"
     :target="target"
-    :ripple="false"
-    class="c-list-item"
-    v-on="$listeners"
+    @click="navigate"
   >
-    <slot name="icon">
-      <c-list-item-icon v-if="icon" :icon="icon" class="c-list-item__icon" />
-    </slot>
-
-    <v-list-item-content>
-      <v-list-item-title class="c-list-item__title" data-test="list-item-content">
-        <slot />
-      </v-list-item-title>
-    </v-list-item-content>
-
-    <slot name="action">
-      <c-list-item-action v-if="isTappable" />
-    </slot>
-  </v-list-item>
+    <div
+      class="d-flex flex-row gap-3 justify-between w-full p-4"
+      :class="{
+        'align-start': align === 'top',
+        'align-center': align !== 'top',
+      }"
+    >
+      <slot name="prepend">
+        <CListItemIcon v-if="icon || iconSlotHasContent" :icon="icon" :icon-color="iconColor">
+          <template #icon>
+            <slot name="icon" />
+          </template>
+        </CListItemIcon>
+      </slot>
+
+      <div class="flex-1 d-flex flex-row gap-3 justify-between align-center">
+        <CListItemContent :title="title" :label="label">
+          <template v-for="slotName in ['title', 'label', 'default']" #[slotName]>
+            <slot :name="slotName" />
+          </template>
+        </CListItemContent>
+
+        <slot name="append">
+          <div
+            v-if="renderActionSlot"
+            data-test="list-item-action"
+            class="c-list-item__append__action flex-shrink-0"
+          >
+            <slot name="action">
+              <FontAwesomeIcon
+                data-test="list-item-action-icon"
+                class="c-list-item__append__action-icon"
+                fixed-width
+                :icon="actionIcon ? actionIcon : faChevronRight"
+              />
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </component>
 </template>
 
 <script lang="ts">
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { RawLocation } from 'vue-router';
+import { type PropType, computed, defineComponent, mergeProps, toRefs } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
-import CListItemAction from '@/components/CListItemAction.vue';
-import CListItemIcon from '@/components/CListItemIcon.vue';
+import CListItemContent from '@propelinc/citrus-ui/src/components/CListItemContent.vue';
+import CListItemIcon from '@propelinc/citrus-ui/src/components/CListItemIcon.vue';
+import { useRouterLink } from '@propelinc/citrus-ui/src/composables/router';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+import type { FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
 
-@Component({ name: 'CListItem', components: { FontAwesomeIcon, CListItemIcon, CListItemAction } })
-export default class CListItem extends Vue {
-  @Prop({ type: [String, Array, Object] }) icon?: IconDefinition;
-  @Prop([String, Object]) to?: RawLocation;
-  @Prop(String) target?: string;
-  @Prop(String) href?: string;
+export default defineComponent({
+  components: { FontAwesomeIcon, CListItemIcon, CListItemContent },
+  props: {
+    /** The Font Awesome icon to display */
+    icon: { type: [String, Array, Object] as FaPropType, default: null },
+    /** The icon to display on the right side for clickable items, defaulting to right arrow */
+    actionIcon: { type: [String, Array, Object] as FaPropType, default: null },
+    /** Color of the icon background */
+    iconColor: { type: String, default: 'gray-100' },
+    /** Emphasized text above body text. Overridden by the default slot. */
+    title: { type: String, default: undefined },
+    /** Plain body copy. Overridden by the default slot. */
+    label: { type: String, default: undefined },
+    /** Router location for links within the app */
+    to: { type: [String, Object] as PropType<RouteLocationRaw>, default: undefined },
+    /** HTML target attribute for links to outside the app */
+    target: { type: String, default: undefined },
+    /** Location for links to outside the app */
+    href: { type: String, default: undefined },
+    /** Changes alignment of icon and action icon */
+    align: { type: String as PropType<'top' | 'center'>, default: 'center' },
+    /** Overrides default behavior to display a chevron in the action slot */
+    hideAction: { type: Boolean, default: false },
+  },
+  setup(props, { attrs }) {
+    const { to } = toRefs(props);
+    const { href: routerDestination, navigate } = useRouterLink(to);
+    const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
 
-  get isLink(): boolean {
-    return !!this.to || !!this.href;
-  }
+    const isLink = computed(() => !!routerDestinationOrHref.value);
+    const isButton = computed(() => !!attrs.onClick);
+    const isTappable = computed(() => isLink.value || isButton.value);
 
-  get isButton(): boolean {
-    return !!this.$listeners.click;
-  }
+    const tag = computed(() => {
+      if (isLink.value) {
+        return 'a';
+      } else if (isButton.value) {
+        return 'button';
+      } else {
+        return 'div';
+      }
+    });
+    const tagAttrs = computed(() => {
+      if (isButton.value) {
+        return { type: 'button' };
+      }
+      return {};
+    });
 
-  get isTappable(): boolean {
-    return this.isButton || this.isLink;
-  }
-}
+    const actionSlotHasContent = useSlotHasContent('action');
+
+    const renderActionSlot = computed(() => {
+      if (props.hideAction) {
+        return false;
+      }
+
+      return isTappable.value || actionSlotHasContent.value;
+    });
+    const iconSlotHasContent = useSlotHasContent('icon');
+
+    const allAttrs = computed(() => mergeProps(attrs, tagAttrs.value));
+
+    return {
+      allAttrs,
+      faChevronRight,
+      iconSlotHasContent,
+      isTappable,
+      navigate,
+      renderActionSlot,
+      routerDestinationOrHref,
+      tag,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
 
 .c-list-item {
+  background: transparent;
+  color: $color-text-primary;
+  min-height: 64px;
+  outline: none;
+  text-align: left;
+  text-decoration: none;
+
   & + & {
     border-top: $border;
   }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.c-list-item--is-tappable {
+  appearance: none; // Needed to avoid browser default styles for buttons
+  border: none; // Needed to avoid browser default styles for buttons
+  cursor: pointer;
 }
 
-.c-list-item__title {
-  white-space: normal;
+.c-list-item__append__action-icon {
+  color: $color-text-secondary;
+  font-size: $font-size-medium;
 }
 </style>