@windstream/react-shared-components 0.1.78 → 0.1.80

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

@@ -0,0 +1,144 @@
+import { BlogCardProps, BlogCategoryOption } from "./types";
+
+/* ----------------------
+   CATEGORY OPTIONS
+------------------------- */
+
+export const CATEGORY_OPTIONS: BlogCategoryOption[] = [
+  { value: "all", label: "All Categories" },
+  { value: "technology", label: "Technology" },
+  { value: "business", label: "Business" },
+  { value: "lifestyle", label: "Lifestyle" },
+  { value: "entertainment", label: "Entertainment" },
+];
+
+/* ----------------------
+   ARTICLES WITH COVERS (6)
+------------------------- */
+
+export const ARTICLES_WITH_COVERS: BlogCardProps[] = [
+  {
+    slug: "blog/getting-started-with-fiber",
+    title: "Getting Started with Fiber Internet",
+    shortDescription:
+      "Everything you need to know about making the switch to fiber optic internet for your home.",
+    blogCreationDate: "2025-12-01",
+    category: "Technology",
+    cover: {
+      url: "https://placehold.co/600x338/0ea5e9/ffffff?text=Fiber+Internet",
+      width: 600,
+      height: 338,
+      title: "Fiber internet illustration",
+    },
+  },
+  {
+    slug: "blog/smart-home-tips",
+    title: "10 Smart Home Tips for Beginners",
+    shortDescription:
+      "Transform your living space with these easy smart-home upgrades that anyone can do.",
+    blogCreationDate: "2025-11-18",
+    category: "Technology",
+    cover: {
+      url: "https://placehold.co/600x338/8b5cf6/ffffff?text=Smart+Home",
+      width: 600,
+      height: 338,
+      title: "Smart home devices",
+    },
+  },
+  {
+    slug: "blog/remote-work-connectivity",
+    title: "Stay Connected While Working Remotely",
+    shortDescription:
+      "Best practices for maintaining a rock-solid internet connection in your home office.",
+    blogCreationDate: "2025-11-05",
+    category: "Business",
+    cover: {
+      url: "https://placehold.co/600x338/f59e0b/ffffff?text=Remote+Work",
+      width: 600,
+      height: 338,
+      title: "Remote work setup",
+    },
+  },
+  {
+    slug: "blog/streaming-quality-guide",
+    title: "The Ultimate Streaming Quality Guide",
+    shortDescription:
+      "How to get the best picture and sound from your favorite streaming services.",
+    blogCreationDate: "2025-10-22",
+    category: "Entertainment",
+    cover: {
+      url: "https://placehold.co/600x338/ec4899/ffffff?text=Streaming",
+      width: 600,
+      height: 338,
+      title: "Streaming setup",
+    },
+  },
+  {
+    slug: "blog/digital-wellness",
+    title: "Digital Wellness: Finding Balance Online",
+    shortDescription:
+      "Practical strategies for maintaining a healthy relationship with technology.",
+    blogCreationDate: "2025-10-10",
+    category: "Lifestyle",
+    cover: {
+      url: "https://placehold.co/600x338/10b981/ffffff?text=Digital+Wellness",
+      width: 600,
+      height: 338,
+      title: "Digital wellness",
+    },
+  },
+  {
+    slug: "blog/cybersecurity-basics",
+    title: "Cybersecurity Basics for Every Household",
+    shortDescription:
+      "Simple steps to protect your family's data and devices from online threats.",
+    blogCreationDate: "2025-09-28",
+    category: "Technology",
+    cover: {
+      url: "https://placehold.co/600x338/ef4444/ffffff?text=Cybersecurity",
+      width: 600,
+      height: 338,
+      title: "Cybersecurity basics",
+    },
+  },
+];
+
+/* ----------------------
+   ARTICLES WITHOUT COVERS (3)
+------------------------- */
+
+export const ARTICLES_WITHOUT_COVERS: BlogCardProps[] = [
+  {
+    slug: "blog/home-network-setup",
+    title: "How to Set Up Your Home Network Like a Pro",
+    shortDescription:
+      "A step-by-step guide to configuring routers, extenders, and mesh systems.",
+    blogCreationDate: "2025-09-15",
+    category: "Technology",
+  },
+  {
+    slug: "blog/budgeting-internet-plan",
+    title: "Choosing the Right Internet Plan on a Budget",
+    shortDescription:
+      "Compare plans and find the best value for your household's internet needs.",
+    blogCreationDate: "2025-09-01",
+    category: "Business",
+  },
+  {
+    slug: "blog/gaming-online",
+    title: "Level Up Your Online Gaming Experience",
+    shortDescription:
+      "Reduce lag, improve ping, and get the most out of competitive online gaming.",
+    blogCreationDate: "2025-08-20",
+    category: "Entertainment",
+  },
+];
+
+/* ----------------------
+   COMBINED (all 9 articles)
+------------------------- */
+
+export const ALL_ARTICLES: BlogCardProps[] = [
+  ...ARTICLES_WITH_COVERS,
+  ...ARTICLES_WITHOUT_COVERS,
+];

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/cards/simple-card/index.tsx

@@ -169,7 +169,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
   return (
     <section
       className={cx(
-        "callout-card relative flex w-full flex-col rounded-3xl p-0",
+        "callout-card relative flex h-full w-full flex-col rounded-3xl p-0",
         card.shadow && "shadow-card",
         card.image && !fullSizeImage && !card.showBackgroundImage && "pt-1",
         !card.applyCardBackgroundColor &&