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

package/dist/index.cjs.js

@@ -15381,10 +15381,19 @@ function _assertThisInitialized(self) {
   return self;
 }
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+  _setPrototypeOf(subClass, superClass);
 }
 
 function _getPrototypeOf(o) {
@@ -15394,15 +15403,6 @@ function _getPrototypeOf(o) {
   return _getPrototypeOf(o);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _isNativeFunction(fn) {
   return Function.toString.call(fn).indexOf("[native code]") !== -1;
 }
@@ -15413,7 +15413,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -15553,7 +15553,9 @@ var ERRORS = {
   "73": "Please provide a valid CSS variable.\n\n",
   "74": "CSS variable not found and no default was provided.\n\n",
   "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
+  "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
+  "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
 };
 /**
  * super basic version of sprintf
@@ -21607,8 +21609,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 +21619,7 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     padding: "0",
     minHeight: "100%",
     extraStyles: "cursor: pointer;",
-    dataQa: dataQa,
-    tabIndex: "0"
+    dataQa: dataQa
   }, children);
 };
 
@@ -21651,7 +21651,8 @@ 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"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center",
@@ -40093,6 +40094,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 +40105,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 +40156,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.31-beta.1",
   "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,7 @@ const Placeholder = ({
       };`}
     >
       <Center maxWidth="300px">
-        <Box padding="0px 0px 0px 0px">
+        <Box padding="0" tabIndex="0">
           <Cluster justify="center" align="center" minHeight="100%">
             <Switcher maxChildren={2} childGap="0">
               {variant === "large" && <div></div>}

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
 };