@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CAccordionItem.vue

@@ -1,60 +1,133 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
 <template>
-  <v-expansion-panel :data-test="dataTest" class="c-accordion-item">
-    <v-expansion-panel-header
-      :data-test="`${dataTest}-header`"
-      class="c-accordion-item__header"
-      :expand-icon="null"
-    >
-      <template #default="{ open }">
-        <div class="c-accordion-item__header__content">
-          <slot name="header" :open="open" />
-        </div>
-
-        <font-awesome-icon
-          :data-test="`${dataTest}-icon`"
-          class="c-accordion-item__header__icon"
-          :icon="open ? faMinus : faPlus"
-        />
-      </template>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content class="c-accordion-item__content" :data-test="`${dataTest}-content`">
+  <sl-details
+    ref="details"
+    data-test="accordion-item"
+    data-accordion-item
+    class="c-accordion-item"
+    :class="{ 'c-accordion-item--fluid': injectedOrPropFluid }"
+    :open="internalValue || undefined"
+    @sl-show="onChange(true)"
+    @sl-hide.stop="onChange(false)"
+  >
+    <FontAwesomeIcon slot="expand-icon" :icon="faChevronDown" />
+    <FontAwesomeIcon slot="collapse-icon" :icon="faChevronDown" />
+    <div slot="summary" class="c-accordion-item__header" data-test="accordion-item-header">
+      <slot name="header" />
+    </div>
+    <div data-test="accordion-item-content" class="c-accordion-item__content">
       <slot />
-    </v-expansion-panel-content>
-  </v-expansion-panel>
+    </div>
+  </sl-details>
 </template>
 
 <script lang="ts">
-import { faPlus, faMinus } 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 '@shoelace-style/shoelace/dist/components/details/details';
+import type SlDetails from '@shoelace-style/shoelace/dist/components/details/details';
+import type { PropType } from 'vue';
+import { computed, defineComponent, inject, ref } from 'vue';
 
