@windstream/react-shared-components 0.0.18 → 0.0.21

package/src/index.ts

@@ -8,6 +8,9 @@ export type { ButtonProps } from "./components/button";
 export { Input, InputField, Input as TextInput } from "./components/input";
 export type { InputProps, InputFieldProps } from "./components/input";
 
+export { Image } from "./components/image";
+export type { ImageProps, ImageComponentProps } from "./components/image";
+
 export { Link } from "./components/link";
 export type { LinkProps } from "./components/link";
 
@@ -36,13 +39,22 @@ export { Checkbox } from "./components/checkbox";
 export type { CheckboxProps } from "./components/checkbox";
 
 export { Select } from "./components/select";
-export type { SelectProps, SelectOption, FilterOptions } from "./components/select";
+export type {
+  SelectProps,
+  SelectOption,
+  FilterOptions,
+} from "./components/select";
 
 export { AlertCard } from "./components/alert-card";
 export type { AlertCardProps } from "./components/alert-card";
 
 export { BrandButton } from "./components/brand-button";
-export type { ButtonProps as BrandButtonProps, ButtonVariantsT, ButtonSizeT, ResponsiveSize } from "./components/brand-button";
+export type {
+  ButtonProps as BrandButtonProps,
+  ButtonVariantsT,
+  ButtonSizeT,
+  ResponsiveSize,
+} from "./components/brand-button";
 
 export { Checklist } from "./components/checklist";
 export type { ChecklistProps } from "./components/checklist";

package/src/setupTests.ts

@@ -1,46 +1,46 @@
-import "@testing-library/jest-dom";
-
-// Mock window.matchMedia
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: (query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {}, // deprecated
-    removeListener: () => {}, // deprecated
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => true,
-  }),
-});
-
-// Mock ResizeObserver
-global.ResizeObserver = class ResizeObserver {
-  observe = () => {};
-  unobserve = () => {};
-  disconnect = () => {};
-  constructor(_callback: ResizeObserverCallback) {}
-} as unknown as typeof ResizeObserver;
-
-// Mock IntersectionObserver
-global.IntersectionObserver = class IntersectionObserver {
-  observe = () => {};
-  unobserve = () => {};
-  disconnect = () => {};
-  constructor(_callback: IntersectionObserverCallback) {}
-} as unknown as typeof IntersectionObserver;
-
-// Mock scrollTo
-Object.defineProperty(window, "scrollTo", {
-  writable: true,
-  value: () => {},
-});
-
-// Mock getComputedStyle
-Object.defineProperty(window, "getComputedStyle", {
-  writable: true,
-  value: () => ({
-    getPropertyValue: () => "",
-  }),
-});
+import "@testing-library/jest-dom";
+
+// Mock window.matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true,
+  }),
+});
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe = () => {};
+  unobserve = () => {};
+  disconnect = () => {};
+  constructor(_callback: ResizeObserverCallback) {}
+} as unknown as typeof ResizeObserver;
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  observe = () => {};
+  unobserve = () => {};
+  disconnect = () => {};
+  constructor(_callback: IntersectionObserverCallback) {}
+} as unknown as typeof IntersectionObserver;
+
+// Mock scrollTo
+Object.defineProperty(window, "scrollTo", {
+  writable: true,
+  value: () => {},
+});
+
+// Mock getComputedStyle
+Object.defineProperty(window, "getComputedStyle", {
+  writable: true,
+  value: () => ({
+    getPropertyValue: () => "",
+  }),
+});

package/src/stories/DocsTemplate.tsx

@@ -22,5 +22,3 @@ export const DocsPage = () => (
     <ArgTypes />
   </>
 );
-
-

package/src/styles/globals.css

@@ -20,142 +20,142 @@
     "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 
   /* Color tokens - Border */
