@windstream/react-shared-components 0.0.86 → 0.0.88

package/dist/core.d.ts

@@ -57,15 +57,15 @@ 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?: "default" | "error" | "filled" | "active" | "focus" | "hover" | undefined;
+    size?: "medium" | "large" | "slim" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
+    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;
@@ -168,7 +168,7 @@ declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$
 
 declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLUListElement | HTMLOListElement>>;
 
-declare const iconNameList: readonly ["info", "download", "featured_seasonal_and_gifts", "visibility", "paid", "check_box", "check_box_outline_blank", "radio_button_unchecked", "radio_button_checked", "counter_1", "counter_2", "counter_3", "error", "search", "cancel", "router", "broadcast_on_home", "check", "check_circle", "lock", "shield_lock", "phone_in_talk", "call", "chevron_left", "chevron_right", "keyboard_arrow_down", "keyboard_arrow_up", "arrow_back", "arrow_forward", "help", "home_pin", "location_on", "timer", "schedule", "add", "remove", "bolt", "rocket", "cloud_sync", "close", "groups", "speed", "mail", "credit_card", "language", "forum", "contract", "local_atm", "headset_mic", "sensors", "wifi", "settings", "home", "devices", "build", "thumb_up", "desktop_windows", "block", "all_inclusive", "verified_user", "extension", "stadia_controller", "visibility_off", "close_fullscreen", "progress_activity", "travel_explore", "share", "business_center", "upload", "videocam", "expand_circle_right", "add_circle", "do_not_disturb_on", "expand_circle_up", "expand_circle_down", "replay", "fiber_manual_record", "menu", "dangerous", "star"];
+declare const iconNameList: readonly ["info", "download", "featured_seasonal_and_gifts", "visibility", "paid", "check_box", "check_box_outline_blank", "radio_button_unchecked", "radio_button_checked", "counter_1", "counter_2", "counter_3", "error", "search", "cancel", "router", "broadcast_on_home", "check", "check_circle", "lock", "shield_lock", "phone_in_talk", "call", "chevron_left", "chevron_right", "keyboard_arrow_down", "keyboard_arrow_up", "arrow_back", "arrow_forward", "help", "home_pin", "location_on", "timer", "schedule", "add", "remove", "bolt", "rocket", "cloud_sync", "close", "groups", "speed", "mail", "credit_card", "language", "forum", "contract", "local_atm", "headset_mic", "sensors", "wifi", "settings", "home", "devices", "build", "thumb_up", "desktop_windows", "block", "all_inclusive", "verified_user", "extension", "stadia_controller", "visibility_off", "close_fullscreen", "progress_activity", "travel_explore", "share", "business_center", "upload", "videocam", "expand_circle_right", "add_circle", "do_not_disturb_on", "expand_circle_up", "expand_circle_down", "replay", "fiber_manual_record", "menu", "dangerous", "star", "play_arrow"];
 declare const OpticalSizes: readonly ["20dp", "24dp", "40dp", "48dp"];
 declare const weights: readonly ["100", "200", "300", "400", "500", "600", "700"];
 declare const emphasis: readonly [-25, 0, 200];

package/dist/index.d.ts

@@ -57,15 +57,15 @@ 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;
-    size?: "medium" | "large" | "slim" | undefined;
+    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
+    size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
+    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;
@@ -168,7 +168,7 @@ declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$
 
 declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLUListElement | HTMLOListElement>>;
 
