@windstream/react-shared-components 0.0.100 → 0.1.1

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

@@ -0,0 +1,99 @@
+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",
+}: BlogCardProps) => {
+  return (
+    <article className="flex flex-col overflow-hidden rounded-xl bg-white shadow-[0_1px_4px_rgba(0,0,0,0.08),0_4px_16px_rgba(0,0,0,0.06)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.12),0_8px_24px_rgba(0,0,0,0.10)]">
+      {/* Image */}
+      <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
+        <div className="aspect-video 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-5 pb-6">
+        {/* Meta: category + date */}
+        <div className="flex items-center gap-2 text-[13px]">
+          <span className="text-body2 font-semibold text-text-brand">
+            {category}
+          </span>
+          {date && (
+            <>
+              <span className="text-xs text-text" aria-hidden="true">
+                •
+              </span>
+              <time className="text-body2 text-text">{date}</time>
+            </>
+          )}
+        </div>
+
+        {/* Title */}
+        {title && (
+          <Link
+            href={href}
+            className="m-0 line-clamp-3 text-heading6 font-black transition-colors duration-150 hover:text-text-brand"
+          >
+            {title}
+          </Link>
+        )}
+
+        {/* Excerpt */}
+        {description && (
+          <Text className="m-0 line-clamp-3 flex-1 text-body1">
+            {description}
+          </Text>
+        )}
+
+        {/* Read more */}
+        <Link
+          href={href}
+          className="group mt-auto inline-flex justify-between pt-3 text-sm text-text-brand no-underline transition-all duration-200 hover:gap-2.5 hover:text-[#007ab8]"
+          aria-label={`${readMoreText} about ${title || "this article"}`}
+        >
+          <Button
+            aria-label={`${readMoreText} about ${title || "this article"}`}
+            className="flex w-36 justify-around text-nowrap text-label1 font-black"
+          >
+            {readMoreText}
+            <MaterialIcon
+              name="expand_circle_right"
+              fill={0}
+              size={24}
+              weight="600"
+            />
+          </Button>
+        </Link>
+      </div>
+    </article>
+  );
+};
+export default BlogCard;

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

@@ -0,0 +1,14 @@
+export interface BlogCardProps {
+  href: string;
+  title?: string;
+  description?: string;
+  date?: string;
+  category?: string;
+  image?: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+  readMoreText?: string;
+}

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

@@ -123,7 +123,9 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                     width={24}
                     height={24}
                   />
-                  <Text as="div" className="text-sm font-bold">{badge.title}</Text>
+                  <Text as="div" className="text-sm font-bold">
+                    {badge.title}
+                  </Text>
                 </div>
               );
             })}

package/src/contentful/blocks/find-kinetic/index.tsx

@@ -75,7 +75,10 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                     }
                     return rearranged.map((item, index: number) => (
                       <li key={`item-list-2-${index}`}>
-                        <Link href={`/local/${item.code.toLowerCase()}`} className="label1">
+                        <Link
+                          href={`/local/${item.code.toLowerCase()}`}
+                          className="label1"
+                        >
                           {item.name}
                         </Link>
                       </li>
@@ -100,7 +103,10 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                     }
                     return rearranged.map((item, index: number) => (
                       <li key={`item-list-3-${index}`}>
-                        <Link href={`/local/${item.code.toLowerCase()}`} className="label1">
+                        <Link
+                          href={`/local/${item.code.toLowerCase()}`}
+                          className="label1"
+                        >
                           {item.name}
                         </Link>
                       </li>

package/src/contentful/blocks/search-block/index.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { SearchBlockProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { Input } from "@shared/components/input";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const SearchBlock: React.FC<SearchBlockProps> = props => {
+  const {
+    anchorId = "SearchBlock",
+    title,
+    subTitle,
+    enableHeading,
+    searchDescription,
+    searchInputPlaceholder,
+    basicCaption,
+    caption,
+    backgroundColor,
+    color,
+    onSubmit,
+  } = props;
+  const [searchText, setSearchText] = useState("");
+  const themeColorClasses = {
+    supporting: "bg-bg-fill-brand-supporting",
+    white: "bg-bg",
+    brand: "bg-bg-fill-brand",
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit?.({ searchText });
+  };
+
+  return (
+    <div
+      className={`py-10 md:py-20 ${themeColorClasses[backgroundColor]} ${color == "dark" ? "text-text" : "text-white"}`}
+      id={anchorId}
+      data-testid="search-block"
+    >
+      <div className={"flex justify-center"}>
+        <div className="w-[1200px]">
+          <div className="mb-8 text-center">
+            <Text
+              as={enableHeading ? "h1" : "h2"}
+              className={cx("heading2 md:heading1")}
+            >
+              {title}
+            </Text>
+            {subTitle && (
+              <Text as="div" className={cx("subheading2 mt-2 md:subheading1")}>
+                {subTitle}
+              </Text>
+            )}
+          </div>
+          {searchDescription ? (
+            <Text className={`heading6 text-center`}>{searchDescription}</Text>
+          ) : null}
+
+          <span className="w-full">
+            <form
+              onSubmit={handleSubmit}
+              className="flex items-center rounded-md border bg-bg transition-colors focus-within:border-border-focus"
+            >
+              <Button type="submit" className="ml-2 inline-flex">
+                <MaterialIcon name="search" />
+              </Button>
+              <div className="flex-grow">
+                <Input
+                  value={searchText}
+                  onChange={(e: {
+                    target: { value: React.SetStateAction<string> };
+                  }) => setSearchText(e.target.value)}
+                  placeholder={searchInputPlaceholder}
+                  containerClassName="px-4 pl-0 rounded-md flex-grow border-none"
+                  className={"body3 rounded-md"}
+                />
+              </div>
+            </form>
+          </span>
+          {caption ? caption : null}
+          {basicCaption}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default SearchBlock;

package/src/contentful/blocks/search-block/types.ts

@@ -0,0 +1,15 @@
+import React from "react";
+
+export type SearchBlockProps = {
+  anchorId?: string;
+  title?: string;
+  subTitle?: string;
+  searchDescription?: string;
+  searchInputPlaceholder?: string;
+  caption?: React.ReactNode;
+  basicCaption?: React.ReactNode;
+  enableHeading?: boolean;
+  backgroundColor: "supporting" | "white" | "brand";
+  color: "light" | "dark";
+  onSubmit?: (values: { searchText: string }) => void;
+};

package/src/contentful/index.ts

@@ -55,3 +55,15 @@ export type { TestimonialCardProps } from "./blocks/cards/testimonial-card/types
 
 export { ProductCard } from "./blocks/cards/product-card";
 export type { ProductCardProps } from "./blocks/cards/product-card/types";
+
+export { BlogCard } from "./blocks/cards/blog-card";
+export type { BlogCardProps } from "./blocks/cards/blog-card/types";
+
+export { BlogGrid } from "./blocks/blogs-grid";
+export type { BlogGridProps } from "./blocks/blogs-grid/types";
+
+export { BreadcrumbNavigation } from "./blocks/breadcrumbs";
+export type { BreadcrumbNavigationProps } from "./blocks/breadcrumbs/types";
+
+export {SearchBlock} from "./blocks/search-block";
+export type {SearchBlockProps} from "./blocks/search-block/types";