@windstream/react-shared-components 0.1.34 → 0.1.36

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

@@ -1,39 +1,39 @@
-import React from "react";
-
-import { ResponsiveSize } from "@shared/components/brand-button/types";
-import { Fill, Size } from "@shared/components/material-icon/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-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;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-  linkClassName?: string;
-  buttonClassName?: string;
-  linkVariant?: "unstyled" | "default";
-  fullWidth?: boolean;
-  size?: ResponsiveSize;
-  onClick?: (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ) => void;
-  children?: React.ReactNode;
-  modalTitle?: string;
-  modalSubtitle?: string;
-  onModalButtonClick?: (id?: string) => void;
-  iconName?: string;
-  iconFill?: Fill;
-  iconSize?: Size;
-};
+import React from "react";
+
+import { ResponsiveSize } from "@shared/components/brand-button/types";
+import { Fill, Size } from "@shared/components/material-icon/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+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;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  linkClassName?: string;
+  buttonClassName?: string;
+  linkVariant?: "unstyled" | "default";
+  fullWidth?: boolean;
+  size?: ResponsiveSize;
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+  children?: React.ReactNode;
+  modalTitle?: string;
+  modalSubtitle?: string;
+  onModalButtonClick?: (id?: string) => void;
+  iconName?: string;
+  iconFill?: Fill;
+  iconSize?: Size;
+};

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/callout/index.tsx