-declare const iconNameList: readonly ["info", "download", "featured_seasonal_and_gifts", "visibility", "paid", "check_box", "check_box_outline_blank", "radio_button_unchecked", "radio_button_checked", "counter_1", "counter_2", "counter_3", "error", "search", "cancel", "router", "broadcast_on_home", "check", "check_circle", "lock", "shield_lock", "phone_in_talk", "call", "chevron_left", "chevron_right", "keyboard_arrow_down", "keyboard_arrow_up", "arrow_back", "arrow_forward", "help", "home_pin", "location_on", "timer", "schedule", "add", "remove", "bolt", "rocket", "cloud_sync", "close", "groups", "speed", "mail", "credit_card", "language", "forum", "contract", "local_atm", "headset_mic", "sensors", "wifi", "settings", "home", "devices", "build", "thumb_up", "desktop_windows", "block", "all_inclusive", "verified_user", "extension", "stadia_controller", "visibility_off", "close_fullscreen", "progress_activity", "travel_explore", "share", "business_center", "upload", "videocam", "expand_circle_right", "add_circle", "do_not_disturb_on", "expand_circle_up", "expand_circle_down", "replay", "fiber_manual_record", "menu", "dangerous", "star"];
+declare const iconNameList: readonly ["info", "download", "featured_seasonal_and_gifts", "visibility", "paid", "check_box", "check_box_outline_blank", "radio_button_unchecked", "radio_button_checked", "counter_1", "counter_2", "counter_3", "error", "search", "cancel", "router", "broadcast_on_home", "check", "check_circle", "lock", "shield_lock", "phone_in_talk", "call", "chevron_left", "chevron_right", "keyboard_arrow_down", "keyboard_arrow_up", "arrow_back", "arrow_forward", "help", "home_pin", "location_on", "timer", "schedule", "add", "remove", "bolt", "rocket", "cloud_sync", "close", "groups", "speed", "mail", "credit_card", "language", "forum", "contract", "local_atm", "headset_mic", "sensors", "wifi", "settings", "home", "devices", "build", "thumb_up", "desktop_windows", "block", "all_inclusive", "verified_user", "extension", "stadia_controller", "visibility_off", "close_fullscreen", "progress_activity", "travel_explore", "share", "business_center", "upload", "videocam", "expand_circle_right", "add_circle", "do_not_disturb_on", "expand_circle_up", "expand_circle_down", "replay", "fiber_manual_record", "menu", "dangerous", "star", "play_arrow"];
 declare const OpticalSizes: readonly ["20dp", "24dp", "40dp", "48dp"];
 declare const weights: readonly ["100", "200", "300", "400", "500", "600", "700"];
 declare const emphasis: readonly [-25, 0, 200];

package/package.json

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

package/src/components/material-icon/constants.ts

@@ -80,6 +80,7 @@ export const iconNameList = [
   "menu",
   "dangerous",
   "star",
+  "play_arrow",
 ] as const;
 
 export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;

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

@@ -17,19 +17,33 @@ export const Button: React.FC<ButtonProps> = ({
   linkVariant,
   fullWidth,
   preDefinedFunctionExecution,
-  checkPlansJSX,
+  renderCheckPlans,
   buttonClassName,
+  clickToOpen,
+  tabmodalNameToOpen,
+  onModalButtonClick,
   onClick,
   ...rest
 }) => {
   if (preDefinedFunctionExecution === "check availability") {
-    return checkPlansJSX;
+    const checkPlansNode = renderCheckPlans?.({
+      ctaText: buttonLabel,
+      buttonVariant: buttonVariant,
+      showButtonAs: showButtonAs,
+    });
+    return checkPlansNode;
   }
   function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
+    if (clickToOpen === "modal") {
+      onModalButtonClick?.(tabmodalNameToOpen);
+    }
     onClick?.(event);
   }
 
   function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
+    if (clickToOpen === "modal") {
+      onModalButtonClick?.(tabmodalNameToOpen);
+    }
     onClick?.(event);
   }
 

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