-  --color-border: #E6E6E6;
-  --color-border-brand: #24A76A;
-  --color-border-critical: #7E0000;
-  --color-border-critical-secondary: #F0A7A7;
-  --color-border-disabled: #F2F2F4;
-  --color-border-focus: #24A76A;
-  --color-border-focus-inverse: #00002D;
-  --color-border-focus-secondary: #00002D;
-  --color-border-hover: #CECECE;
-  --color-border-info: #CECECE;
-  --color-border-inverse: #FFFFFF;
-  --color-border-secondary: #F2F2F4;
+  --color-border: #e6e6e6;
+  --color-border-brand: #24a76a;
+  --color-border-critical: #7e0000;
+  --color-border-critical-secondary: #f0a7a7;
+  --color-border-disabled: #f2f2f4;
+  --color-border-focus: #24a76a;
+  --color-border-focus-inverse: #00002d;
+  --color-border-focus-secondary: #00002d;
+  --color-border-hover: #cecece;
+  --color-border-info: #cecece;
+  --color-border-inverse: #ffffff;
+  --color-border-secondary: #f2f2f4;
   --color-border-secondary-on-bg-fill: #949494;
-  --color-border-success: #24A76A;
-  --color-border-tertiary: #CECECE;
+  --color-border-success: #24a76a;
+  --color-border-tertiary: #cecece;
 
   /* Color tokens - Icon */
-  --color-icon-brand: #24A76A;
-  --color-icon-brand-accent: #F5FF1E;
-  --color-icon-critical: #D40000;
-  --color-icon-default: #00002D;
+  --color-icon-brand: #24a76a;
+  --color-icon-brand-accent: #f5ff1e;
+  --color-icon-critical: #d40000;
+  --color-icon-default: #00002d;
   --color-icon-info: #757575;
-  --color-icon-inverse: #FFFFFF;
-  --color-icon-inverse-secondary: #E6E6E6;
+  --color-icon-inverse: #ffffff;
+  --color-icon-inverse-secondary: #e6e6e6;
   --color-icon-secondary: #757575;
-  --color-icon-success: #24A76A;
+  --color-icon-success: #24a76a;
 
   /* Color tokens - Checkbox */
-  --color-checkbox-bg-surface-disabled: #F7F7F8;
-  --color-checkbox-bg-surface-selected-disabled: #E6E6E6;
-  --color-checkbox-icon-disabled: #FFFFFF;
+  --color-checkbox-bg-surface-disabled: #f7f7f8;
+  --color-checkbox-bg-surface-selected-disabled: #e6e6e6;
+  --color-checkbox-icon-disabled: #ffffff;
 
   /* Color tokens - Input */
-  --color-input-bg-surface: #FFFFFF;
-  --color-input-bg-surface-active: #F2F2F4;
-  --color-input-bg-surface-disabled: #F7F7F8;
-  --color-input-bg-surface-hover: #F7F7F8;
-  --color-input-border: #CECECE;
-  --color-input-border-critical: #D40000;
-  --color-input-border-hover: #00002D;
-  --color-input-border-selected: #24A76A;
+  --color-input-bg-surface: #ffffff;
+  --color-input-bg-surface-active: #f2f2f4;
+  --color-input-bg-surface-disabled: #f7f7f8;
+  --color-input-bg-surface-hover: #f7f7f8;
+  --color-input-border: #cecece;
+  --color-input-border-critical: #d40000;
+  --color-input-border-hover: #00002d;
+  --color-input-border-selected: #24a76a;
   --color-input-icon-placeholder: #757575;
-  --color-input-text-placeholder: #5E5E5E;
+  --color-input-text-placeholder: #5e5e5e;
 
   /* Color tokens - Nav */
-  --color-nav-bg: #FFFFFF;
-  --color-nav-bg-surface: #FBFBFC;
-  --color-nav-bg-surface-active: #F2F2F4;
-  --color-nav-bg-surface-hover: #F7F7F8;
-  --color-nav-bg-surface-selected: #F2F2F4;
+  --color-nav-bg: #ffffff;
+  --color-nav-bg-surface: #fbfbfc;
+  --color-nav-bg-surface-active: #f2f2f4;
+  --color-nav-bg-surface-hover: #f7f7f8;
+  --color-nav-bg-surface-selected: #f2f2f4;
 
   /* Color tokens - Radio */
