@thecb/components 4.1.31-beta.0 → 4.1.32-beta.0

package/dist/index.cjs.js

@@ -21607,8 +21607,7 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
       dataQa = _ref.dataQa;
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
-    dataQa: dataQa,
-    tabIndex: "0"
+    dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
@@ -21618,8 +21617,7 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     padding: "0",
     minHeight: "100%",
     extraStyles: "cursor: pointer;",
-    dataQa: dataQa,
-    tabIndex: "0"
+    dataQa: dataQa
   }, children);
 };
 
@@ -21651,7 +21649,11 @@ var Placeholder = function Placeholder(_ref2) {
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0px 0px 0px 0px"
+    padding: "0",
+    tabIndex: "0",
+    onKeyPress: function onKeyPress(e) {
+      return e.key === "Enter" && action();
+    }
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center",
@@ -34587,8 +34589,6 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   };
   return /*#__PURE__*/React__default.createElement(Motion, {
     padding: "0",
-    tabIndex: "0",
-    onKeyDown: handleKeyDown,
     hoverStyles: "outline: none;",
     animate: isOpen ? "open" : "closed",
     positionTransition: true
@@ -34601,7 +34601,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
     key: "header",
     hoverStyles: "cursor: pointer;",
-    tabIndex: "0"
+    tabIndex: "0",
+    onKeyDown: handleKeyDown
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -34743,7 +34744,7 @@ var EditableList = function EditableList(_ref) {
       useModal = _ref$useModal === void 0 ? false : _ref$useModal,
       Modal = _ref.modal,
       modalProps = _ref.modalProps,
-      autoPayMethod = _ref.autoPayMethod,
+      autoPayMethods = _ref.autoPayMethods,
       qaPrefix = _ref.qaPrefix;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0rem 1.5rem 0rem"
@@ -34767,7 +34768,9 @@ var EditableList = function EditableList(_ref) {
         toggleModal = _useState2[1];
 
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
-      listItemSize: !!item.id && item.id === autoPayMethod ? "big" : listItemSize,
+      listItemSize: !!item.id && autoPayMethods.some(function (methodID) {
+        return methodID === item.id;
+      }) ? "big" : listItemSize,
       key: item.id || item
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
@@ -40093,6 +40096,10 @@ var modalLinkHoverFocus$2 = {
   "default": "outline: none; text-decoration: underline;",
   footer: "outline: none; text-decoration: underline;"
 };
+var accessibilityColor = {
+  "default": "#3181E3",
+  footer: "#3181E3"
+};
 var fallbackValues$B = {
   backgroundColor: backgroundColor$9,
   linkColor: linkColor$5,
@@ -40100,7 +40107,8 @@ var fallbackValues$B = {
   fontSize: fontSize$a,
   lineHeight: lineHeight$6,
   fontWeight: fontWeight$8,
-  modalLinkHoverFocus: modalLinkHoverFocus$2
+  modalLinkHoverFocus: modalLinkHoverFocus$2,
+  accessibilityColor: accessibilityColor
 };
 
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
@@ -40150,7 +40158,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
+    extraStyles: "cursor: pointer;    \n      &:focus { \n        outline: 3px solid ".concat(themeValues.accessibilityColor, "; \n        outline-offset: 2px; \n      }")
   }, link));
 };
 

package/package.json

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

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

@@ -21,7 +21,7 @@ const PlaceholderContentWrapper = ({
   dataQa
 }) =>
   isLink ? (
-    <Link to={destination} dataQa={dataQa} tabIndex="0">
+    <Link to={destination} dataQa={dataQa}>
       <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
@@ -33,7 +33,6 @@ const PlaceholderContentWrapper = ({
       minHeight="100%"
       extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
-      tabIndex="0"
     >
       {children}
     </Box>
@@ -88,7 +87,11 @@ const Placeholder = ({
       };`}
     >
       <Center maxWidth="300px">
-        <Box padding="0px 0px 0px 0px">
+        <Box
+          padding="0"
+          tabIndex="0"
+          onKeyPress={e => e.key === "Enter" && action()}
+        >
           <Cluster justify="center" align="center" minHeight="100%">
             <Switcher maxChildren={2} childGap="0">
               {variant === "large" && <div></div>}

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -64,8 +64,6 @@ const CollapsibleSection = ({
   return (
     <Motion
       padding="0"
-      tabIndex="0"
-      onKeyDown={handleKeyDown}
       hoverStyles={`outline: none;`}
       animate={isOpen ? "open" : "closed"}
       positionTransition
@@ -80,6 +78,7 @@ const CollapsibleSection = ({
           key="header"
           hoverStyles={`cursor: pointer;`}
           tabIndex="0"
+          onKeyDown={handleKeyDown}
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (

package/src/components/molecules/editable-list/EditableList.js

@@ -32,7 +32,7 @@ const EditableList = ({
   useModal = false,
   modal: Modal,
   modalProps,
-  autoPayMethod,
+  autoPayMethods,
   qaPrefix
 }) => (
   <Box padding="0rem 0rem 1.5rem 0rem">
@@ -60,7 +60,10 @@ const EditableList = ({
           return (
             <EditableListItem
               listItemSize={
-                !!item.id && item.id === autoPayMethod ? "big" : listItemSize
+                !!item.id &&
+                autoPayMethods.some(methodID => methodID === item.id)
+                  ? "big"
+                  : listItemSize
               }
               key={item.id || item}
             >

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

@@ -47,7 +47,11 @@ const TermsAndConditionsModal = ({
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
-      extraStyles={`cursor: pointer;`}
+      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

@@ -16,6 +16,7 @@ const modalLinkHoverFocus = {
   default: `outline: none; text-decoration: underline;`,
   footer: `outline: none; text-decoration: underline;`
 };
+const accessibilityColor = { default: "#3181E3", footer: "#3181E3" };
 
 export const fallbackValues = {
   backgroundColor,
@@ -24,5 +25,6 @@ export const fallbackValues = {
   fontSize,
   lineHeight,
   fontWeight,
-  modalLinkHoverFocus
+  modalLinkHoverFocus,
+  accessibilityColor
 };