@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CListItemContent.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="c-list-item-content" data-test="list-item-content">
+    <slot>
+      <div
+        v-if="title || titleSlotHasContent"
+        class="c-list-item-content__title"
+        data-test="list-item-title"
+      >
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div
+        v-if="label || labelSlotHasContent"
+        class="c-list-item-content__label"
+        data-test="list-item-label"
+      >
+        <slot name="label">{{ label }}</slot>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+
+export default defineComponent({
+  name: 'CListItemContent',
+  props: {
+    title: { type: String, default: '' },
+    label: { type: String, default: '' },
+  },
+  setup() {
+    const titleSlotHasContent = useSlotHasContent('title');
+    const labelSlotHasContent = useSlotHasContent('label');
+
+    return { titleSlotHasContent, labelSlotHasContent };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-list-item-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.c-list-item-content__title {
+  @include subheadline;
+
+  align-items: center;
+  display: flex;
+
+  & + .c-list-item-content__label {
+    margin-top: 2px;
+  }
+}
+</style>

package/src/components/CListItemIcon.vue

@@ -1,43 +1,39 @@
 <template>
-  <v-list-item-icon
-    class="c-list-item__icon"
-    :class="{ 'c-list-item__icon--fixed-size': fixedSize }"
+  <CSquaredIcon
+    v-if="icon || iconSlotHasContent"
+    :icon="icon"
+    :color="iconColor"
+    class="c-list-item-icon"
   >
-    <slot>
-      <font-awesome-icon
-        v-if="icon"
-        data-test="list-item-icon"
-        :fixed-width="fixedSize"
-        :icon="icon"
-      />
-    </slot>
-  </v-list-item-icon>
+    <slot name="icon" />
+  </CSquaredIcon>
 </template>
 
 <script lang="ts">
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { defineComponent } from 'vue';
 
-@Component({ name: 'CListItemIcon', components: { FontAwesomeIcon } })
-export default class CListItemIcon extends Vue {
-  @Prop({ type: [String, Array, Object] }) icon?: IconDefinition;
-  @Prop({ type: Boolean, default: true }) fixedSize!: boolean;
-}
+import CSquaredIcon from '@propelinc/citrus-ui/src/components/CSquaredIcon.vue';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+
+export default defineComponent({
+  name: 'CListItemIcon',
+  components: { CSquaredIcon },
+  props: {
+    icon: CSquaredIcon.props.icon,
+    iconColor: CSquaredIcon.props.color,
+  },
+  setup() {
+    const iconSlotHasContent = useSlotHasContent('icon');
+
+    return { iconSlotHasContent };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
-
-.c-list-item__icon {
-  font-size: $font-size-icon-medium;
-}
+@import '@propelinc/citrus-ui/src/styles/core';
 
-.c-list-item__icon--fixed-size {
-  align-items: center;
-  display: flex;
-  height: 16px;
-  justify-content: center;
-  width: 20px;
+.c-list-item-icon {
+  flex: none;
 }
 </style>

package/src/components/CLoader.vue

@@ -0,0 +1,156 @@
+<template>
+  <span
+    :aria-label="accessibleText || $t('Loading...')"
+    class="c-loader"
+    :data-size="computedSize"
+    data-test="loader"
+    role="progressbar"
+    :style="{
+      '--indicator-color': indicatorColorCode,
+      '--loader-size': SIZE_TO_FONT_SIZE[computedSize],
+      '--track-color': trackColorCode,
+      '--track-width': SIZE_TO_TRACK_WIDTH[computedSize],
+    }"
+  >
+    <svg class="c-loader__svg">
+      <circle class="c-loader__track" />
+      <circle class="c-loader__indicator" />
+    </svg>
+  </span>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent } from 'vue';
+
+import Colors, { type HexColor, isValidColor } from '@propelinc/citrus-ui/src/colors/colors';
+import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+
+type Size = 'sm' | 'md' | 'lg';
+
+const SIZE_TO_FONT_SIZE: Record<Size, `${number}px`> = {
+  sm: '20px',
+  md: '26px',
+  lg: '32px',
+};
+
+const SIZE_TO_TRACK_WIDTH: Record<Size, `${number}px`> = {
+  sm: '2.5px',
+  md: '3px',
+  lg: '3px',
+};
+
+export default defineComponent({
+  props: {
+    /** Customizes screen reader only text alternative, should be translated */
+    accessibleText: { type: String, default: undefined },
+    /** Sets the color of the indicator of the loader */
+    color: {
+      type: String as PropType<HexColor | keyof typeof Colors>,
+      default: 'default',
+      validator: isValidColor,
+    },
+    /** @deprecated Shows a smaller version of the loading icon */
+    small: { type: Boolean, default: false },
+    /** Sets the size of the loader */
+    size: { type: String as PropType<Size>, default: 'lg' },
+    /** Sets the color of the track of the loader */
+    trackColor: {
+      type: String as PropType<HexColor | keyof typeof Colors>,
+      default: 'default',
+      validator: isValidColor,
+    },
+  },
+  setup(props) {
+    const computedColor = computed(() => {
+      return props.color === 'default' ? 'black' : props.color;
+    });
+
+    const computedTrackColor = computed(() => {
+      // If _any_ trackColor is provided, use that
+      if (props.trackColor !== 'default') {
+        return props.trackColor;
+      }
+
+      // trackColor is 'default', determine which default color it should use
+      if (props.color === 'white' || props.color === Colors.WHITE) {
+        return 'gray-500';
+      }
+
+      return 'gray-200';
+    });
+
+    const computedSize = computed((): Size => {
+      if (props.small) {
+        return 'sm';
+      }
+      return props.size;
+    });
+
+    const { cssColor: indicatorColorCode } = useCssColor(computedColor);
+    const { cssColor: trackColorCode } = useCssColor(computedTrackColor);
+
+    return {
+      computedSize,
+      indicatorColorCode,
+      SIZE_TO_FONT_SIZE,
+      SIZE_TO_TRACK_WIDTH,
+      trackColorCode,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.c-loader {
+  display: inline-flex;
+  font-size: var(--loader-size);
+  height: 1em;
+  width: 1em;
+
+  &__svg {
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: visible;
+    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 {
+    animation: spin 2000ms linear infinite;
+    stroke: var(--indicator-color);
+    stroke-dasharray: 150% 75%;
+    stroke-linecap: round;
+    transform-origin: 50% 50%;
+  }
+
+  &__track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  @keyframes spin {
+    0% {
+      stroke-dasharray: 0.05em 3em;
+      transform: rotate(0deg);
+    }
+
+    50% {
+      stroke-dasharray: 1.375em 1.375em;
+      transform: rotate(450deg);
+    }
+
+    100% {
+      stroke-dasharray: 0.05em 3em;
+      transform: rotate(1080deg);
+    }
+  }
+}
+</style>

package/src/components/CLogo.vue

@@ -0,0 +1,23 @@
+<template>
+  <img :src="src" :alt="$t('{appName}')" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+import propelIcon from '@propelinc/citrus-ui/src/assets/logos/propel/icon.svg';
+import propelLockup from '@propelinc/citrus-ui/src/assets/logos/propel/lockup.svg';
+
+export default defineComponent({
+  props: {
+    /** Show just the orange icon */
+    icon: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const src = computed(() => {
+      return props.icon ? propelIcon : propelLockup;
+    });
+    return { src };
+  },
+});
+</script>

package/src/components/CMaskedTextField.vue

@@ -0,0 +1,118 @@
+<template>
+  <CTextField
+    v-bind="$attrs"
+    :id="id"
+    ref="textField"
+    :data-test="dataTest"
+    :data-mask="mask"
+    :value="maskedValue"
+    :label="label"
+    :placeholder="placeholder"
+    :minlength="maskedMinLength !== null ? maskedMinLength : undefined"
+    :maxlength="maskedMaxLength !== null ? maskedMaxLength : undefined"
+    :rules="unmaskRules ? unmaskedRules : rules"
+    :counter="counter"
+    :counter-value="counterValue"
+    @keyup="$emit('keyup', $event)"
+    @keydown="$emit('keydown', $event)"
+    @keypress="$emit('keypress', $event)"
+    @blur="$emit('blur', $event)"
+    @focus="$emit('focus', $event)"
+    @change="$emit('change', $event)"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #prepend-inner>
+      <slot name="prepend-inner" />
+    </template>
+    <template #append>
+      <slot name="append" />
+    </template>
+    <template #message>
+      <slot name="message" />
+    </template>
+  </CTextField>
+</template>
+
+<script lang="ts">
+import type { MaskOptions, MaskTokens, MaskaDetail } from 'maska';
+import { type PropType, computed, defineComponent, ref, toRefs } from 'vue';
+
+import CTextField from '@propelinc/citrus-ui/src/components/CTextField.vue';
+import {
+  useInputMask,
+  useMaskedMaxLength,
+  useMaskedMinLength,
+} from '@propelinc/citrus-ui/src/composables/input-mask';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+
+export default defineComponent({
+  name: 'CMaskedTextField',
+  components: { CTextField },
+  props: {
+    counter: { type: Number as PropType<number | null>, default: null },
+    dataTest: { type: String, default: 'masked-text-field' },
+    id: { type: String, default: undefined },
+    label: { type: String as PropType<string | null>, default: null },
+    mask: {
+      type: [String, Array, Function] as PropType<MaskOptions['mask'] | null>,
+      required: true,
+    },
+    minlength: { type: [Number, String], default: null },
+    maxlength: { type: [Number, String], default: null },
+    placeholder: { type: String, default: undefined },
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    tokens: { type: Object as PropType<MaskTokens | null>, default: null },
+    unmaskRules: { type: Boolean, default: true },
+    value: { type: String, default: '' },
+  },
+  emits: ['keyup', 'keydown', 'keypress', 'input', 'focus', 'blur', 'change', 'input:masked'],
+  setup(props, { emit, expose }) {
+    const { minlength, maxlength, value } = toRefs(props);
+
+    const textField = ref<typeof CTextField | null>(null);
+    const input = computed(() => textField.value?.input);
+    const maskOptions = computed<MaskOptions>(() => {
+      return {
+        mask: props.mask,
+        tokens: {
+          // NOTE (ej): For the EBT Card Number we accept a mask 'N' from the server
+          // to hide all but the last 4 digits. e.g. XXXXXXXXXXXXXXX2114
+          N: { pattern: /[0-9X]/ },
+          ...props.tokens,
+        },
+        onMaska: (detail: MaskaDetail): void => {
+          emit('input', detail.unmasked);
+          emit('input:masked', detail.masked);
+        },
+      };
+    });
+
+    const { maskedValue, mask: inputMask, unmaskedValue } = useInputMask(input, value, maskOptions);
+    const maskedMinLength = useMaskedMinLength(minlength, value, maskOptions);
+    const maskedMaxLength = useMaskedMaxLength(maxlength, maskOptions);
+    const counterValue = computed<number>(() => unmaskedValue.value.length);
+
+    const unmaskedRules = computed<Rules<string>>(() => {
+      return props.rules.map((rule) => {
+        return (value): string | boolean => {
+          const unmaskedValue = inputMask.value?.unmasked(value) ?? value;
+          return rule(unmaskedValue);
+        };
+      });
+    });
+
+    expose({ input });
+
+    return {
+      counterValue,
+      maskedMinLength,
+      maskedMaxLength,
+      maskedValue,
+      textField,
+      unmaskedRules,
+    };
+  },
+});
+</script>

package/src/components/CMenu.vue

@@ -0,0 +1,24 @@
+<template>
+  <sl-menu class="c-menu pa-0 elevation-4" @sl-select="$emit('select', $event.detail.item)">
+    <slot />
+  </sl-menu>
+</template>
+
+<script lang="ts">
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import { defineComponent } from 'vue';
+export type { default as SlMenuItem } from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+
+export default defineComponent({
+  name: 'CMenu',
+  emits: ['select'],
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-menu {
+  --sl-panel-border-width: $border-width;
+}
+</style>

package/src/components/CMenuItem.vue

@@ -0,0 +1,106 @@
+<template>
+  <sl-menu-item
+    :type="checkable ? 'checkbox' : 'normal'"
+    :checked="checked"
+    class="menu-item"
+    :class="{ selectable }"
+    @click="onClick"
+  >
+    <div slot="prefix">
+      <slot name="prepend-inner">
+        <template v-if="checkable">
+          <CCheckbox
+            v-if="checkType === 'checkbox'"
+            :value="checked"
+            variant="minimal"
+            hide-details
+            aria-hidden="true"
+            class="checkbox mr-3"
+          />
+          <div v-else class="check-icon mr-3">
+            <FontAwesomeIcon v-if="checked" :icon="faCheck" />
+          </div>
+        </template>
+      </slot>
+    </div>
+    <slot />
+  </sl-menu-item>
+</template>
+
+<script lang="ts">
+import { faCheck } from '@fortawesome/pro-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { type PropType, defineComponent } from 'vue';
+
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import CCheckbox from '@propelinc/citrus-ui/src/components/CCheckbox.vue';
+
+export default defineComponent({
+  name: 'CMenuItem',
+  components: { CCheckbox, FontAwesomeIcon },
+  props: {
+    /** Controls whether the item has hover-state styles and responds to click events */
+    selectable: { type: Boolean, default: true },
+    /** Controls whether to enable and display a checked state */
+    checkable: { type: Boolean },
+    /** Reflects the item's checked state */
+    checked: { type: Boolean },
+    /** Controls what style of checking to apply, either a checkbox, or just a check icon */
+    checkType: { type: String as PropType<'checkbox' | 'icon'>, default: 'checkbox' },
+  },
+  setup(props) {
+    const onClick = (e: Event): void => {
+      if (!props.selectable) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    return { faCheck, onClick };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.menu-item {
+  &::part(base) {
+    @include body-emphasized;
+
+    --sl-spacing-x-small: 12px;
+
+    align-items: center;
+    background-color: $color-white;
+    color: $color-black;
+    cursor: initial;
+    padding: 12px 16px;
+  }
+
+  &.selectable::part(base):hover {
+    background-color: var(--sl-color-neutral-100);
+    color: var(--sl-color-neutral-1000);
+    cursor: pointer;
+  }
+
+  &::part(checked-icon) {
+    // Hide Shoelace's built-in checkmark, as it is not customizable and does not match our standard
+    // checkmark icon.
+    display: none;
+  }
+
+  &::part(submenu-icon) {
+    display: none;
+  }
+
+  .checkbox {
+    // We're using CCheckbox exclusively as a visual reflection of sl-menu-item's internal checked
+    // state, so it should not capture any mouse events.
+    pointer-events: none;
+  }
+
+  .check-icon {
+    width: 14px;
+  }
+}
+</style>

package/src/components/CMenuLabel.vue

@@ -0,0 +1,26 @@
+<template>
+  <sl-menu-label class="menu-label pt-3 px-4">
+    <slot />
+  </sl-menu-label>
+</template>
+
+<script lang="ts">
+import '@shoelace-style/shoelace/dist/components/menu-label/menu-label.js';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CMenuLabel',
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.menu-label {
+  &::part(base) {
+    @include eyebrow;
+
+    padding: 0;
+  }
+}
+</style>