@propelinc/citrus-ui 1.4.0 → 2.0.0

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/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/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

@@ -187,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,
 );
 

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/";

package/dist/components/CCol.vue.d.ts

@@ -1,30 +0,0 @@
-import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type Cols = 'auto' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-type __VLS_Props = {
-    /**
-     * Sets the default number of columns the component extends.
-     * Available options are: 1 -> 12 and auto.
-     */
-    cols?: Cols | null;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default?: () => VNode[];
-    }> & {
-        default?: () => VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    cols: Cols | null;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/CRow.vue.d.ts

@@ -1,41 +0,0 @@
-import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    /** Applies the align-items css property.
-     * Available options are: start, center, end and stretch. */
-    align?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /** Applies the align-content css property.
-     * Available options are: start, center, end, and stretch. */
-    alignContent?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /**  Reduces the gutter between c-cols. */
-    dense?: boolean;
-    /** Removes the gutter between c-cols. */
-    noGutters?: boolean;
-    /** Applies the justify-content css property.
-     * Available options are: start, center, end, space-between and space-around. */
-    justify?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | null;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        default?: () => VNode[];
-    }> & {
-        default?: () => VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    align: "center" | "start" | "end" | "stretch" | null;
-    alignContent: "center" | "start" | "end" | "stretch" | null;
-    dense: boolean;
-    noGutters: boolean;
-    justify: "center" | "start" | "end" | "space-between" | "space-around" | null;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/components/CCol.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="c-col" :class="{ [`c-col-${cols}`]: cols }">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { VNode } from 'vue';
-
-type Cols = 'auto' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-
-withDefaults(
-  defineProps<{
-    /**
-     * Sets the default number of columns the component extends.
-     * Available options are: 1 -> 12 and auto.
-     */
-    cols?: Cols | null;
-  }>(),
-  {
-    cols: null,
-  }
-);
-
-defineSlots<{
-  default?: () => VNode[];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.c-col {
-  flex-basis: 0;
-  flex-grow: 1;
-  max-width: 100%;
-
-  &:not(.c-col-auto) {
-    padding: 12px;
-    width: 100%;
-  }
-}
-
-.c-col-auto {
-  flex: 0 0 auto;
-  max-width: 100%;
-  width: auto;
-}
-
-@for $i from 1 through 12 {
-  .c-col-#{$i} {
-    flex: 0 0 calc(#{$i} / 12 * 100%);
-    max-width: calc(#{$i} / 12 * 100%);
-  }
-}
-</style>

package/src/components/CRow.vue

@@ -1,64 +0,0 @@
-<template>
-  <div
-    class="c-row"
-    :class="{
-      'c-row--dense': dense,
-      'c-row--no-gutters': noGutters,
-      [`align-${align}`]: align,
-      [`align-content-${alignContent}`]: alignContent,
-      [`justify-${justify}`]: justify,
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { VNode } from 'vue';
-
-withDefaults(
-  defineProps<{
-    /** Applies the align-items css property.
-     * Available options are: start, center, end and stretch. */
-    align?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /** Applies the align-content css property.
-     * Available options are: start, center, end, and stretch. */
-    alignContent?: 'center' | 'start' | 'end' | 'stretch' | null;
-    /**  Reduces the gutter between c-cols. */
-    dense?: boolean;
-    /** Removes the gutter between c-cols. */
-    noGutters?: boolean;
-    /** Applies the justify-content css property.
-     * Available options are: start, center, end, space-between and space-around. */
-    justify?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | null;
-  }>(),
-  {
-    align: null,
-    alignContent: null,
-    dense: false,
-    noGutters: false,
-    justify: null,
-  }
-);
-
-defineSlots<{
-  default?: () => VNode[];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.c-row {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  margin: 0 -12px;
-}
-
-.c-row--dense {
-  margin: 0 -4px;
-}
-
-.c-row--no-gutters {
-  margin: 0;
-}
-</style>