-  --color-radio-button-bg-surface-disabled: #F7F7F8;
-  --color-radio-button-bg-surface-selected-disabled: #E6E6E6;
-  --color-radio-button-icon-disabled: #F7F7F8;
+  --color-radio-button-bg-surface-disabled: #f7f7f8;
+  --color-radio-button-bg-surface-selected-disabled: #e6e6e6;
+  --color-radio-button-icon-disabled: #f7f7f8;
 
   /* Color tokens - Scrim */
   --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
   --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
 
   /* Color tokens - Skeleton */
-  --color-skeleton-bg-start: #CECECE;
-  --color-skeleton-bg-end: #E6E6E6;
+  --color-skeleton-bg-start: #cecece;
+  --color-skeleton-bg-end: #e6e6e6;
 
   /* Color tokens - Toggle */
-  --color-toggle-bg-fill: #FFFFFF;
-  --color-toggle-bg-surface-active: #24A76A;
+  --color-toggle-bg-fill: #ffffff;
+  --color-toggle-bg-surface-active: #24a76a;
   --color-toggle-bg-surface-disabled: #949494;
 
   /* Color tokens - Tooltip */
   --color-tooltip-bg: #464646;
 
   /* Color tokens - Background */
-  --color-bg: #FFFFFF;
-  --color-bg-fill-brand: #24A76A;
-  --color-bg-fill-brand-accent: #F5FF1E;
-  --color-bg-fill-brand-active: #209A61;
-  --color-bg-fill-brand-disabled: #CECECE;
-  --color-bg-fill-brand-hover: #45C187;
-  --color-bg-fill-brand-selected: #24A76A;
-  --color-bg-fill-brand-supporting: #07B2E2;
-  --color-bg-fill-brand-tertiary: #931D69;
-  --color-bg-fill-critical: #D40000;
-  --color-bg-fill-critical-secondary: #FDF5F5;
-  --color-bg-fill-info: #F2F2F4;
-  --color-bg-fill-inverse: #00002D;
-  --color-bg-fill-inverse-active: #00002D;
-  --color-bg-fill-inverse-disabled: #CECECE;
-  --color-bg-fill-inverse-hover: #191A54;
-  --color-bg-fill-inverse-selected: #00002D;
-  --color-bg-fill-secondary: #FFFFFF;
-  --color-bg-fill-secondary-active: #F2F2F4;
-  --color-bg-fill-secondary-hover: #FBFBFC;
-  --color-bg-fill-success: #24A76A;
-  --color-bg-fill-success-secondary: #F4FBF8;
-  --color-bg-fill-surface-brand: #F4FBF8;
-  --color-bg-fill-surface-inverse: #00002D;
-  --color-bg-fill-surface-success: #D3F2E3;
-  --color-bg-inverse: #00002D;
-  --color-bg-surface: #FFFFFF;
-  --color-bg-surface-active: #F2F2F4;
-  --color-bg-surface-brand: #F4FBF8;
-  --color-bg-surface-disabled: #F2F2F4;
-  --color-bg-surface-hover: #F7F7F8;
-  --color-bg-surface-info: #F7F7F8;
-  --color-bg-surface-inverse: #191A54;
-  --color-bg-surface-secondary: #FBFBFC;
-  --color-bg-surface-secondary-active: #E6E6E6;
-  --color-bg-surface-secondary-hover: #F2F2F4;
-  --color-bg-surface-secondary-selected: #E6E6E6;
-  --color-bg-surface-selected: #F7F7F8;
-  --color-bg-surface-success: #D3F2E3;
-  --color-bg-surface-tertiary: #F7F7F8;
-  --color-bg-surface-tertiary-active: #E6E6E6;
-  --color-bg-surface-tertiary-hover: #F2F2F4;
+  --color-bg: #ffffff;
+  --color-bg-fill-brand: #24a76a;
+  --color-bg-fill-brand-accent: #f5ff1e;
+  --color-bg-fill-brand-active: #209a61;
+  --color-bg-fill-brand-disabled: #cecece;
+  --color-bg-fill-brand-hover: #45c187;
+  --color-bg-fill-brand-selected: #24a76a;
+  --color-bg-fill-brand-supporting: #07b2e2;
+  --color-bg-fill-brand-tertiary: #931d69;
+  --color-bg-fill-critical: #d40000;
+  --color-bg-fill-critical-secondary: #fdf5f5;
+  --color-bg-fill-info: #f2f2f4;
+  --color-bg-fill-inverse: #00002d;
+  --color-bg-fill-inverse-active: #00002d;
+  --color-bg-fill-inverse-disabled: #cecece;
+  --color-bg-fill-inverse-hover: #191a54;
+  --color-bg-fill-inverse-selected: #00002d;
+  --color-bg-fill-secondary: #ffffff;
+  --color-bg-fill-secondary-active: #f2f2f4;
+  --color-bg-fill-secondary-hover: #fbfbfc;
+  --color-bg-fill-success: #24a76a;
+  --color-bg-fill-success-secondary: #f4fbf8;
+  --color-bg-fill-surface-brand: #f4fbf8;
+  --color-bg-fill-surface-inverse: #00002d;
+  --color-bg-fill-surface-success: #d3f2e3;
+  --color-bg-inverse: #00002d;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-active: #f2f2f4;
+  --color-bg-surface-brand: #f4fbf8;
+  --color-bg-surface-disabled: #f2f2f4;
+  --color-bg-surface-hover: #f7f7f8;
+  --color-bg-surface-info: #f7f7f8;
+  --color-bg-surface-inverse: #191a54;
+  --color-bg-surface-secondary: #fbfbfc;
+  --color-bg-surface-secondary-active: #e6e6e6;
+  --color-bg-surface-secondary-hover: #f2f2f4;
+  --color-bg-surface-secondary-selected: #e6e6e6;
+  --color-bg-surface-selected: #f7f7f8;
+  --color-bg-surface-success: #d3f2e3;
+  --color-bg-surface-tertiary: #f7f7f8;
+  --color-bg-surface-tertiary-active: #e6e6e6;
+  --color-bg-surface-tertiary-hover: #f2f2f4;
   --color-bg-surface-transparent: rgba(0, 0, 0, 0);
 
   /* Color tokens - Text */
