@windstream/react-shared-components 0.1.17 → 0.1.18

package/dist/core.d.ts

@@ -59,7 +59,7 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "error" | "default" | "filled" | "active" | "focus" | "hover" | undefined;
+    state?: "default" | "error" | "filled" | "active" | "focus" | "hover" | undefined;
     size?: "medium" | "large" | "slim" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
@@ -345,7 +345,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
 };
 type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 
-declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/dist/index.d.ts

@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/callout/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import BlogCard from "../cards/blog-card";
 import SimpleCard from "../cards/simple-card";
 import { CalloutProps } from "./types";
 
@@ -12,6 +13,7 @@ export const Callout: React.FC<CalloutProps> = ({
   color = "dark",
   maxWidth = true,
   maxCardsPerRow,
+  cardType = "simple",
 }) => {
   const lgWidth =
     {
@@ -23,6 +25,31 @@ export const Callout: React.FC<CalloutProps> = ({
 
   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}
+        />
+      );
+    }
+    return (
+      <SimpleCard
+        key={index}
+        card={item as any}
+        lgWidth={lgWidth}
+        mdWidth={mdWidth}
+      />
+    );
+  };
+
   return (
     <div className="component-container">
       <div
@@ -48,14 +75,7 @@ export const Callout: React.FC<CalloutProps> = ({
             )}
           </div>
           <div className="card-holder flex flex-wrap items-stretch justify-center gap-8 self-stretch lg:gap-6">
-            {items.map((item, index: number) => (
-              <SimpleCard
-                key={index}
-                card={item}
-                lgWidth={lgWidth}
-                mdWidth={mdWidth}
-              />
-            ))}
+            {items.map((item, index: number) => renderCard(item, index))}
           </div>
         </div>
       </div>

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

@@ -1,14 +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;
-};
+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/blog-card/index.tsx

@@ -15,9 +15,14 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   category,
   image,
   readMoreText = "Read more",
+  asGrid = true,
 }: BlogCardProps) => {
+  const parentClassName = asGrid
+    ? "flex h-full 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)]"
+    : "callout-card lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)] w-full 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)]";
+
   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)]">
+    <article className={parentClassName}>
       {/* 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">

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

@@ -11,4 +11,5 @@ export interface BlogCardProps {
     height: number;
   };
   readMoreText?: string;
+  asGrid?: boolean;
 }