@windstream/react-shared-components 0.1.94 → 0.1.95

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

@@ -1,57 +1,57 @@
-import { ViewCartButton } from "./index";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-
-describe("ViewCartButton", () => {
-  const defaultProps = {
-    cartTotalText: "$49.99/mo",
-    onClick: jest.fn(),
-    isOpen: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("renders 'View cart' label", () => {
-    render(<ViewCartButton {...defaultProps} />);
-    expect(screen.getByText("View cart")).toBeInTheDocument();
-  });
-
-  it("renders cart total text", () => {
-    render(<ViewCartButton {...defaultProps} />);
-    expect(screen.getByTestId("cart-total")).toHaveTextContent("$49.99/mo");
-  });
-
-  it("calls onClick when clicked", () => {
-    render(<ViewCartButton {...defaultProps} />);
-    fireEvent.click(screen.getByRole("button"));
-    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders arrow icon", () => {
-    render(<ViewCartButton {...defaultProps} />);
-    expect(screen.getByText("keyboard_arrow_up")).toBeInTheDocument();
-  });
-
-  it("applies rotate-0 class when isOpen is false", () => {
-    render(<ViewCartButton {...defaultProps} isOpen={false} />);
-    const icon = screen.getByText("keyboard_arrow_up");
-    expect(icon.className).toContain("rotate-0");
-  });
-
-  it("applies rotate-180 class when isOpen is true", () => {
-    render(<ViewCartButton {...defaultProps} isOpen={true} />);
-    const icon = screen.getByText("keyboard_arrow_up");
-    expect(icon.className).toContain("rotate-180");
-  });
-
-  it("passes additional button attributes", () => {
-    render(
-      <ViewCartButton {...defaultProps} disabled={true} aria-label="cart" />
-    );
-    const button = screen.getByRole("button");
-    expect(button).toBeDisabled();
-    expect(button).toHaveAttribute("aria-label", "cart");
-  });
-});
+import { ViewCartButton } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("ViewCartButton", () => {
+  const defaultProps = {
+    cartTotalText: "$49.99/mo",
+    onClick: jest.fn(),
+    isOpen: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders 'View cart' label", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    expect(screen.getByText("View cart")).toBeInTheDocument();
+  });
+
+  it("renders cart total text", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    expect(screen.getByTestId("cart-total")).toHaveTextContent("$49.99/mo");
+  });
+
+  it("calls onClick when clicked", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders arrow icon", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    expect(screen.getByText("keyboard_arrow_up")).toBeInTheDocument();
+  });
+
+  it("applies rotate-0 class when isOpen is false", () => {
+    render(<ViewCartButton {...defaultProps} isOpen={false} />);
+    const icon = screen.getByText("keyboard_arrow_up");
+    expect(icon.className).toContain("rotate-0");
+  });
+
+  it("applies rotate-180 class when isOpen is true", () => {
+    render(<ViewCartButton {...defaultProps} isOpen={true} />);
+    const icon = screen.getByText("keyboard_arrow_up");
+    expect(icon.className).toContain("rotate-180");
+  });
+
+  it("passes additional button attributes", () => {
+    render(
+      <ViewCartButton {...defaultProps} disabled={true} aria-label="cart" />
+    );
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("aria-label", "cart");
+  });
+});

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

@@ -1,128 +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="ml-6 list-decimal">
-          <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="ml-6 list-disc">
-          <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>
-      </>
-    ),
-  },
-];
-``;
+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="ml-6 list-decimal">
+          <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="ml-6 list-disc">
+          <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,98 +1,98 @@
-import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
-import { Accordion } from "./index";
-import type { AccordionProps } from "./types";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
-
-/* ------------
-   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,
-  },
-};
+import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
+import { Accordion } from "./index";
+import type { AccordionProps } from "./types";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+
+/* ------------
+   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,
+  },
+};