@windstream/react-shared-components 0.1.69 → 0.1.71

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

@@ -1,81 +1,81 @@
-import React from "react";
-import Button from "../button";
-import { BreadcrumbNavigationProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-export const BreadcrumbNavigation: React.FC<
-  BreadcrumbNavigationProps
-> = props => {
-  const {
-    links = [],
-    textColor = "dark",
-    maxWidth = true,
-    floatOnMobile = false,
-  } = props;
-  const color = floatOnMobile
-    ? textColor === "dark"
-      ? "text-text"
-      : "text-white"
-    : textColor === "dark"
-      ? "text-white xl:text-text"
-      : "text-text xl:text-white";
-  if (!links.length) return null;
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      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`}
-      >
-        {links.map((link, index) => {
-          const { image, ...linkProps } = link;
-          const imageSrc = image?.url
-            ? image.url.startsWith("//")
-              ? `https:${image.url}`
-              : image.url
-            : "";
-          const isLast = index === links.length - 1;
-          return !isLast ? (
-            <li key={index} className="flex flex-none items-center">
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2 h-10 w-10"
-                />
-              )}
-              <Button
-                {...linkProps}
-                linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
-                linkVariant="unstyled"
-              />
-              <MaterialIcon name="chevron_right" className={`${color} `} />
-            </li>
-          ) : (
-            <li key={index} className="flex min-w-0 items-center">
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2 h-10 w-10"
-                />
-              )}
-              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
-                {link.buttonLabel}
-              </Text>
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-export default BreadcrumbNavigation;
+import React from "react";
+import Button from "../button";
+import { BreadcrumbNavigationProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+export const BreadcrumbNavigation: React.FC<
+  BreadcrumbNavigationProps
+> = props => {
+  const {
+    links = [],
+    textColor = "dark",
+    maxWidth = true,
+    floatOnMobile = false,
+  } = props;
+  const color = floatOnMobile
+    ? textColor === "dark"
+      ? "text-text"
+      : "text-white"
+    : textColor === "dark"
+      ? "text-white xl:text-text"
+      : "text-text xl:text-white";
+  if (!links.length) return null;
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      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`}
+      >
+        {links.map((link, index) => {
+          const { image, ...linkProps } = link;
+          const imageSrc = image?.url
+            ? image.url.startsWith("//")
+              ? `https:${image.url}`
+              : image.url
+            : "";
+          const isLast = index === links.length - 1;
+          return !isLast ? (
+            <li key={index} className="flex flex-none items-center">
+              {imageSrc && (
+                <img
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2 h-10 w-10"
+                />
+              )}
+              <Button
+                {...linkProps}
+                linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
+                linkVariant="unstyled"
+              />
+              <MaterialIcon name="chevron_right" className={`${color} `} />
+            </li>
+          ) : (
+            <li key={index} className="flex min-w-0 items-center">
+              {imageSrc && (
+                <img
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2 h-10 w-10"
+                />
+              )}
+              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
+                {link.buttonLabel}
+              </Text>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default BreadcrumbNavigation;

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;
+};

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,131 +1,131 @@
-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}
-          buttonClassName={buttonClassName}
-          size={size}
-          onClick={linkClick}
-        />
-      ) : (
-        <BrandButton
-          id={anchorId}
-          variant={buttonVariant}
-          text={buttonLabel}
-          label={buttonPrefix}
-          fullWidth={fullWidth}
-          size={size}
-          onClick={buttonClick}
-          buttonClassName={buttonClassName}
-        />
-      );
-      break;
-    case "text":
-      CTA = (
-        <Link
-          title={buttonLabel}
-          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;
+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}
+          buttonClassName={buttonClassName}
+          size={size}
+          onClick={linkClick}
+        />
+      ) : (
+        <BrandButton
+          id={anchorId}
+          variant={buttonVariant}
+          text={buttonLabel}
+          label={buttonPrefix}
+          fullWidth={fullWidth}
+          size={size}
+          onClick={buttonClick}
+          buttonClassName={buttonClassName}
+        />
+      );
+      break;
+    case "text":
+      CTA = (
+        <Link
+          title={buttonLabel}
+          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;

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

@@ -1,39 +1,39 @@
-import React from "react";
-
-import { ResponsiveSize } from "@shared/components/brand-button/types";
-import { Fill, Size } from "@shared/components/material-icon/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export type ButtonProps = {
-  showButtonAs?: "solid" | "text" | "unstyled";
-  buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
-  buttonLabel?: string;
-  buttonPrefix?: string;
-  badge?: string;
-  badgeIcon?: string;
-  buttonIcon?: string;
-  buttonIconPosition?: "left" | "right";
-  href?: string;
-  target?: "_self" | "_blank";
-  anchorId?: string;
-  preserveQueryParameters?: boolean;
-  clickToOpen?: string;
-  tabmodalNameToOpen?: string;
-  preDefinedFunctionExecution?: string;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-  linkClassName?: string;
-  buttonClassName?: string;
-  linkVariant?: "unstyled" | "default";
-  fullWidth?: boolean;
-  size?: ResponsiveSize;
-  onClick?: (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ) => void;
-  children?: React.ReactNode;
-  modalTitle?: string;
-  modalSubtitle?: string;
-  onModalButtonClick?: (id?: string) => void;
-  iconName?: string;
-  iconFill?: Fill;
-  iconSize?: Size;
-};
+import React from "react";
+
+import { ResponsiveSize } from "@shared/components/brand-button/types";
+import { Fill, Size } from "@shared/components/material-icon/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export type ButtonProps = {
+  showButtonAs?: "solid" | "text" | "unstyled";
+  buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
+  buttonLabel?: string;
+  buttonPrefix?: string;
+  badge?: string;
+  badgeIcon?: string;
+  buttonIcon?: string;
+  buttonIconPosition?: "left" | "right";
+  href?: string;
+  target?: "_self" | "_blank";
+  anchorId?: string;
+  preserveQueryParameters?: boolean;
+  clickToOpen?: string;
+  tabmodalNameToOpen?: string;
+  preDefinedFunctionExecution?: string;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  linkClassName?: string;
+  buttonClassName?: string;
+  linkVariant?: "unstyled" | "default";
+  fullWidth?: boolean;
+  size?: ResponsiveSize;
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+  children?: React.ReactNode;
+  modalTitle?: string;
+  modalSubtitle?: string;
+  onModalButtonClick?: (id?: string) => void;
+  iconName?: string;
+  iconFill?: Fill;
+  iconSize?: Size;
+};

package/src/contentful/blocks/callout/Callout.stories.tsx

@@ -1,23 +1,23 @@
-import { Callout } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Callout> = {
-  title: "Contentful Blocks/Callout",
-  component: Callout,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful callout block.",
-      },
-    },
-  },
-  args: {},
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Callout } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Callout> = {
+  title: "Contentful Blocks/Callout",
+  component: Callout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful callout block.",
+      },
+    },
+  },
+  args: {},
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};