@windstream/react-shared-components 0.0.38 → 0.0.40

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

@@ -1,52 +1,52 @@
-import React from "react";
-import { AccordionProps, ThemeKey } from "./types";
-
-import { Accordion as AccordionComponent } from "@shared/components/accordion";
-import { Text } from "@shared/components/text";
-
-export const Accordion: React.FC<AccordionProps> = ({
-  items,
-  title,
-  background = "white",
-  enableHeading = false,
-  maxWidth = true,
-}) => {
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-  };
-  return (
-    <div className={`${bgColorClasses[background]} component-container`}>
-      <div
-        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 my-8 lg:mx-20 lg:my-18`}
-      >
-        <div>
-          <Text
-            as={enableHeading ? "h1" : "h2"}
-            className="heading1 text-left lg:text-center"
-          >
-            {title}
-          </Text>
-        </div>
-        <div className="question-answer-section mt-10 lg:mt-16">
-          {items?.map((item: any, index: number) => (
-            <div key={`item-${index}`}>
-              <AccordionComponent
-                title={item.title}
-                containerClassName="border-0 border-b-[1px]"
-              >
-                <Text>{item.description}</Text>
-              </AccordionComponent>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Accordion;
+import React from "react";
+import { AccordionProps, ThemeKey } from "./types";
+
+import { Accordion as AccordionComponent } from "@shared/components/accordion";
+import { Text } from "@shared/components/text";
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  title,
+  background = "white",
+  enableHeading = false,
+  maxWidth = true,
+}) => {
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+  };
+  return (
+    <div className={`${bgColorClasses[background]} component-container`}>
+      <div
+        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 my-8 lg:mx-20 lg:my-18`}
+      >
+        <div>
+          <Text
+            as={enableHeading ? "h1" : "h2"}
+            className="heading1 text-left lg:text-center"
+          >
+            {title}
+          </Text>
+        </div>
+        <div className="question-answer-section mt-10 lg:mt-16">
+          {items?.map((item: any, index: number) => (
+            <div key={`item-${index}`}>
+              <AccordionComponent
+                title={item.title}
+                containerClassName="border-0 border-b-[1px]"
+              >
+                <Text>{item.description}</Text>
+              </AccordionComponent>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

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

@@ -1,17 +1,17 @@
-import React from "react";
-
-export type AccordionProps = {
-  title: string;
-  enableHeading?: boolean;
-  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
-  items: { title: string; description: React.ReactNode }[];
-  maxWidth?: boolean;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy";
+import React from "react";
+
+export type AccordionProps = {
+  title: string;
+  enableHeading?: boolean;
+  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
+  items: { title: string; description: React.ReactNode }[];
+  maxWidth?: boolean;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";

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,53 +1,64 @@
-import React from "react";
-import { ButtonProps } from "./types";
-
-import { BrandButton } from "@shared/components/brand-button";
-import { Link } from "@shared/components/link";
-
-export const Button: React.FC<ButtonProps> = ({
-  showButtonAs,
-  buttonVariant,
-  buttonLabel,
-  buttonPrefix,
-  href,
-  target,
-  anchorId,
-  linkClassName,
-  linkVariant,
-  fullWidth,
-  preDefinedFunctionExecution,
-  checkPlansJSX,
-}) => {
-  if (preDefinedFunctionExecution === "check availability") {
-    return checkPlansJSX;
-  }
-  return showButtonAs === "solid" ? (
-    <BrandButton
-      id={anchorId}
-      variant={buttonVariant}
-      text={buttonLabel}
-      label={buttonPrefix}
-      fullWidth={fullWidth}
-      // badge={badge}
-      // badgeIcon={badgeIcon}
-      // icon={buttonIcon}
-      // iconPosition={buttonIconPosition}
-      // href={href}
-      // target={target}
-      // preserveQueryParameters={preserveQueryParameters}
-      // clickToOpen={clickToOpen}
-      // tabmodalNameToOpen={tabmodalNameToOpen}
-      // preDefinedFunctionExecution={preDefinedFunctionExecution}
-    />
-  ) : showButtonAs === "text" ? (
-    <Link
-      href={href}
-      target={target}
-      variant={linkVariant || "default"}
-      className={`text-text-brand ${linkClassName || ""}`}
-    >
-      {buttonLabel}
-    </Link>
-  ) : null;
-};
-export default Button;
+import React from "react";
+import { ButtonProps } from "./types";
+
+import { BrandButton } from "@shared/components/brand-button";
+import { Link } from "@shared/components/link";
+
+export const Button: React.FC<ButtonProps> = ({
+  showButtonAs,
+  buttonVariant,
+  buttonLabel,
+  buttonPrefix,
+  href,
+  target,
+  anchorId,
+  linkClassName,
+  linkVariant,
+  fullWidth,
+  preDefinedFunctionExecution,
+  checkPlansJSX,
+  onClick,
+}) => {
+  if (preDefinedFunctionExecution === "check availability") {
+    return checkPlansJSX;
+  }
+  function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
+    onClick?.(event);
+  }
+
+  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
+    onClick?.(event);
+  }
+
+  return showButtonAs === "solid" ? (
+    <BrandButton
+      id={anchorId}
+      variant={buttonVariant}
+      text={buttonLabel}
+      label={buttonPrefix}
+      fullWidth={fullWidth}
+      onClick={buttonClick}
+      // badge={badge}
+      // badgeIcon={badgeIcon}
+      // icon={buttonIcon}
+      // iconPosition={buttonIconPosition}
+      // href={href}
+      // target={target}
+      // preserveQueryParameters={preserveQueryParameters}
+      // clickToOpen={clickToOpen}
+      // tabmodalNameToOpen={tabmodalNameToOpen}
+      // preDefinedFunctionExecution={preDefinedFunctionExecution}
+    />
+  ) : showButtonAs === "text" ? (
+    <Link
+      href={href}
+      target={target}
+      variant={linkVariant || "default"}
+      className={`text-text-brand ${linkClassName || ""}`}
+      onClick={linkClick}
+    >
+      {buttonLabel}
+    </Link>
+  ) : null;
+};
+export default Button;

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

@@ -1,21 +1,24 @@
-export type ButtonProps = {
-  showButtonAs: "solid" | "text";
-  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;
-  checkPlansJSX?: React.ReactNode;
-  linkClassName?: string;
-  linkVariant?: "unstyled" | "default";
-  fullWidth?: boolean;
-};
+export type ButtonProps = {
+  showButtonAs: "solid" | "text";
+  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;
+  checkPlansJSX?: React.ReactNode;
+  linkClassName?: string;
+  linkVariant?: "unstyled" | "default";
+  fullWidth?: boolean;
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+};

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

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

@@ -1,15 +1,52 @@
-import { CalloutProps } from "./types";
-
-import { BrandButton } from "@shared/components/brand-button";
-import { Text } from "@shared/components/text";
-
-export const Callout: React.FC<{ fields: CalloutProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Callout</Text>
-      <BrandButton label="Callout" />
-    </div>
-  );
-};
-
-export default Callout;
+import React from "react";
+import SimpleCards from "../cards/simple-card";
+import { CalloutProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Callout: React.FC<CalloutProps> = ({
+  title,
+  items,
+  // applyBoxShadow,
+  // bottomText,
+  // cardStackingMobile,
+  // cardsWidth,
+  // maxCardsPerRow,
+  // noGutter,
+  enableHeading = false,
+  subtitle,
+  color = "dark",
+  maxWidth = true,
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`mx-5 mb-5 mt-12 ${maxWidth ? "max-w-120 xl:mx-auto" : ""} ${color == "dark" ? "text-text" : "text-white"}`}
+      >
+        <div className="callout-container flex flex-col gap-8">
+          <div className="title-holder">
+            {title && (
+              <Text
+                as={enableHeading ? "h1" : "h2"}
+                className="heading2 md:heading1 md:text-center"
+              >
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text
+                as={enableHeading ? "h2" : "h3"}
+                className="subheading3 mt-3 md:subheading1 md:text-center"
+              >
+                {subtitle}
+              </Text>
+            )}
+          </div>
+          {items && <SimpleCards items={items} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Callout;

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

@@ -1 +1,14 @@
-export type CalloutProps = {};
+export type CalloutProps = {
+  title?: string;
+  enableHeading?: boolean;
+  subtitle?: string;
+  applyBoxShadow?: boolean;
+  cardStackingMobile?: boolean;
+  bottomText?: string;
+  color?: "dark" | "light";
+  cardsWidth?: string;
+  maxCardsPerRow?: number;
+  noGutter?: boolean;
+  items: any[];
+  maxWidth?: boolean;
+};

package/src/contentful/blocks/cards/Cards.stories.tsx

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

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

@@ -1,13 +1,13 @@
-import { CardsProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Cards</Text>
-    </div>
-  );
-};
-
-export default Cards;
+import { CardsProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
+  return (
+    <div>
+      <Text>Cards</Text>
+    </div>
+  );
+};
+
+export default Cards;

package/src/contentful/blocks/cards/simple-card/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { SimpleCardsProps } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+
+export const SimpleCards: React.FC<SimpleCardsProps> = ({ items = [] }) => {
+  if (!items.length) return null;
+
+  return (
+    <div className="card-holder grid grid-cols-1 items-stretch gap-5 self-stretch lg:auto-cols-fr lg:grid-flow-col lg:gap-6 lg:overflow-x-auto">
+      {items.map((item, index: number) => (
+        <div className="callout-card h-full p-6 lg:p-8" key={`card-${index}`}>
+          <div className="card-template flex flex-col gap-6 lg:items-start lg:gap-8">
+            <div className="card-header">
+              {item.image && (
+                <NextImage
+                  width={88}
+                  height={88}
+                  src={item.image}
+                  alt={item.title ?? "card-icon"}
+                />
+              )}
+            </div>
+
+            <div className="card-body flex flex-col gap-3">
+              {item.title && (
+                <Text as="h3" className="heading6">
+                  {item.title}
+                </Text>
+              )}
+              {item.BodyComponent && (
+                <Text as="div" className="body1">
+                  <item.BodyComponent />
+                </Text>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SimpleCards;

package/src/contentful/blocks/cards/simple-card/types.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from "react";
+
+export type Item = {
+  title?: string;
+  image?: string;
+  BodyComponent?: ComponentType;
+};
+
+export type SimpleCardsProps = {
+  items: Item[];
+};

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

@@ -1 +1 @@
-export type CardsProps = {};
+export type CardsProps = {};