@windstream/react-shared-components 0.2.79 → 0.2.80

package/dist/core.d.ts

@@ -71,7 +71,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/dist/index.d.ts

@@ -67,8 +67,8 @@ 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?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "error" | "default" | "focus" | "active" | "hover" | "filled" | undefined;
+    size?: "medium" | "slim" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;

package/package.json

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

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

@@ -56,6 +56,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   hasAnyGift = false,
   twoColumn = false,
   enableBusinessSettings = false,
+  fieldProps,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   // Use parent state if provided, otherwise use internal state
@@ -86,7 +87,10 @@ export const ProductCard: React.FC<ProductCardProps> = ({
       {/* Best Value Banner. Non-best cards render an invisible banner of the
           same height when a sibling has one, so content stays aligned. */}
       {bestValue ? (
-        <div className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text">
+        <div
+          {...fieldProps?.bestValueText}
+          className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text"
+        >
           {bestValueText}
         </div>
       ) : hasAnyBadge ? (
@@ -116,6 +120,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           <div className="flex w-full flex-col md:w-auto">
             <Text
               as="h3"
+              {...fieldProps?.planName}
               className={cx(
                 planNameClass,
                 "whitespace-normal",
@@ -127,13 +132,13 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               {planSubtext ? (
                 <>
                   <br />
-                  {planSubtext}
+                  <span {...fieldProps?.planSubtext}>{planSubtext}</span>
                 </>
               ) : null}
             </Text>
           </div>
           <div className="flex flex-col items-start md:items-end">
-            <div className="flex items-start">
+            <div className="flex items-start" {...fieldProps?.price}>
               <Text
                 as="span"
                 className={cx(
@@ -167,6 +172,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             {priceSuffixBottom ? (
               <Text
                 as="span"
+                {...fieldProps?.priceSuffixBottom}
                 className={cx(
                   "micro text-nowrap",
                   isDark ? "text-text-inverse" : "text-text"
@@ -181,6 +187,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         {/* Description */}
         <section data-pc-description={true}>
           <Text
+            {...fieldProps?.description}
             className={cx(
               twoColumn ? "footnote md:body2" : "body2",
               "md:h-[56px]",
@@ -268,6 +275,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               >
                 <Text
                   as="h4"
+                  {...fieldProps?.featuresTitle}
                   className={cx(
                     "label3",
                     isDark ? "text-text-inverse" : "text-text"

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 
 import { ButtonProps } from "@shared/contentful/blocks/button/types";
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export interface ProductCardProps {
   planName: string;
@@ -37,4 +38,14 @@ export interface ProductCardProps {
    *  sizes at every breakpoint. */
   twoColumn?: boolean;
   enableBusinessSettings?: boolean;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<
+    | "planName"
+    | "planSubtext"
+    | "price"
+    | "priceSuffixBottom"
+    | "description"
+    | "bestValueText"
+    | "featuresTitle"
+  >;
 }

package/src/contentful/blocks/carousel/helper.tsx

@@ -438,6 +438,7 @@ function ProductCardPanel({
           theme={item?.highlighted ? "dark" : "light"}
           bestValue={bestValue}
           bestValueText={item?.topBadgeText || "best value"}
+          fieldProps={item?.fieldProps}
           featuresTitle={item?.benefitsTitle}
           features={features}
           isExpanded={isExpanded}

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

@@ -25,6 +25,7 @@ export const Carousel: React.FC<CarouselProps> = ({
   productCardsRef,
   onProductCardCtaClick,
   enableBusinessSettings = false,
+  fieldProps,
 }) => {
   const baseClass = hasProductCards
     ? "px-3 py-9 md:py-20"
@@ -38,11 +39,16 @@ export const Carousel: React.FC<CarouselProps> = ({
           <Text
             as="h2"
             className="heading2 text-text md:heading1 md:text-center"
+            {...fieldProps?.title}
           >
             {fields?.title}
           </Text>
           {fields?.subTitle && (
-            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
+            <Text
+              as="h3"
+              className="body1 px-4 pt-4 md:text-center"
+              {...fieldProps?.subTitle}
+            >
               {fields?.subTitle}
             </Text>
           )}
@@ -85,6 +91,7 @@ export const Carousel: React.FC<CarouselProps> = ({
         <Text
           as="div"
           className="body3 mt-8 px-4 text-center text-text-secondary"
+          {...fieldProps?.disclaimerText}
         >
           {disclaimerText}
         </Text>

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export interface carouselFieldsInterface {
   __typename: "ComponentCarousel";
@@ -85,6 +86,18 @@ export interface ProductCardFields {
     url: string;
     [key: string]: any;
   };
+  /** Pre-computed per-field Inspector Mode / Live Preview DOM attributes for
+   *  this item, supplied by the consumer and passed through to the rendered
+   *  ProductCard unchanged. The library itself stays CMS-agnostic. */
+  fieldProps?: FieldProps<
+    | "planName"
+    | "planSubtext"
+    | "price"
+    | "priceSuffixBottom"
+    | "description"
+    | "bestValueText"
+    | "featuresTitle"
+  >;
 }
 
 export interface CardFields {
@@ -148,6 +161,8 @@ export type CarouselProps = {
     event: React.MouseEvent<HTMLElement>
   ) => void;
   enableBusinessSettings?: boolean;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"title" | "subTitle" | "disclaimerText">;
 };
 
 export interface TabSwitchProps {