@windstream/react-shared-components 0.2.78 → 0.2.80

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export interface carouselFieldsInterface {
   __typename: "ComponentCarousel";
@@ -85,6 +86,18 @@ export interface ProductCardFields {
     url: string;
     [key: string]: any;
   };
+  /** Pre-computed per-field Inspector Mode / Live Preview DOM attributes for
+   *  this item, supplied by the consumer and passed through to the rendered
+   *  ProductCard unchanged. The library itself stays CMS-agnostic. */
+  fieldProps?: FieldProps<
+    | "planName"
+    | "planSubtext"
+    | "price"
+    | "priceSuffixBottom"
+    | "description"
+    | "bestValueText"
+    | "featuresTitle"
+  >;
 }
 
 export interface CardFields {
@@ -148,6 +161,8 @@ export type CarouselProps = {
     event: React.MouseEvent<HTMLElement>
   ) => void;
   enableBusinessSettings?: boolean;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"title" | "subTitle" | "disclaimerText">;
 };
 
 export interface TabSwitchProps {

package/src/contentful/blocks/links-block/index.test.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { LinksBlock } from "./index";
+import { LinksBlockLink } from "./types";
+
+const links: LinksBlockLink[] = [
+  {
+    id: "1",
+    title: "Internet Plans",
+    href: "/internet",
+    target: "_self",
+    buttonVariant: "primary_brand",
+  },
+  {
+    id: "2",
+    title: "Help Center",
+    href: "https://help.example.com",
+    target: "_blank",
+    buttonVariant: "secondary",
+  },
+];
+
+describe("LinksBlock", () => {
+  it("renders nothing when there are no links", () => {
+    const { container } = render(<LinksBlock title="Quick Links" links={[]} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing when links is undefined", () => {
+    const { container } = render(<LinksBlock />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders the title", () => {
+    render(<LinksBlock title="Quick Links" links={links} />);
+
+    expect(
+      screen.getByRole("heading", { level: 3, name: "Quick Links" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders a link for each item with its href and target", () => {
+    render(<LinksBlock links={links} />);
+
+    const internet = screen.getByRole("link", { name: "Internet Plans" });
+    expect(internet).toHaveAttribute("href", "/internet");
+    expect(internet).toHaveAttribute("target", "_self");
+
+    const help = screen.getByRole("link", { name: "Help Center" });
+    expect(help).toHaveAttribute("href", "https://help.example.com");
+    expect(help).toHaveAttribute("target", "_blank");
+  });
+
+  it("defaults the target to _self when not provided", () => {
+    render(
+      <LinksBlock
+        links={[{ id: "3", title: "Pricing", href: "/pricing" }]}
+      />
+    );
+
+    expect(screen.getByRole("link", { name: "Pricing" })).toHaveAttribute(
+      "target",
+      "_self"
+    );
+  });
+
+  it("calls onLinkClick with the clicked link", () => {
+    const onLinkClick = jest.fn();
+    render(<LinksBlock links={links} onLinkClick={onLinkClick} />);
+
+    fireEvent.click(screen.getByRole("link", { name: "Help Center" }));
+
+    expect(onLinkClick).toHaveBeenCalledTimes(1);
+    expect(onLinkClick.mock.calls[0][0]).toEqual(links[1]);
+  });
+});

package/src/contentful/blocks/links-block/index.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@shared/contentful/blocks/button";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+import { LinksBlockProps } from "./types";
+
+export const LinksBlock: React.FC<LinksBlockProps> = ({
+  title,
+  links,
+  onLinkClick,
+  className,
+}) => {
+  if (!links || links.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      data-section-name="Links Block"
+      className={cx(
+        "w-full rounded-[20px] px-6 py-7 lg:border-2 lg:border-secondary-gray300 lg:shadow-lg",
+        className
+      )}
+    >
+      {title && (
+        <Text as="h3" className="heading6 mb-4">
+          {title}
+        </Text>
+      )}
+      <div className="flex flex-col gap-3">
+        {links.map(link => (
+          <Button
+            key={link.id}
+            showButtonAs="solid"
+            buttonVariant={link.buttonVariant ?? "secondary"}
+            buttonLabel={link.title?.trim() || link.href}
+            href={link.href}
+            target={link.target ?? "_self"}
+            fullWidth
+            onClick={event => onLinkClick?.(link, event)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LinksBlock;

package/src/contentful/blocks/links-block/types.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+
+import type { ButtonProps } from "@shared/contentful/blocks/button/types";
+
+export type LinksBlockButtonVariant = NonNullable<ButtonProps["buttonVariant"]>;
+
+export type LinksBlockLink = {
+  id: string;
+  title?: string;
+  href: string;
+  target?: "_self" | "_blank";
+  buttonVariant?: LinksBlockButtonVariant;
+};
+
+export type LinksBlockProps = {
+  title?: string;
+  links?: LinksBlockLink[];
+  /** Fired when a link is clicked, e.g. to publish analytics events */
+  onLinkClick?: (
+    link: LinksBlockLink,
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+  className?: string;
+};

package/src/contentful/index.ts

@@ -45,6 +45,13 @@ export type { TextProps } from "./blocks/text/types";
 export { Button } from "./blocks/button";
 export type { ButtonProps } from "./blocks/button/types";
 
+export { LinksBlock } from "./blocks/links-block";
+export type {
+  LinksBlockProps,
+  LinksBlockLink,
+  LinksBlockButtonVariant,
+} from "./blocks/links-block/types";
+
 export { Modal } from "./blocks/modal";
 export type { ModalProps } from "./blocks/modal/types";