@windstream/react-shared-components 0.1.64 → 0.1.68

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -1,52 +1,52 @@
-import { FC } from "react";
-import { AddressInputBannerProps } from "./types";
-
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-const variantStyles: Record<string, { bg: string; text: string }> = {
-  yellow: { bg: "bg-fill-brand-accent", text: "text" },
-  white: { bg: "bg-white", text: "text" },
-  navy: { bg: "bg-bg-fill-inverse", text: "text-inverse" },
-  green: { bg: "bg-border-success", text: "text-inverse" },
-};
-
-export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
-  const {
-    title,
-    variant = "yellow",
-    cta,
-    navHeight,
-    isVisible,
-    renderCheckPlans,
-  } = props;
-
-  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
-
-  if (!isVisible) return null;
-
-  const ctaLabel = cta?.buttonLabel || "Check plans";
-  const renderedCheckPlans = renderCheckPlans?.({
-    ctaText: ctaLabel,
-    buttonVariant: cta?.buttonVariant,
-    showButtonAs: "solid",
-    cta: cta,
-  });
-
-  return (
-    <div
-      style={{
-        top: `${navHeight}px`,
-      }}
-      className={cx(
-        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 lg:fixed bg-${style.bg} text-${style.text}`,
-        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
-      )}
-    >
-      <Text className="label3 w-full text-center text-text lg:w-auto lg:text-left">
-        {title}
-      </Text>
-      {renderedCheckPlans}
-    </div>
-  );
-};
+import { FC } from "react";
+import { AddressInputBannerProps } from "./types";
+
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const variantStyles: Record<string, { bg: string; text: string }> = {
+  yellow: { bg: "bg-fill-brand-accent", text: "text" },
+  white: { bg: "bg-white", text: "text" },
+  navy: { bg: "bg-bg-fill-inverse", text: "text-inverse" },
+  green: { bg: "bg-border-success", text: "text-inverse" },
+};
+
+export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
+  const {
+    title,
+    variant = "yellow",
+    cta,
+    navHeight,
+    isVisible,
+    renderCheckPlans,
+  } = props;
+
+  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
+
+  if (!isVisible) return null;
+
+  const ctaLabel = cta?.buttonLabel || "Check plans";
+  const renderedCheckPlans = renderCheckPlans?.({
+    ctaText: ctaLabel,
+    buttonVariant: cta?.buttonVariant,
+    showButtonAs: "solid",
+    cta: cta,
+  });
+
+  return (
+    <div
+      style={{
+        top: `${navHeight}px`,
+      }}
+      className={cx(
+        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 lg:fixed bg-${style.bg} text-${style.text}`,
+        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
+      )}
+    >
+      <Text className="label3 w-full text-center text-text lg:w-auto lg:text-left">
+        {title}
+      </Text>
+      {renderedCheckPlans}
+    </div>
+  );
+};

package/src/contentful/blocks/address-input-banner/types.ts

