@windstream/react-shared-components 0.0.69 → 0.0.71

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

@@ -1,44 +1,44 @@
-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-2xl 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="footnote -mb-1 text-text-secondary sm:body3">
-            View cart
-          </Text>
-          <Text className="body3 font-bold md:body1" 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-2xl 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="footnote -mb-1 text-text-secondary sm:body3">
+            View cart
+          </Text>
+          <Text className="body3 font-bold md:body1" 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/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,64 +1,84 @@
-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 = "solid",
-  buttonVariant = "primary_brand",
-  buttonLabel,
-  buttonPrefix,
-  href,
-  target = "_blank",
-  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;
+import React from "react";
+import { ButtonProps } from "./types";
+
+import { BrandButton } from "@shared/components/brand-button";
+import { Button as CoreButton } from "@shared/components/button";
+import { Link } from "@shared/components/link";
+
+export const Button: React.FC<ButtonProps> = ({
+  showButtonAs = "solid",
+  buttonVariant = "primary_brand",
+  buttonLabel,
+  buttonPrefix,
+  href,
+  target = "_blank",
+  anchorId,
+  linkClassName,
+  linkVariant,
+  fullWidth,
+  preDefinedFunctionExecution,
+  checkPlansJSX,
+  buttonClassName,
+  onClick,
+  ...rest
+}) => {
+  if (preDefinedFunctionExecution === "check availability") {
+    return checkPlansJSX;
+  }
+  function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
+    onClick?.(event);
+  }
+
+  function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
+    onClick?.(event);
+  }
+
+  let CTA = (
+    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
+  );
+
+  switch (showButtonAs) {
+    case "solid":
+      CTA = (
+        <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}
+        />
+      );
+      break;
+    case "text":
+      CTA = (
+        <Link
+          href={href}
+          target={target}
+          variant={linkVariant || "default"}
+          className={`text-text-brand ${linkClassName || ""}`}
+          onClick={linkClick}
+        >
+          {buttonLabel}
+        </Link>
+      );
+      break;
+    case "unstyled": // For unstyled, we can use the CoreButton without any additional styling
+      break;
+    default: // For default, we can use the CoreButton without any additional styling
+      break;
+  }
+
+  return CTA;
+};
+export default Button;

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

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

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