@propelinc/citrus-ui 1.3.1 → 2.0.0

package/src/components/CLoader.vue

@@ -24,7 +24,7 @@ import { computed } from 'vue';
 
 import type { HexColor } from '@propelinc/citrus-ui/src/colors/colors';
 import Colors from '@propelinc/citrus-ui/src/colors/colors';
-import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+import { usePaletteColor } from '@propelinc/citrus-ui/src/composables/colors';
 
 type Size = 'sm' | 'md' | 'lg';
 
@@ -87,8 +87,8 @@ const computedSize = computed((): Size => {
   return props.size;
 });
 
-const { cssColor: indicatorColorCode } = useCssColor(computedColor);
-const { cssColor: trackColorCode } = useCssColor(computedTrackColor);
+const { cssColor: indicatorColorCode } = usePaletteColor(computedColor);
+const { cssColor: trackColorCode } = usePaletteColor(computedTrackColor);
 </script>
 
 <style lang="scss" scoped>

package/src/components/CMaskedTextField.vue

@@ -53,10 +53,10 @@ const props = withDefaults(
     counter?: number | null;
     dataTest?: string;
     id?: string;
-    label?: string | null;
+    label?: string;
     mask: MaskOptions['mask'] | null;
-    minlength?: number | string | null;
-    maxlength?: number | string | null;
+    minlength?: number | string;
+    maxlength?: number | string;
     placeholder?: string;
     rules?: Rules<string>;
     tokens?: MaskTokens | null;
@@ -66,11 +66,6 @@ const props = withDefaults(
   {
     counter: null,
     dataTest: 'masked-text-field',
-    id: undefined,
-    label: null,
-    minlength: null,
-    maxlength: null,
-    placeholder: undefined,
     rules: () => [],
     tokens: null,
     unmaskRules: true,
@@ -96,7 +91,7 @@ defineSlots<{
   'message'?: () => VNode[];
 }>();
 
-const { minlength, maxlength, value } = toRefs(props);
+const { maxlength, minlength, value } = toRefs(props);
 
 const textField = ref<InstanceType<typeof CTextField> | null>(null);
 const input = computed(() => textField.value?.input ?? null);

package/src/components/CNotification.vue

@@ -33,6 +33,7 @@
 
     <CButton
       v-if="hasButton"
+      block
       data-test="notification-button"
       class="c-notification__button"
       :loading="buttonLoading"

package/src/components/CProgressRing.vue

@@ -31,7 +31,7 @@ import type { VNode } from 'vue';
 
 import type Colors from '@propelinc/citrus-ui/src/colors/colors';
 import type { HexColor } from '@propelinc/citrus-ui/src/colors/colors';
-import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+import { usePaletteColor } from '@propelinc/citrus-ui/src/composables/colors';
 
 const props = withDefaults(
   defineProps<{
@@ -53,7 +53,6 @@ const props = withDefaults(
     trackColor?: HexColor | keyof typeof Colors;
   }>(),
   {
-    accessibleText: undefined,
     dataTest: 'c-progress-ring',
     value: 0,
     valueMax: 100,
@@ -68,8 +67,8 @@ defineSlots<{
   default?: () => VNode[];
 }>();
 
-const { cssColor } = useCssColor(() => props.color);
-const { cssColor: trackCssColor } = useCssColor(() => props.trackColor);
+const { cssColor } = usePaletteColor(() => props.color);
+const { cssColor: trackCssColor } = usePaletteColor(() => props.trackColor);
 
 const percentage = computed(() => (100 * Number(props.value)) / Number(props.valueMax));
 </script>

package/src/components/CSelect.vue

@@ -120,16 +120,12 @@ const props = withDefaults(
     value?: string;
   }>(),
   {
-    ariaLabel: undefined,
     dataTest: 'select',
     disabled: false,
     hideDetails: false,
     hideLabel: false,
-    id: undefined,
     items: () => [],
-    label: undefined,
     loading: false,
-    placeholder: undefined,
     required: false,
     rules: () => [],
     value: '',

package/src/components/CSkeleton.vue

@@ -21,10 +21,17 @@
 
 <template>
   <div class="c-skeleton" data-test="skeleton">
-    <div class="c-skeleton__indicator" />
+    <div class="c-skeleton__indicator" :class="{ 'c-skeleton__indicator--squared': squared }" />
   </div>
 </template>
 
+<script setup lang="ts">
+defineProps<{
+  /** Toggles a squared-off card style intended to fill the width of the page */
+  squared?: boolean;
+}>();
+</script>
+
 <style lang="scss" scoped>
 @import '@propelinc/citrus-ui/src/styles/core';
 
@@ -51,6 +58,10 @@
   background-size: 400% 100%;
   border-radius: $border-radius-next;
   flex: 1 1 auto;
+
+  &--squared {
+    border-radius: 0;
+  }
 }
 
 @keyframes sheen {

package/src/components/CSkeletonLoaderCard.vue

@@ -4,7 +4,7 @@
     data-test="skeleton-loader-card"
     :style="{ height: `${height}px` }"
   >
-    <CSkeleton />
+    <CSkeleton :squared="tile" />
   </div>
 </template>
 
@@ -15,9 +15,12 @@ withDefaults(
   defineProps<{
     /** Controls the height of the skeleton loader card */
     height?: number | string;
+    /** Toggles a squared-off card style intended to fill the width of the page */
+    tile?: boolean;
   }>(),
   {
     height: 100,
+    tile: false,
   }
 );
 </script>

package/src/components/CSkeletonLoaderText.vue

@@ -81,13 +81,13 @@ const lineTypeClass = computed(() => {
 // NOTE(mohan): This ensures that the skeleton loader text is exactly the same size as the text it
 // is replacing including the extra space around the text itself added by the line height.
 @mixin skeleton-loader-text-sizing($font-style) {
-  font-size: map-get($font-style, 'size');
-  line-height: map-get($font-style, 'line-height');
+  font-size: map.get($font-style, 'size');
+  line-height: map.get($font-style, 'line-height');
 
   // By applying a height equal to the font size, the skeleton takes up the space of the text,
   // leaving whitespace between each row
   .c-skeleton-loader-text__line__skeleton {
-    height: map-get($font-style, 'size');
+    height: map.get($font-style, 'size');
   }
 }
 

package/src/components/CSplitInput.vue

@@ -46,7 +46,7 @@ const props = withDefaults(
     /** A hint to show the appropriate virtual keyboard, e.g. "numeric". */
     inputmode?: HTMLAttributes['inputmode'];
     /** The input's label */
-    label?: string | null;
+    label?: string;
     /** The input's name */
     name?: string;
     /** Validation rules */
@@ -57,12 +57,8 @@ const props = withDefaults(
     value?: string;
   }>(),
   {
-    autocomplete: undefined,
     dataTest: 'split-input',
     disabled: false,
-    inputmode: undefined,
-    label: null,
-    name: undefined,
     rules: () => [],
     type: 'text',
     value: '',

package/src/components/CSquaredIcon.vue

@@ -19,7 +19,7 @@ import { FontAwesomeIcon as FontAwesomeIconComponent } from '@fortawesome/vue-fo
 import type { Component, VNode } from 'vue';
 import { computed, onMounted } from 'vue';
 
-import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+import { usePaletteColor } from '@propelinc/citrus-ui/src/composables/colors';
 import type { FaIconArray } from '@propelinc/citrus-ui/src/types/font-awesome';
 
 // FontAwesomeIcon's prop types produce a union too complex for TypeScript to resolve
@@ -57,7 +57,7 @@ onMounted(() => {
   }
 });
 
-const { cssColor } = useCssColor(() => props.color);
+const { cssColor } = usePaletteColor(() => props.color);
 
 const useWhiteIcon = computed(() => props.color === 'black');
 </script>

package/src/components/CSsnField.vue

@@ -50,15 +50,13 @@ const props = withDefaults(
   defineProps<{
     dataTest?: string;
     id?: string;
-    label?: string | null;
+    label?: string;
     rules?: Rules<string>;
     value?: string;
     fourDigitSsn?: boolean;
   }>(),
   {
     dataTest: 'ssn-field',
-    id: undefined,
-    label: null,
     rules: (): Rules<string> => [],
     value: '',
     fourDigitSsn: false,

package/src/components/CSwitchListItem.vue

@@ -49,7 +49,7 @@ withDefaults(
     /** Prevents the user from interacting with the switch */
     disabled?: boolean;
     /** Font Awesome icon to render on the left side of the component */
-    icon?: string | string[] | IconDefinition | null;
+    icon?: string | string[] | IconDefinition;
     /** Color of the icon background */
     iconColor?: string;
     /** Plain body copy. Overridden by the default slot. */
@@ -62,10 +62,7 @@ withDefaults(
   {
     align: 'center',
     disabled: false,
-    icon: null,
     iconColor: 'gray-100',
-    label: undefined,
-    title: undefined,
     value: false,
   }
 );

package/src/components/CTextArea.vue

@@ -91,7 +91,7 @@ const props = withDefaults(
      * Overrides the default validation message. If provided, this error message will always
      * be shown, regardless of any other failing validation rules.
      */
-    errorMessage?: string | null;
+    errorMessage?: string;
     /** Hides the label and instead labels the field with `aria-label` */
     hideLabel?: boolean;
     /**
@@ -100,9 +100,9 @@ const props = withDefaults(
      */
     hideDetails?: boolean | 'auto';
     /** The textarea element's id */
-    id?: string | null;
+    id?: string;
     /** The textarea's label, both visual and screenreader-only */
-    label?: string | null;
+    label?: string;
     /** Sets the maxlength attribute of the textarea */
     maxlength?: number;
     /** The textarea's placeholder */
@@ -124,13 +124,8 @@ const props = withDefaults(
     counterValue: null,
     dataTest: 'text-area',
     disabled: false,
-    errorMessage: null,
     hideDetails: false,
     hideLabel: false,
-    id: null,
-    label: null,
-    maxlength: undefined,
-    placeholder: '',
     required: false,
     rules: () => [],
     value: '',

package/src/components/CTextField.vue

@@ -158,9 +158,9 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(
   defineProps<{
-    id?: string | null;
-    label?: string | null;
-    ariaLabel?: string | null;
+    id?: string;
+    label?: string;
+    ariaLabel?: string;
     placeholder?: string;
     type?:
       | 'text'
@@ -195,16 +195,9 @@ const props = withDefaults(
     errorMessage?: string;
   }>(),
   {
-    id: null,
-    label: null,
-    ariaLabel: null,
-    placeholder: '',
     type: 'text',
     clearable: false,
     size: 'medium',
-    inputmode: undefined,
-    minlength: undefined,
-    maxlength: undefined,
     disabled: false,
     hideable: false,
     hideLabel: false,
@@ -216,7 +209,6 @@ const props = withDefaults(
     rules: () => [],
     validateOnBlur: true,
     required: false,
-    errorMessage: undefined,
   }
 );
 

package/src/components/CTextLink.vue

@@ -32,9 +32,6 @@ const props = withDefaults(
     underline?: boolean;
   }>(),
   {
-    to: undefined,
-    href: undefined,
-    target: undefined,
     underline: true,
   }
 );

package/src/components/CToast.vue

@@ -10,7 +10,7 @@
     :duration="duration"
     :style="{ '--toast-base-transform': transform }"
     @sl-hide="onHide"
-    @sl-after-hide="resetAnimation"
+    @sl-after-hide="onAfterHide"
   >
     <div class="flex-grow-1 d-flex flex-row align-center gap-4">
       <slot name="icon">
@@ -138,7 +138,6 @@ const show = async (): Promise<void> => {
 const onHide = (): void => {
   isOpen.value = false;
   emit('input', false);
-  emit('hide');
 };
 
 const close = async (): Promise<void> => {
@@ -175,8 +174,9 @@ const icon = computed(() => {
 const alertHideAnimation = ref<ElementAnimation | 'default'>('default');
 useShoelaceAnimation(alert, 'alert.hide', alertHideAnimation);
 
-const resetAnimation = (): void => {
+const onAfterHide = (): void => {
   alertHideAnimation.value = 'default';
+  emit('hide');
 };
 
 const { base } = useShoelaceShadowParts(alert, ['base']);

package/src/components/CToastsList.vue

@@ -6,6 +6,7 @@
     :data-test="toast.dataTest || 'c-toast'"
     :message="toast.message"
     :variant="toast.variant"
+    :dismissible="toast.dismissible"
     @hide="dismissToast(toast.id)"
   />
 </template>

package/src/components/CZipcodeField.vue

@@ -43,16 +43,14 @@ const props = withDefaults(
   defineProps<{
     dataTest?: string;
     id?: string;
-    label?: string | null;
-    placeholder?: string | null;
+    label?: string;
+    placeholder?: string;
     rules?: Rules<string>;
     value?: string;
   }>(),
   {
     dataTest: 'zipcode-field',
     id: undefined,
-    label: null,
-    placeholder: null,
     rules: (): Rules<string> => [],
     value: '',
   }

package/src/components/index.ts

@@ -9,7 +9,6 @@ export { default as CCardFooter } from '@propelinc/citrus-ui/src/components/CCar
 export { default as CCardHeader } from '@propelinc/citrus-ui/src/components/CCardHeader.vue';
 export { default as CCardSection } from '@propelinc/citrus-ui/src/components/CCardSection.vue';
 export { default as CCheckbox } from '@propelinc/citrus-ui/src/components/CCheckbox.vue';
-export { default as CCol } from '@propelinc/citrus-ui/src/components/CCol.vue';
 export { default as CDivider } from '@propelinc/citrus-ui/src/components/CDivider.vue';
 export { default as CDobField } from '@propelinc/citrus-ui/src/components/CDobField.vue';
 export { default as CDobSelect } from '@propelinc/citrus-ui/src/components/CDobSelect.vue';
@@ -41,7 +40,6 @@ export { default as CProgressRing } from '@propelinc/citrus-ui/src/components/CP
 export { default as CRadio } from '@propelinc/citrus-ui/src/components/CRadio.vue';
 export { default as CRadioGroup } from '@propelinc/citrus-ui/src/components/CRadioGroup.vue';
 export { default as CRebrand } from '@propelinc/citrus-ui/src/components/CRebrand.vue';
-export { default as CRow } from '@propelinc/citrus-ui/src/components/CRow.vue';
 export { default as CSafeArea } from '@propelinc/citrus-ui/src/components/CSafeArea.vue';
 export { default as CSectionHeader } from '@propelinc/citrus-ui/src/components/CSectionHeader.vue';
 export { default as CSelect } from '@propelinc/citrus-ui/src/components/CSelect.vue';

package/src/composables/colors.ts

@@ -3,20 +3,23 @@ import { computed, toValue } from 'vue';
 
 import Colors, {
   type CssColor,
+  type RgbaColor,
   isColorKey,
   isCssColor,
+  isPaletteRgba,
 } from '@propelinc/citrus-ui/src/colors/colors';
 
 /**
  * Maps from a color name or hex code to its corresponding CSS color value.
  * Gray neutrals resolve to rgba(); other palette colors are hex.
+ * Can also accept a palette color converted to rgba for transparency via `withAlpha`.
  *
  * @param name - The color to resolve. Can be in kebab case, SCREAMING_SNAKE_CASE, or a hex code from the palette.
  * @returns The CSS color value (hex or rgba) and whether the color is valid.
  */
-export function useCssColor(name: MaybeRefOrGetter<string | undefined>): {
+export function usePaletteColor(name: MaybeRefOrGetter<string | undefined>): {
   cssColor: Ref<CssColor | undefined>;
-  isValidColor: Ref<boolean>;
+  isPaletteColor: Ref<boolean>;
 } {
   const normalizedColor = computed(() =>
     isCssColor(toValue(name)) ? (toValue(name)?.toLowerCase() as CssColor) : undefined
@@ -48,12 +51,17 @@ export function useCssColor(name: MaybeRefOrGetter<string | undefined>): {
       return normalizedColor.value;
     }
 
+    // If we're given a palette rgba (transparent variant via withAlpha), return it as-is
+    if (isPaletteRgba(toValue(name))) {
+      return toValue(name) as RgbaColor;
+    }
+
     return undefined;
   });
 
-  const isValidColor = computed(() => {
+  const isPaletteColor = computed(() => {
     return cssColor.value !== undefined;
   });
 
-  return { cssColor, isValidColor };
+  return { cssColor, isPaletteColor };
 }

package/src/composables/input-mask.ts

@@ -3,8 +3,8 @@ import { type Ref, computed, watch } from 'vue';
 
 import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
 
-const toNumber = (value: number | string | null): number | null => {
-  if (value === null || value === '') {
+const toNumber = (value: number | string | null | undefined): number | null => {
+  if (value === null || value === undefined || value === '') {
     return null;
   } else if (typeof value === 'number') {
     return value;
@@ -68,7 +68,7 @@ export function useInputMask(
 }
 
 export function useMaskedMinLength(
-  minlength: Ref<number | string | null>,
+  minlength: Ref<number | string | undefined>,
   value: Ref<string>,
   options: Ref<MaskOptions>
 ): Ref<number | null> {
@@ -122,7 +122,7 @@ export function useMaskedMinLength(
 }
 
 export function useMaskedMaxLength(
-  maxlength: Ref<number | string | null>,
+  maxlength: Ref<number | string | undefined>,
   options: Ref<MaskOptions>
 ): Ref<number | null> {
   return computed(() => {

package/src/composables/toast.ts

@@ -10,6 +10,7 @@ export interface Toast {
   dataTest?: string;
   message: string;
   variant: ToastVariant;
+  dismissible?: boolean;
 }
 
 interface ToastInjection {

package/src/styles/_core.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 // ****************************************************************************
 // This file contains our Citrus-specific Sass variables. These are intended to
 // be used to style Citrus and imported into stylesheets in freshebt-vue
@@ -185,7 +187,7 @@ $large-headline: (
   'font-family': var(--font-family-headline, #{$font-family-base}),
   'size': $font-size-2x-large,
   'weight': $font-weight-semibold,
-  'line-height': $line-height-small,
+  'line-height': $line-height-medium,
   'letter-spacing': $letter-spacing-tighten-medium,
 );
 
@@ -211,14 +213,14 @@ $body: (
   'letter-spacing': $letter-spacing-extend-small,
 );
 
-$body-emphasized: map-merge(
+$body-emphasized: map.merge(
   $body,
   (
     'weight': $font-weight-emphasized,
   )
 );
 
-$statement: map-merge(
+$statement: map.merge(
   $body,
   (
     'line-height': 100%,
@@ -239,7 +241,7 @@ $caption-small: (
   'letter-spacing': $letter-spacing-extend-small,
 );
 
-$caption-emphasized: map-merge(
+$caption-emphasized: map.merge(
   $caption,
   (
     'weight': $font-weight-emphasized,
@@ -262,12 +264,12 @@ $eyebrow: (
 );
 
 @mixin create-type-mixin($type-style) {
-  font-family: map-get($type-style, 'font-family');
-  font-size: map-get($type-style, 'size');
-  font-weight: map-get($type-style, 'weight');
-  letter-spacing: map-get($type-style, 'letter-spacing');
-  line-height: map-get($type-style, 'line-height');
-  text-transform: map-get($type-style, 'text-transform');
+  font-family: map.get($type-style, 'font-family');
+  font-size: map.get($type-style, 'size');
+  font-weight: map.get($type-style, 'weight');
+  letter-spacing: map.get($type-style, 'letter-spacing');
+  line-height: map.get($type-style, 'line-height');
+  text-transform: map.get($type-style, 'text-transform');
 }
 
 @mixin balance {

package/src/styles/_typography.scss

@@ -62,6 +62,10 @@ body {
   @include caption;
 }
 
+.wallet-caption {
+  @include wallet-caption;
+}
+
 .caption-small {
   @include caption-small;
 }

package/src/styles/layer-order.css

@@ -0,0 +1 @@
+@layer reset, base, components, utilities;

package/src/styles/tailwind.css

@@ -0,0 +1,3 @@
+@import '@propelinc/propel-tailwind/src/tailwind.css';
+@source "../components";
+@source "../../stories/";