@@ -1,14 +1,14 @@
-import React from "react";
-
-import { ButtonProps } from "@shared/contentful/blocks/button/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export interface AddressInputBannerProps {
-  entryName?: string;
-  title: string;
-  variant?: string;
-  cta?: ButtonProps;
-  navHeight?: number;
-  isVisible?: boolean;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-}
+import React from "react";
+
+import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export interface AddressInputBannerProps {
+  entryName?: string;
+  title: string;
+  variant?: string;
+  cta?: ButtonProps;
+  navHeight?: number;
+  isVisible?: boolean;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+}

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -1,70 +1,70 @@
-import React from "react";
-import { AnchoredBottomBannerProps } from "./types";
-import Link from "next/link";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
-  ctaSuffixText,
-  backgroundColor,
-  iconName,
-  boxShadow,
-  ctaButtonLabel,
-  ctaButtonLink,
-  ctaButtonTarget,
-  anchorId = "anchored-banner",
-}) => {
-  const backGroundColorClasses = {
-    navy: "bg-bg-fill-inverse",
-    green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand-supporting",
-    purple: "bg-bg-fill-brand-tertiary",
-    yellow: "bg-bg-fill-brand-accent",
-  };
-
-  const bgClass = backgroundColor
-    ? backGroundColorClasses[backgroundColor]
-    : "bg-bg-fill-brand-accent";
-
-  const isYellow = backgroundColor === "yellow" || !backgroundColor;
-  const textColorClass = isYellow ? "text-text-primary" : "text-white";
-
-  return (
-    <section id={anchorId}>
-      <div
-        className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
-          boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
-        }`}
-      >
-        <Link
-          href={ctaButtonLink || "#"}
-          target={ctaButtonTarget || "_self"}
-          className="max-w-screen-xl w-full transition-all"
-        >
-          <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
-            <div
-              className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
-            >
-              {iconName && (
-                <MaterialIcon
-                  name={
-                    iconName as React.ComponentProps<
-                      typeof MaterialIcon
-                    >["name"]
-                  }
-                  size={24}
-                  fill={1}
-                  className={`${textColorClass} align-text-bottom`}
-                />
-              )}
-              {ctaButtonLabel && ctaButtonLabel}{" "}
-              {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
-            </div>
-          </div>
-        </Link>
-      </div>
-    </section>
-  );
-};
-
-export default AnchoredBottomBanner;
+import React from "react";
+import { AnchoredBottomBannerProps } from "./types";
+import Link from "next/link";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
+  ctaSuffixText,
+  backgroundColor,
+  iconName,
+  boxShadow,
+  ctaButtonLabel,
+  ctaButtonLink,
+  ctaButtonTarget,
+  anchorId = "anchored-banner",
+}) => {
+  const backGroundColorClasses = {
+    navy: "bg-bg-fill-inverse",
+    green: "bg-bg-fill-success",
+    blue: "bg-bg-fill-brand-supporting",
+    purple: "bg-bg-fill-brand-tertiary",
+    yellow: "bg-bg-fill-brand-accent",
+  };
+
+  const bgClass = backgroundColor
+    ? backGroundColorClasses[backgroundColor]
+    : "bg-bg-fill-brand-accent";
+
+  const isYellow = backgroundColor === "yellow" || !backgroundColor;
+  const textColorClass = isYellow ? "text-text-primary" : "text-white";
+
+  return (
+    <section id={anchorId}>
+      <div
+        className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
+          boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
+        }`}
+      >
+        <Link
+          href={ctaButtonLink || "#"}
+          target={ctaButtonTarget || "_self"}
+          className="max-w-screen-xl w-full transition-all"
+        >
+          <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
+            <div
+              className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
+            >
+              {iconName && (
+                <MaterialIcon
+                  name={
+                    iconName as React.ComponentProps<
+                      typeof MaterialIcon
+                    >["name"]
+                  }
+                  size={24}
+                  fill={1}
+                  className={`${textColorClass} align-text-bottom`}
+                />
+              )}
+              {ctaButtonLabel && ctaButtonLabel}{" "}
+              {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
+            </div>
+          </div>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default AnchoredBottomBanner;

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -1,10 +1,10 @@
-export interface AnchoredBottomBannerProps {
-  ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
-  iconName?: string;
-  boxShadow?: boolean;
-  ctaButtonLabel?: string;
-  ctaButtonLink?: string;
-  ctaButtonTarget?: string;
-  anchorId?: string;
-}
+export interface AnchoredBottomBannerProps {
+  ctaSuffixText?: string;
+  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
+  iconName?: string;
+  boxShadow?: boolean;
+  ctaButtonLabel?: string;
+  ctaButtonLink?: string;
+  ctaButtonTarget?: string;
+  anchorId?: string;
+}

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/breadcrumbs/index.tsx

@@ -25,7 +25,7 @@ export const BreadcrumbNavigation: React.FC<
   return (
     <nav
       aria-label="Breadcrumb"
-      className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
+      className={`${maxWidth ? `${!floatOnMobile && "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`}

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

@@ -1,6 +1,6 @@
-export type BreadcrumbNavigationProps = {
-  links?: Array<any>;
-  textColor?: "dark" | "light";
-  maxWidth?: boolean;
-  floatOnMobile?: boolean;
-};
+export type BreadcrumbNavigationProps = {
+  links?: Array<any>;
+  textColor?: "dark" | "light";
+  maxWidth?: boolean;
+  floatOnMobile?: boolean;
+};