@windstream/react-shared-components 0.1.78 → 0.1.79

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,81 +1,95 @@
-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 { 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",
+    mobileTextColor,
+    desktopTextColor,
+    maxWidth = true,
+    float = "desktop",
+  } = props;
+  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 ? `${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 ${olPosition} 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"
+                />
+              )}
+              <a
+                href={linkProps.href}
+                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
+              >
+                {linkProps.buttonLabel}
+              </a>
+
+              <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,8 @@
-export type BreadcrumbNavigationProps = {
-  links?: Array<any>;
-  textColor?: "dark" | "light";
-  maxWidth?: boolean;
-  floatOnMobile?: boolean;
-};
+export type BreadcrumbNavigationProps = {
+  links?: Array<any>;
+  textColor?: "dark" | "light";
+  mobileTextColor?: "dark" | "light";
+  desktopTextColor?: "dark" | "light";
+  maxWidth?: boolean;
+  float?: "none" | "mobile" | "desktop" | "always";
+};

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 = {};