@thecb/components 3.5.8 → 3.5.11

package/dist/index.cjs.js

@@ -10038,9 +10038,11 @@ function usePanGesture(_a, ref) {
             onPanEnd && onPanEnd(event, info);
         },
     };
-    if (panSession.current !== null) {
-        panSession.current.updateHandlers(handlers);
-    }
+    React.useEffect(function () {
+        if (panSession.current !== null) {
+            panSession.current.updateHandlers(handlers);
+        }
+    });
     function onPointerDown(event) {
         panSession.current = new PanSession(event, handlers, {
             transformPagePoint: transformPagePoint,
@@ -14091,7 +14093,7 @@ var AlertSuccessIcon = function AlertSuccessIcon() {
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     d: "M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z",
-    id: "path-1"
+    id: "alertSuccess"
   })), /*#__PURE__*/React__default.createElement("g", {
     id: "Symbols",
     stroke: "none",
@@ -14108,12 +14110,12 @@ var AlertSuccessIcon = function AlertSuccessIcon() {
     id: "mask-2",
     fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#path-1"
+    xlinkHref: "#alertSuccess"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "background-2",
     fill: "#47B872",
     fillRule: "nonzero",
-    xlinkHref: "#path-1"
+    xlinkHref: "#alertSuccess"
   })))));
 };
 
@@ -15343,7 +15345,7 @@ _curry2(function nth(offset, list) {
  *
  * @func
  * @memberOf R
- * @since v0.27.0
+ * @since v0.27.1
  * @category Object
  * @typedefn Idx = [String | Int]
  * @sig [Idx] -> {a} -> [a | Undefined]
@@ -37267,11 +37269,15 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1"
-    })), /*#__PURE__*/React__default.createElement(Text$1, {
+    })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
+      align: "center"
+    }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
+      padding: section.titleIcon ? "0 0 0 8px" : "0"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY,
       "aria-level": "3"
-    }, section.title)), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+    }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem"
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
@@ -37860,7 +37866,10 @@ var Timeout$1 = withWindowSize(Timeout);
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
-      workflowDescription = _ref.workflowDescription,
+      _ref$workflowDescript = _ref.workflowDescription,
+      workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
+      _ref$workflowActionNa = _ref.workflowActionName,
+      workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
       slug = _ref.slug;
   return /*#__PURE__*/React__default.createElement(Box, {
     background: WHITE,
@@ -37883,7 +37892,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: "pS",
     color: STORM_GREY
-  }, workflowDescription || "Link your benefit plan")), /*#__PURE__*/React__default.createElement(Box, {
+  }, workflowDescription)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "1.5rem 1rem",
     background: GRECIAN_GREY
   }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -37892,7 +37901,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
     borderRadius: "0px",
-    text: "Link Benefits",
+    text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
     extraStyles: "width: 100%;"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.5.8",
+  "version": "3.5.11",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/radio-section/RadioSection.js

@@ -160,9 +160,14 @@ const RadioSection = ({
                           />
                         </Box>
                       )}
-                      <Text variant="p" color={CHARADE_GREY} aria-level="3">
-                        {section.title}
-                      </Text>
+                      {section.titleIcon && (
+                        <Cluster align="center">{section.titleIcon}</Cluster>
+                      )}
+                      <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
+                        <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                          {section.title}
+                        </Text>
+                      </Box>
                     </Cluster>
                     {section.rightIcons && (
                       <Cluster childGap="0.5rem">

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -14,7 +14,8 @@ import ButtonWithLink from "../../atoms/button-with-link";
 import { Box, Stack } from "../../atoms/layouts";
 const WorkflowTile = ({
   workflowName = "Test Workflow",
-  workflowDescription,
+  workflowDescription = "Link your benefit plan",
+  workflowActionName = "Search",
   slug
 }) => (
   <Box
@@ -35,7 +36,7 @@ const WorkflowTile = ({
       </Box>
       <Box padding={"0 1rem 1rem 1rem"} minHeight={"4.25rem"}>
         <Paragraph variant="pS" color={STORM_GREY}>
-          {workflowDescription || `Link your benefit plan`}
+          {workflowDescription}
         </Paragraph>
       </Box>
       <Box padding={"1.5rem 1rem"} background={GRECIAN_GREY}>
@@ -45,7 +46,7 @@ const WorkflowTile = ({
           fontWeight={FONT_WEIGHT_SEMIBOLD}
           fontSize={"1.125rem"}
           borderRadius={"0px"}
-          text={"Link Benefits"}
+          text={workflowActionName}
           minWidth={"100%"}
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}

package/src/deprecated/icons/AlertSuccessIcon.js

@@ -11,7 +11,7 @@ export const AlertSuccessIcon = () => (
     <defs>
       <path
         d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z"
-        id="path-1"
+        id="alertSuccess"
       ></path>
     </defs>
     <g
@@ -27,13 +27,13 @@ export const AlertSuccessIcon = () => (
           transform="translate(24.000000, 34.000000)"
         >
           <mask id="mask-2" fill="white">
-            <use xlinkHref="#path-1"></use>
+            <use xlinkHref="#alertSuccess"></use>
           </mask>
           <use
             id="background-2"
             fill="#47B872"
             fillRule="nonzero"
-            xlinkHref="#path-1"
+            xlinkHref="#alertSuccess"
           ></use>
         </g>
       </g>