@windstream/react-shared-components 0.2.21 → 0.2.23

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

@@ -13,6 +13,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     showAsHeading,
     subTitle,
     primaryCta1,
+    primaryCta2,
     carouselImages,
     bottomLink,
     price,
@@ -27,10 +28,24 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     secondaryCtaPrefix,
     onModalButtonClick,
     hideOnMobileCta1,
+    hideOnMobileCta2,
     textColor = "light",
     logoLockup,
   } = props;
 
+  const isButtonType = (cta: any) => {
+    const type = cta?.showButtonAs ?? "solid";
+    return (
+      type === "solid" || type === "button-with-icon" || type === "unstyled"
+    );
+  };
+
+  const showCtasSideBySide =
+    primaryCta1 &&
+    primaryCta2 &&
+    isButtonType(primaryCta1) &&
+    isButtonType(primaryCta2);
+
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
   const textColorClass = textColor === "light" ? " text-white" : " text-text";
   return (
@@ -133,16 +148,58 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* CTA section */}
             <div className="flex flex-col gap-3">
               {/* desktop CTA */}
-              {primaryCta1 && (
-                <div className={cx("md:block", hideOnMobileCta1 && "hidden")}>
-                  <Button
-                    {...primaryCta1}
-                    renderCheckPlans={renderCheckPlans}
-                    onModalButtonClick={onModalButtonClick}
-                    fullWidth={true}
-                    buttonClassName="md:w-auto"
-                  />
+              {showCtasSideBySide ? (
+                <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
+                  <div className={cx(hideOnMobileCta1 && "hidden md:block")}>
+                    <Button
+                      {...primaryCta1}
+                      renderCheckPlans={renderCheckPlans}
+                      onModalButtonClick={onModalButtonClick}
+                      fullWidth={true}
+                      size={{ base: "large" }}
+                      buttonClassName="md:w-auto text-center"
+                    />
+                  </div>
+                  <div className={cx(hideOnMobileCta2 && "hidden md:block")}>
+                    <Button
+                      {...primaryCta2}
+                      renderCheckPlans={renderCheckPlans}
+                      onModalButtonClick={onModalButtonClick}
+                      fullWidth={true}
+                      size={{ base: "large" }}
+                      buttonClassName="md:w-auto text-center"
+                    />
+                  </div>
                 </div>
+              ) : (
+                <>
+                  {primaryCta1 && (
+                    <div
+                      className={cx("md:block", hideOnMobileCta1 && "hidden")}
+                    >
+                      <Button
+                        {...primaryCta1}
+                        renderCheckPlans={renderCheckPlans}
+                        onModalButtonClick={onModalButtonClick}
+                        fullWidth={true}
+                        buttonClassName="md:w-auto text-center"
+                      />
+                    </div>
+                  )}
+                  {primaryCta2 && (
+                    <div
+                      className={cx("md:block", hideOnMobileCta2 && "hidden")}
+                    >
+                      <Button
+                        {...primaryCta2}
+                        renderCheckPlans={renderCheckPlans}
+                        onModalButtonClick={onModalButtonClick}
+                        fullWidth={true}
+                        buttonClassName="md:w-auto text-center"
+                      />
+                    </div>
+                  )}
+                </>
               )}
               {secondaryCtaPrefix && secondaryCta ? (
                 <div className="hidden md:flex">

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

@@ -707,6 +707,35 @@ describe("useContentfulRichText", () => {
     expect(screen.getByTestId("custom-bold")).toHaveTextContent("Custom bold");
   });
 
+  it("supports optional bold class name", () => {
+    const doc = makeDoc(makeMarkedText("Styled bold", MARKS.BOLD));
+    const { result } = renderHook(() =>
+      useContentfulRichText(doc, undefined, { boldClassName: "label3" })
+    );
+    const { container } = render(<>{result.current}</>);
+    const strong = container.querySelector("strong")!;
+    expect(strong).toHaveClass("label3");
+    expect(strong).toHaveTextContent("Styled bold");
+  });
+
+  it("keeps custom renderMark bold precedence over boldClassName", () => {
+    const doc = makeDoc(makeMarkedText("Priority", MARKS.BOLD));
+    const customOpts = {
+      renderMark: {
+        [MARKS.BOLD]: (text: any) => (
+          <b data-testid="custom-priority-bold">{text}</b>
+        ),
+      },
+    };
+    const { result } = renderHook(() =>
+      useContentfulRichText(doc, customOpts, { boldClassName: "label3" })
+    );
+    render(<>{result.current}</>);
+    expect(screen.getByTestId("custom-priority-bold")).toHaveTextContent(
+      "Priority"
+    );
+  });
+
   it("memoizes result for same doc reference", () => {
     const doc = makeDoc(makeParagraph("Memoized"));
     const { result, rerender } = renderHook(

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

@@ -18,7 +18,7 @@ import { toDocument } from "@shared/utils/contentful/to-document";
 
 const defaultOptions: Options = {
   renderMark: {
-    [MARKS.BOLD]: text => <strong className="label3">{text}</strong>,
+    [MARKS.BOLD]: text => <strong>{text}</strong>,
     [MARKS.ITALIC]: text => <em>{text}</em>,
     [MARKS.UNDERLINE]: text => <u>{text}</u>,
     [MARKS.CODE]: text => <code>{text}</code>,
@@ -35,27 +35,27 @@ const defaultOptions: Options = {
       );
     },
     [BLOCKS.HEADING_2]: (node, children) => (
-      <Text as="h2" className={"heading6 md:heading5"}>
+      <Text as="h2" className={"heading3 md:heading2"}>
         {children}
       </Text>
     ),
     [BLOCKS.HEADING_3]: (node, children) => (
-      <Text as="h3" className={"heading6 md:heading5"}>
+      <Text as="h3" className={"heading4 md:heading3"}>
         {children}
       </Text>
     ),
     [BLOCKS.HEADING_4]: (node, children) => (
-      <Text as="h3" className={"headingClass"}>
+      <Text as="h4" className={"heading5 md:heading4"}>
         {children}
       </Text>
     ),
     [BLOCKS.HEADING_5]: (node, children) => (
-      <Text as="h3" className={"heading6 md:heading5"}>
+      <Text as="h5" className={"heading6 md:heading5"}>
         {children}
       </Text>
     ),
     [BLOCKS.HEADING_6]: (node, children) => (
-      <Text as="h3" className={"heading6"}>
+      <Text as="h6" className={"heading6"}>
         {children}
       </Text>
     ),
@@ -187,17 +187,28 @@ export function renderContentfulRichText(
 
 export function useContentfulRichText(
   doc: Document | null | undefined,
-  options?: Options
+  options?: Options,
+  config?: { boldClassName?: string }
 ): ReactNode | null {
   return useMemo(() => {
     if (!doc || !Array.isArray(doc.content)) return null;
     const merged: Options = {
       ...defaultOptions,
-      renderMark: { ...defaultOptions.renderMark, ...options?.renderMark },
+      renderMark: {
+        ...defaultOptions.renderMark,
+        ...(config?.boldClassName
+          ? {
+              [MARKS.BOLD]: text => (
+                <strong className={config.boldClassName}>{text}</strong>
+              ),
+            }
+          : {}),
+        ...options?.renderMark,
+      },
       renderNode: { ...defaultOptions.renderNode, ...options?.renderNode },
     };
     return documentToReactComponents(doc, merged);
-  }, [doc, options]);
+  }, [doc, options, config?.boldClassName]);
 }
 // 1. Remove useMemo and React Hook imports from this specific function's logic
 export function renderContentfulRichTextTable(

package/src/index.ts

@@ -84,6 +84,7 @@ export { Tooltip } from "./components/tooltip";
 export type { ToolTipProps } from "./components/tooltip";
 
 export { AnimationWrapper } from "./components/animation-wrapper";
+export { DEFAULT_BUTTON_ANIMATION_TYPE } from "./components/animation-wrapper";
 export type {
   AnimationWrapperProps,
   AnimationType,

package/src/types/global.d.ts

@@ -7,3 +7,8 @@ declare module "*.css" {
   const content: string;
   export default content;
 }
+
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}