@windstream/react-shared-components 0.0.91 → 0.0.93

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/types/micro-components.ts

@@ -1,89 +1,89 @@
-export interface Asset {
-  url?: string | null;
-  title?: string | null;
-  description?: string | null;
-  contentType?: string | null;
-  width?: number | null;
-  height?: number | null;
-}
-export interface Button {
-  anchorId?: string | null;
-  showButtonAs?: "solid" | "text" | null;
-  buttonLabel: string; // required in your model
-  buttonPrefix?: string | null;
-  href?: string | null;
-  target?: "_blank" | "_self" | null;
-  badge?: string | null;
-  preserveQueryParameters: boolean; // non-null in your model
-  badgeIcon?: Asset | null;
-  buttonVariant?: "primary_brand" | "primary_inverse" | "secondary" | null;
-  buttonIcon?: Asset | null;
-  buttonIconPosition?: boolean | null; // matches EntryFieldTypes.Boolean in your model
-  clickToOpen?: "accordion" | "modal" | "tab" | null;
-  tabmodalNameToOpen?: string | null;
-  preDefinedFunctionExecution?: "check availability" | null;
-}
-
-export interface ButtonGroup {
-  __typename: "ComponentButtonGroup";
-  anchorId?: string | null;
-  title?: string | null;
-  itemsCollection?: {
-    items: Button[];
-  };
-}
-export interface Card {
-  anchorId?: string;
-  title?: string;
-  body?: {
-    json: any; // Contentful Rich Text
-  };
-  image?: Asset;
-  imageLink?: string;
-  imageAlignment?: "Left" | "Right" | "Center" | string;
-  imageView?: "Full" | "Inset" | string;
-  cta?: Button;
-  ctaAlignment?: "Left" | "Right" | "Center" | string;
-  textColor?: string;
-  backgroundColor?: string;
-  showBackgroundImage?: boolean;
-  pinwheelColor?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
-  iconToRichTextAlignment?: string;
-  phoneNumber?: string;
-  workingHours?: string;
-  titleLocation?: "Top" | "Bottom" | string;
-  ctaBottom?: Button;
-  ctaAlignmentBottom?: "Left" | "Right" | "Center" | string;
-  imageFloatingType?: boolean;
-}
-
-export interface VideoLink {
-  image?: Asset;
-  videoPopup?: boolean;
-  link?: string;
-}
-
-export interface Checklist {
-  list?: {
-    items: {
-      checkListTitle?: { json: any };
-      icon?: Asset;
-      anchorId?: string;
-    }[];
-  };
-}
-
-export interface RichTextItem {
-  title?: string;
-  isTargetBlank?: boolean;
-  richText?: { json: any };
-}
-
-export type CheckPlansProps = {
-  className?: string;
-  title?: string;
-  ctaAlignment?: "new-row" | "same-row";
-  ctaText?: string;
-  buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
-  showButtonAs?: "solid" | "unstyled" | "text" | undefined;
-};
+export interface Asset {
+  url?: string | null;
+  title?: string | null;
+  description?: string | null;
+  contentType?: string | null;
+  width?: number | null;
+  height?: number | null;
+}
+export interface Button {
+  anchorId?: string | null;
+  showButtonAs?: "solid" | "text" | null;
+  buttonLabel: string; // required in your model
+  buttonPrefix?: string | null;
+  href?: string | null;
+  target?: "_blank" | "_self" | null;
+  badge?: string | null;
+  preserveQueryParameters: boolean; // non-null in your model
+  badgeIcon?: Asset | null;
+  buttonVariant?: "primary_brand" | "primary_inverse" | "secondary" | null;
+  buttonIcon?: Asset | null;
+  buttonIconPosition?: boolean | null; // matches EntryFieldTypes.Boolean in your model
+  clickToOpen?: "accordion" | "modal" | "tab" | null;
+  tabmodalNameToOpen?: string | null;
+  preDefinedFunctionExecution?: "check availability" | null;
+}
+
+export interface ButtonGroup {
+  __typename: "ComponentButtonGroup";
+  anchorId?: string | null;
+  title?: string | null;
+  itemsCollection?: {
+    items: Button[];
+  };
+}
+export interface Card {
+  anchorId?: string;
+  title?: string;
+  body?: {
+    json: any; // Contentful Rich Text
+  };
+  image?: Asset;
+  imageLink?: string;
+  imageAlignment?: "Left" | "Right" | "Center" | string;
+  imageView?: "Full" | "Inset" | string;
+  cta?: Button;
+  ctaAlignment?: "Left" | "Right" | "Center" | string;
+  textColor?: string;
+  backgroundColor?: string;
+  showBackgroundImage?: boolean;
+  pinwheelColor?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
+  iconToRichTextAlignment?: string;
+  phoneNumber?: string;
+  workingHours?: string;
+  titleLocation?: "Top" | "Bottom" | string;
+  ctaBottom?: Button;
+  ctaAlignmentBottom?: "Left" | "Right" | "Center" | string;
+  imageFloatingType?: boolean;
+}
+
+export interface VideoLink {
+  image?: Asset;
+  videoPopup?: boolean;
+  link?: string;
+}
+
+export interface Checklist {
+  list?: {
+    items: {
+      checkListTitle?: { json: any };
+      icon?: Asset;
+      anchorId?: string;
+    }[];
+  };
+}
+
+export interface RichTextItem {
+  title?: string;
+  isTargetBlank?: boolean;
+  richText?: { json: any };
+}
+
+export type CheckPlansProps = {
+  className?: string;
+  title?: string;
+  ctaAlignment?: "new-row" | "same-row";
+  ctaText?: string;
+  buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
+  showButtonAs?: "solid" | "unstyled" | "text" | undefined;
+};

