@windstream/react-shared-components 0.1.29 → 0.1.30

package/src/contentful/blocks/blogs-grid/index.tsx

@@ -1,134 +1,134 @@
-"use client";
-
-import { BlogCategoryOption, BlogGridProps } from "./types";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-
-import { Pagination } from "@shared/components/pagination";
-import { Select } from "@shared/components/select";
-import { Text } from "@shared/components/text";
-import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
-
-export function BlogGrid({
-  paginatedArticles,
-  totalArticles,
-  currentPage,
-  totalPages,
-  selectedCategory,
-  categoryOptions,
-}: BlogGridProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  function updateQueryParams(key: string, value: string) {
-    const params = new URLSearchParams(searchParams.toString());
-    if (value) {
-      params.set(key, value);
-    } else {
-      params.delete(key);
-    }
-    // Delete page when category changes
-    if (key === "category") {
-      params.delete("page");
-    }
-    router.push(`${pathname}?${params.toString()}`, { scroll: false });
-  }
-
-  function handleCategoryChange(value: unknown) {
-    if (!value || Array.isArray(value)) return;
-    const cat = value as BlogCategoryOption;
-    updateQueryParams("category", cat.value === "all" ? "" : cat.value);
-  }
-
-  function handlePageChange(page: number) {
-    updateQueryParams("page", page === 1 ? "" : page.toString());
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
-
-  return (
-    <section
-      aria-label="Blog articles"
-      data-section-type={"blogs-grid"}
-      data-section-index={"0"}
-    >
-      {/* Controls bar */}
-      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
-        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
-          recent articles
-        </Text>
-
-        <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
-          {/* Showing count */}
-          <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
-            <Text as="span" className="hidden md:block">
-              showing
-            </Text>
-            <strong className="block text-nowrap font-bold text-text-info">
-              <Text as="span" className="md:hidden">
-                showing{" "}
-              </Text>
-              {paginatedArticles.length} of {totalArticles} articles
-            </strong>
-          </Text>
-
-          {/* Filter dropdown */}
-          <Select
-            options={categoryOptions}
-            value={selectedCategory}
-            onChange={handleCategoryChange}
-            className="w-full md:w-[280px]"
-          />
-        </div>
-      </div>
-
-      {/* Articles grid */}
-      {paginatedArticles.length > 0 ? (
-        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
-          {paginatedArticles.map((article, index) => {
-            const href = article.slug.startsWith("/")
-              ? article.slug
-              : `/${article.slug}`;
-            const coverImage = article?.cover?.url
-              ? {
-                  src: article?.cover?.url,
-                  alt:
-                    article?.cover?.title ||
-                    article?.title ||
-                    "Blog article image",
-                  width: article?.cover?.width || 600,
-                  height: article?.cover?.height || 338,
-                }
-              : undefined;
-
-            return (
-              <BlogCard
-                key={article.slug}
-                href={href}
-                title={article.title}
-                description={article.shortDescription}
-                date={article.blogCreationDate}
-                category={article.category}
-                image={coverImage}
-                index={index}
-              />
-            );
-          })}
-        </div>
-      ) : (
-        <Text className="px-6 py-12 text-center text-text-info">
-          No articles found.
-        </Text>
-      )}
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={handlePageChange}
-          ariaLabel="Blog article pagination"
-        />
-      )}
-    </section>
-  );
-}
+"use client";
+
+import { BlogCategoryOption, BlogGridProps } from "./types";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+import { Pagination } from "@shared/components/pagination";
+import { Select } from "@shared/components/select";
+import { Text } from "@shared/components/text";
+import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
+
+export function BlogGrid({
+  paginatedArticles,
+  totalArticles,
+  currentPage,
+  totalPages,
+  selectedCategory,
+  categoryOptions,
+}: BlogGridProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  function updateQueryParams(key: string, value: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) {
+      params.set(key, value);
+    } else {
+      params.delete(key);
+    }
+    // Delete page when category changes
+    if (key === "category") {
+      params.delete("page");
+    }
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+  }
+
+  function handleCategoryChange(value: unknown) {
+    if (!value || Array.isArray(value)) return;
+    const cat = value as BlogCategoryOption;
+    updateQueryParams("category", cat.value === "all" ? "" : cat.value);
+  }
+
+  function handlePageChange(page: number) {
+    updateQueryParams("page", page === 1 ? "" : page.toString());
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  return (
+    <section
+      aria-label="Blog articles"
+      data-section-type={"blogs-grid"}
+      data-section-index={"0"}
+    >
+      {/* Controls bar */}
+      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
+        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
+          recent articles
+        </Text>
+
+        <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
+          {/* Showing count */}
+          <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
+            <Text as="span" className="hidden md:block">
+              showing
+            </Text>
+            <strong className="block text-nowrap font-bold text-text-info">
+              <Text as="span" className="md:hidden">
+                showing{" "}
+              </Text>
+              {paginatedArticles.length} of {totalArticles} articles
+            </strong>
+          </Text>
+
+          {/* Filter dropdown */}
+          <Select
+            options={categoryOptions}
+            value={selectedCategory}
+            onChange={handleCategoryChange}
+            className="w-full md:w-[280px]"
+          />
+        </div>
+      </div>
+
+      {/* Articles grid */}
+      {paginatedArticles.length > 0 ? (
+        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
+          {paginatedArticles.map((article, index) => {
+            const href = article.slug.startsWith("/")
+              ? article.slug
+              : `/${article.slug}`;
+            const coverImage = article?.cover?.url
+              ? {
+                  src: article?.cover?.url,
+                  alt:
+                    article?.cover?.title ||
+                    article?.title ||
+                    "Blog article image",
+                  width: article?.cover?.width || 600,
+                  height: article?.cover?.height || 338,
+                }
+              : undefined;
+
+            return (
+              <BlogCard
+                key={article.slug}
+                href={href}
+                title={article.title}
+                description={article.shortDescription}
+                date={article.blogCreationDate}
+                category={article.category}
+                image={coverImage}
+                index={index}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <Text className="px-6 py-12 text-center text-text-info">
+          No articles found.
+        </Text>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+          ariaLabel="Blog article pagination"
+        />
+      )}
+    </section>
+  );
+}

package/src/contentful/blocks/blogs-grid/types.ts

@@ -1,26 +1,26 @@
-export interface BlogCardProps {
-  slug: string;
-  title?: string;
-  shortDescription?: string;
-  blogCreationDate?: string;
-  category?: string;
-  cover?: {
-    url: string;
-    width?: number;
-    height?: number;
-    title?: string;
-  };
-}
-export interface BlogGridProps {
-  paginatedArticles: BlogCardProps[];
-  totalArticles: number;
-  currentPage: number;
-  totalPages: number;
-  selectedCategory: BlogCategoryOption;
-  categoryOptions: BlogCategoryOption[];
-}
-
-export interface BlogCategoryOption {
-  value: string;
-  label: string;
-}
+export interface BlogCardProps {
+  slug: string;
+  title?: string;
+  shortDescription?: string;
+  blogCreationDate?: string;
+  category?: string;
+  cover?: {
+    url: string;
+    width?: number;
+    height?: number;
+    title?: string;
+  };
+}
+export interface BlogGridProps {
+  paginatedArticles: BlogCardProps[];
+  totalArticles: number;
+  currentPage: number;
+  totalPages: number;
+  selectedCategory: BlogCategoryOption;
+  categoryOptions: BlogCategoryOption[];
+}
+
+export interface BlogCategoryOption {
+  value: string;
+  label: string;
+}

package/src/contentful/blocks/button/Button.stories.tsx

@@ -1,40 +1,40 @@
-import { Button } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Button> = {
-  title: "Contentful Blocks/Button",
-  component: Button,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful button block. Renders as solid (BrandButton) or text (Link).",
-      },
-    },
-  },
-  args: {
-    showButtonAs: "solid",
-    buttonVariant: "primary_brand",
-    buttonLabel: "Button",
-    buttonPrefix: "",
-    badge: "",
-    badgeIcon: "",
-    buttonIcon: "",
-    buttonIconPosition: "left",
-    href: "",
-    target: "_self",
-    anchorId: "",
-    preserveQueryParameters: false,
-    clickToOpen: "",
-    tabmodalNameToOpen: "",
-    preDefinedFunctionExecution: "",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Button } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Contentful Blocks/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful button block. Renders as solid (BrandButton) or text (Link).",
+      },
+    },
+  },
+  args: {
+    showButtonAs: "solid",
+    buttonVariant: "primary_brand",
+    buttonLabel: "Button",
+    buttonPrefix: "",
+    badge: "",
+    badgeIcon: "",
+    buttonIcon: "",
+    buttonIconPosition: "left",
+    href: "",
+    target: "_self",
+    anchorId: "",
+    preserveQueryParameters: false,
+    clickToOpen: "",
+    tabmodalNameToOpen: "",
+    preDefinedFunctionExecution: "",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,121 +1,129 @@
-import React from "react";
-import { ButtonProps } from "./types";
-
-import { BrandButton } from "@shared/components/brand-button";
-import { Button as CoreButton } from "@shared/components/button";
-import { Link } from "@shared/components/link";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { buildPreservedQueryHref } from "@shared/utils/utm";
-
-export const Button: React.FC<ButtonProps> = props => {
-  const {
-    showButtonAs = "solid",
-    buttonVariant = "primary_brand",
-    buttonLabel,
-    buttonPrefix,
-    href,
-    target = "_blank",
-    anchorId,
-    linkClassName,
-    linkVariant,
-    fullWidth,
-    preDefinedFunctionExecution,
-    renderCheckPlans,
-    buttonClassName,
-    clickToOpen,
-    tabmodalNameToOpen,
-    onModalButtonClick,
-    onClick,
-    iconName,
-    size,
-    preserveQueryParameters,
-    ...rest
-  } = props;
-
-  if (preDefinedFunctionExecution === "check availability") {
-    const checkPlansNode = renderCheckPlans?.({
-      ctaText: buttonLabel,
-      buttonVariant: buttonVariant,
-      showButtonAs: showButtonAs,
-      cta: { ...props },
-    });
-    return checkPlansNode;
-  }
-
-  function handleModalClick() {
-    if (clickToOpen === "modal") {
-      onModalButtonClick?.(tabmodalNameToOpen);
-    }
-  }
-
-  function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
-    handleModalClick();
-    onClick?.(event);
-  }
-
-  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
-    handleModalClick();
-    onClick?.(event);
-  }
-
-  // Resolve the final href — merge non-UTM query params when preserveQueryParameters is true
-  const currentSearch =
-    typeof window !== "undefined" ? window.location.search : "";
-  const resolvedHref =
-    href && preserveQueryParameters && currentSearch
-      ? buildPreservedQueryHref(href, currentSearch)
-      : href;
-
-  let CTA = (
-    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
-  );
-
-  switch (showButtonAs) {
-    case "solid":
-      CTA = resolvedHref ? (
-        <BrandButton
-          as="a"
-          href={resolvedHref}
-          id={anchorId}
-          variant={buttonVariant}
-          text={buttonLabel}
-          label={buttonPrefix}
-          fullWidth={fullWidth}
-          size={size}
-          onClick={linkClick}
-        />
-      ) : (
-        <BrandButton
-          id={anchorId}
-          variant={buttonVariant}
-          text={buttonLabel}
-          label={buttonPrefix}
-          fullWidth={fullWidth}
-          size={size}
-          onClick={buttonClick}
-        />
-      );
-      break;
-    case "text":
-      CTA = (
-        <Link
-          href={resolvedHref}
-          target={target}
-          variant={linkVariant || "default"}
-          className={`text-text-brand ${linkClassName || ""}`}
-          onClick={linkClick}
-        >
-          {buttonLabel}{" "}
-          {iconName && <MaterialIcon name={iconName as any} size={24} />}
-        </Link>
-      );
-      break;
-    case "unstyled": // For unstyled, we can use the CoreButton without any additional styling
-      break;
-    default: // For default, we can use the CoreButton without any additional styling
-      break;
-  }
-
-  return CTA;
-};
-export default Button;
+import React from "react";
+import { ButtonProps } from "./types";
+
+import { BrandButton } from "@shared/components/brand-button";
+import { Button as CoreButton } from "@shared/components/button";
+import { Link } from "@shared/components/link";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { buildPreservedQueryHref } from "@shared/utils/utm";
+
+export const Button: React.FC<ButtonProps> = props => {
+  const {
+    showButtonAs = "solid",
+    buttonVariant = "primary_brand",
+    buttonLabel,
+    buttonPrefix,
+    href,
+    target = "_blank",
+    anchorId,
+    linkClassName,
+    linkVariant,
+    fullWidth,
+    preDefinedFunctionExecution,
+    renderCheckPlans,
+    buttonClassName,
+    clickToOpen,
+    tabmodalNameToOpen,
+    onModalButtonClick,
+    onClick,
+    iconName,
+    iconFill = 0,
+    size,
+    iconSize = 24,
+    preserveQueryParameters,
+    ...rest
+  } = props;
+
+  if (preDefinedFunctionExecution === "check availability") {
+    const checkPlansNode = renderCheckPlans?.({
+      ctaText: buttonLabel,
+      buttonVariant: buttonVariant,
+      showButtonAs: showButtonAs,
+      cta: { ...props },
+    });
+    return checkPlansNode;
+  }
+
+  function handleModalClick() {
+    if (clickToOpen === "modal") {
+      onModalButtonClick?.(tabmodalNameToOpen);
+    }
+  }
+
+  function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
+    handleModalClick();
+    onClick?.(event);
+  }
+
+  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
+    handleModalClick();
+    onClick?.(event);
+  }
+
+  // Resolve the final href — merge non-UTM query params when preserveQueryParameters is true
+  const currentSearch =
+    typeof window !== "undefined" ? window.location.search : "";
+  const resolvedHref =
+    href && preserveQueryParameters && currentSearch
+      ? buildPreservedQueryHref(href, currentSearch)
+      : href;
+
+  let CTA = (
+    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
+  );
+
+  switch (showButtonAs) {
+    case "solid":
+      CTA = resolvedHref ? (
+        <BrandButton
+          as="a"
+          href={resolvedHref}
+          id={anchorId}
+          variant={buttonVariant}
+          text={buttonLabel}
+          label={buttonPrefix}
+          fullWidth={fullWidth}
+          size={size}
+          onClick={linkClick}
+        />
+      ) : (
+        <BrandButton
+          id={anchorId}
+          variant={buttonVariant}
+          text={buttonLabel}
+          label={buttonPrefix}
+          fullWidth={fullWidth}
+          size={size}
+          onClick={buttonClick}
+        />
+      );
+      break;
+    case "text":
+      CTA = (
+        <Link
+          href={resolvedHref}
+          target={target}
+          variant={linkVariant || "default"}
+          className={`text-text-brand ${linkClassName || ""}`}
+          onClick={linkClick}
+        >
+          {buttonLabel}{" "}
+          {iconName && (
+            <MaterialIcon
+              name={iconName as any}
+              size={iconSize}
+              fill={iconFill}
+            />
+          )}
+        </Link>
+      );
+      break;
+    case "unstyled": // For unstyled, we can use the CoreButton without any additional styling
+      break;
+    default: // For default, we can use the CoreButton without any additional styling
+      break;
+  }
+
+  return CTA;
+};
+export default Button;