@windstream/react-shared-components 0.2.22 → 0.2.23

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/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;
+}