@windstream/react-shared-components 0.1.77 → 0.1.79

package/src/contentful/blocks/blogs-grid/BlogGrid.stories.tsx

@@ -0,0 +1,156 @@
+import {
+  ALL_ARTICLES,
+  ARTICLES_WITH_COVERS,
+  ARTICLES_WITHOUT_COVERS,
+  CATEGORY_OPTIONS,
+} from "./BlogGrid.stories.mocks";
+import { BlogGrid } from "./index";
+import type { BlogGridProps } from "./types";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+
+/* ------------
+   ArgTypes
+--------------- */
+
+const argTypes: ArgTypes<BlogGridProps> = {
+  paginatedArticles: {
+    control: { type: "object" as const },
+    description: "Array of blog articles to display on the current page",
+  },
+  totalArticles: {
+    control: { type: "number" as const },
+    description: "Total number of articles across all pages",
+  },
+  currentPage: {
+    control: { type: "number" as const },
+    description: "Current active page number",
+  },
+  totalPages: {
+    control: { type: "number" as const },
+    description: "Total number of pages",
+  },
+  selectedCategory: {
+    control: { type: "object" as const },
+    description: "Currently selected category option",
+  },
+  categoryOptions: {
+    control: { type: "object" as const },
+    description: "Available category filter options",
+  },
+};
+
+/* --------
+   Meta
+----------- */
+
+const meta: Meta<typeof BlogGrid> = {
+  title: "Contentful Blocks/BlogGrid",
+  component: BlogGrid,
+  tags: ["autodocs"],
+  argTypes,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A paginated, filterable grid of blog article cards with a category dropdown, article count summary, and pagination controls.",
+      },
+    },
+  },
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: ALL_ARTICLES.length,
+    currentPage: 1,
+    totalPages: 2,
+    selectedCategory: CATEGORY_OPTIONS[0],
+    categoryOptions: CATEGORY_OPTIONS,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* --------
+   Stories
+----------- */
+
+export const Default: Story = {};
+
+export const WithPagination: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: 18,
+    currentPage: 2,
+    totalPages: 3,
+  },
+};
+
+export const SinglePage: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: 6,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    paginatedArticles: [],
+    totalArticles: 9,
+    currentPage: 1,
+    totalPages: 1,
+    selectedCategory: CATEGORY_OPTIONS[1],
+  },
+};
+
+export const CategoryFilterActive: Story = {
+  args: {
+    paginatedArticles: ALL_ARTICLES.filter(
+      (a) => a.category === "Technology",
+    ),
+    totalArticles: 4,
+    currentPage: 1,
+    totalPages: 1,
+    selectedCategory: CATEGORY_OPTIONS[1],
+  },
+};
+
+export const WithCoverImages: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: 6,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const WithoutCoverImages: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITHOUT_COVERS,
+    totalArticles: 3,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const MixedCoverImages: Story = {
+  args: {
+    paginatedArticles: [...ARTICLES_WITH_COVERS.slice(4), ...ARTICLES_WITHOUT_COVERS],
+    totalArticles: 5,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const SingleArticle: Story = {
+  args: {
+    paginatedArticles: [ARTICLES_WITH_COVERS[0]],
+    totalArticles: 1,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};

package/src/contentful/blocks/breadcrumbs/BreadcrumbNavigation.stories.tsx

@@ -0,0 +1,147 @@
+import { BreadcrumbNavigation } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof BreadcrumbNavigation> = {
+  title: "Contentful Blocks/Breadcrumb",
+  component: BreadcrumbNavigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Breadcrumb navigation component used to display the user's location within the site hierarchy.",
+      },
+    },
+  },
+  args: {
+    textColor: "dark",
+    mobileTextColor: undefined,
+    desktopTextColor: undefined,
+    maxWidth: true,
+    float: "desktop",
+    links: [
+      { buttonLabel: "Home", href: "/" },
+      { buttonLabel: "Category", href: "/category" },
+      { buttonLabel: "Current Page" },
+    ],
+  },
+  argTypes: {
+    links: { control: "object" },
+    textColor: {
+      control: "radio",
+      options: ["dark", "light"],
+    },
+    mobileTextColor: {
+      control: "radio",
+      options: ["dark", "light"],
+    },
+    desktopTextColor: {
+      control: "radio",
+      options: ["dark", "light"],
+    },
+    maxWidth: { control: "boolean" },
+    float: {
+      control: "radio",
+      options: ["none", "mobile", "desktop", "always"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---------------- Stories ---------------- */
+
+export const Default: Story = {};
+
+export const LightText: Story = {
+  args: {
+    textColor: "light",
+  },
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export const WithImages: Story = {
+  args: {
+    links: [
+      {
+        buttonLabel: "Home",
+        href: "/",
+
+        image: {
+          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
+          alt: "Home",
+        },
+      },
+      {
+        buttonLabel: "Category",
+        href: "/category",
+
+        image: {
+          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
+          alt: "Category",
+        },
+      },
+      {
+        buttonLabel: "Current Page",
+      },
+    ],
+  },
+};
+
+export const SingleLink: Story = {
+  args: {
+    links: [{ buttonLabel: "Current Page" }],
+  },
+};
+
+export const EmptyLinks: Story = {
+  args: {
+    links: [],
+  },
+};
+
+export const FloatOnMobile: Story = {
+  args: {
+    float: "mobile",
+  },
+};
+
+export const FloatOnDesktop: Story = {
+  args: {
+    float: "desktop",
+  },
+};
+
+export const FloatAlways: Story = {
+  args: {
+    float: "always",
+  },
+};
+
+export const MaxWidthDisabled: Story = {
+  args: {
+    maxWidth: false,
+  },
+};
+
+export const MixedTextColors: Story = {
+  args: {
+    mobileTextColor: "light",
+    desktopTextColor: "dark",
+    float: "mobile",
+  },
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};

package/src/contentful/blocks/breadcrumbs/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Button from "../button";
 import { BreadcrumbNavigationProps } from "./types";
 
 import { MaterialIcon } from "@shared/components/material-icon";
@@ -11,24 +10,37 @@ export const BreadcrumbNavigation: React.FC<
   const {
     links = [],
     textColor = "dark",
+    mobileTextColor,
+    desktopTextColor,
     maxWidth = true,
-    floatOnMobile = false,
+    float = "desktop",
   } = props;
-  const color = floatOnMobile
-    ? textColor === "dark"
-      ? "text-text"
-      : "text-white"
-    : textColor === "dark"
-      ? "text-white xl:text-text"
-      : "text-text xl:text-white";
+  const resolvedMobile =
+    mobileTextColor ?? (float === "desktop" ? "dark" : textColor);
+  const resolvedDesktop =
+    desktopTextColor ?? (float === "mobile" ? "dark" : textColor);
+  const mobileColor = resolvedMobile === "dark" ? "text-text" : "text-white";
+  const desktopColor =
+    resolvedDesktop === "dark" ? "xl:text-text" : "xl:text-white";
+  const color = `${mobileColor} ${desktopColor}`;
+
+  const olPosition =
+    float === "always"
+      ? "absolute"
+      : float === "mobile"
+        ? "absolute xl:relative"
+        : float === "desktop"
+          ? "relative xl:absolute"
+          : "relative";
+
   if (!links.length) return null;
   return (
     <nav
       aria-label="Breadcrumb"
-      className={`${maxWidth ? `${!floatOnMobile && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
+      className={`${maxWidth ? `${float === "none" && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
     >
       <ol
-        className={`right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 ${floatOnMobile ? "absolute" : "relative xl:absolute"} xl:mx-auto xl:flex-wrap xl:px-3`}
+        className={`right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 ${olPosition} xl:mx-auto xl:flex-wrap xl:px-3`}
       >
         {links.map((link, index) => {
           const { image, ...linkProps } = link;
@@ -49,11 +61,13 @@ export const BreadcrumbNavigation: React.FC<
                   className="mr-2 h-10 w-10"
                 />
               )}
-              <Button
-                {...linkProps}
-                linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
-                linkVariant="unstyled"
-              />
+              <a
+                href={linkProps.href}
+                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
+              >
+                {linkProps.buttonLabel}
+              </a>
+
               <MaterialIcon name="chevron_right" className={`${color} `} />
             </li>
           ) : (

package/src/contentful/blocks/breadcrumbs/types.ts

@@ -1,6 +1,8 @@
 export type BreadcrumbNavigationProps = {
   links?: Array<any>;
   textColor?: "dark" | "light";
+  mobileTextColor?: "dark" | "light";
+  desktopTextColor?: "dark" | "light";
   maxWidth?: boolean;
-  floatOnMobile?: boolean;
+  float?: "none" | "mobile" | "desktop" | "always";
 };

package/src/contentful/blocks/callout/index.tsx

@@ -23,29 +23,20 @@ const backgroundClassMap: Record<string, string> = {
 
 // Literal class strings (Tailwind JIT only picks up literal tokens; do not
 // build these by concatenation at runtime).
-const baseColMap: Record<number, string> = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6",
+// Per-card responsive width classes for the flex-wrap layout. Mobile is
+// always full-width; md renders 1 or 2 columns; lg renders up to 6.
+// The calc() values subtract a portion of the gap so cards fit cleanly.
+const mdWidthMap: Record<number, string> = {
+  1: "md:w-full",
+  2: "md:w-[calc(50%-1rem)]",
 };
-const lgColMap: Record<number, string> = {
-  1: "lg:grid-cols-1",
-  2: "lg:grid-cols-2",
-  3: "lg:grid-cols-3",
-  4: "lg:grid-cols-4",
-  5: "lg:grid-cols-5",
-  6: "lg:grid-cols-6",
-};
-const xlColMap: Record<number, string> = {
-  1: "xl:grid-cols-1",
-  2: "xl:grid-cols-2",
-  3: "xl:grid-cols-3",
-  4: "xl:grid-cols-4",
-  5: "xl:grid-cols-5",
-  6: "xl:grid-cols-6",
+const lgWidthMap: Record<number, string> = {
+  1: "lg:w-full",
+  2: "lg:w-[calc(50%-0.75rem)]",
+  3: "lg:w-[calc(33.333%-1rem)]",
+  4: "lg:w-[calc(25%-1.125rem)]",
+  5: "lg:w-[calc(20%-1.2rem)]",
+  6: "lg:w-[calc(16.666%-1.25rem)]",
 };
 
 /**
@@ -95,32 +86,43 @@ export const Callout: React.FC<CalloutProps> = ({
   );
   const lgCols = clampCol(Math.min(desktopCols, itemCount || desktopCols));
 
-  // Mobile / md: 1 col when stacking flag is on, else 2 (or 1 when single).
-  const mobileCols = clampCol(cardStackingMobile ? 1 : itemCount === 1 ? 1 : 2);
-
-  // When cardsWidth is false: full-width stacked layout (no grid).
-  const gridClass = cardsWidth
+  // Layout selection:
+  //   - cardsWidth === false  → explicit vertical stack (single column)
+  //   - any other value (true / undefined / string / etc.) → legacy
+  //     flex-wrap layout that always renders multi-column on md+ and
+  //     full-width on mobile. This matches the pre-0.1.79 DOM and keeps
+  //     consumers like SMB-browse rendering correctly without changes.
+  const isStackMode = cardsWidth === false;
+  const gridClass = isStackMode
     ? cx(
-        "grid items-stretch self-stretch",
-        noGutter ? "gap-0" : "gap-6",
-        baseColMap[mobileCols],
-        lgColMap[lgCols],
-        xlColMap[desktopCols]
-      )
-    : cx(
         "flex flex-col items-stretch self-stretch",
         noGutter ? "gap-0" : "gap-6"
+      )
+    : cx(
+        "flex flex-wrap items-stretch justify-center self-stretch",
+        noGutter ? "gap-0" : "gap-6",
+        noGutter ? "md:gap-0" : "md:gap-6"
+      );
+
+  // Per-card width classes — only used for flex-wrap layout. Mobile is
+  // full-width; md respects `cardStackingMobile` (1 col when true, 2 cols
+  // when false); lg uses the optimal column count. Stack mode skips this.
+  const cardWidthClass = isStackMode
+    ? ""
+    : cx(
+        "w-full",
+        mdWidthMap[clampCol(cardStackingMobile ? 1 : Math.min(2, desktopCols))],
+        lgWidthMap[lgCols]
       );
 
   const renderCard = (item: CalloutItem, index: number) => {
     const itemCardType: CalloutCardType = item.cardType ?? cardType;
 
-    // When cardsWidth is true we control widths via grid columns, so do
-    // NOT pass legacy lgWidth/mdWidth (which would force fixed pixel
-    // widths and break the responsive grid).
-    const widthProps = cardsWidth
-      ? {}
-      : { lgWidth: undefined, mdWidth: undefined };
+    // Stack mode preserves any legacy lgWidth/mdWidth on the card itself;
+    // flex-wrap mode controls width via the wrapper div, so strip them.
+    const widthProps = isStackMode
+      ? { lgWidth: undefined, mdWidth: undefined }
+      : {};
 
     switch (itemCardType) {
       case "blog": {
@@ -223,7 +225,18 @@ export const Callout: React.FC<CalloutProps> = ({
             )}
           </div>
           <div className={cx("card-holder", gridClass)}>
-            {items.map((item, index: number) => renderCard(item, index))}
+            {items.map((item, index: number) =>
+              isStackMode ? (
+                renderCard(item, index)
+              ) : (
+                <div
+                  key={`callout-card-${index}`}
+                  className={cx("callout-card", cardWidthClass)}
+                >
+                  {renderCard(item, index)}
+                </div>
+              )
+            )}
           </div>
           {(cta || finePrint) && (
             <div className="flex flex-col items-center gap-4">

package/src/contentful/blocks/callout/types.ts

@@ -35,8 +35,12 @@ export type CalloutProps = {
    * When `true` (default) cards are laid out in a responsive Tailwind
    * grid sized by `maxCardsPerRow`. When `false` the cards stretch
    * full-width and stack vertically (no inner widths).
+   *
+   * Accepts a string for backward compatibility with legacy consumers
+   * that pass a Tailwind width class (e.g. "w-1/2"); any truthy value
+   * enables grid mode — the string itself is not applied.
    */
-  cardsWidth?: boolean;
+  cardsWidth?: boolean | string;
   maxCardsPerRow?: number;
   noGutter?: boolean;
   items: CalloutItem[];

package/src/contentful/blocks/navigation/index.tsx

@@ -258,7 +258,8 @@ export const Navigation: React.FC<NavigationProps> = props => {
                 </div>
               </div>
               <div className="flex h-full items-center gap-10">
-                {showCallNowCtaInMainNav
+                {showCallNowCtaInMainNav &&
+                !(displayUtilityNavigation && displayCallNowCta)
                   ? renderMainNavCallCta(onCallClickDesktop)
                   : null}
                 {displaySearchBar ? (