@thecb/components 5.9.0-beta.4 → 5.9.0-beta.7

package/package.json

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

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,4 +1,4 @@
-const color = "#15749D";
+const color = "#292A33";
 
 export const fallbackValues = {
   color

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -64,6 +64,7 @@ const ButtonWithAction = ({
   action = noop,
   variant = "primary",
   text,
+  textWrap = false,
   isLoading = false,
   dataQa = null,
   textExtraStyles,
@@ -143,6 +144,7 @@ const ButtonWithAction = ({
               weight={themeValues.fontWeight}
               variant={themeValues.fontSizeVariant}
               color={themeValues.color}
+              textWrap={textWrap}
               extraStyles={textExtraStyles}
             >
               {text}

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -12,6 +12,7 @@ const ButtonWithLink = ({
   extraStyles,
   linkExtraStyles,
   newTab = false,
+  dataQa,
   ...otherProps
 }) => {
   const ButtonWithLinkWrapper = ({
@@ -19,6 +20,7 @@ const ButtonWithLink = ({
     url,
     disabled,
     newTab,
+    dataQa,
     extraStyles
   }) => {
     if (disabled) {
@@ -30,11 +32,17 @@ const ButtonWithLink = ({
         tabIndex="-1"
         newTab={newTab}
         extraStyles={extraStyles}
+        dataQa={dataQa}
       >
         {safeChildren(children, <span />)}
       </ExternalLink>
     ) : (
-      <InternalLink to={url} tabIndex="-1" extraStyles={extraStyles}>
+      <InternalLink
+        to={url}
+        tabIndex="-1"
+        dataQa={dataQa}
+        extraStyles={extraStyles}
+      >
         {safeChildren(children, <span />)}
       </InternalLink>
     );
@@ -47,6 +55,7 @@ const ButtonWithLink = ({
       newTab={newTab}
       extraStyles={`${linkExtraStyles} text-decoration: none; &:hover {
         text-decoration: none; }`}
+      dataQa={dataQa}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
     </ButtonWithLinkWrapper>

package/src/components/atoms/link/ExternalLink.js

@@ -15,6 +15,7 @@ const ExternalLink = ({
   extraStyles = ``,
   variant = "primary",
   tabIndex = "0",
+  dataQa,
   children
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -39,6 +40,7 @@ const ExternalLink = ({
       tabIndex={tabIndex}
       extrastyles={extraStyles}
       rel={newTab ? "noopener" : ""}
+      data-qa={dataQa}
     >
       {safeChildren(children, <span />)}
     </StyledExternalLink>

package/src/components/atoms/link/InternalLink.js

@@ -16,6 +16,7 @@ const InternalLink = ({
   variant = "primary",
   margin,
   tabIndex = "0",
+  dataQa,
   extraStyles = ``
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -40,6 +41,7 @@ const InternalLink = ({
       activeColor={themeValues.activeColor}
       tabIndex={tabIndex}
       extrastyles={extraStyles}
+      data-qa={dataQa}
     >
       {safeChildren(children, <span />)}
     </StyledInternalLink>

package/src/components/atoms/placeholder/Placeholder.js

@@ -21,7 +21,7 @@ const PlaceholderContentWrapper = ({
   dataQa
 }) =>
   isLink ? (
-    <Link to={destination} dataQa={dataQa}>
+    <Link to={destination} data-qa={dataQa}>
       <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>

package/src/components/atoms/text/Text.js

@@ -10,6 +10,7 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
+  textWrap = true,
   extraStyles = ``,
   hoverStyles,
   onClick,
@@ -30,6 +31,7 @@ const Text = ({
     onClick={onClick}
     onKeyPress={onKeyPress}
     data-qa={dataQa}
+    $textWrap={textWrap}
     {...rest}
   >
     {safeChildren(children, <span />)}

package/src/components/atoms/text/Text.styled.js

@@ -8,6 +8,7 @@ export const TextSpan = styled.span`
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
+  white-space: ${({ $textWrap }) => ($textWrap ? "initial" : "nowrap")};
 
   &:hover {
     ${({ hoverStyles }) =>

package/src/components/molecules/obligation/modules/InactiveControlsModule.js

@@ -20,7 +20,6 @@ const InactiveControlsModule = ({
   configType,
   actions
 }) => {
-  console.log("actions are", actions);
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
   const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);

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

@@ -51,6 +51,7 @@ const WorkflowTile = ({
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}
           linkExtraStyles={`justify-content: center;`}
+          dataQa={slug}
         />
       </Box>
     </Stack>