@thecb/components 5.2.1 → 5.3.3-beta.0

package/package.json

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

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

@@ -124,7 +124,7 @@ const ButtonWithAction = ({
       activeStyles={activeStyles}
       disabledStyles={disabledStyles}
       as="button"
-      onClick={!isLoading && action}
+      onClick={isLoading ? undefined : action}
       borderRadius="2px"
       theme={themeContext}
       extraStyles={`margin: 0.5rem; ${extraStyles}`}

package/src/components/atoms/dropdown/DropdownIcon.js

@@ -11,15 +11,10 @@ const DropdownIcon = () => (
     width="12"
   >
     <g transform="translate(1 1)">
-      <g fillRule="evenodd" fill="none" id="Symbols_1548197283918">
-        <g
-          fill="#333"
-          transform="translate(-155 -22)"
-          id="Dropdown/Closed_1548197283918"
-        >
+      <g fillRule="evenodd" fill="none">
+        <g fill="#333" transform="translate(-155 -22)">
           <polygon
             points="165.59 22.59 161 27.17 156.41 22.59 155 24 161 30 167 24"
-            id="Path_1548197283918"
             vectorEffect="non-scaling-stroke"
           />
         </g>

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

@@ -13,7 +13,9 @@ import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
     {
       title: <React Component(s)>,
       id: <String> "identifier of section",
-      disabled: boolean,
+      disabled: boolean, (displays section and grayed out radio but disables interaction)
+      hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
+      hidden: boolean, (hides section entirely)
       dataQa: string,
       content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
     }
@@ -141,7 +143,7 @@ const RadioSection = ({
           .filter(section => !section.hidden)
           .map(section => (
             <Motion
-              tabIndex="0"
+              tabIndex={section.hideRadioButton ? "-1" : "0"}
               onKeyDown={e => handleKeyDown(section.id, e)}
               onFocus={() => setFocused(section.id)}
               onBlur={() => setFocused(null)}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -47,11 +47,6 @@ const TermsAndConditionsModal = ({
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
-      extraStyles={`cursor: pointer;    
-      &:focus { 
-        outline: 3px solid ${themeValues.accessibilityColor}; 
-        outline-offset: 2px; 
-      }`}
     >
       {link}
     </Text>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js

@@ -12,11 +12,20 @@ const fontWeight = {
   default: FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
+const standardInteractionStyles = `
+    &:hover {
+      outline: none; 
+      text-decoration: underline;
+    }
+    &:focus {
+      outline: 3px solid #3181E3;
+      outline-offset: 2px;
+    }
+`;
 const modalLinkHoverFocus = {
-  default: `outline: none; text-decoration: underline;`,
-  footer: `outline: none; text-decoration: underline;`
+  default: standardInteractionStyles,
+  footer: standardInteractionStyles
 };
-const accessibilityColor = { default: "#3181E3", footer: "#3181E3" };
 
 export const fallbackValues = {
   backgroundColor,
@@ -25,6 +34,5 @@ export const fallbackValues = {
   fontSize,
   lineHeight,
   fontWeight,
-  modalLinkHoverFocus,
-  accessibilityColor
+  modalLinkHoverFocus
 };