@propelinc/citrus-ui 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
@@ -59,7 +59,7 @@
     "*": "prettier --write --ignore-unknown --ignore-path='../../.prettierignore'"
   },
   "scripts": {
-    "build": "vite build && pnpm run build:styles",
+    "build": "vite build && vite build --mode cdn && pnpm run build:styles",
     "build:styles": "node scripts/build-styles.mjs"
   },
   "module": "./dist/index.mjs",
@@ -69,6 +69,9 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
+    "./cdn": {
+      "import": "./dist/index.cdn.mjs"
+    },
     "./styles/main.css": "./dist/styles/main.css",
     "./styles/utils.css": "./dist/styles/utils.css",
     "./src/*": "./src/*"

package/src/components/CTextField.vue

@@ -4,7 +4,7 @@
     :class="[
       {
         'c-text-field--disabled': disabled,
-        'c-text-field--invalid': !isValidationValid,
+        'c-text-field--invalid': isInvalid,
         'c-text-field--hide-label': hideLabel,
         'c-text-field--focused': isFocused,
         'c-text-field--medium': size === 'medium',
@@ -44,7 +44,7 @@
         :data-test="`${dataTest}-input`"
         :aria-label="ariaLabel || label || undefined"
         :aria-describedby="`${idWithFallback}-validation-message ${idWithFallback}-message`"
-        :aria-invalid="isValidationValid ? 'false' : 'true'"
+        :aria-invalid="isInvalid ? 'true' : 'false'"
         :type="inputType"
         :placeholder="placeholder"
         :minlength="minlength"
@@ -248,6 +248,8 @@ export default defineComponent({
       field: input,
     });
 
+    const isInvalid = computed(() => !isValidationValid.value || !!props.errorMessage);
+
     const prefixSlotHasContent = useSlotHasContent('prepend-inner');
     const suffixSlotHasContent = useSlotHasContent('append');
     const messageSlotHasContent = useSlotHasContent('message');
@@ -330,7 +332,7 @@ export default defineComponent({
       prefixSlotHasContent,
       rootStyles,
       suffixSlotHasContent,
-      isValidationValid,
+      isInvalid,
       validationMessage,
 
       clearInput,
@@ -366,12 +368,16 @@ export default defineComponent({
   transition: border-color $citrus-field-transition-duration ease;
 }
 
-.c-text-field--focused .c-text-field__container,
-.c-text-field--invalid .c-text-field__container {
+.c-text-field--focused .c-text-field__container {
   border-color: $color-black;
 }
 
+.c-text-field--invalid .c-text-field__label {
+  color: $color-status-error;
+}
+
 .c-text-field--invalid .c-text-field__container {
+  border-color: $color-status-error;
   color: $color-status-error;
 }
 

package/src/styles/_core.scss

@@ -147,6 +147,7 @@ $font-size-3x-large: 32px;
 $font-size-2x-large: 26px;
 $font-size-x-large: 24px;
 $font-size-large: 20px;
+$font-size-medium-large: 18px;
 $font-size-medium: 16px;
 $font-size-small: 14px;
 $font-size-x-small: 12px;

package/src/styles/_reset.scss

@@ -4,102 +4,117 @@
 // They are taken from https://www.joshwcomeau.com/css/custom-css-reset/
 // ****************************************************************************
 
-/* 1. Use a more-intuitive box-sizing model */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+/**
+ * NOTE about `@layer reset`:
+ *
+ * By using a CSS Layer, we can specify the order of styles without relying on the order of imports.
+ * For example, in freshebt-vue, we can have:
+ *
+ * ```css
+ * @layer reset, base, components, utilities;
+ * ```
+ *
+ * This will ensure reset styles are applied first, and then the Tailwind layers of `base`,
+ * `components`, and `utilities` are applied after, regardless of import order.
+ */
+@layer reset {
+  /* 1. Use a more-intuitive box-sizing model */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-/* 2. Remove default padding and margin */
-* {
-  margin: 0;
-  padding: 0;
-}
+  /* 2. Remove default padding and margin */
+  * {
+    margin: 0;
+    padding: 0;
+  }
 
-/* 3. Enable keyword animations */
-@media (prefers-reduced-motion: no-preference) {
-  html {
-    // stylelint-disable-next-line property-no-unknown
-    interpolate-size: allow-keywords;
+  /* 3. Enable keyword animations */
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      // stylelint-disable-next-line property-no-unknown
+      interpolate-size: allow-keywords;
+    }
   }
-}
 
-body {
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
+  body {
+    /* 5. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
 
-  /* 4. Add accessible line-height */
-  line-height: 1.5;
-}
+    /* 4. Add accessible line-height */
+    line-height: 1.5;
+  }
 
-/* 6. Improve media defaults
+  /* 6. Improve media defaults
  * `svg` and `img` were in this list, but we've had to remove them. On device, this was
  * causing issues with giant sized icons.
 */
-picture,
-video,
-canvas {
-  display: block;
-  max-width: 100%;
-}
+  picture,
+  video,
+  canvas {
+    display: block;
+    max-width: 100%;
+  }
 
-/* 7. Inherit fonts for form controls */
-input,
-button,
-textarea,
-select {
-  background: transparent; // This was in the old reset
-  border-style: none; // This was in the old reset
-  color: inherit; // This was in the old reset
-  font: inherit;
-}
+  /* 7. Inherit fonts for form controls */
+  input,
+  button,
+  textarea,
+  select {
+    background: transparent; // This was in the old reset
+    border-style: none; // This was in the old reset
+    color: inherit; // This was in the old reset
+    font: inherit;
+  }
 
-/* 8. Avoid text overflows */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
+  /* 8. Avoid text overflows */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
 
-p {
-  margin-bottom: 16px; // matches old defaults
+  p {
+    margin-bottom: 16px; // matches old defaults
 
-  /* 9. Improve line wrapping */
-  text-wrap: pretty;
-}
+    /* 9. Improve line wrapping */
+    text-wrap: pretty;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
 
-/* 10. Remove default tap highlight */
-button,
-a {
-  -webkit-tap-highlight-color: transparent;
-}
+  /* 10. Remove default tap highlight */
+  button,
+  a {
+    -webkit-tap-highlight-color: transparent;
+  }
 
-/* 11. Add default padding to lists */
-ol,
-ul {
-  padding-left: 24px;
-}
+  /* 11. Add default padding to lists */
+  ol,
+  ul {
+    padding-left: 24px;
+  }
 
-/* 12. Remove default link styles
+  /* 12. Remove default link styles
  * This was moved from the `_providers.scss` file to citrus-ui so that link styles are consistent
  * when CMS content is used in MFEs.
 */
-a,
-a:active,
-a:hover {
-  text-decoration: none !important;
+  a,
+  a:active,
+  a:hover {
+    text-decoration: none !important;
+  }
 }

package/src/styles/utils.scss

@@ -119,9 +119,24 @@ $align-options: (
     align-items: $value !important;
   }
 
+  // Added to match Tailwind's naming convention for align-items
+  .items-#{$option} {
+    align-items: $value;
+  }
+
   .align-content-#{$option} {
     align-content: $value !important;
   }
+
+  // Added to match Tailwind's naming convention for align-content
+  .content-#{$option} {
+    align-content: $value;
+  }
+
+  // Added to match Tailwind's naming convention for align-self
+  .self-#{$option} {
+    align-self: $value;
+  }
 }
 
 $justify-options: (
@@ -383,6 +398,11 @@ $text-colors: (
 );
 
 @each $name, $color in $text-colors {
+  // NOTE: (kyleshevlin) making these match Tailwind's naming convention
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+
   .text-#{$name} {
     color: $color !important;
   }
@@ -415,6 +435,7 @@ $font-sizes: (
   'xs': $font-size-x-small,
   'sm': $font-size-small,
   'md': $font-size-medium,
+  'ml': $font-size-medium-large,
   'lg': $font-size-large,
   'xl': $font-size-x-large,
   '2xl': $font-size-2x-large,
@@ -446,6 +467,35 @@ $font-weights: (
   font-style: italic !important;
 }
 
+/* Using the same naming convention as Tailwind */
+$letter-spacings: (
+  'tighter': -0.5px,
+  'tight': -0.25px,
+  'normal': normal,
+  'wide': 0.25px,
+  'wider': 0.5px,
+);
+
+@each $spacing, $s in $letter-spacings {
+  .tracking-#{$spacing} {
+    letter-spacing: $s;
+  }
+}
+
+/* This does not use the same naming convention as Tailwind, but we can make ours match it when implemented */
+$line-heights: (
+  'none': 1,
+  'small': 120%,
+  'medium': 125%,
+  'large': 140%,
+);
+
+@each $height, $h in $line-heights {
+  .leading-#{$height} {
+    line-height: $h;
+  }
+}
+
 $text-transforms: (
   'uppercase': uppercase,
   'lowercase': lowercase,

package/dist/colors/colors.d.ts

@@ -1,31 +0,0 @@
-export type HexColor = `#${string}`;
-export type RgbaColor = `rgba(${number}, ${number}, ${number}, ${number})`;
-/**
- * CSS color value from the palette (hex or rgba). Use this type when a value
- * may be either format, e.g. gray colors are rgba, others are hex.
- */
-export type CssColor = HexColor | RgbaColor;
-/**
- * Maps a color name to its corresponding CSS color (hex or rgba).
- * Gray neutrals use rgba for transparency; other colors use hex.
- *
- * NOTE: Please write hex codes in lowercase letters
- */
-declare const Colors: Record<string, CssColor>;
-export default Colors;
-/**
- * This is a type predicate that will allow TypeScript to know that the string tested is a
- * HexColor within the scope of the narrowing.
- */
-export declare function isHexColor(color?: string): color is HexColor;
-export declare function isRgbaColor(color?: string): color is RgbaColor;
-export declare function isCssColor(color?: string): color is CssColor;
-/**
- * This is a type predicate that will allow TypeScript to know that the string tested is a
- * key of the Colors object.
- */
-export declare function isColorKey(color?: string): color is keyof typeof Colors;
-/**
- * Validates a string as either a hex color or a color key.
- */
-export declare function isValidColor(value: string): boolean;

package/dist/colors/theme.d.ts

@@ -1,3 +0,0 @@
-type Theme = Record<string, string>;
-declare const _default: Theme;
-export default _default;

package/dist/colors/util-classes.d.ts

@@ -1,11 +0,0 @@
-/**
- * Generates utility classes for each Citrus color.
- *
- * For example, for blue-500 it creates:
- * - `.blue-500` - sets background and border
- * - `.blue-500--text` - sets text color
- *
- * This matches the syntax of Vuetify's utils:
- * https://vuetifyjs.com/en/styles/colors/#classes
- */
-export declare function addColorUtils(): void;

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

@@ -1,21 +0,0 @@
-import { DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    /** Removes horizontal padding for all items inside */
-    fluid: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {
-    accordion: Ref<HTMLDivElement | null, HTMLDivElement | null>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "change"[], "change", PublicProps, Readonly< ExtractPropTypes<{
-    /** Removes horizontal padding for all items inside */
-    fluid: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-}>, {
-    fluid: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,41 +0,0 @@
-import { default as SlDetails } from '@shoelace-style/shoelace/dist/components/details/details';
-import { PropType, DefineComponent, ExtractPropTypes, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
-import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    /** Controls whether the item is open */
-    value: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Removes horizontal padding from the content */
-    fluid: {
-        type: PropType<boolean | null>;
-        default: null;
-    };
-}>, {
-    internalValue: Ref<boolean, boolean>;
-    faChevronDown: IconDefinition;
-    details: Ref<SlDetails | null, SlDetails | null>;
-    injectedOrPropFluid: ComputedRef<boolean>;
-    onChange: (value: boolean) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "input"[], "input", PublicProps, Readonly< ExtractPropTypes<{
-    /** Controls whether the item is open */
-    value: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Removes horizontal padding from the content */
-    fluid: {
-        type: PropType<boolean | null>;
-        default: null;
-    };
-}>> & Readonly<{
-    onInput?: ((...args: any[]) => any) | undefined;
-}>, {
-    fluid: boolean | null;
-    value: boolean;
-}, {}, {
-    FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
-}, {}, string, ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,156 +0,0 @@
-import { PropType, DefineComponent, ExtractPropTypes, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { HexColor, default as Colors, isValidColor, CssColor } from '../colors/colors';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    /**
-     * 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: PropType<HexColor | keyof typeof Colors>;
-        default: string;
-        validator: typeof isValidColor;
-    };
-    color: {
-        type: PropType<HexColor | keyof typeof Colors>;
-        default: undefined;
-        validator: typeof isValidColor;
-    };
-    /** If true, the app bar will be fixed to the top of the viewport. */
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** If true, the app bar will have a bottom border. */
-    border: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Shows text in the center of the component. Typically used for page names. Overrides the title slot. */
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** Shows a loading spinner. Overrides the title slot.  */
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Adds screen reader only text alternative to loading icon, text should be translated */
-    loaderAccessibleText: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {
-    bgCssColor: Ref< CssColor | undefined, CssColor | undefined>;
-    textCssColor: ComputedRef<CssColor>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    /**
-     * 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: PropType<HexColor | keyof typeof Colors>;
-        default: string;
-        validator: typeof isValidColor;
-    };
-    color: {
-        type: PropType<HexColor | keyof typeof Colors>;
-        default: undefined;
-        validator: typeof isValidColor;
-    };
-    /** If true, the app bar will be fixed to the top of the viewport. */
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** If true, the app bar will have a bottom border. */
-    border: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Shows text in the center of the component. Typically used for page names. Overrides the title slot. */
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** Shows a loading spinner. Overrides the title slot.  */
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Adds screen reader only text alternative to loading icon, text should be translated */
-    loaderAccessibleText: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    title: string;
-    border: boolean;
-    fixed: boolean;
-    color: string;
-    backgroundColor: string;
-    loading: boolean;
-    loaderAccessibleText: string;
-}, {}, {
-    CLoader: DefineComponent<ExtractPropTypes<{
-        accessibleText: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        color: {
-            type: PropType<HexColor | keyof typeof Colors>;
-            default: string;
-            validator: typeof isValidColor;
-        };
-        small: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: PropType<"sm" | "lg" | "md">;
-            default: string;
-        };
-        trackColor: {
-            type: PropType<HexColor | keyof typeof Colors>;
-            default: string;
-            validator: typeof isValidColor;
-        };
-    }>, {
-        computedSize: ComputedRef<"sm" | "lg" | "md">;
-        indicatorColorCode: Ref< CssColor | undefined, CssColor | undefined>;
-        SIZE_TO_FONT_SIZE: Record<"sm" | "lg" | "md", `${number}px`>;
-        SIZE_TO_TRACK_WIDTH: Record<"sm" | "lg" | "md", `${number}px`>;
-        trackColorCode: Ref< CssColor | undefined, CssColor | undefined>;
-    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-        accessibleText: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        color: {
-            type: PropType<HexColor | keyof typeof Colors>;
-            default: string;
-            validator: typeof isValidColor;
-        };
-        small: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        size: {
-            type: PropType<"sm" | "lg" | "md">;
-            default: string;
-        };
-        trackColor: {
-            type: PropType<HexColor | keyof typeof Colors>;
-            default: string;
-            validator: typeof isValidColor;
-        };
-    }>> & Readonly<{}>, {
-        small: boolean;
-        size: "sm" | "lg" | "md";
-        accessibleText: string;
-        color: string;
-        trackColor: string;
-    }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-    CFadeTransition: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-}, {}, string, ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,52 +0,0 @@
-import { DefineComponent, ExtractPropTypes, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const _default: DefineComponent<ExtractPropTypes<{
-    /** Sets the text of the badge, can also use default slot */
-    text: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /** Adds a unique data-test attribute for testing to the container */
-    dataTest: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** Sets the background color */
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** Sets the text color */
-    textColor: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {
-    computedStyle: ComputedRef<Record<string, string>>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    /** Sets the text of the badge, can also use default slot */
-    text: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    /** Adds a unique data-test attribute for testing to the container */
-    dataTest: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** Sets the background color */
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** Sets the text color */
-    textColor: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    dataTest: string;
-    color: string;
-    textColor: string;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-export default _default;