@windstream/react-shared-components 0.1.81 → 0.1.87

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;
+};

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

@@ -1,130 +1,130 @@
-import React from "react";
-import { Button } from "../../button";
-import { FullImageCardProps } from "./types";
-
-import { Link } from "@shared/components/link";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-export const FullImageCard: React.FC<FullImageCardProps> = ({
-  card,
-  lgWidth,
-  mdWidth,
-}) => {
-  const {
-    anchorId = "FullImageCard",
-    title,
-    description,
-    caption,
-    image,
-    cta,
-    link,
-    className,
-    contentClassName,
-    imageClassName,
-    shadow = true,
-  } = card;
-
-  const target = cta || link;
-  const href = target?.href;
-
-  const renderImage = () => {
-    if (!image?.href) return null;
-
-    const img = (
-      <NextImage
-        src={image.href}
-        alt={image.title ?? title ?? "card-image"}
-        width={image.width || 400}
-        height={image.height || 280}
-        className="w-full"
-      />
-    );
-
-    return href ? (
-      <Link href={href} tabIndex={-1} target={target?.target}>
-        {img}
-      </Link>
-    ) : (
-      img
-    );
-  };
-
-  const titleNode = title ? (
-    <Text as="h3" className="body1 text-text xl:heading6">
-      {title}
-    </Text>
-  ) : null;
-
-  return (
-    <section
-      id={anchorId}
-      className={cx(
-        "callout-card relative flex flex-col rounded-3xl bg-white p-0",
-        shadow && "shadow-card",
-        mdWidth,
-        lgWidth,
-        "w-full",
-        className
-      )}
-      aria-labelledby={`card-title-${anchorId}`}
-    >
-      {image?.href ? (
-        <div
-          className={cx(
-            "relative aspect-video overflow-hidden rounded-tl-3xl rounded-tr-3xl",
-            imageClassName
-          )}
-        >
-          {renderImage()}
-        </div>
-      ) : null}
-      <div
-        className={cx(
-          "flex h-full flex-col gap-4 p-6 md:p-8",
-          contentClassName
-        )}
-      >
-        <div className="flex flex-1 flex-col justify-between">
-          <div>
-            {href && titleNode ? (
-              <Link
-                href={href}
-                target={target?.target}
-                className="no-underline hover:underline"
-              >
-                {titleNode}
-              </Link>
-            ) : (
-              titleNode
-            )}
-            {description ? (
-              <Text as="p" className="body2 mt-4 text-text md:body1">
-                {description}
-              </Text>
-            ) : null}
-          </div>
-          {caption ? (
-            <Text as="p" className="footnote mt-5 text-text-secondary">
-              {caption}
-            </Text>
-          ) : null}
-        </div>
-        {cta ? (
-          <div className="mt-2 flex items-end">
-            <Button
-              linkVariant="unstyled"
-              linkClassName="label1 flex items-center gap-2 text-text"
-              {...cta}
-              iconName="expand_circle_right"
-              iconFill={1}
-            />
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-};
-
-export default FullImageCard;
+import React from "react";
+import { Button } from "../../button";
+import { FullImageCardProps } from "./types";
+
+import { Link } from "@shared/components/link";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const FullImageCard: React.FC<FullImageCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const {
+    anchorId = "FullImageCard",
+    title,
+    description,
+    caption,
+    image,
+    cta,
+    link,
+    className,
+    contentClassName,
+    imageClassName,
+    shadow = true,
+  } = card;
+
+  const target = cta || link;
+  const href = target?.href;
+
+  const renderImage = () => {
+    if (!image?.href) return null;
+
+    const img = (
+      <NextImage
+        src={image.href}
+        alt={image.title ?? title ?? "card-image"}
+        width={image.width || 400}
+        height={image.height || 280}
+        className="w-full"
+      />
+    );
+
+    return href ? (
+      <Link href={href} tabIndex={-1} target={target?.target}>
+        {img}
+      </Link>
+    ) : (
+      img
+    );
+  };
+
+  const titleNode = title ? (
+    <Text as="h3" className="body1 text-text xl:heading6">
+      {title}
+    </Text>
+  ) : null;
+
+  return (
+    <section
+      id={anchorId}
+      className={cx(
+        "callout-card relative flex flex-col rounded-3xl bg-white p-0",
+        shadow && "shadow-card",
+        mdWidth,
+        lgWidth,
+        "w-full",
+        className
+      )}
+      aria-labelledby={`card-title-${anchorId}`}
+    >
+      {image?.href ? (
+        <div
+          className={cx(
+            "relative aspect-video overflow-hidden rounded-tl-3xl rounded-tr-3xl",
+            imageClassName
+          )}
+        >
+          {renderImage()}
+        </div>
+      ) : null}
+      <div
+        className={cx(
+          "flex h-full flex-col gap-4 p-6 md:p-8",
+          contentClassName
+        )}
+      >
+        <div className="flex flex-1 flex-col justify-between">
+          <div>
+            {href && titleNode ? (
+              <Link
+                href={href}
+                target={target?.target}
+                className="no-underline hover:underline"
+              >
+                {titleNode}
+              </Link>
+            ) : (
+              titleNode
+            )}
+            {description ? (
+              <Text as="p" className="body2 mt-4 text-text md:body1">
+                {description}
+              </Text>
+            ) : null}
+          </div>
+          {caption ? (
+            <Text as="p" className="footnote mt-5 text-text-secondary">
+              {caption}
+            </Text>
+          ) : null}
+        </div>
+        {cta ? (
+          <div className="mt-2 flex items-end">
+            <Button
+              linkVariant="unstyled"
+              linkClassName="label1 flex items-center gap-2 text-text"
+              {...cta}
+              iconName="expand_circle_right"
+              iconFill={1}
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default FullImageCard;

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

@@ -1,29 +1,29 @@
-import type { ButtonProps } from "../../button/types";
-
-export type FullImageAsset = {
-  href: string;
-  title?: string;
-  width?: number;
-  height?: number;
-};
-
-export type FullImageCardItem = {
-  anchorId?: string;
-  title?: string;
-  description?: string;
-  caption?: string;
-  cta?: ButtonProps;
-  link?: ButtonProps;
-  image?: FullImageAsset;
-  className?: string;
-  contentClassName?: string;
-  imageClassName?: string;
-  /** Applies `shadow-card` to the outer card element. */
-  shadow?: boolean;
-};
-
-export type FullImageCardProps = {
-  card: FullImageCardItem;
-  lgWidth?: string;
-  mdWidth?: string;
-};
+import type { ButtonProps } from "../../button/types";
+
+export type FullImageAsset = {
+  href: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export type FullImageCardItem = {
+  anchorId?: string;
+  title?: string;
+  description?: string;
+  caption?: string;
+  cta?: ButtonProps;
+  link?: ButtonProps;
+  image?: FullImageAsset;
+  className?: string;
+  contentClassName?: string;
+  imageClassName?: string;
+  /** Applies `shadow-card` to the outer card element. */
+  shadow?: boolean;
+};
+
+export type FullImageCardProps = {
+  card: FullImageCardItem;
+  lgWidth?: string;
+  mdWidth?: string;
+};

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;