-  --color-text: #00002D;
-  --color-text-brand: #24A76A;
-  --color-text-brand-accent-on-bg-fill: #00002D;
-  --color-text-brand-hover: #1B8352;
-  --color-text-brand-on-bg-fill: #FFFFFF;
-  --color-text-brand-supporting-on-bg-fill: #00002D;
-  --color-text-brand-tertiary-on-bg-fill: #FFFFFF;
-  --color-text-critical: #D40000;
-  --color-text-critical-on-bg-inverse: #FDF5F5;
+  --color-text: #00002d;
+  --color-text-brand: #24a76a;
+  --color-text-brand-accent-on-bg-fill: #00002d;
+  --color-text-brand-hover: #1b8352;
+  --color-text-brand-on-bg-fill: #ffffff;
+  --color-text-brand-supporting-on-bg-fill: #00002d;
+  --color-text-brand-tertiary-on-bg-fill: #ffffff;
+  --color-text-critical: #d40000;
+  --color-text-critical-on-bg-inverse: #fdf5f5;
   --color-text-disabled: #757575;
   --color-text-info: #464646;
-  --color-text-inverse: #FFFFFF;
-  --color-text-link: #00002D;
-  --color-text-link-active: #00002D;
-  --color-text-link-hover: #00002D;
-  --color-text-link-inverse: #FFFFFF;
+  --color-text-inverse: #ffffff;
+  --color-text-link: #00002d;
+  --color-text-link-active: #00002d;
+  --color-text-link-hover: #00002d;
+  --color-text-link-inverse: #ffffff;
   --color-text-secondary: #464646;
-  --color-text-success: #1B8352;
+  --color-text-success: #1b8352;
 
   /* Border radius tokens - Default (Residential) */
   --border-radius-2-5: 10px;
