@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61

package/build/Checkbox/__snapshots__/Checkbox.test.js.snap

@@ -5,68 +5,103 @@ exports[`Checkbox matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Checkbox styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-        "!important",
-      ],
+    "& $check $box": Object {
+      "background": "#0059CD",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
+  "box": Object {
+    "background": "#fff",
+    "borderRadius": "4px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 20,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
   "check": Object {
-    "&:after": Object {
-      "background": "transparent",
-      "content": "\\"\\"",
-      "height": 18,
-      "left": "50%",
-      "marginTop": -1,
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 18,
-    },
-    "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
-      "borderRadius": 4,
-      "content": "\\"\\"",
-      "height": 16,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "width": 16,
-    },
-    "height": 24,
-    "position": "relative",
-    "width": 24,
+    "alignItems": "center",
+    "borderRadius": "4px",
+    "display": "grid",
+    "height": 20,
+    "justifyContent": "center",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "checkWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flexShrink": 0,
+    "height": 48,
+    "justifyContent": "center",
+    "width": 52,
   },
   "cont": Object {
+    "&$active, &$undetermined": Object {
+      "&:active $check $box": Object {
+        "background": "#083CAE",
+        "boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
+      },
+      "&:hover $check $box": Object {
+        "background": "#083CAE",
+        "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+      },
+    },
+    "&:active $check $box": Object {
+      "boxShadow": "inset 0 0 0 2px #6C6F89",
+    },
     "&:after": Object {
       "clear": "both",
       "content": "\\"\\"",
       "display": "table",
     },
-    "&:hover $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNkZGRkZGQiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    "&:focus-visible $check": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:hover $check $box": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
     },
-    "alignItems": "start",
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& $check $box": Object {
+      "background": "#EDEDF1",
+      "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    },
+    "&$active, &$undetermined": Object {
+      "& $check $box": Object {
+        "background": "hsl(221 91.2% 35.7% / 0.1)",
+        "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+      },
+    },
     "pointerEvents": "none",
   },
+  "icon": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "margin": 2,
+  },
   "label": Object {
     "cursor": "pointer",
-    "flex": "1",
-    "float": "left",
-    "marginLeft": 8,
+    "flex": 1,
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flex": 1,
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -74,16 +109,13 @@ Object {
     "whiteSpace": "nowrap",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
   "undetermined": Object {
-    "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzA4M2NhZSIgLz4KICAgICAgICA8L3N2Zz4=)",
-        "!important",
-      ],
-      "marginTop": 0,
+    "& $check $box": Object {
+      "background": "#0059CD",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
 }

package/build/Checkbox/styles.js

@@ -5,23 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var checkbox = _colors["default"].checkbox;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var checkboxWidth = 52;
+var checkSize = 20;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: '0',
     '&:after': {
@@ -29,68 +32,108 @@ var _default = {
       display: 'table',
       clear: 'both'
     },
-    '&:hover $check:after': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].grey200]))
+    '&:focus-visible $check': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    },
+    '&:hover $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border.hover)
+    },
+    '&:active $check $box': {
+      boxShadow: "inset 0 0 0 2px ".concat(checkbox.unselected.border.hover)
+    },
+    '&$active, &$undetermined': {
+      '&:hover $check $box': {
+        boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.hover
+      },
+      '&:active $check $box': {
+        boxShadow: "inset 0 0 0 2px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.hover
+      }
     }
   },
+  checkWrap: {
+    width: checkboxWidth,
+    height: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
+  },
   check: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    position: 'relative',
-    '&:before': {
-      content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
-      borderRadius: 4,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
-    },
-    '&:after': {
-      content: '""',
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
-      marginTop: -1,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: '0.3s all',
-      background: 'transparent'
-    }
+    width: checkSize,
+    height: checkSize,
+    borderRadius: _borderRadius["default"]['br-xs'],
+    transition: transition,
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  box: {
+    width: checkSize,
+    height: checkSize,
+    borderRadius: _borderRadius["default"]['br-xs'],
+    boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+    background: checkbox['unselected']['bg']['default'],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
+  },
+  icon: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    margin: 2
   },
   active: {
-    '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].check.icon([_colors["default"].prim])), '!important']
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   undetermined: {
-    '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].minus.icon([_colors["default"].prim])), '!important'],
-      marginTop: 0
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+      background: checkbox.unselected.bg.disabled
+    },
+    '&$active, &$undetermined': {
+      '& $check $box': {
+        boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.disabled
+      }
+    }
+  },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden',
+    flex: 1
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-3'],
     cursor: 'pointer',
-    "float": 'left',
-    flex: '1'
+    flex: 1
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
-    "float": 'right'
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 exports["default"] = _default;

package/build/Fab/__snapshots__/Fab.test.js.snap

@@ -2,11 +2,11 @@
 
 exports[`FAB matches the snapshot 1`] = `
 <button
-  className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  className="Button-btn-0-1-22 Button-btn-0-1-1 Button-tertiary-0-1-27 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
   disabled={false}
 >
   <span
-    className="Button-cont-0-1-29 Button-cont-0-1-2"
+    className="Button-cont-0-1-23 Button-cont-0-1-2"
   >
     <span
       className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"

package/build/Footer/Footer.js

@@ -1,118 +1,97 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Grid = _interopRequireDefault(require("../Grid"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
+var _Grid = _interopRequireDefault(require("./../Grid"));
 
 var _List = _interopRequireDefault(require("./List"));
 
-var _Text = _interopRequireDefault(require("../Text"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _Button = _interopRequireDefault(require("../Button"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var itemTypes = {
   link: 'link',
   icon: 'icon',
   custom: 'custom'
 };
-/** Customisable footer component. This component can receive an array of columns. Those columns can contain an array of lists, and those lists can contain a title and and array of items. The items are objects that must define a type (one of 'link,', 'icon' or 'cursom').
-	It can also receive a copy string, to show the copyright data, and an array of links to show above it.
-*/
 
 var Footer = function Footer(_ref) {
-  var classes = _ref.classes,
-      columns = _ref.columns,
-      winWidth = _ref.winWidth,
-      bottomLinks = _ref.bottomLinks,
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$bottomLinks = _ref.bottomLinks,
+      bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
       copyText = _ref.copyText,
       aux = _ref.aux,
-      bottomItem = _ref.bottomItem,
-      listClassName = _ref.listClassName;
-  var text = aux.text,
-      icon = aux.icon,
-      href = aux.href,
-      target = aux.target,
-      iconRight = aux.iconRight,
-      auxClassName = aux.className;
-  var isMobile = winWidth < _grid["default"].sm;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: columns.length > 0 ? classes.footer : classes.footerWithoutColumns
+      listClassName = _ref.listClassName,
+      isFluid = _ref.isFluid,
+      topElement = _ref.topElement,
+      bottomLinksClassName = _ref.bottomLinksClassName,
+      sectionDivider = _ref.sectionDivider,
+      classes = _ref.classes,
+      footerDivider = _ref.footerDivider,
+      containerDivider = _ref.containerDivider,
+      transparent = _ref.transparent;
+  return /*#__PURE__*/_react["default"].createElement("footer", {
+    className: "".concat(transparent ? classes.footerTransparent : classes.footer).concat(footerDivider ? " ".concat(classes.borderTop) : '')
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    fluid: winWidth < _grid["default"].xl
-  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"].Row, null, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    direction: isMobile ? 'col' : 'row',
+    fluid: isFluid,
+    className: "".concat(classes.footerContainer).concat(containerDivider ? " ".concat(classes.borderTop) : '')
+  }, /*#__PURE__*/(0, _react.isValidElement)(topElement) ? topElement : '', columns.length ? /*#__PURE__*/_react["default"].createElement("section", {
     className: classes.column
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-      key: index,
-      flex: "1",
-      className: !isMobile ? classes.list : ''
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index
     }, column.map(function (list) {
       return /*#__PURE__*/_react["default"].createElement(_List["default"], {
-        list: list,
-        isMobile: isMobile,
         key: list.key,
+        list: list,
         listClassName: listClassName
       });
     }));
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.footerBottom
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "start",
-    className: classes.bottomWrap,
-    direction: isMobile ? 'col' : 'row'
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1"
-  }, aux && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    href: href,
-    target: target,
-    icon: icon,
-    iconRight: iconRight,
-    size: "md",
-    theme: "ghostPink",
-    className: "".concat(isMobile ? classes.buttonMobile : '', " ").concat(auxClassName)
-  }, text), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    small: true,
-    mid: true,
-    bottomTiny: true,
-    tag: "div"
-  }, bottomLinks.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: isMobile ? classes.mobileListElement : classes.listElement,
+  })) : '', sectionDivider ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.divider
+  }) : '', /*#__PURE__*/_react["default"].createElement("section", {
+    className: classes.bottomSection
+  }, aux ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.auxContainer
+  }, aux.badges ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.badgesContainer
+  }, aux.badges) : '', aux.socialMedia ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.socialMediaContainer
+  }, aux.socialMedia) : '', aux.extraContent) : '', /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.bottomContainer
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.bottomLinksContainer, " ").concat(bottomLinksClassName)
+  }, bottomLinks.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: item.key
-    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-      tag: "label",
-      small: true,
-      mid: true,
-      testId: item.testId
+    }, index === 0 || index === bottomLinks.length ? '' : /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.linkDivider
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.listElement
     }, /*#__PURE__*/_react["default"].createElement("a", {
       className: classes.link,
       href: item.href,
       target: item.target,
       rel: item.rel,
-      onClick: item.onClick
+      onClick: item.onClick,
+      tabIndex: 0
     }, item.text)));
