@windstream/react-shared-components 0.0.80 → 0.0.81

package/src/types/micro-components.ts

@@ -1,80 +1,80 @@
-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 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 };
+}

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

@@ -381,152 +381,148 @@ module.exports = {
         // Headings
         ".heading1": {
           "font-family": theme("fontFamily.spirit"),
-          "font-size": theme("fontSize.heading1"),
-          "line-height": theme("lineHeight.15"),
-          "font-weight": "700",
+          "font-size": theme("fontSize.heading1"),  // 3rem/48px
+          "line-height": theme("lineHeight.12"),   // 3rem/48px
+          "font-weight": "900",
         },
         ".heading2": {
           "font-family": theme("fontFamily.spirit"),
-          "font-size": theme("fontSize.heading2"),
-          "line-height": theme("lineHeight.12"), 
-          "font-weight": "700",
+          "font-size": theme("fontSize.heading2"),  // 2.25rem/36px
+          "line-height": theme("lineHeight.10"),   // 2.5rem/40px
+          "font-weight": "900",
         },
         ".heading3": {
           "font-family": theme("fontFamily.spirit"),
-          "font-size": theme("fontSize.heading3"),
-          "line-height": theme("lineHeight[9.2]"),
-          "font-weight": "700",
+          "font-size": theme("fontSize.heading3"),  // 1.875rem/30px
+          "line-height": theme("lineHeight.9"),  // 2.25rem/36px
+          "font-weight": "900",
         },
         ".heading4": {
           "font-family": theme("fontFamily.spirit"),
-          "font-size": theme("fontSize.heading4"),
-          "line-height": theme("lineHeight.8"), 
-          "font-weight": "700",
+          "font-size": theme("fontSize.heading4"),  // 1.5rem/24px
+          "line-height": theme("lineHeight.8"),   // 2rem/32px
+          "font-weight": "900",
         },
         ".heading5": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.heading5"),
-          "line-height": theme("lineHeight.9"),
-          "font-weight": "600",
+          "font-size": theme("fontSize.heading5"),  // 1.875rem/30px
+          "line-height": theme("lineHeight.9"),  // 2.25rem/36px
+          "font-weight": "900",
         },
         ".heading6": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.heading6"),
-          "line-height": theme("lineHeight.8"),
-          "font-weight": "600",
+          "font-size": theme("fontSize.heading6"),  // 1.5rem/24px
+          "line-height": theme("lineHeight.8"),  //  2rem/32px
+          "font-weight": "900",
         },
   
         // Subheadings
         ".subheading1": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.subheading1"),
-          "line-height": theme("lineHeight.8"),
-          "font-weight": "400",
+          "font-size": theme("fontSize.subheading1"),  // 1.5rem/24px
+          "line-height": theme("lineHeight.8"),  // 2rem/32px
+          "font-weight": "700",
         },
         ".subheading2": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.subheading2"),
-          "line-height": theme("lineHeight.8"),
-          "font-weight": "700",
-          "letter-spacing": "1.44px",
-          "text-transform": "uppercase"
+          "font-size": theme("fontSize.subheading2"),  // 1.5rem/24px
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
+          "font-weight": "900",
         },
         ".subheading3": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.subheading3"),
-          "line-height": theme("lineHeight.7"),
-          "font-weight": "400",
+          "font-size": theme("fontSize.subheading3"),  // 1.125rem/18px
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
+          "font-weight": "700",
         },
         ".subheading4": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.subheading4"),
-          "line-height": theme("lineHeight.7"),
-          "font-weight": "700",
-          "letter-spacing": "1.08px",
-          "text-transform": "uppercase"
+          "font-size": theme("fontSize.subheading4"),  // 1.125rem/18px
+          "line-height": theme("lineHeight.6"),  // 1.5rem/24px
+          "font-weight": "900",
         },
         ".subheading5": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.subheading5"),
-          "line-height": theme("lineHeight.18"),
-          "font-weight": "600",
+          "font-size": theme("fontSize.subheading5"),  // 3.75rem/60px
+          "line-height": theme("lineHeight.15"),  // 3.75rem/60px
+          "font-weight": "500",
         },
         ".subheading6": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.subheading6"),
-          "line-height": theme("lineHeight.15"),
-          "font-weight": "600",
+          "font-size": theme("fontSize.subheading6"),  // 3rem/48px
+          "line-height": theme("lineHeight.12"),  // 3rem/48px
+          "font-weight": "500",
         },
   
         // Body text
         ".body1": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.body1"),
-          "line-height": theme("lineHeight.8"),
+          "font-size": theme("fontSize.body1"),  // 1.25rem/20px
+          "line-height": theme("lineHeight.8"),  // 2rem/32px
           "font-weight": "400",
         },
         ".body2": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.body2"),
-          "line-height": theme("lineHeight.7"),
+          "font-size": theme("fontSize.body2"),  // 1.125rem/18px
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
           "font-weight": "400",
         },
         ".body3": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.body3"),
-          "line-height": theme("lineHeight.6"),
+          "font-size": theme("fontSize.body3"),  // 1rem/16px
+          "line-height": theme("lineHeight.6"),  // 1.5rem/24px
           "font-weight": "400",
         },
   
         // Footnote & Micro
         ".footnote": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.footnote"),
-          "line-height": theme("lineHeight.5"),
-          "font-weight": "400",
+          "font-size": theme("fontSize.footnote"),  // 0.875rem/14px
+          "line-height": theme("lineHeight.5"),  // 1.25rem/20px
+          "font-weight": "500",
         },
         ".micro": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.micro"),
-          "line-height": theme("lineHeight.4"),
-          "font-weight": "400",
+          "font-size": theme("fontSize.micro"),  // 0.75rem/12px
+          "line-height": theme("lineHeight.4"),  // 1rem/16px
+          "font-weight": "500",
         },
   
         // Labels
         ".label1": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.label1"),
-          "line-height": theme("lineHeight.7"),
+          "font-size": theme("fontSize.label1"),  // 1.25rem/20px
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
           "font-weight": "600",
         },
         ".label2": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.label2"),
-          "line-height": theme("lineHeight.7"),
+          "font-size": theme("fontSize.label2"),  // 1.125rem/18px
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
           "font-weight": "600",
         },
         ".label3": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.label3"),
-          "line-height": theme("lineHeight.6"),
+          "font-size": theme("fontSize.label3"),  // 1rem/16px
+          "line-height": theme("lineHeight.6"),  // 1.5rem/24px
           "font-weight": "600",
         },
         ".label4": {
           "font-family": theme("fontFamily.sans"),
-          "font-size": theme("fontSize.label4"),
-          "line-height": theme("lineHeight.5"),
+          "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"),
-          "line-height": theme("lineHeight.7"),
+          "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"),
-          "line-height": theme("lineHeight.7"),
+          "font-size": theme("fontSize.label6"),  // 1.125rem/18px
+          "line-height": theme("lineHeight.7"),  // 1.75rem/28px
           "font-weight": "700",
         },
       }