@thecb/components 7.8.0-beta.0 → 7.8.1

package/src/components/molecules/module/Module.js

@@ -1,9 +1,8 @@
 import React, { Fragment, memo } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Module.theme";
-import Heading from "../../atoms/heading";
 import Title from "../../atoms/title";
-import { Box } from "../../atoms/layouts";
+import { Box, Cluster } from "../../atoms/layouts";
 
 /*
   New (01/22) - updated <Module /> to use <Title /> atom
@@ -25,6 +24,8 @@ const Module = ({
   variant = "default",
   fontSize,
   as,
+  titleID = "",
+  rightTitleContent,
   children
 }) => {
   const themedFontSize =
@@ -37,20 +38,28 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
+  const headingText = (
+    <Title
+      weight={themeValues.fontWeight}
+      color={themeValues.fontColor}
+      margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
+      textAlign={themeValues.textAlign}
+      as={computedElemType}
+      extraStyles={`font-size: ${computedFontSize};`}
+      id={titleID}
+    >
+      {heading}
+    </Title>
+  );
 
   return (
     <Fragment>
-      {heading && (
-        <Title
-          weight={themeValues.fontWeight}
-          color={themeValues.fontColor}
-          margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
-          textAlign={themeValues.textAlign}
-          as={computedElemType}
-          extraStyles={`font-size: ${computedFontSize};`}
-        >
-          {heading}
-        </Title>
+      {heading && !rightTitleContent && headingText}
+      {heading && rightTitleContent && (
+        <Cluster justify="space-between" align="center" nowrap>
+          {headingText}
+          {rightTitleContent}
+        </Cluster>
       )}
       <Box padding={`0 0 ${spacingBottom}`}>
         <Box