@@ -171,71 +171,71 @@
 /* smb theme */
 
 [data-theme="business"] {
-    /* Border colors */
-    --color-border-brand: #007C93;
-    --color-border-critical: #D40000;
-    --color-border-focus: #007C93;
-    --color-border-focus-inverse: #231F20;
-    --color-border-focus-secondary: #231F20;
-    --color-border-success: #24A76A;
+  /* Border colors */
+  --color-border-brand: #007c93;
+  --color-border-critical: #d40000;
+  --color-border-focus: #007c93;
+  --color-border-focus-inverse: #231f20;
+  --color-border-focus-secondary: #231f20;
+  --color-border-success: #24a76a;
 
-    /* Icon colors */
-    --color-icon-brand: #009BB8;
-    --color-icon-brand-accent: #22A881;
-    --color-icon-default: #231F20;
-    --color-icon-secondary: #A33895;
-    --color-icon-success: #22A881;
+  /* Icon colors */
+  --color-icon-brand: #009bb8;
+  --color-icon-brand-accent: #22a881;
+  --color-icon-default: #231f20;
+  --color-icon-secondary: #a33895;
+  --color-icon-success: #22a881;
 
-    /* Input colors */
-    --color-input-border-hover: #231F20;
-    --color-input-border-selected: #009BB8;
-    --color-input-icon-placeholder: #949494;
-    --color-input-text-placeholder: #949494;
+  /* Input colors */
+  --color-input-border-hover: #231f20;
+  --color-input-border-selected: #009bb8;
+  --color-input-icon-placeholder: #949494;
+  --color-input-text-placeholder: #949494;
 
-    /* Toggle colors */
-    --color-toggle-bg-surface-active: #009BB8;
+  /* Toggle colors */
+  --color-toggle-bg-surface-active: #009bb8;
 
-    /* Background fill colors */
-    --color-bg-fill-brand: #007C93;
-    --color-bg-fill-brand-accent: #22A881;
-    --color-bg-fill-brand-active: #005D6E;
-    --color-bg-fill-brand-hover: #30AEC5;
-    --color-bg-fill-brand-selected: #007C93;
-    --color-bg-fill-brand-supporting: #40AFC9;
-    --color-bg-fill-brand-tertiary: #A33895;
-    --color-bg-fill-inverse: #231F20;
-    --color-bg-fill-inverse-active: #231F20;
-    --color-bg-fill-inverse-hover: #4D4A4A;
-    --color-bg-fill-inverse-selected: #231F20;
-    --color-bg-fill-success: #1B8667;
-    --color-bg-fill-success-secondary: #C8E9E0;
-    --color-bg-fill-surface-brand: #BFE6ED;
-    --color-bg-fill-surface-inverse: #231F20;
-    --color-bg-fill-surface-success: #A0DAC9;
+  /* Background fill colors */
+  --color-bg-fill-brand: #007c93;
+  --color-bg-fill-brand-accent: #22a881;
+  --color-bg-fill-brand-active: #005d6e;
+  --color-bg-fill-brand-hover: #30aec5;
+  --color-bg-fill-brand-selected: #007c93;
+  --color-bg-fill-brand-supporting: #40afc9;
+  --color-bg-fill-brand-tertiary: #a33895;
+  --color-bg-fill-inverse: #231f20;
+  --color-bg-fill-inverse-active: #231f20;
+  --color-bg-fill-inverse-hover: #4d4a4a;
+  --color-bg-fill-inverse-selected: #231f20;
+  --color-bg-fill-success: #1b8667;
+  --color-bg-fill-success-secondary: #c8e9e0;
+  --color-bg-fill-surface-brand: #bfe6ed;
+  --color-bg-fill-surface-inverse: #231f20;
+  --color-bg-fill-surface-success: #a0dac9;
 
-    /* Text colors */
-    --color-text: #231F20;
-    --color-text-brand: #009BB8;
-    --color-text-brand-accent-on-bg-fill: #22A881;
-    --color-text-brand-hover: #003E4A;
-    --color-text-brand-supporting-on-bg-fill: #40AFC9;
-    --color-text-brand-tertiary-on-bg-fill: #A33895;
-    --color-text-info: #5A5A5A;
-    --color-text-link: #009BB8;
-    --color-text-link-active: #009BB8;
-    --color-text-link-hover: #003E4A;
-    --color-text-secondary: #5A5A5A;
-    --color-text-success: #1B8667;
+  /* Text colors */
+  --color-text: #231f20;
+  --color-text-brand: #009bb8;
+  --color-text-brand-accent-on-bg-fill: #22a881;
+  --color-text-brand-hover: #003e4a;
+  --color-text-brand-supporting-on-bg-fill: #40afc9;
+  --color-text-brand-tertiary-on-bg-fill: #a33895;
+  --color-text-info: #5a5a5a;
+  --color-text-link: #009bb8;
+  --color-text-link-active: #009bb8;
+  --color-text-link-hover: #003e4a;
+  --color-text-secondary: #5a5a5a;
+  --color-text-success: #1b8667;
 
-    /* Border radius tokens - Business theme */
-    --border-radius-2-5: 0px;
-    --border-radius-3-5: 3px;
-    --border-radius-lg: 2px;
-    --border-radius-xl: 2px;
-    --border-radius-2xl: 0rem;
-    --border-radius-2-5xl: 0rem;
-    --border-radius-4xl: 0rem;
-    --border-radius-5xl: 2.5rem;
+  /* Border radius tokens - Business theme */
+  --border-radius-2-5: 0px;
+  --border-radius-3-5: 3px;
+  --border-radius-lg: 2px;
+  --border-radius-xl: 2px;
+  --border-radius-2xl: 0rem;
+  --border-radius-2-5xl: 0rem;
+  --border-radius-4xl: 0rem;
+  --border-radius-5xl: 2.5rem;
 }
 
 /* Base styles for components */
