@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CPill.vue

@@ -0,0 +1,162 @@
+<template>
+  <span
+    v-bind="$attrs"
+    :aria-checked="ariaChecked"
+    :class="{ 'c-pill--active': isSelected }"
+    class="c-pill"
+    data-test="pill"
+    :role="role"
+    @click="onClick"
+  >
+    <span class="c-pill-body" data-test="pill-body">
+      <span v-if="icon || $slots.icon" class="c-pill-icon">
+        <slot name="icon">
+          <FontAwesomeIcon v-if="icon" data-test="pill-icon" fixed-width :icon="icon" />
+        </slot>
+      </span>
+
+      <span class="c-pill-text">
+        <slot />
+      </span>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { PropType } from 'vue';
+import { computed, defineComponent, inject } from 'vue';
+
+import {
+  ROLE,
+  SELECTED_VALUE,
+  TOGGLE_VALUE,
+} from '@propelinc/citrus-ui/src/services/injections/pills';
+import type { FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
+
+type ToggleVariant = 'standalone' | 'group' | 'none';
+
+export default defineComponent({
+  components: { FontAwesomeIcon },
+  props: {
+    /** By default, this is a boolean that determines if the pill is selected or
+    not. If in a pill group, this is a string that identifies this pill. */
+    value: {
+      type: [Boolean, String] as PropType<boolean | string | undefined>,
+      default: undefined,
+    },
+    /** The icon to display. */
+    icon: { type: [String, Array, Object] as FaPropType, default: undefined },
+  },
+  emits: ['click', 'input'],
+  setup(props, { emit }) {
+    const injectedRole = inject(ROLE, undefined);
+    const injectedSelectedValue = inject(SELECTED_VALUE, undefined);
+    const toggleValue = inject(TOGGLE_VALUE, undefined);
+
+    const toggleVariant = computed<ToggleVariant>(() => {
+      if (toggleValue) {
+        return 'group';
+      }
+
+      if (props.value !== undefined) {
+        return 'standalone';
+      }
+
+      return 'none';
+    });
+
+    const isSelected = computed(() => {
+      if (toggleVariant.value === 'standalone') {
+        // @ts-expect-error - "Expression produces a union type that is too complex to represent" error
+        // unclear why this is occurring, ignoring for now
+        return props.value;
+      }
+
+      if (injectedSelectedValue?.value) {
+        return injectedSelectedValue.value === props.value;
+      }
+
+      return undefined;
+    });
+
+    const ariaChecked = computed((): 'true' | 'false' | undefined => {
+      if (isSelected.value === undefined) {
+        return undefined;
+      }
+
+      return isSelected.value ? 'true' : 'false';
+    });
+
+    const role = computed(() => {
+      if (toggleVariant.value === 'standalone') {
+        return 'radio';
+      }
+
+      if (toggleVariant.value === 'group') {
+        return injectedRole?.value ?? undefined;
+      }
+
+      return undefined;
+    });
+
+    const onClick = (): void => {
+      if (toggleVariant.value === 'standalone') {
+        emit('input', !props.value);
+      }
+
+      if (toggleVariant.value === 'group' && toggleValue) {
+        const nextValue = isSelected.value ? undefined : (props.value as string);
+        toggleValue(nextValue);
+      }
+
+      emit('click');
+    };
+
+    return {
+      ariaChecked,
+      isSelected,
+      onClick,
+      role,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-pill {
+  background-color: $color-white;
+  border: $border-width solid $color-border;
+  border-radius: $border-radius-next;
+  color: $color-text-primary;
+  display: inline-block;
+  font-family: $font-family-polymath;
+  height: $button-size-medium;
+  padding-inline: 12px;
+}
+
+.c-pill--active {
+  background-color: $color-black;
+  border-color: $color-black;
+  color: $color-white;
+}
+
+.c-pill-body {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  height: 100%;
+
+  /**
+   * Improves icon alignment
+   */
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.c-pill-icon {
+  width: 16px;
+}
+</style>

package/src/components/CPillGroup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="c-pill-group" data-test="pill-group">
+    <fieldset class="c-pill-group__track">
+      <slot>
+        <CPill
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+          :icon="option.icon"
+        >
+          {{ option.label }}
+        </CPill>
+      </slot>
+    </fieldset>
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { computed, defineComponent, provide, ref } from 'vue';
+
+import CPill from '@propelinc/citrus-ui/src/components/CPill.vue';
+import {
+  ROLE,
+  SELECTED_VALUE,
+  TOGGLE_VALUE,
+} from '@propelinc/citrus-ui/src/services/injections/pills';
+import type { FaIcon } from '@propelinc/citrus-ui/src/types/font-awesome';
+
+interface PillConfig {
+  label: string;
+  value: string;
+  icon?: FaIcon;
+}
+
+export default defineComponent({
+  components: { CPill },
+  props: {
+    /** Specifies which pill is selected. */
+    value: { type: String as PropType<string>, default: () => '' },
+    /** A list of pills to display. This is overwritten by the default slot. */
+    options: { type: Array as PropType<PillConfig[]>, default: () => [] },
+  },
+  emits: ['input'],
+  setup(props, { emit }) {
+    provide(ROLE, ref('radio'));
+    provide(
+      SELECTED_VALUE,
+      computed(() => props.value)
+    );
+    provide(TOGGLE_VALUE, (value) => {
+      emit('input', value);
+    });
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-pill-group {
+  overflow: scroll hidden;
+  padding: 0 16px;
+}
+
+.c-pill-group__track {
+  border: none;
+  display: block;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+}
+</style>

package/src/components/CPopup.vue

@@ -0,0 +1,66 @@
+<template>
+  <sl-popup ref="popup" :active="value" distance="8" class="c-popup">
+    <span slot="anchor" class="anchor">
+      <slot />
+    </span>
+    <slot name="content" />
+  </sl-popup>
+</template>
+
+<script lang="ts">
+import { type SlPopup } from '@shoelace-style/shoelace';
+import '@shoelace-style/shoelace/dist/components/popup/popup.js';
+import { defineComponent, onMounted, onUnmounted, ref, watchEffect } from 'vue';
+
+export default defineComponent({
+  name: 'CPopup',
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  emits: ['mouseleave', 'outside-click'],
+  setup(props, { emit }) {
+    const popup = ref<SlPopup | null>(null);
+
+    const handleMouseLeave = (): void => {
+      if (props.value) {
+        emit('mouseleave');
+      }
+    };
+
+    const handleOutsideClick = ({ target }: MouseEvent): void => {
+      if (target instanceof HTMLElement && !popup.value?.contains(target)) {
+        emit('outside-click');
+      }
+    };
+
+    watchEffect(async () => {
+      if (props.value) {
+        document.addEventListener('click', handleOutsideClick);
+      } else {
+        document.removeEventListener('click', handleOutsideClick);
+      }
+    });
+
+    onMounted(() => {
+      popup.value?.addEventListener('mouseleave', handleMouseLeave);
+    });
+
+    onUnmounted(() => {
+      document.removeEventListener('click', handleOutsideClick);
+      popup.value?.removeEventListener('mouseleave', handleMouseLeave);
+    });
+
+    return { popup };
+  },
+});
+</script>
+
+<style scoped>
+.c-popup::part(popup) {
+  z-index: 1;
+}
+
+.anchor {
+  height: fit-content;
+}
+</style>

package/src/components/CProgressLinear.vue

@@ -0,0 +1,52 @@
+<template>
+  <sl-progress-bar
+    class="c-progress-linear"
+    :class="{ 'c-progress-linear--rounded': rounded }"
+    :data-test="dataTest"
+    :value="value"
+    :indeterminate="indeterminate || undefined"
+    :label="accessibleText || $t('Loading...')"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js';
+
+export default defineComponent({
+  props: {
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: { type: String, default: undefined },
+    /** Selector for testing */
+    dataTest: { type: String, default: 'c-progress-linear' },
+    /** Renders an indefinite loading state */
+    indeterminate: { type: Boolean, default: false },
+    /** Rounds the progress bar */
+    rounded: { type: Boolean, default: true },
+    /** The current progress from 0 to 100 */
+    value: { type: [Number, String], default: 0 },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+$progress-linear-height: 4px;
+
+.c-progress-linear {
+  --height: #{$progress-linear-height};
+  --indicator-color: #{$color-black};
+  --track-color: #{$color-gray-200};
+
+  &::part(base) {
+    border-radius: 0;
+  }
+}
+
+.c-progress-linear--rounded {
+  &::part(base) {
+    border-radius: calc(#{$progress-linear-height} / 2);
+  }
+}
+</style>

package/src/components/CProgressRing.vue

@@ -0,0 +1,126 @@
+<template>
+  <span
+    class="c-progress-ring"
+    :data-test="dataTest"
+    :aria-label="accessibleText || $t('Loading...')"
+    role="progressbar"
+    aria-valuemin="0"
+    :aria-valuemax="String(valueMax)"
+    :aria-valuenow="String(value)"
+    :style="{
+      '--size': `${size}px`,
+      '--indicator-color': cssColor,
+      '--track-color': trackCssColor,
+      '--track-width': `${trackWidth}px`,
+      '--indicator-length': `${percentage}`,
+    }"
+  >
+    <svg class="c-progress-ring__svg">
+      <circle class="c-progress-ring__track" />
+      <circle class="c-progress-ring__indicator" pathLength="100" />
+    </svg>
+    <span class="c-progress-ring__label">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent } from 'vue';
+
+import type Colors from '@propelinc/citrus-ui/src/colors/colors';
+import { type HexColor, isValidColor } from '@propelinc/citrus-ui/src/colors/colors';
+import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+
+export default defineComponent({
+  props: {
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: { type: String, default: undefined },
+    /** Selector for testing */
+    dataTest: { type: String, default: 'c-progress-ring' },
+    /** The current progress, from 0 to valueMax */
+    value: { type: [Number, String], default: 0 },
+    /** Total progress */
+    valueMax: { type: [Number, String], default: 100 },
+    /** The outer diameter of the progress ring, in px */
+    size: { type: [Number, String], default: 44 },
+    /** The width of the progress ring, in px */
+    trackWidth: { type: [Number, String], default: 4 },
+    /** Sets the indicator color */
+    color: {
+      type: String as PropType<HexColor | keyof typeof Colors>,
+      default: 'blue-500',
+      validator: isValidColor,
+    },
+    /** Sets the track color underneath the indicator */
+    trackColor: {
+      type: String as PropType<HexColor | keyof typeof Colors>,
+      default: 'gray-200',
+      validator: isValidColor,
+    },
+  },
+  setup(props) {
+    const { cssColor } = useCssColor(() => props.color);
+    const { cssColor: trackCssColor } = useCssColor(() => props.trackColor);
+
+    const percentage = computed(() => (100 * Number(props.value)) / Number(props.valueMax));
+
+    return {
+      percentage,
+      cssColor,
+      trackCssColor,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-progress-ring {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: var(--size);
+  height: 1em;
+  justify-content: center;
+  position: relative;
+  width: 1em;
+
+  &__label {
+    color: var(--indicator-color);
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+  }
+
+  &__svg {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+
+  &__indicator,
+  &__track {
+    cx: 0.5em;
+    cy: 0.5em;
+    fill: none;
+    r: calc(0.5em - var(--track-width) / 2);
+    stroke-width: var(--track-width);
+  }
+
+  &__indicator {
+    stroke: var(--indicator-color);
+
+    /* The empty gap equal to the path length 100 to make the rest of the circle empty. */
+    stroke-dasharray: var(--indicator-length) 100;
+    stroke-linecap: round;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    transition: stroke-dasharray 0.2s;
+  }
+
+  &__track {
+    stroke: var(--track-color);
+  }
+}
+</style>

package/src/components/CRadio.vue

@@ -0,0 +1,138 @@
+<template>
+  <label
+    :id="idWithFallback"
+    :for="`${idWithFallback}-input`"
+    :data-test="dataTest"
+    :data-selected="parentState.value === value || undefined"
+    class="c-radio"
+    :class="{
+      'c-radio--invalid': parentState.invalid,
+      'c-radio--checked': parentState.value === value,
+    }"
+  >
+    <input
+      :id="`${idWithFallback}-input`"
+      type="radio"
+      :data-test="`${dataTest}-input`"
+      class="c-radio__input"
+      :class="{ 'sr-only': hideRadio }"
+      :name="parentState.name"
+      :value="value"
+      :checked="parentState.value === value || undefined"
+      @change="onChange($event)"
+      @blur="$emit('blur')"
+      @focus="$emit('focus')"
+    />
+    <slot name="label">{{ label }} </slot>
+  </label>
+</template>
+
+<script lang="ts">
+import {
+  type PropType,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRefs,
+} from 'vue';
+
+import { useId } from '@propelinc/citrus-ui/src/composables/id';
+import { RADIO_STATE } from '@propelinc/citrus-ui/src/services/injections/radio';
+import type { RadioState } from '@propelinc/citrus-ui/src/services/injections/radio';
+
+export default defineComponent({
+  name: 'CRadio',
+  props: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: { type: null as unknown as PropType<any>, required: true },
+    id: { type: String as PropType<string | null>, default: null },
+    label: { type: String as PropType<string | null>, default: null },
+    dataTest: { type: String, default: 'radio-group-option' },
+    hideRadio: { type: Boolean, default: false },
+  },
+  emits: ['change', 'blur', 'focus'],
+  setup(props, { emit }) {
+    const { id } = toRefs(props);
+    const idWithFallback = useId(id);
+
+    const parentState = inject(
+      RADIO_STATE,
+      ref<RadioState>({
+        value: null,
+        name: idWithFallback.value,
+        invalid: false,
+        update: () => {},
+        register: () => {},
+        unregister: () => {},
+      })
+    );
+
+    const onChange = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+      parentState.value.update(target.checked ? props.value : null);
+      emit('change', event);
+    };
+
+    onMounted((): void => {
+      parentState.value.register(props.value);
+    });
+
+    onBeforeUnmount((): void => {
+      parentState.value.unregister(props.value);
+    });
+
+    return {
+      idWithFallback,
+      parentState,
+      onChange,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/form-fields';
+
+.c-radio {
+  align-items: center;
+  background-color: $color-background;
+  border: $border;
+  border-radius: $border-radius-next;
+  cursor: pointer;
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  transition: border-color $citrus-field-transition-duration ease;
+  width: 100%;
+}
+
+.c-radio__input {
+  accent-color: $color-black;
+  background-color: $color-black;
+  border: $color-gray-300 solid $border-width;
+  border-color: $color-black;
+  margin-top: 1px;
+  transform: scale(1.5);
+}
+
+.c-radio__label {
+  padding: 0 12px;
+  width: 100%;
+}
+
+.c-radio--checked {
+  border-color: $color-black;
+}
+
+.c-radio--invalid {
+  border-color: $color-status-error;
+}
+
+.c-radio--invalid .c-radio__input {
+  accent-color: $color-status-error;
+  border-color: $color-status-error;
+}
+</style>