-  })), copyText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    small: true,
-    mid: true
-  }, copyText)), bottomItem)))));
+  })), copyText && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.copyright
+  }, copyText)))));
 };
 
 var columnPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -145,32 +124,47 @@ Footer.propTypes = {
   /** Array of links to render at the bottom. */
   bottomLinks: _propTypes["default"].array,
 
-  /** Custom component to render on the bottom left. */
-  customBottom: _propTypes["default"].node,
-
   /** String or component to show as the copyright label. */
   copyText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
 
   /** Object to implement an auxiliar button on the bottom right. */
   aux: _propTypes["default"].shape({
-    text: _propTypes["default"].string,
-    icon: _propTypes["default"].string,
-    href: _propTypes["default"].string,
-    target: _propTypes["default"].string,
-    iconRight: _propTypes["default"].string
+    badges: _propTypes["default"].node,
+    socialMedia: _propTypes["default"].node,
+    extraContent: _propTypes["default"].node
   }),
 
   /** Custom component to render on the bottom right, at the end of the footer */
   bottomItem: _propTypes["default"].node,
 
   /** Footer list className.  */
-  listClassName: _propTypes["default"].string
+  listClassName: _propTypes["default"].string,
+  isFluid: _propTypes["default"].bool,
+
+  /** Custom component to render at the top of the footer, commonly used for brand logo */
+  topElement: _propTypes["default"].node,
+
+  /** Custom classname for bottomLinks container. */
+  bottomLinksClassName: _propTypes["default"].string,
+
+  /** Flag to display an horizontal line between sections */
+  sectionDivider: _propTypes["default"].bool,
+
+  /** Flag to display a border top in footer element */
+  footerDivider: _propTypes["default"].bool,
+
+  /** Flag to display a border top in footer container child */
+  containerDivider: _propTypes["default"].bool,
+
+  /** Flag to set transparent background color to footer element */
+  transparent: _propTypes["default"].bool
 };
 Footer.defaultProps = {
   bottomLinks: [],
-  columns: []
+  columns: [],
+  footerDivider: false,
+  containerDivider: false,
+  transparent: false
 };
-
-var _default = (0, _WindowSize["default"])(Footer);
-
+var _default = Footer;
 exports["default"] = _default;