@@ -1,88 +1,88 @@
-import React from "react";
-import BlogCard from "../cards/blog-card";
-import SimpleCard from "../cards/simple-card";
-import { CalloutProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Callout: React.FC<CalloutProps> = ({
-  title,
-  items,
-  enableHeading = false,
-  subtitle,
-  color = "dark",
-  maxWidth = true,
-  maxCardsPerRow,
-  cardType = "simple",
-}) => {
-  const lgWidth =
-    {
-      1: " lg:w-full",
-      2: " lg:w-[calc(50%-0.75rem)]",
-      3: " lg:w-[calc(33.3333%-1rem)]",
-      4: " lg:w-[calc(25%-1.125rem)]",
-    }[maxCardsPerRow || 4] || " lg:w-[calc(25%-1.125rem)]";
-
-  const mdWidth = items.length === 1 ? " md:w-full" : " md:w-[calc(50%-1rem)]";
-
-  const renderCard = (item: CalloutProps["items"][number], index: number) => {
-    if (cardType === "blog") {
-      const blogItem = item as any;
-      return (
-        <BlogCard
-          title={blogItem.title}
-          href={blogItem.slug}
-          description={blogItem.shortDescription}
-          date={blogItem.blogCreationDate}
-          category={blogItem.category}
-          image={blogItem.cover}
-          asGrid={false}
-          lgWidth={lgWidth}
-          mdWidth={mdWidth}
-        />
-      );
-    }
-    return (
-      <SimpleCard
-        key={index}
-        card={item as any}
-        lgWidth={lgWidth}
-        mdWidth={mdWidth}
-      />
-    );
-  };
-
-  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-10 md:gap-16">
-          <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>
-          <div className="card-holder flex flex-wrap items-stretch justify-center gap-6 self-stretch md:gap-6">
-            {items.map((item, index: number) => renderCard(item, index))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Callout;
+import React from "react";
+import BlogCard from "../cards/blog-card";
+import SimpleCard from "../cards/simple-card";
+import { CalloutProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Callout: React.FC<CalloutProps> = ({
+  title,
+  items,
+  enableHeading = false,
+  subtitle,
+  color = "dark",
+  maxWidth = true,
+  maxCardsPerRow,
+  cardType = "simple",
+}) => {
+  const lgWidth =
+    {
+      1: " lg:w-full",
+      2: " lg:w-[calc(50%-0.75rem)]",
+      3: " lg:w-[calc(33.3333%-1rem)]",
+      4: " lg:w-[calc(25%-1.125rem)]",
+    }[maxCardsPerRow || 4] || " lg:w-[calc(25%-1.125rem)]";
+
+  const mdWidth = items.length === 1 ? " md:w-full" : " md:w-[calc(50%-1rem)]";
+
+  const renderCard = (item: CalloutProps["items"][number], index: number) => {
+    if (cardType === "blog") {
+      const blogItem = item as any;
+      return (
+        <BlogCard
+          title={blogItem.title}
+          href={blogItem.slug}
+          description={blogItem.shortDescription}
+          date={blogItem.blogCreationDate}
+          category={blogItem.category}
+          image={blogItem.cover}
+          asGrid={false}
+          lgWidth={lgWidth}
+          mdWidth={mdWidth}
+        />
+      );
+    }
+    return (
+      <SimpleCard
+        key={index}
+        card={item as any}
+        lgWidth={lgWidth}
+        mdWidth={mdWidth}
+      />
+    );
+  };
+
+  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-10 md:gap-16">
+          <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>
+          <div className="card-holder flex flex-wrap items-stretch justify-center gap-6 self-stretch md:gap-6">
+            {items.map((item, index: number) => renderCard(item, index))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Callout;

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

@@ -1,15 +1,15 @@
-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;
-  cardType?: "simple" | "blog";
-};
+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;
+  cardType?: "simple" | "blog";
+};

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/blog-card/index.tsx

@@ -1,110 +1,110 @@
-import React from "react";
-import { BlogCardProps } from "./types";
-import Image from "next/image";
-import Link from "next/link";
-
-// import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-export const BlogCard: React.FC<BlogCardProps> = ({
-  href,
-  title,
-  description,
-  date,
-  category,
-  image,
-  readMoreText = "Read more",
-  asGrid = true,
-  lgWidth,
-  mdWidth,
-  index,
-}: BlogCardProps) => {
-  const basehwClass = "lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)]";
-  const parentClassName = asGrid
-    ? "flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
-    : `callout-card ${basehwClass} ${lgWidth} ${mdWidth} w-full overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop`;
-
-  return (
-    <article
-      className={parentClassName}
-      data-section-type={"blog-card"}
-      data-section-index={index}
-    >
-      {/* Image */}
-      <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
-        <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
-          {image ? (
-            <Image
-              src={image.src}
-              alt={image.alt}
-              width={image.width}
-              height={image.height}
-              className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-            />
-          ) : (
-            <div
-              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
-              aria-hidden="true"
-            />
-          )}
-        </div>
-      </Link>
-
-      {/* Body */}
-      <div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
-        {/* Meta: category + date */}
-        <div className="flex items-center gap-2 text-[13px]">
-          <span className="body2 text-text-brand">{category}</span>
-          {date && (
-            <>
-              <span className="footnote text-text" aria-hidden="true">
-                •
-              </span>
-              <time className="body2 text-text">{date}</time>
-            </>
-          )}
-        </div>
-
-        {/* Title */}
-        {title && (
-          <Link
-            href={href}
-            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
-          >
-            {title}
-          </Link>
-        )}
-
-        {/* Excerpt */}
-        {description && (
-          <Text className="body1 m-0 line-clamp-3 flex-1 text-text">
-            {description}
-          </Text>
-        )}
-
-        {/* Read more */}
-        <Link
-          href={href}
-          className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
-          aria-label={`${readMoreText} about ${title || "this article"}`}
-        >
-          <Text
-            aria-label={`${readMoreText} about ${title || "this article"}`}
-            className="label1 text-nowrap"
-          >
-            {readMoreText}
-          </Text>
-          <MaterialIcon
-            name="expand_circle_right"
-            fill={1}
-            size={24}
-            weight="200"
-          />
-        </Link>
-      </div>
-    </article>
-  );
-};
-export default BlogCard;
+import React from "react";
+import { BlogCardProps } from "./types";
+import Image from "next/image";
+import Link from "next/link";
+
+// import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+export const BlogCard: React.FC<BlogCardProps> = ({
+  href,
+  title,
+  description,
+  date,
+  category,
+  image,
+  readMoreText = "Read more",
+  asGrid = true,
+  lgWidth,
+  mdWidth,
+  index,
+}: BlogCardProps) => {
+  const basehwClass = "lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)]";
+  const parentClassName = asGrid
+    ? "flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
+    : `callout-card ${basehwClass} ${lgWidth} ${mdWidth} w-full overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop`;
+
+  return (
+    <article
+      className={parentClassName}
+      data-section-type={"blog-card"}
+      data-section-index={index}
+    >
+      {/* Image */}
+      <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
+        <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
+          {image ? (
+            <Image
+              src={image.src}
+              alt={image.alt}
+              width={image.width}
+              height={image.height}
+              className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+            />
+          ) : (
+            <div
+              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      </Link>
+
+      {/* Body */}
+      <div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
+        {/* Meta: category + date */}
+        <div className="flex items-center gap-2 text-[13px]">
+          <span className="body2 text-text-brand">{category}</span>
+          {date && (
+            <>
+              <span className="footnote text-text" aria-hidden="true">
+                •
+              </span>
+              <time className="body2 text-text">{date}</time>
+            </>
+          )}
+        </div>
+
+        {/* Title */}
+        {title && (
+          <Link
+            href={href}
+            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
+          >
+            {title}
+          </Link>
+        )}
+
+        {/* Excerpt */}
+        {description && (
+          <Text className="body1 m-0 line-clamp-3 flex-1 text-text">
+            {description}
+          </Text>
+        )}
+
+        {/* Read more */}
+        <Link
+          href={href}
+          className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
+          aria-label={`${readMoreText} about ${title || "this article"}`}
+        >
+          <Text
+            aria-label={`${readMoreText} about ${title || "this article"}`}
+            className="label1 text-nowrap"
+          >
+            {readMoreText}
+          </Text>
+          <MaterialIcon
+            name="expand_circle_right"
+            fill={1}
+            size={24}
+            weight="200"
+          />
+        </Link>
+      </div>
+    </article>
+  );
+};
+export default BlogCard;

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

@@ -1,18 +1,18 @@
-export interface BlogCardProps {
-  href: string;
-  title?: string;
-  description?: string;
-  date?: string;
-  category?: string;
-  image?: {
-    src: string;
-    alt: string;
-    width: number;
-    height: number;
-  };
-  readMoreText?: string;
-  asGrid?: boolean;
-  lgWidth?: string;
-  mdWidth?: string;
-  index?: number;
-}
+export interface BlogCardProps {
+  href: string;
+  title?: string;
+  description?: string;
+  date?: string;
+  category?: string;
+  image?: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+  readMoreText?: string;
+  asGrid?: boolean;
+  lgWidth?: string;
+  mdWidth?: string;
+  index?: number;
+}

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;