@windstream/react-shared-components 0.1.75 → 0.1.77

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,129 +1,129 @@
-import React from "react";
-import { BlogCardProps } from "./types";
-import * as _NextLink from "next/link";
-
-// import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-// CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
-// next/image is intentionally avoided — its image-external.js uses the
-// `0 && (module.exports = {...})` tree-shaking hint which confuses webpack's
-// CJS→ESM interop and causes "got: object" errors in consuming apps.
-const Link = ((_NextLink as any).default ??
-  _NextLink) as typeof import("next/link").default;
-
-export const BlogCard: React.FC<BlogCardProps> = ({
-  href,
-  title,
-  description,
-  date,
-  category,
-  image,
-  imageComponent: ImageComponent,
-  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 ? (
-            ImageComponent ? (
-              <ImageComponent
-                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"
-              />
-            ) : (
-              <img
-                src={image.src}
-                alt={image.alt}
-                width={image.width}
-                height={image.height}
-                loading="lazy"
-                decoding="async"
-                className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-              />
-            )
-          ) : (
-            <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 * as _NextLink from "next/link";
+
+// import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+// CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
+// next/image is intentionally avoided — its image-external.js uses the
+// `0 && (module.exports = {...})` tree-shaking hint which confuses webpack's
+// CJS→ESM interop and causes "got: object" errors in consuming apps.
+const Link = ((_NextLink as any).default ??
+  _NextLink) as typeof import("next/link").default;
+
+export const BlogCard: React.FC<BlogCardProps> = ({
+  href,
+  title,
+  description,
+  date,
+  category,
+  image,
+  imageComponent: ImageComponent,
+  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 ? (
+            ImageComponent ? (
+              <ImageComponent
+                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"
+              />
+            ) : (
+              <img
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
+              />
+            )
+          ) : (
+            <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,34 +1,34 @@
-import React from "react";
-
-export interface BlogCardImageProps {
-  src: string;
-  alt: string;
-  width: number;
-  height: number;
-  className?: string;
-  sizes?: string;
-  loading?: "lazy" | "eager";
-  decoding?: "async" | "auto" | "sync";
-  [key: string]: unknown;
-}
-
-export interface BlogCardProps {
-  href: string;
-  title?: string;
-  description?: string;
-  date?: string;
-  category?: string;
-  image?: {
-    src: string;
-    alt: string;
-    width: number;
-    height: number;
-  };
-  /** Pass next/image's Image component here to enable image optimization */
-  imageComponent?: React.ComponentType<BlogCardImageProps>;
-  readMoreText?: string;
-  asGrid?: boolean;
-  lgWidth?: string;
-  mdWidth?: string;
-  index?: number;
-}
+import React from "react";
+
+export interface BlogCardImageProps {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  className?: string;
+  sizes?: string;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "auto" | "sync";
+  [key: string]: unknown;
+}
+
+export interface BlogCardProps {
+  href: string;
+  title?: string;
+  description?: string;
+  date?: string;
+  category?: string;
+  image?: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+  /** Pass next/image's Image component here to enable image optimization */
+  imageComponent?: React.ComponentType<BlogCardImageProps>;
+  readMoreText?: string;
+  asGrid?: boolean;
+  lgWidth?: string;
+  mdWidth?: string;
+  index?: number;
+}

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -1,119 +1,119 @@
-import React from "react";
-import { Button } from "../../button";
-import { FloatingImageCardProps } from "./types";
-
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-const alignmentClasses: Record<string, string> = {
-  left: "flex w-full justify-start",
-  right: "flex w-full justify-end",
-  center: "flex w-full justify-center",
-};
-
-export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
-  card,
-  lgWidth,
-  mdWidth,
-}) => {
-  const {
-    image,
-    title,
-    header,
-    body,
-    cta,
-    ctaAlignment,
-    imageLink,
-    imageClassName,
-    className,
-    isPromoBarImg = false,
-    shadow = false,
-  } = card;
-
-  const ctaAlignmentClass = ctaAlignment
-    ? alignmentClasses[ctaAlignment]
-    : alignmentClasses.left;
-  const imageLinkAvailableClass = imageLink ? "cursor-pointer" : "";
-
-  const handleImageClick = imageLink
-    ? () => {
-        if (typeof window !== "undefined") {
-          window.open(imageLink, "_blank");
-        }
-      }
-    : undefined;
-
-  if (isPromoBarImg) {
-    return image?.href ? (
-      <NextImage
-        src={image.href}
-        alt={image.title ?? title ?? "promo-bar-image"}
-        width={148}
-        height={40}
-        onClick={handleImageClick}
-        className={imageLinkAvailableClass}
-      />
-    ) : null;
-  }
-
-  return (
-    <section
-      aria-labelledby="Image Card"
-      className={cx(
-        "callout-card relative flex h-full w-full flex-col gap-4 p-0 md:items-start lg:gap-6",
-        shadow && "rounded-3xl shadow-card",
-        mdWidth,
-        lgWidth,
-        className
-      )}
-    >
-      {image?.href ? (
-        <div
-          className={cx(
-            "relative aspect-video w-full overflow-hidden rounded-[40px] sm:mb-1 md:flex-none lg:mb-0",
-            imageClassName
-          )}
-        >
-          <NextImage
-            src={image.href}
-            alt={image.title ?? title ?? "card-image"}
-            width={image.width || 400}
-            height={image.height || 285}
-            onClick={handleImageClick}
-            className={cx(
-              "h-full max-h-[285px] w-full object-cover",
-              imageLinkAvailableClass
-            )}
-          />
-        </div>
-      ) : null}
-
-      {header ? (
-        <Text as="h6" className="heading6 font-black text-text lg:pb-2">
-          {header}
-        </Text>
-      ) : null}
-
-      {body ? (
-        <Text as="div" className="body2 mb-0 flex-1 text-text">
-          {body}
-        </Text>
-      ) : null}
-
-      <div className={cx(ctaAlignmentClass, "mt-auto")}>
-        {cta ? (
-          <Button
-            linkVariant="unstyled"
-            linkClassName="label1 flex items-center gap-2 text-text"
-            {...cta}
-            iconName="expand_circle_right"
-            iconFill={1}
-          />
-        ) : null}
-      </div>
-    </section>
-  );
-};
-
-export default FloatingImageCard;
+import React from "react";
+import { Button } from "../../button";
+import { FloatingImageCardProps } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const alignmentClasses: Record<string, string> = {
+  left: "flex w-full justify-start",
+  right: "flex w-full justify-end",
+  center: "flex w-full justify-center",
+};
+
+export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const {
+    image,
+    title,
+    header,
+    body,
+    cta,
+    ctaAlignment,
+    imageLink,
+    imageClassName,
+    className,
+    isPromoBarImg = false,
+    shadow = false,
+  } = card;
+
+  const ctaAlignmentClass = ctaAlignment
+    ? alignmentClasses[ctaAlignment]
+    : alignmentClasses.left;
+  const imageLinkAvailableClass = imageLink ? "cursor-pointer" : "";
+
+  const handleImageClick = imageLink
+    ? () => {
+        if (typeof window !== "undefined") {
+          window.open(imageLink, "_blank");
+        }
+      }
+    : undefined;
+
+  if (isPromoBarImg) {
+    return image?.href ? (
+      <NextImage
+        src={image.href}
+        alt={image.title ?? title ?? "promo-bar-image"}
+        width={148}
+        height={40}
+        onClick={handleImageClick}
+        className={imageLinkAvailableClass}
+      />
+    ) : null;
+  }
+
+  return (
+    <section
+      aria-labelledby="Image Card"
+      className={cx(
+        "callout-card relative flex h-full w-full flex-col gap-4 p-0 md:items-start lg:gap-6",
+        shadow && "rounded-3xl shadow-card",
+        mdWidth,
+        lgWidth,
+        className
+      )}
+    >
+      {image?.href ? (
+        <div
+          className={cx(
+            "relative aspect-video w-full overflow-hidden rounded-[40px] sm:mb-1 md:flex-none lg:mb-0",
+            imageClassName
+          )}
+        >
+          <NextImage
+            src={image.href}
+            alt={image.title ?? title ?? "card-image"}
+            width={image.width || 400}
+            height={image.height || 285}
+            onClick={handleImageClick}
+            className={cx(
+              "h-full max-h-[285px] w-full object-cover",
+              imageLinkAvailableClass
+            )}
+          />
+        </div>
+      ) : null}
+
+      {header ? (
+        <Text as="h6" className="heading6 font-black text-text lg:pb-2">
+          {header}
+        </Text>
+      ) : null}
+
+      {body ? (
+        <Text as="div" className="body2 mb-0 flex-1 text-text">
+          {body}
+        </Text>
+      ) : null}
+
+      <div className={cx(ctaAlignmentClass, "mt-auto")}>
+        {cta ? (
+          <Button
+            linkVariant="unstyled"
+            linkClassName="label1 flex items-center gap-2 text-text"
+            {...cta}
+            iconName="expand_circle_right"
+            iconFill={1}
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default FloatingImageCard;

package/src/contentful/blocks/cards/floating-image-card/types.ts

@@ -1,30 +1,30 @@
-import type { ReactNode } from "react";
-import type { ButtonProps } from "../../button/types";
-
-export type FloatingImageAsset = {
-  href: string;
-  title?: string;
-  width?: number;
-  height?: number;
-};
-
-export type FloatingImageCardItem = {
-  title?: string;
-  header?: string;
-  body?: ReactNode;
-  cta?: ButtonProps;
-  ctaAlignment?: "left" | "right" | "center";
-  image?: FloatingImageAsset;
-  imageLink?: string;
-  imageClassName?: string;
-  className?: string;
-  isPromoBarImg?: boolean;
-  /** Applies `shadow-card` to the outer card element. */
-  shadow?: boolean;
-};
-
-export type FloatingImageCardProps = {
-  card: FloatingImageCardItem;
-  lgWidth?: string;
-  mdWidth?: string;
-};
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+export type FloatingImageAsset = {
+  href: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export type FloatingImageCardItem = {
+  title?: string;
+  header?: string;
+  body?: ReactNode;
+  cta?: ButtonProps;
+  ctaAlignment?: "left" | "right" | "center";
+  image?: FloatingImageAsset;
+  imageLink?: string;
+  imageClassName?: string;
+  className?: string;
+  isPromoBarImg?: boolean;
+  /** Applies `shadow-card` to the outer card element. */
+  shadow?: boolean;
+};
+
+export type FloatingImageCardProps = {
+  card: FloatingImageCardItem;
+  lgWidth?: string;
+  mdWidth?: string;
+};