@windstream/react-shared-components 0.1.29 → 0.1.30

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

@@ -1,88 +1,89 @@
-import React from "react";
-import { Button } from "../../button";
-import { backgroundColorMap, Item, SimpleCardProps } from "./types";
-
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-
-export const SimpleCard: React.FC<SimpleCardProps> = ({
-  card,
-  lgWidth,
-  mdWidth,
-}) => {
-  const imageRenderer = (item: Item) => {
-    if (!item.image) return null;
-
-    // Handle both lowercase and capitalized versions from Contentful
-    const view = item.imageView?.toLowerCase();
-
-    switch (view) {
-      case "full":
-        return (
-          <NextImage
-            width={400}
-            height={280}
-            src={item.image}
-            alt={item.title ?? "card-icon"}
-            className="rounded-3xl"
-          />
-        );
-      case "icon":
-      case "inset":
-      default:
-        return (
-          <NextImage
-            width={88}
-            height={88}
-            src={item.image}
-            alt={item.title ?? "card-icon"}
-          />
-        );
-    }
-  };
-
-  const imageAlignment = card.imageAlignment?.toLowerCase() || "left";
-  const imageAlignClass =
-    imageAlignment === "left"
-      ? "lg:items-start"
-      : imageAlignment === "right"
-        ? "lg:items-end"
-        : "lg:items-center";
-
-  return (
-    <div
-      className={`callout-card ${mdWidth} ${lgWidth} w-full ${backgroundColorMap[card.backgroundColor ?? ""] ?? ""}`}
-    >
-      <div
-        className={`card-template flex h-full flex-col items-center gap-8 p-8 text-center ${imageAlignClass}`}
-      >
-        <div className="card-header">{imageRenderer(card)}</div>
-
-        <div className="card-body flex flex-col gap-3 text-start">
-          {card.title && (
-            <Text as="h5" className="heading6 font-black md:heading5">
-              {card.title}
-            </Text>
-          )}
-          {card.body && (
-            <Text as="div" className="body1">
-              {card.body}
-            </Text>
-          )}
-        </div>
-        {card.cta && (
-          <div className="card-footer">
-            <Button
-              linkVariant="unstyled"
-              linkClassName="label1 flex items-center text-text gap-2"
-              {...card.cta}
-              iconName={"expand_circle_right"}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SimpleCard;
+import React from "react";
+import { Button } from "../../button";
+import { backgroundColorMap, Item, SimpleCardProps } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+
+export const SimpleCard: React.FC<SimpleCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const imageRenderer = (item: Item) => {
+    if (!item.image) return null;
+
+    // Handle both lowercase and capitalized versions from Contentful
+    const view = item.imageView?.toLowerCase();
+
+    switch (view) {
+      case "full":
+        return (
+          <NextImage
+            width={400}
+            height={280}
+            src={item.image}
+            alt={item.title ?? "card-icon"}
+            className="rounded-3xl"
+          />
+        );
+      case "icon":
+      case "inset":
+      default:
+        return (
+          <NextImage
+            width={88}
+            height={88}
+            src={item.image}
+            alt={item.title ?? "card-icon"}
+          />
+        );
+    }
+  };
+
+  const imageAlignment = card.imageAlignment?.toLowerCase() || "left";
+  const imageAlignClass =
+    imageAlignment === "left"
+      ? "lg:items-start"
+      : imageAlignment === "right"
+        ? "lg:items-end"
+        : "lg:items-center";
+
+  return (
+    <div
+      className={`callout-card ${mdWidth} ${lgWidth} w-full ${backgroundColorMap[card.backgroundColor ?? ""] ?? ""}`}
+    >
+      <div
+        className={`card-template flex h-full flex-col gap-6 p-6 text-center md:gap-8 md:p-8 ${imageAlignClass}`}
+      >
+        <div className="card-header">{imageRenderer(card)}</div>
+
+        <div className="card-body flex flex-col gap-3 text-start md:gap-4">
+          {card.title && (
+            <Text as="h5" className="heading5 text-text">
+              {card.title}
+            </Text>
+          )}
+          {card.body && (
+            <Text as="div" className="body1 text-text">
+              {card.body}
+            </Text>
+          )}
+        </div>
+        {card.cta && (
+          <div className="card-footer">
+            <Button
+              linkVariant="unstyled"
+              linkClassName="label1 flex items-center text-text gap-2"
+              {...card.cta}
+              iconName={"expand_circle_right"}
+              iconFill={1}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SimpleCard;

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

@@ -1,88 +1,90 @@
-import React from "react";
-import { TestimonialCardProps } from "./types";
-import clsx from "clsx";
-import Image from "next/image";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-export const TestimonialCard: React.FC<TestimonialCardProps> = ({
-  title,
-  quote,
-  rating,
-  author,
-  role,
-  avatarUrl,
-  isActive = false,
-  className,
-}) => {
-  return (
-    <figure
-      className={clsx(
-        "flex h-full w-full flex-col rounded-3xl p-6 font-sans transition-all duration-300 md:p-13",
-        isActive ? "bg-white shadow-lg" : "bg-gray-50 opacity-40", // Active vs Inactive styles
-        className
-      )}
-    >
-      <header>
-        <Text as="h3" className="mb-4 text-xl font-black lowercase text-text">
-          {title}
-        </Text>
-      </header>
-      <blockquote className="mb-5 flex-grow text-xl leading-relaxed text-text">
-        {quote}
-      </blockquote>
-
-      {/* Rating Stars */}
-      {rating ? (
-        <div className="mb-5 flex gap-1">
-          {[...Array(5)].map((_, i) => (
-            <MaterialIcon
-              key={i}
-              size={24}
-              name="star"
-              fill={1}
-              className={clsx(
-                "h-5 w-5",
-                i < rating ? "text-text" : "text-gray-300"
-              )}
-              aria-hidden="true"
-            />
-          ))}
-        </div>
-      ) : null}
-
-      {/* Author Block */}
-      {author && (
-        <figcaption className="flex items-center gap-3">
-          <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full bg-gray-300">
-            {avatarUrl ? (
-              <Image
-                src={avatarUrl}
-                alt={author}
-                fill={true}
-                className="object-cover"
-                sizes="40px"
-              />
-            ) : (
-              <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
-                {author.charAt(0)}
-              </div>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <cite className="text-sm font-bold not-italic text-text">
-              {author}
-            </cite>
-            <Text as="p" className="text-xs text-text">
-              {role}
-            </Text>
-          </div>
-        </figcaption>
-      )}
-    </figure>
-  );
-};
-
-export default TestimonialCard;
+import React from "react";
+import { TestimonialCardProps } from "./types";
+import clsx from "clsx";
+import Image from "next/image";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+export const TestimonialCard: React.FC<TestimonialCardProps> = ({
+  title,
+  quote,
+  rating,
+  author,
+  role,
+  avatarUrl,
+  isActive = false,
+  className,
+}) => {
+  return (
+    <figure
+      className={clsx(
+        "flex w-full flex-col gap-6 rounded-card-lg p-6 transition-all duration-300 md:gap-10 md:p-14",
+        isActive
+          ? "bg-bg-surface-secondary shadow-drop"
+          : "bg-gray-50 opacity-40", // Active vs Inactive styles
+        className
+      )}
+    >
+      <div className="flex flex-col justify-start gap-3 md:gap-5">
+        <header>
+          <Text as="h3" className="label1 text-text">
+            {title}
+          </Text>
+        </header>
+        <blockquote className="body1 text-text">{quote}</blockquote>
+
+        {/* Rating Stars */}
+        {rating ? (
+          <div className="flex" aria-label={`Rating: ${rating} out of 5`}>
+            {[...Array(5)].map((_, i) => (
+              <MaterialIcon
+                key={i}
+                size={24}
+                name="star"
+                fill={1}
+                className={clsx(
+                  "h-[21px] w-[21px]",
+                  i < rating ? "text-text" : "text-gray-300"
+                )}
+                aria-hidden="true"
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {/* Author Block */}
+      {author && (
+        <figcaption className="flex gap-3 md:gap-5">
+          <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-300">
+            {avatarUrl ? (
+              <Image
+                src={avatarUrl}
+                alt={author}
+                fill={true}
+                className="object-cover"
+                sizes="40px"
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
+                {author.charAt(0)}
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col">
+            <cite className="label3 font-bold not-italic text-text">
+              {author}
+            </cite>
+            <Text as="p" className="body3 text-text">
+              {role}
+            </Text>
+          </div>
+        </figcaption>
+      )}
+    </figure>
+  );
+};
+
+export default TestimonialCard;

package/src/contentful/blocks/cards/testimonial-card/types.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from "react";
-
-export interface TestimonialCardProps {
-  title?: string;
-  quote?: ReactNode;
-  rating?: number;
-  author?: string;
-  role?: string;
-  avatarUrl?: string;
-  isActive?: boolean;
-  className?: string;
-}
+import { ReactNode } from "react";
+
+export interface TestimonialCardProps {
+  title?: string;
+  quote?: ReactNode;
+  rating?: number;
+  author?: string;
+  role?: string;
+  avatarUrl?: string;
+  isActive?: boolean;
+  className?: string;
+}

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

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

package/src/contentful/blocks/carousel/Carousel.stories.tsx

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