-@Component({ name: 'CAccordionItem', components: { FontAwesomeIcon } })
-export default class CAccordionItem extends Vue {
-  faPlus = faPlus;
-  faMinus = faMinus;
+import { useShoelaceAnimation } from '@propelinc/citrus-ui/src/composables/animation';
+import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
+import { FLUID, ON_TOGGLE } from '@propelinc/citrus-ui/src/services/injections/accordions';
 
-  @Prop({ type: String, default: 'accordion-item' }) dataTest!: string;
-}
+export default defineComponent({
+  name: 'CAccordionItem',
+  components: { FontAwesomeIcon },
+  props: {
+    /** Controls whether the item is open */
+    value: { type: Boolean, default: false },
+    /** Removes horizontal padding from the content */
+    fluid: { type: Boolean as PropType<boolean | null>, default: null },
+  },
+  emits: ['input'],
+  setup(props, { emit }) {
+    const details = ref<SlDetails | null>(null);
+    useShoelaceAnimation(details, 'details.show', {
+      keyframes: [{ height: '0' }, { height: 'auto' }],
+      options: { duration: 200, easing: 'ease' },
+    });
+    useShoelaceAnimation(details, 'details.hide', {
+      keyframes: [{ height: 'auto' }, { height: '0' }],
+      options: { duration: 200, easing: 'ease' },
+    });
+
+    const fluid = inject(FLUID, ref(false));
+    const injectedOrPropFluid = computed(() => {
+      return props.fluid !== null ? props.fluid : (fluid.value ?? false);
+    });
+
+    const value = computed(() => props.value);
+    const internalValue = useInternalValue(value, { onChange: (value) => emit('input', value) });
+
+    const injectedToggleItem = inject(ON_TOGGLE, undefined);
+    const onChange = (value: boolean): void => {
+      internalValue.value = value;
+      injectedToggleItem?.();
+      emit('input', value);
+    };
+
+    return {
+      internalValue,
+      faChevronDown,
+      details,
+      injectedOrPropFluid,
+      onChange,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
 
 .c-accordion-item {
-  background: transparent !important;
+  &::part(base) {
+    background: transparent;
+    border: none;
+  }
+
+  &::part(header) {
+    padding: 16px;
+  }
+
+  &::part(summary) {
+    @include subheadline;
+
+    padding-right: 16px;
+  }
+
+  &::part(summary-icon) {
+    rotate: 0;
+    transition-duration: 200ms;
+  }
+
+  &[open]::part(summary-icon) {
+    rotate: 180deg;
+  }
+
+  &::part(content) {
+    padding: 0 16px 16px;
+  }
 
   & + & {
     border-top: $border;
   }
 }
 
+.c-accordion-item--fluid {
+  &::part(content) {
+    padding: 0;
+  }
+}
+
 .c-accordion-item__header {
-  font-weight: $font-weight-bold;
+  width: 100%;
 }
 
-.c-accordion-item__header__icon {
-  color: $color-accent-blue;
-  flex: none;
-  margin-left: 12px;
+.c-accordion-item__content {
+  box-sizing: border-box;
 }
 </style>

package/src/components/CAppBar.vue

@@ -0,0 +1,237 @@
+<template>
+  <header
+    data-test="app-bar"
+    class="c-app-bar"
+    :class="{
+      'c-app-bar--fixed': fixed,
+      'c-app-bar--border': border,
+    }"
+    :style="{
+      '--c-app-bar-background-color': bgCssColor,
+      '--c-app-bar-color': textCssColor,
+    }"
+    :data-background-color="bgCssColor"
+    :data-color="textCssColor"
+  >
+    <div class="c-app-bar__left" data-test="app-bar-left">
+      <slot name="left" />
+    </div>
+
+    <div data-test="app-bar-title" class="c-app-bar__title">
+      <CFadeTransition>
+        <CLoader
+          v-if="loading"
+          key="loader"
+          data-test="app-bar-loader"
+          class="c-app-bar__loader"
+          small
+          :color="textCssColor"
+          :accessible-text="loaderAccessibleText"
+        />
+        <h1
+          v-else-if="!loading && title"
+          key="title"
+          class="c-app-bar__title-content"
+          data-test="app-bar-title-text"
+        >
+          {{ title }}
+        </h1>
+        <div v-else key="slot" class="c-app-bar__title-content">
+          <slot name="title" />
+        </div>
+      </CFadeTransition>
+    </div>
+
+    <div class="c-app-bar__right" data-test="app-bar-right">
+      <slot name="right" />
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { computed, defineComponent, provide, ref } from 'vue';
+
+import type { HexColor } from '@propelinc/citrus-ui/src/colors/colors';
+import Colors, {
+  isHexColor,
+  isRgbaColor,
+  isValidColor,
+} from '@propelinc/citrus-ui/src/colors/colors';
+import CFadeTransition from '@propelinc/citrus-ui/src/components/CFadeTransition.vue';
+import CLoader from '@propelinc/citrus-ui/src/components/CLoader.vue';
+import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+import {
+  INHERIT_COLOR as INHERIT_COLOR_ICON_BUTTON,
+  TERTIARY as TERTIARY_ICON_BUTTON,
+} from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
+
+export default defineComponent({
+  components: { CLoader, CFadeTransition },
+  props: {
+    /**
+     * Used to set the background color of the app bar. Needs to accept either a hex code or a
+     * a valid color key from the Colors object.
+     */
+    backgroundColor: {
+      type: String as PropType<HexColor | keyof typeof Colors>,
+      default: 'default',
+      validator: isValidColor,
+    },
+    color: {
+      type: String as PropType<HexColor | keyof typeof Colors>,
+      default: undefined,
+      validator: isValidColor,
+    },
+    /** If true, the app bar will be fixed to the top of the viewport. */
+    fixed: { type: Boolean, default: false },
+    /** If true, the app bar will have a bottom border. */
+    border: { type: Boolean, default: false },
+    /** Shows text in the center of the component. Typically used for page names. Overrides the title slot. */
+    title: { type: String, default: '' },
+    /** Shows a loading spinner. Overrides the title slot.  */
+    loading: { type: Boolean, default: false },
+    /** Adds screen reader only text alternative to loading icon, text should be translated */
+    loaderAccessibleText: { type: String, default: '' },
+  },
+  setup(props) {
+    provide(TERTIARY_ICON_BUTTON, ref(true));
+    provide(INHERIT_COLOR_ICON_BUTTON, ref(true));
+
+    const initialBackgroundColor = computed(() => {
+      if (props.backgroundColor === 'default') {
+        return Colors.WHITE;
+      }
+
+      return props.backgroundColor;
+    });
+
+    const { cssColor: bgCssColor } = useCssColor(initialBackgroundColor);
+
+    /**
+     * This text color is computed based on the background color's luminance.
+     * Dark backgrounds get white text, light backgrounds get black text.
+     * Supports both hex and rgba (e.g. gray palette); rgba is composited over white for luminance.
+     *
+     * This is overridden by the `color` prop.
+     */
+    const calculatedTextColor = computed(() => {
+      const color = bgCssColor.value;
+      if (!color) {
+        return Colors.BLACK;
+      }
+
+      let r: number;
+      let g: number;
+      let b: number;
+
+      if (isHexColor(color)) {
+        const hex = color.substring(1);
+        const fullHex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
+        r = parseInt(fullHex.substring(0, 2), 16) / 255;
+        g = parseInt(fullHex.substring(2, 4), 16) / 255;
+        b = parseInt(fullHex.substring(4, 6), 16) / 255;
+      } else if (isRgbaColor(color)) {
+        const match = color.match(
+          /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([\d.]+)\s*\)$/i
+        );
+        if (!match) {
+          return Colors.BLACK;
+        }
+        const ra = Number(match[1]) / 255;
+        const ga = Number(match[2]) / 255;
+        const ba = Number(match[3]) / 255;
+        const a = Number(match[4]);
+        // Composite over white to get effective RGB for luminance
+        r = ra * a + (1 - a);
+        g = ga * a + (1 - a);
+        b = ba * a + (1 - a);
+      } else {
+        return Colors.BLACK;
+      }
+
+      // Calculate relative luminance using sRGB coefficients
+      const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+      // Use white text if background is dark enough (luminance < 0.5)
+      return luminance < 0.5 ? Colors.WHITE : Colors.BLACK;
+    });
+
+    const { cssColor: userTextCssColor } = useCssColor(() => props.color);
+
+    const textCssColor = computed(() => {
+      if (userTextCssColor.value) {
+        return userTextCssColor.value;
+      }
+
+      return calculatedTextColor.value;
+    });
+
+    return { bgCssColor, textCssColor };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/typography';
+
+@mixin app-bar-button-container {
+  align-items: center;
+  display: flex;
+  flex: none;
+  min-width: $button-size-medium;
+}
+
+.c-app-bar {
+  align-items: center;
+  background-color: var(--c-app-bar-background-color);
+  color: var(--c-app-bar-color);
+  display: flex;
+  gap: 8px;
+  height: $app-bar-height;
+  padding: 0 8px;
+}
+
+.c-app-bar--fixed {
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: env(safe-area-inset-top);
+  z-index: 5;
+}
+
+.c-app-bar--border {
+  border-bottom: $border;
+}
+
+.c-app-bar__left {
+  @include app-bar-button-container;
+
+  justify-content: flex-start;
+}
+
+.c-app-bar__right {
+  @include app-bar-button-container;
+
+  justify-content: flex-end;
+}
+
+.c-app-bar__title {
+  @include subheadline;
+
+  flex: auto;
+  overflow: hidden;
+  text-align: center;
+}
+
+.c-app-bar__loader {
+  // Vertically center the loader
+  transform: translateY(3px);
+}
+
+.c-app-bar__title-content {
+  @include subheadline;
+  @include text-overflow-ellipsis;
+}
+</style>

package/src/components/CBadge.vue

@@ -0,0 +1,74 @@
+<template>
+  <span
+    class="c-badge"
+    :data-test="dataTest"
+    :data-color="color"
+    :data-text-color="textColor"
+    :style="computedStyle"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </span>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+
+export default defineComponent({
+  props: {
+    /** Sets the text of the badge, can also use default slot */
+    text: { type: String, default: undefined },
+    /** Adds a unique data-test attribute for testing to the container */
+    dataTest: { type: String, default: 'badge' },
+    /** Sets the background color */
+    color: { type: String, default: 'purple-200' },
+    /** Sets the text color */
+    textColor: { type: String, default: 'text-primary' },
+  },
+  setup(props) {
+    const { cssColor: backgroundCssColor } = useCssColor(() => props.color);
+    const { cssColor: textCssColor } = useCssColor(() => props.textColor);
+
+    const computedStyle = computed(() => {
+      const style: Record<string, string> = {};
+
+      if (backgroundCssColor.value) {
+        style['--c-badge-background-color'] = backgroundCssColor.value;
+      }
+
+      if (textCssColor.value) {
+        style['--c-badge-text-color'] = textCssColor.value;
+      }
+
+      return style;
+    });
+
+    return { computedStyle };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+
+.c-badge {
+  --height: 24px;
+
+  @include eyebrow;
+
+  background-color: var(--c-badge-background-color);
+  border: none;
+  border-radius: 4px;
+  color: var(--c-badge-text-color);
+  display: inline-block;
+  height: var(--height);
+
+  // Override the line-height of the eyebrow mixin so the text is vertically centered
+  line-height: var(--height);
+  padding-inline: 12px;
+  white-space: nowrap;
+}
+</style>