package/src/utils/index.ts

@@ -1,49 +1,49 @@
-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",
-      ],
-    },
-  },
-});
-
-/**
- * Utility function to combine class names using clsx
- * @param inputs - Class values to combine
- * @returns Combined class string
- */
-export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));
-
-export { clsx };
-export type { ClassValue };
+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",
+      ],
+    },
+  },
+});
+
+/**
+ * Utility function to combine class names using clsx
+ * @param inputs - Class values to combine
+ * @returns Combined class string
+ */
+export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));
+
+export { clsx };
+export type { ClassValue };

package/tailwind.config.cjs

@@ -311,6 +311,35 @@ module.exports = {
         "2.5xl": "var(--border-radius-2-5xl)",
         "4xl": "var(--border-radius-4xl)",
         "5xl": "var(--border-radius-5xl)",
+
+        card: "var(--border-radius-card-default)",
+        "card-sm": "var(--border-radius-card-sm)",
+        "card-lg": "var(--border-radius-card-lg)",
+
+        modal: "var(--border-radius-modal-default)",
+        "modal-sm": "var(--border-radius-modal-sm)",
+        "modal-lg": "var(--border-radius-modal-lg)",
+
+        surface: "var(--border-radius-surface-default)",
+        "surface-xs": "var(--border-radius-surface-xs)",
+        "surface-sm": "var(--border-radius-surface-sm)",
+        "surface-lg": "var(--border-radius-surface-lg)",
+        "surface-round": "var(--border-radius-surface-round)",
+
+        button: "var(--border-radius-button-default)",
+        "button-sm": "var(--border-radius-button-sm)",
+        "button-lg": "var(--border-radius-button-lg)",
+        "button-round": "var(--border-radius-button-round)",
+
+        input: "var(--border-radius-input-default)",
+        "input-sm": "var(--border-radius-input-sm)",
+        "input-lg": "var(--border-radius-input-lg)",
+        "input-xl": "var(--border-radius-input-xl)",
+        "input-poppers": "var(--border-radius-input-poppers)",
+
+        image: "var(--border-radius-image-default)",
+        "image-sm": "var(--border-radius-image-sm)",
+        "image-lg": "var(--border-radius-image-lg)",
       },
       boxShadow: {
         drop: "0px 4px 24px -3px rgba(23, 24, 24, 0.08), 0px 6px 32px -4px rgba(23, 24, 24, 0.08)",
@@ -458,20 +487,20 @@ module.exports = {
         ".body1": {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.body1"),  // 1.25rem/20px
-          "line-height": theme("lineHeight.8"),  // 2rem/32px
-          "font-weight": "400",
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
+          "font-weight": "500",
         },
         ".body2": {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.body2"),  // 1.125rem/18px
           "line-height": theme("lineHeight.7"),  // 1.75rem/28px
-          "font-weight": "400",
+          "font-weight": "500",
         },
         ".body3": {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.body3"),  // 1rem/16px
           "line-height": theme("lineHeight.6"),  // 1.5rem/24px
-          "font-weight": "400",
+          "font-weight": "500",
         },
   
         // Footnote & Micro
@@ -493,55 +522,39 @@ module.exports = {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.label1"),  // 1.25rem/20px
           "line-height": theme("lineHeight.7"),  // 1.75rem/28px
-          "font-weight": "600",
+          "font-weight": "900",
         },
         ".label2": {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.label2"),  // 1.125rem/18px
           "line-height": theme("lineHeight.7"),  // 1.75rem/28px
-          "font-weight": "600",
+          "font-weight": "900",
         },
         ".label3": {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.label3"),  // 1rem/16px
           "line-height": theme("lineHeight.6"),  // 1.5rem/24px
-          "font-weight": "600",
+          "font-weight": "900",
         },
         ".label4": {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.label4"),  // 0.875rem/14px
           "line-height": theme("lineHeight.5"),  // 1.25rem/20px
-          "font-weight": "600",
-        },
-        ".label5": {
-          "font-family": theme("fontFamily.spirit"),
-          "font-size": theme("fontSize.label5"),  // 1.25rem/20px
-          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
-          "font-weight": "700",
-        },
-        ".label6": {
-          "font-family": theme("fontFamily.spirit"),
-          "font-size": theme("fontSize.label6"),  // 1.125rem/18px
-          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
-          "font-weight": "700",
+          "font-weight": "900",
         },
       }
 
       const buttonComponents = {
         ".btn-small": {
-          ...typographyComponents[".label6"],
           height: theme("height.12"),
         },
         ".btn-medium": {
-          ...typographyComponents[".label5"],
           height: theme("height.14"),
         },
         ".btn-large": {
-          ...typographyComponents[".label5"],
           height: theme("height.16"),
         },
         ".btn-x-large": {
-          ...typographyComponents[".heading3"],
           height: theme("height.22"),
         },
       };