@windstream/react-shared-components 0.2.68 → 0.2.70

package/src/contentful/blocks/dynamic-form/types.ts

@@ -180,6 +180,15 @@ export interface DynamicFormProps {
   emailSubject?: string;
   emailTemplateName?: string;
   toEmail?: string;
+  /**
+   * Test recipient(s) for the `email` action in non-production environments.
+   * When `isProduction === false` and the `email` action runs, the payload's
+   * `toEmail` is rerouted here so real recipients never receive non-prod
+   * submissions. Supports multiple comma-separated addresses (each is trimmed);
+   * when empty, the `email` action is skipped. Mirrors the residential form's
+   * `testEmail`.
+   */
+  testEmail?: string;
   segmentEventId?: string;
 
   /** Injected per-action async submit handlers. */
@@ -212,8 +221,10 @@ export interface DynamicFormProps {
     metadata?: Record<string, any>;
   }) => void;
 
-  /** Whether the current environment is production (affects nothing in the
-   * base component today but reserved for parity with app behavior). */
+  /** Whether the current environment is production. When explicitly `false`,
+   * the `email` action is rerouted to `testEmail` (or skipped when `testEmail`
+   * is empty) so non-prod submissions never reach real recipients. Leaving it
+   * `undefined` preserves the prior behavior (no rerouting). */
   isProduction?: boolean;
 
   /** Field customization + async data. */

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

@@ -130,7 +130,10 @@ export const Navigation: React.FC<NavigationProps> = props => {
             )}
           >
             <div className="mx-auto flex max-w-120 justify-between">
-              <ul className="flex gap-5" aria-label="Utility Navigation">
+              <ul
+                className="flex min-h-11 gap-5"
+                aria-label="Utility Navigation"
+              >
                 {utilityNavigationLinks?.map((links, index) => {
                   return (
                     <li key={`main-menu-items-${index}`}>

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

@@ -4,8 +4,8 @@ import { PrimaryHero } from "./index";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
-  Checklist: ({ items }: any) => (
-    <ul data-testid="checklist">
+  Checklist: ({ items, iconSize }: any) => (
+    <ul data-testid="checklist" data-icon-size={iconSize}>
       {items?.map((i: string, idx: number) => (
         <li key={idx}>{i}</li>
       ))}
@@ -128,6 +128,15 @@ describe("PrimaryHero", () => {
       expect(screen.getByText("Free install")).toBeInTheDocument();
     });
 
+    it("passes iconSize of 24 to the checklist", () => {
+      const checklist = [{ title: "No data caps" }, { title: "Free install" }];
+      render(<PrimaryHero {...baseProps} checklist={checklist} />);
+      expect(screen.getByTestId("checklist")).toHaveAttribute(
+        "data-icon-size",
+        "24"
+      );
+    });
+
     it("does not render checklist when not provided", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByTestId("checklist")).not.toBeInTheDocument();

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

@@ -171,6 +171,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* checklist */}
             {checklist && (
               <Checklist
+                iconSize={24}
                 listItemClassName={`body2 text-left ${textColorClass}`}
                 items={checklist.map(item =>
                   item.iconUrl
@@ -230,7 +231,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                         {...primaryCta1}
                         renderCheckPlans={renderCheckPlans}
                         onModalButtonClick={onModalButtonClick}
-                        fullWidth={true}
+                        // fullWidth={true}
                         buttonClassName="lg:w-auto text-center"
                       />
                     </div>
@@ -243,7 +244,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                         {...primaryCta2}
                         renderCheckPlans={renderCheckPlans}
                         onModalButtonClick={onModalButtonClick}
-                        fullWidth={true}
+                        // fullWidth={true}
                         buttonClassName="lg:w-auto text-center"
                       />
                     </div>

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -13,6 +13,7 @@ import {
 import { Checklist } from "@shared/components/checklist";
 import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
+import type { IconName } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 import { VideoLink } from "@shared/components/video-link";
 import type { VideoLinkProps } from "@shared/components/video-link";
@@ -53,7 +54,10 @@ const toVideoLinkProps = (fields: any): VideoLinkProps => ({
     fields?.image?.fields?.file?.url ??
     fields?.image?.url ??
     fields?.image,
-  link: fields?.link,
+  link:
+    typeof fields?.link === "string"
+      ? fields.link
+      : (fields?.link?.fields?.href ?? fields?.link?.href),
   videoPopup: Boolean(fields?.videoPopup),
   videoSourceType: fields?.videoSourceType,
   videoAssetUrl:
@@ -125,7 +129,40 @@ const isExternalUrl = (url: string): boolean => {
   }
 };
 
+// Renders "[icon_name]" tokens (e.g. "look [star] here") as MaterialIcon glyphs.
+const renderInlineIcons = (text: string): ReactNode[] => {
+  const iconPattern = /\[([a-zA-Z0-9_-]+)\]/g;
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = iconPattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.substring(lastIndex, match.index));
+    }
+    parts.push(
+      <MaterialIcon
+        key={`icon-${match.index}-${match[1]}`}
+        name={match[1] as IconName}
+        size={20}
+        className="inline-block align-middle"
+      />
+    );
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.substring(lastIndex));
+  }
+
+  return parts.length > 0 ? parts : [text];
+};
+
 const getDefaultOptions = (links?: any): Options => ({
+  renderText: children =>
+    children.includes("[") && children.includes("]")
+      ? renderInlineIcons(children)
+      : children,
   renderMark: {
     [MARKS.BOLD]: text => <strong className="font-black">{text}</strong>,
     [MARKS.ITALIC]: text => <em>{text}</em>,
@@ -467,4 +504,4 @@ export function renderContentfulRichTextTable(
   };
 
   return documentToReactComponents(doc, options);
-}
+}

package/src/index.ts

@@ -94,6 +94,13 @@ export type { SkeletonProps } from "./components/skeleton";
 export { Tooltip } from "./components/tooltip";
 export type { ToolTipProps } from "./components/tooltip";
 
+export { RichTextBasic } from "./components/rich-text-basic";
+export type {
+  RichTextBasicProps,
+  RichTextBasicOptions,
+  RichTextBasicTextProps,
+} from "./components/rich-text-basic/types";
+
 export {
   FiberForm,
   fiberFormAddressCollectionFormSchema,