@windstream/react-shared-components 0.1.64 → 0.1.68

package/src/components/view-cart-button/index.tsx

@@ -1,42 +1,42 @@
-import { Button } from "../button";
-import { MaterialIcon } from "../material-icon";
-import { Text } from "../text";
-import { ViewCartButtonProps } from "./types";
-
-import { cx } from "@shared/utils";
-
-const baseClasses =
-  "btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
-export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
-  const { cartTotalText, onClick, isOpen, ...rest } = props;
-  return (
-    <Button
-      className={cx(
-        baseClasses,
-        "btn-small w-full border-border pl-6 pr-4 md:btn-medium"
-      )}
-      onClick={onClick}
-      {...rest}
-    >
-      <div className="flex w-full items-center justify-center gap-2">
-        <div className="flex flex-col items-center justify-center">
-          <Text className="label4 -mb-1 text-text">View cart</Text>
-          <Text className="label3 text-text md:label1" data-testid="cart-total">
-            {cartTotalText}
-          </Text>
-        </div>
-        <MaterialIcon
-          name="keyboard_arrow_up"
-          size={24}
-          fill={0}
-          className={cx(
-            "h-6 w-6 transition-transform",
-            isOpen ? "rotate-180" : "rotate-0"
-          )}
-        />
-      </div>
-    </Button>
-  );
-};
-
-export type { ViewCartButtonProps } from "./types";
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { Text } from "../text";
+import { ViewCartButtonProps } from "./types";
+
+import { cx } from "@shared/utils";
+
+const baseClasses =
+  "btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
+export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
+  const { cartTotalText, onClick, isOpen, ...rest } = props;
+  return (
+    <Button
+      className={cx(
+        baseClasses,
+        "btn-small w-full border-border pl-6 pr-4 md:btn-medium"
+      )}
+      onClick={onClick}
+      {...rest}
+    >
+      <div className="flex w-full items-center justify-center gap-2">
+        <div className="flex flex-col items-center justify-center">
+          <Text className="label4 -mb-1 text-text">View cart</Text>
+          <Text className="label3 text-text md:label1" data-testid="cart-total">
+            {cartTotalText}
+          </Text>
+        </div>
+        <MaterialIcon
+          name="keyboard_arrow_up"
+          size={24}
+          fill={0}
+          className={cx(
+            "h-6 w-6 transition-transform",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        />
+      </div>
+    </Button>
+  );
+};
+
+export type { ViewCartButtonProps } from "./types";

package/src/components/view-cart-button/types.ts

@@ -1,5 +1,5 @@
-export type ViewCartButtonProps = {
-  cartTotalText: string;
-  onClick: () => void;
-  isOpen: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ViewCartButtonProps = {
+  cartTotalText: string;
+  onClick: () => void;
+  isOpen: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;

package/src/contentful/blocks/accordion/Accordion.stories.mocks.tsx

@@ -0,0 +1,128 @@
+import { AccordionItem } from "./types";
+
+/* ------------
+   DEFAULT FAQs (3 – plain text only)
+--------------- */
+
+export const FAQ_ITEMS: AccordionItem[] = [
+  {
+    title: "How much speed do I need in my home?",
+    description:
+      "The amount of internet speed or bandwidth you need in your home significantly depends on your usage and the number of devices connected to the internet. Connected devices don’t only mean computers and tablets; they include TVs used for streaming, gaming consoles, smart watches, phones, home security cameras and doorbells, home assistants, baby monitors, wireless speakers, and more. Every connected device pulls from your home’s internet bandwidth.",
+  },
+  {
+    title: "Do I qualify for any promotional offers?",
+    description:
+      "Be sure to register for updates, promotional offers, and special discounts in the form provided. You’ll be able to enjoy an improved internet experience and benefit from newer, faster, and more advanced fiber technology.",
+  },
+  {
+    title: "How fast is Kinetic internet?",
+    description:
+      "Kinetic offers high internet speeds ranging from 200 Mbps up to Fiber Gig speeds of 1000 Mbps.",
+  },
+];
+
+/* --------------
+   RICH TEXT FAQs (4 – JSX formatted)
+----------------- */
+
+export const RICH_FAQ_ITEMS: AccordionItem[] = [
+  {
+    title: "How do I check my Windstream email?",
+    description: (
+      <>
+        <p>
+          <strong>Already have a windstream.net account?</strong>
+        </p>
+
+        <p>You can check your windstream.net emails in the following ways:</p>
+
+        <ol className="list-decimal ml-6">
+          <li>
+            Go to <strong>www.windstream.net</strong> and click{" "}
+            <strong>Email</strong> in the top‑right of the menu bar.
+          </li>
+          <li>Use an email application on a smartphone.</li>
+          <li>Use an email client on a computer.</li>
+        </ol>
+
+        <p className="mt-4">
+          <strong>OR</strong>
+        </p>
+
+        <p>
+          Log in to <strong>Go Kinetic</strong>, navigate to{" "}
+          <strong>Other Services</strong>, then select{" "}
+          <strong>View and Manage Email</strong>.
+        </p>
+
+        <p className="mt-4">
+          <strong>Wanting to set up a new .net email account?</strong>
+        </p>
+
+        <ul className="list-disc ml-6">
+          <li>
+            If you do not already have a windstream.net email account, new
+            windstream.net email addresses are no longer being created.
+          </li>
+          <li>
+            You can set up a free email account using platforms like{" "}
+            <strong>Gmail</strong> or <strong>Yahoo</strong>.
+          </li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: "How much speed do I need in my home?",
+    description: (
+      <>
+        <p>
+          For a household with <strong>4+ internet users</strong> who use the web
+          for online gaming, music and video streaming, uploading pictures and
+          videos, as well as email and browsing, a{" "}
+          <strong>1‑Gigabit plan</strong> would be best suited.
+        </p>
+
+        <p className="mt-4">
+          This also supports multiple devices such as laptops, smartphones,
+          tablets, and TVs connected to the home internet at the same time.
+        </p>
+
+        <p className="mt-4">
+          Every connected device in your home pulls from your available internet
+          bandwidth.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Do I qualify for any promotional offers?",
+    description: (
+      <>
+        <p>
+          Be sure to register for updates, promotional offers, and special
+          discounts using the form below.
+        </p>
+
+        <p className="mt-4">
+          Enjoy an improved internet experience and take advantage of newer,
+          faster, and more advanced fiber technology.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Can I change or cancel my pre‑order?",
+    description: (
+      <>
+        <p>
+          Yes, of course! You are under no obligation. If a situation arises that
+          requires a change, simply give us a call at{" "}
+          <strong>855‑939‑2381</strong>.
+        </p>
+      </>
+    ),
+  },
+];
+``

package/src/contentful/blocks/accordion/Accordion.stories.tsx

@@ -1,34 +1,106 @@
-import { Accordion } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Accordion> = {
-  title: "Contentful Blocks/Accordion",
-  component: Accordion,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful accordion block.",
-      },
-    },
-  },
-  args: {
-    background: "white",
-    enableHeading: false,
-    items: [],
-    maxWidth: true,
-    title: "test",
-    anchorId: undefined,
-    initialExpandedItems: [],
-    hashAutoExpand: false,
-    descriptionMaxWidth: "max-w-[980px]",
-    itemContainerClassName: undefined,
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Accordion } from "./index";
+import type { AccordionProps } from "./types";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj, ArgTypes } from "@storybook/react";
+
+import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
+
+/* ------------
+   ArgTypes
+--------------- */
+
+const argTypes: ArgTypes<AccordionProps> = {
+  title: {
+    control: { type: "text" as const },
+    description: "Title displayed above the accordion",
+  },
+  items: {
+    control: { type: "object" as const },
+    description: "Accordion items",
+  },
+  background: {
+    control: { type: "select" as const },
+    options: [
+      "blue",
+      "green",
+      "yellow",
+      "purple",
+      "white",
+      "navy",
+      "cream500",
+    ],
+    description: "Background color of the accordion",
+  },
+  enableHeading: {
+    control: { type: "boolean" as const },
+  },
+  maxWidth: {
+    control: { type: "boolean" as const },
+  },
+  hashAutoExpand: {
+    control: { type: "boolean" as const },
+  },
+  descriptionMaxWidth: {
+    control: { type: "text" as const },
+  },
+  anchorId: {
+    control: { type: "text" as const },
+  },
+  initialExpandedItems: {
+    control: { type: "object" as const },
+  },
+  itemContainerClassName: {
+    table: { disable: true },
+  },
+};
+
+/* --------
+   Meta
+----------- */
+
+const meta: Meta<typeof Accordion> = {
+  title: "Contentful Blocks/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  argTypes,
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful accordion block used to render collapsible content.",
+      },
+    },
+  },
+  args: {
+    title: "FAQs",
+    background: "white",
+    enableHeading: false,
+    maxWidth: true,
+    items: [],
+    initialExpandedItems: [],
+    hashAutoExpand: false,
+    descriptionMaxWidth: "max-w-[980px]",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* --------
+   Stories
+----------- */
+
+export const Default: Story = {
+  args: {
+    items: FAQ_ITEMS,
+  },
+};
+
+export const WithRichTextContent = {
+  args: {
+    title: "FAQs - Rich Content",
+    items: RICH_FAQ_ITEMS,
+  },
+};

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

@@ -1,112 +1,112 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { AccordionItem, AccordionProps, ThemeKey } from "./types";
-
-import { Accordion as AccordionComponent } from "@shared/components/accordion";
-import { Divider } from "@shared/components/divider";
-import { Text } from "@shared/components/text";
-
-export const Accordion: React.FC<AccordionProps> = ({
-  items,
-  title,
-  anchorId,
-  background = "white",
-  enableHeading = false,
-  maxWidth = true,
-  initialExpandedItems: initialExpandedItemsProp = [],
-  hashAutoExpand = false,
-  descriptionMaxWidth = "max-w-[980px]",
-  itemContainerClassName,
-}) => {
-  const [expandedItems, setExpandedItems] = useState<string[]>(
-    initialExpandedItemsProp
-  );
-
-  useEffect(() => {
-    if (hashAutoExpand && typeof window !== "undefined") {
-      const hash = window.location.hash;
-      if (hash) {
-        const expandItemId = hash.substring(hash.indexOf("#") + 1);
-        setExpandedItems(prev => {
-          if (prev.includes(expandItemId)) return prev;
-          return [...prev, expandItemId];
-        });
-      }
-    }
-  }, [hashAutoExpand]);
-
-  const handleToggle = (itemAnchorId: string) => {
-    setExpandedItems(prev =>
-      prev.includes(itemAnchorId)
-        ? prev.filter(id => id !== itemAnchorId)
-        : [...prev, itemAnchorId]
-    );
-  };
-
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-    cream500: "bg-[#FFFEEF]",
-  };
-
-  return (
-    <section
-      id={anchorId}
-      className={`${bgColorClasses[background]} flex flex-col px-2 pb-20 pt-4 md:px-10`}
-    >
-      <div className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}>
-        <Text
-          as={enableHeading ? "h1" : "h2"}
-          className="heading2 mb-10 pt-12 text-left text-text md:heading1 lg:text-center"
-        >
-          {title}
-        </Text>
-        <div className={`pt-6 md:pt-10 ${itemContainerClassName ?? ""}`}>
-          {items?.map((item: AccordionItem, index: number) => {
-            const itemKey = item.anchorId || `item-${index}`;
-            const isOpen = item.anchorId
-              ? expandedItems.includes(item.anchorId)
-              : undefined;
-
-            return (
-              <div
-                key={itemKey}
-                id={item.anchorId}
-                className="snap-start scroll-mt-48 lg:scroll-mt-60"
-              >
-                <AccordionComponent
-                  title={item.title}
-                  defaultOpen={isOpen}
-                  containerClassName="border-none"
-                  buttonClassName="p-0 label1"
-                  titleClassName="label3 md:label1 text-text"
-                  className="p-0 pt-6 text-text"
-                  iconClassName="text-icon"
-                  borderRadiusNone={true}
-                  openOnlyOnDesktop={false}
-                  {...(item.anchorId && {
-                    onClick: () => handleToggle(item.anchorId!),
-                  })}
-                >
-                  <div className={descriptionMaxWidth}>
-                    <Text as="div">{item.description}</Text>
-                  </div>
-                </AccordionComponent>
-                {index < items.length - 1 && (
-                  <Divider key={`divider-${index}`} className="my-6 md:my-10" />
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Accordion;
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { AccordionItem, AccordionProps, ThemeKey } from "./types";
+
+import { Accordion as AccordionComponent } from "@shared/components/accordion";
+import { Divider } from "@shared/components/divider";
+import { Text } from "@shared/components/text";
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  title,
+  anchorId,
+  background = "white",
+  enableHeading = false,
+  maxWidth = true,
+  initialExpandedItems: initialExpandedItemsProp = [],
+  hashAutoExpand = false,
+  descriptionMaxWidth = "max-w-[980px]",
+  itemContainerClassName,
+}) => {
+  const [expandedItems, setExpandedItems] = useState<string[]>(
+    initialExpandedItemsProp
+  );
+
+  useEffect(() => {
+    if (hashAutoExpand && typeof window !== "undefined") {
+      const hash = window.location.hash;
+      if (hash) {
+        const expandItemId = hash.substring(hash.indexOf("#") + 1);
+        setExpandedItems(prev => {
+          if (prev.includes(expandItemId)) return prev;
+          return [...prev, expandItemId];
+        });
+      }
+    }
+  }, [hashAutoExpand]);
+
+  const handleToggle = (itemAnchorId: string) => {
+    setExpandedItems(prev =>
+      prev.includes(itemAnchorId)
+        ? prev.filter(id => id !== itemAnchorId)
+        : [...prev, itemAnchorId]
+    );
+  };
+
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+    cream500: "bg-[#FFFEEF]",
+  };
+
+  return (
+    <section
+      id={anchorId}
+      className={`${bgColorClasses[background]} flex flex-col px-2 pb-20 pt-4 md:px-10`}
+    >
+      <div className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}>
+        <Text
+          as={enableHeading ? "h1" : "h2"}
+          className="heading2 mb-10 pt-12 text-left text-text md:heading1 lg:text-center"
+        >
+          {title}
+        </Text>
+        <div className={`pt-6 md:pt-10 ${itemContainerClassName ?? ""}`}>
+          {items?.map((item: AccordionItem, index: number) => {
+            const itemKey = item.anchorId || `item-${index}`;
+            const isOpen = item.anchorId
+              ? expandedItems.includes(item.anchorId)
+              : undefined;
+
+            return (
+              <div
+                key={itemKey}
+                id={item.anchorId}
+                className="snap-start scroll-mt-48 lg:scroll-mt-60"
+              >
+                <AccordionComponent
+                  title={item.title}
+                  defaultOpen={isOpen}
+                  containerClassName="border-none"
+                  buttonClassName="p-0 label1"
+                  titleClassName="label3 md:label1 text-text"
+                  className="p-0 pt-6 text-text"
+                  iconClassName="text-icon"
+                  borderRadiusNone={true}
+                  openOnlyOnDesktop={false}
+                  {...(item.anchorId && {
+                    onClick: () => handleToggle(item.anchorId!),
+                  })}
+                >
+                  <div className={descriptionMaxWidth}>
+                    <Text as="div">{item.description}</Text>
+                  </div>
+                </AccordionComponent>
+                {index < items.length - 1 && (
+                  <Divider key={`divider-${index}`} className="my-6 md:my-10" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Accordion;

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

@@ -1,34 +1,34 @@
-import React from "react";
-
-export type AccordionItem = {
-  anchorId?: string;
-  title: string;
-  description: React.ReactNode;
-};
-
-export type AccordionProps = {
-  /** Section-level anchor ID applied to the outer <section> element */
-  anchorId?: string;
-  title: string;
-  enableHeading?: boolean;
-  background?: ThemeKey;
-  items: AccordionItem[];
-  maxWidth?: boolean;
-  /** Array of anchorIds that should be expanded on mount */
-  initialExpandedItems?: string[];
-  /** Enable URL hash auto-expand on mount */
-  hashAutoExpand?: boolean;
-  /** Max-width class for item descriptions (default: "max-w-[980px]") */
-  descriptionMaxWidth?: string;
-  /** Custom class for the accordion list wrapper */
-  itemContainerClassName?: string;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy"
-  | "cream500";
+import React from "react";
+
+export type AccordionItem = {
+  anchorId?: string;
+  title: string;
+  description: React.ReactNode;
+};
+
+export type AccordionProps = {
+  /** Section-level anchor ID applied to the outer <section> element */
+  anchorId?: string;
+  title: string;
+  enableHeading?: boolean;
+  background?: ThemeKey;
+  items: AccordionItem[];
+  maxWidth?: boolean;
+  /** Array of anchorIds that should be expanded on mount */
+  initialExpandedItems?: string[];
+  /** Enable URL hash auto-expand on mount */
+  hashAutoExpand?: boolean;
+  /** Max-width class for item descriptions (default: "max-w-[980px]") */
+  descriptionMaxWidth?: string;
+  /** Custom class for the accordion list wrapper */
+  itemContainerClassName?: string;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy"
+  | "cream500";