@@ -1,3 +1,7 @@
+import React from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
 export type ButtonProps = {
   showButtonAs?: "solid" | "text" | "unstyled";
   buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
@@ -14,7 +18,7 @@ export type ButtonProps = {
   clickToOpen?: string;
   tabmodalNameToOpen?: string;
   preDefinedFunctionExecution?: string;
-  checkPlansJSX?: React.ReactNode;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   linkClassName?: string;
   buttonClassName?: string;
   linkVariant?: "unstyled" | "default";
@@ -23,4 +27,5 @@ export type ButtonProps = {
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => void;
   children?: React.ReactNode;
+  onModalButtonClick?: (id?: string) => void;
 };

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -27,6 +27,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   color = "light",
   imageWidth = 660,
   imageHeight = 660,
+  onModalButtonClick,
 }) => {
   return (
     <div className="component-container">
@@ -94,12 +95,20 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             <div className="flex w-full flex-col gap-8 xl:flex-row xl:gap-3">
               {cta && (
                 <div className="primary-cta w-full xl:w-auto">
-                  <Button {...cta} fullWidth={true} />
+                  <Button
+                    {...cta}
+                    fullWidth={true}
+                    onModalButtonClick={onModalButtonClick}
+                  />
                 </div>
               )}
               {secondaryCta && (
                 <div className="secondary-cta">
-                  <Button {...secondaryCta} fullWidth={true} />
+                  <Button
+                    {...secondaryCta}
+                    fullWidth={true}
+                    onModalButtonClick={onModalButtonClick}
+                  />
                 </div>
               )}
             </div>

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { CheckPlansProps } from "@shared/types/micro-components";
+
 export type ImagePromoBarProps = {
   brow: string;
   enableHeading: boolean;
@@ -24,4 +26,6 @@ export type ImagePromoBarProps = {
   };
   maxWidth?: boolean;
   color: "light" | "dark";
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };

package/src/contentful/blocks/primary-hero/index.tsx

@@ -19,11 +19,12 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     priceCallout,
     priceSuffix,
     checklist,
-    checkPlansJSX,
+    renderCheckPlans,
     badgeImage,
     pricingDescriptionDisclaimer,
     secondaryCta,
     secondaryCtaPrefix,
+    onModalButtonClick,
   } = props;
 
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
@@ -55,7 +56,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* price callout */}
             {price ? (
               <div className="flex">
-                <div className="mr-2 mt-2">
+                <div className="mr-2 mt-0.5">
                   {priceCallout
                     ? priceCallout.split("|").map((line, index) => (
                         <Text key={index} as="p" className="body2">
@@ -65,14 +66,14 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     : null}
                 </div>
                 <div className="flex">
-                  <Text as="p" className="subheading1 mt-2">
+                  <Text as="p" className="subheading1 mt-0.5">
                     $
                   </Text>
                   <Text as="p" className="subheading5">
                     {price}
                   </Text>
                   {priceSuffix ? (
-                    <Text as="p" className="subheading1 mt-2">
+                    <Text as="p" className="subheading1 mt-0.5">
                       {priceSuffix}
                     </Text>
                   ) : null}
@@ -93,7 +94,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               {/* desktop CTA */}
               {primaryCta1 && (
                 <div className={cx("hidden lg:flex lg:flex-col")}>
-                  <Button {...primaryCta1} checkPlansJSX={checkPlansJSX} />
+                  <Button
+                    {...primaryCta1}
+                    renderCheckPlans={renderCheckPlans}
+                    onModalButtonClick={onModalButtonClick}
+                  />
                 </div>
               )}
 
@@ -107,6 +112,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {secondaryCta && (
                     <Button
                       linkClassName="body2 text-text-inverse"
+                      onModalButtonClick={onModalButtonClick}
                       {...secondaryCta}
                     />
                   )}
@@ -119,6 +125,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <Button
                     {...bottomLink}
                     linkClassName="text-footnote text-white"
+                    onModalButtonClick={onModalButtonClick}
                   />
                 </div>
               )}
@@ -159,7 +166,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
 
           {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
             <div>
-              <Button {...bottomLink} linkClassName="body3 text-white" />
+              <Button
+                {...bottomLink}
+                onModalButtonClick={onModalButtonClick}
+                linkClassName="body3 text-white"
+              />
             </div>
           )}
 
@@ -176,7 +187,12 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {secondaryCtaPrefix}
                 </Text>
               )}
-              {secondaryCta && <Button {...secondaryCta} />}
+              {secondaryCta && (
+                <Button
+                  {...secondaryCta}
+                  onModalButtonClick={onModalButtonClick}
+                />
+              )}
             </div>
           ) : null}
         </div>

package/src/contentful/blocks/primary-hero/types.ts

@@ -1,3 +1,7 @@
+import React from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
 export type PrimaryHeroProps = {
   title: string;
   showAsHeading?: boolean;
@@ -26,5 +30,6 @@ export type PrimaryHeroProps = {
   badgeImage?: string;
   textColor?: string;
   maxWidth?: boolean;
-  checkPlansJSX?: React.ReactNode;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  onModalButtonClick?: (id?: string) => void;
 };

package/src/types/micro-components.ts

@@ -78,3 +78,12 @@ export interface RichTextItem {
   isTargetBlank?: boolean;
   richText?: { json: any };
 }
+
+export type CheckPlansProps = {
+  className?: string;
+  title?: string;
+  ctaAlignment?: "new-row" | "same-row";
+  ctaText?: string;
+  buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
+  showButtonAs?: "solid" | "unstyled" | "text" | undefined;
+};