@@ -271,5 +271,5 @@
 /* Hide shape background SVGs inside content */
 
 .shape-bg-content .shape-bg svg {
-    display: none;
+  display: none;
 }

package/src/types/global.d.ts

@@ -1,9 +1,9 @@
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.css" {
-  const content: string;
-  export default content;
-}
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.css" {
+  const content: string;
+  export default content;
+}

package/src/utils/index.ts

@@ -2,41 +2,41 @@ import { clsx, type ClassValue } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 
 const twMerge = extendTailwindMerge({
-    // Define class groups so twMerge knows which classes override each other
-    extend: {
-      classGroups: {
-        ["font-variants" as any]: [
-          "heading1",
-          "heading2",
-          "heading3",
-          "heading4",
-          "heading5",
-          "heading6",
-          "subheading1",
-          "subheading2",
-          "subheading3",
-          "subheading4",
-          "subheading5",
-          "subheading6",
-          "body1",
-          "body2",
-          "body3",
-          "footnote",
-          "micro",
-          "label1",
-          "label2",
-          "label3",
-          "label4",
-        ],
-        ["button-sizes" as any]: [
-          "btn-small",
-          "btn-medium",
-          "btn-large",
-          "btn-x-large",
-        ],
-      },
+  // Define class groups so twMerge knows which classes override each other
+  extend: {
+    classGroups: {
+      ["font-variants" as any]: [
+        "heading1",
+        "heading2",
+        "heading3",
+        "heading4",
+        "heading5",
+        "heading6",
+        "subheading1",
+        "subheading2",
+        "subheading3",
+        "subheading4",
+        "subheading5",
+        "subheading6",
+        "body1",
+        "body2",
+        "body3",
+        "footnote",
+        "micro",
+        "label1",
+        "label2",
+        "label3",
+        "label4",
+      ],
+      ["button-sizes" as any]: [
+        "btn-small",
+        "btn-medium",
+        "btn-large",
+        "btn-x-large",
+      ],
     },
-  });
+  },
+});
 
 /**
  * Utility function to combine class names using clsx