@occmundial/occ-atomic 3.0.0-beta.3 → 3.0.0-beta.31

package/build/Footer/Footer.js

@@ -31,7 +31,7 @@ var itemTypes = {
   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.
+  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) {
@@ -54,12 +54,17 @@ var Footer = function Footer(_ref) {
     className: columns.length > 0 ? classes.footer : classes.footerWithoutColumns
   }, /*#__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',
+  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"].Row, {
     className: classes.column
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_Grid["default"].Col, {
+      xxs: {
+        col: 12
+      },
+      sm: {
+        col: 6
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
       key: index,
       flex: "1",
       className: !isMobile ? classes.list : ''
@@ -70,9 +75,11 @@ var Footer = function Footer(_ref) {
         key: list.key,
         listClassName: listClassName
       });
-    }));
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.footerBottom
+    })));
+  })), /*#__PURE__*/_react["default"].createElement(_Grid["default"].Row, null, /*#__PURE__*/_react["default"].createElement(_Grid["default"].Col, {
+    xxs: {
+      col: 12
+    }
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     alignItems: "start",

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

@@ -13,8 +13,6 @@ Object {
   },
   "column": Object {
     "paddingBottom": 16,
-    "paddingLeft": 12,
-    "paddingRight": 12,
   },
   "footer": Object {
     "@media (min-width: 992px)": Object {
@@ -31,10 +29,6 @@ Object {
       32,
     ],
   },
-  "footerBottom": Object {
-    "paddingLeft": 12,
-    "paddingRight": 12,
-  },
   "footerWithoutColumns": Object {
     "@media (min-width: 992px)": Object {
       "padding": Array [

package/build/Footer/styles.js

@@ -29,8 +29,6 @@ var _default = {
     padding: [0, 0, _spacing["default"].medium]
   }),
   column: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter,
     paddingBottom: _spacing["default"].small
   },
   list: {
@@ -67,10 +65,6 @@ var _default = {
     display: 'block',
     paddingBottom: _spacing["default"].tiny
   },
-  footerBottom: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter
-  },
   bottomWrap: {
     paddingTop: _spacing["default"].base,
     borderTop: "1px solid ".concat(_colors["default"].grey200)

package/build/Grid/Col/__snapshots__/Col.test.js.snap

@@ -795,10 +795,42 @@ Object {
     },
   },
   "col": Object {
+    "@media (min-width: 1200px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
+    "@media (min-width: 1500px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
+    "@media (min-width: 576px)": Object {
+      "padding": Array [
+        0,
+        "8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
+    "@media (min-width: 992px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
     "boxSizing": "border-box",
     "minHeight": "1px",
-    "paddingLeft": 12,
-    "paddingRight": 12,
+    "padding": Array [
+      0,
+      6,
+    ],
     "position": "relative",
   },
   "offset-xxs1": Object {

package/build/Grid/Col/styles.js

@@ -7,18 +7,31 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _col;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var styles = {
-  col: {
+  col: (_col = {
     boxSizing: 'border-box',
     position: 'relative',
     minHeight: '1px',
-    paddingRight: _spacing["default"].gutter,
-    paddingLeft: _spacing["default"].gutter
-  }
+    padding: [0, 6]
+  }, _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    padding: [0, _spacing["default"]['size-2']]
+  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    padding: [0, _spacing["default"]['size-3']]
+  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    padding: [0, _spacing["default"]['size-3']]
+  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
+    padding: [0, _spacing["default"]['size-3']]
+  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
+    padding: [0, _spacing["default"]['size-3']]
+  }), _col)
 };
 
 var pushGrid = function pushGrid() {
@@ -44,7 +57,6 @@ var pushGrid = function pushGrid() {
     };
   }
 
-  ;
   styles[xs] = {};
   styles[sm] = {};
   styles[md] = {};

package/build/Grid/Row/__snapshots__/Row.test.js.snap

@@ -12,9 +12,43 @@ Object {
       "content": "\\"\\"",
       "display": "table",
     },
+    "@media (min-width: 0px)": Object {
+      "margin": Array [
+        0,
+        "-6px",
+      ],
+    },
+    "@media (min-width: 1200px)": Object {
+      "margin": Array [
+        0,
+        "-12px",
+      ],
+    },
+    "@media (min-width: 1500px)": Object {
+      "margin": Array [
+        0,
+        "-12px",
+      ],
+    },
+    "@media (min-width: 576px)": Object {
+      "margin": Array [
+        0,
+        "-8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "margin": Array [
+        0,
+        "-12px",
+      ],
+    },
+    "@media (min-width: 992px)": Object {
+      "margin": Array [
+        0,
+        "-12px",
+      ],
+    },
     "boxSizing": "border-box",
-    "marginLeft": -12,
-    "marginRight": -12,
   },
 }
 `;

package/build/Grid/Row/styles.js

@@ -5,15 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _grid = _interopRequireDefault(require("../../subatomic/grid"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _row;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _default = {
-  row: {
+  row: (_row = {
     boxSizing: 'border-box',
-    marginRight: -_spacing["default"].gutter,
-    marginLeft: -_spacing["default"].gutter,
     '&:before, &:after': {
       display: 'table',
       content: '""'
@@ -21,6 +25,18 @@ var _default = {
     '&:after': {
       clear: 'both'
     }
-  }
+  }, _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xxs, "px)"), {
+    margin: [0, '-6px']
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-2"])]
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-3"])]
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-3"])]
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-3"])]
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-3"])]
+  }), _row)
 };
 exports["default"] = _default;

package/build/Grid/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _conFluid$con$Media;
 
@@ -18,8 +18,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var _default = (_conFluid$con$Media = {
   conFluid: {
     boxSizing: 'border-box',
-    paddingRight: _spacing["default"].gutter,
-    paddingLeft: _spacing["default"].gutter,
+    paddingRight: _spacing["default"]['size-3'],
+    paddingLeft: _spacing["default"]['size-3'],
     marginRight: 'auto',
     marginLeft: 'auto',
     '&:before, &:after': {
@@ -31,20 +31,20 @@ var _default = (_conFluid$con$Media = {
     }
   },
   con: {
-    extend: 'conFluid',
-    margin: '0 auto'
+    width: "calc(".concat(_grid["default"].full, " - ").concat(_spacing["default"]['size-5'], ")"),
+    margin: 'auto'
   }
 }, _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
   con: {
-    width: _grid["default"].xsGrid
+    width: "calc(".concat(_grid["default"].xsGrid, " - ").concat(_spacing["default"]['size-6'], ")")
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
   con: {
-    width: _grid["default"].smGrid
+    width: "calc(".concat(_grid["default"].smGrid, " - ").concat(_spacing["default"]['size-8'], ")")
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
   con: {
-    width: _grid["default"].mdGrid
+    width: "calc(".concat(_grid["default"].mdGrid, " - ").concat(_spacing["default"]['size-10'], ")")
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
   con: {

package/build/Pager/Page/Page.js

@@ -15,10 +15,12 @@ var Page = function Page(_ref) {
   var classes = _ref.classes,
       onClick = _ref.onClick,
       selected = _ref.selected,
-      page = _ref.page;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: "".concat(classes.li).concat(selected ? " ".concat(classes.active) : ''),
-    tabIndex: "0",
+      page = _ref.page,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/_react["default"].createElement("button", {
+    className: "".concat(classes.page).concat(selected ? " ".concat(classes.active) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(!onClick ? " ".concat(classes["static"]) : ''),
+    disabled: disabled,
+    tabIndex: onClick ? 0 : -1,
     onClick: onClick
   }, page);
 };
@@ -27,7 +29,8 @@ Page.propTypes = {
   classes: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   selected: _propTypes["default"].bool,
-  page: _propTypes["default"].number
+  page: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  disabled: _propTypes["default"].bool
 };
 var _default = Page;
 exports["default"] = _default;

package/build/Pager/Page/Page.test.js

@@ -22,31 +22,35 @@ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Page", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
     expect(wrapper).toMatchSnapshot();
   });
-  it('renders the li', function () {
+  it('renders the page element', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
-    expect(wrapper.find('.li').length).toBe(1);
+    expect(wrapper.find('.page').length).toBe(1);
   });
-  it('shows the li as active', function () {
+  it('shows the page element as active', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
-    expect(wrapper.find('.li').hasClass('active')).toBe(false);
+    expect(wrapper.find('.page').hasClass('active')).toBe(false);
     wrapper.setProps({
       selected: true
     });
-    expect(wrapper.find('.li').hasClass('active')).toBe(true);
+    expect(wrapper.find('.page').hasClass('active')).toBe(true);
   });
   it('calls the onClick function', function () {
     var onClick = jest.fn();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
       onClick: onClick,
-      classes: classes
+      classes: classes,
+      page: 1
     }));
     wrapper.simulate('click');
     expect(onClick.mock.calls.length).toBe(1);

package/build/Pager/Page/__snapshots__/Page.test.js.snap

@@ -5,22 +5,46 @@ exports[`Page matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Page styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "background": "#1476fb !important",
-    "color": "#ffffff",
+    "background": "#0059CD !important",
+    "color": "#fff !important",
+    "zIndex": 1,
   },
-  "li": Object {
+  "disabled": Object {
+    "background": "transparent",
+    "color": "#878A9F",
+    "pointerEvents": "none",
+  },
+  "page": Object {
+    "&:active": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.1)",
+    },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#ECECEE",
+      "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "borderRadius": "13px",
+    "alignItems": "center",
+    "background": "transparent",
+    "border": "none",
+    "borderRadius": "4px",
+    "color": "#5A5D7B",
     "cursor": "pointer",
-    "display": "inline-block",
-    "marginLeft": "4px",
-    "marginRight": "4px",
-    "outline": "0",
-    "padding": "2px 11px",
+    "display": "flex",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "gap": "8px",
+    "justifyContent": "center",
+    "minWidth": 45,
+    "outline": "none",
+    "padding": Array [
+      "12px",
+      "8px",
+    ],
     "transition": "0.3s all",
   },
+  "static": Object {
+    "pointerEvents": "none",
+  },
 }
 `;
 

package/build/Pager/Page/styles.js

@@ -5,28 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _li;
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _fonts2 = _interopRequireDefault(require("../../subatomic/fonts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts2["default"].body);
+};
 
 var _default = {
-  li: (_li = {
-    display: 'inline-block',
+  page: {
+    display: 'flex',
     cursor: 'pointer',
-    padding: '2px 11px',
-    marginLeft: '4px',
-    marginRight: '4px',
-    borderRadius: '13px'
-  }, _defineProperty(_li, "cursor", 'pointer'), _defineProperty(_li, "transition", '0.3s all'), _defineProperty(_li, "outline", '0'), _defineProperty(_li, '&:hover', {
-    background: '#ECECEE'
-  }), _li),
+    minWidth: 45,
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-2']],
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: _spacing["default"]['size-2'],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    background: 'transparent',
+    font: objectToFontValue(_fonts["default"]['button-small']),
+    color: _colors["default"].text.corp.secondary,
+    transition: '0.3s all',
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-corp']
+    },
+    outline: 'none',
+    border: 'none',
+    '&:hover': {
+      background: _colors["default"].bg.action.ghost.hover
+    },
+    '&:active': {
+      background: _colors["default"].bg.action.ghost.active
+    }
+  },
+  "static": {
+    pointerEvents: 'none'
+  },
   active: {
-    background: "".concat(_colors["default"].blue, " !important"),
-    color: _colors["default"].white
+    background: "".concat(_colors["default"].bg.action.brand["default"], " !important"),
+    color: "".concat(_colors["default"].text.white.primary, " !important"),
+    zIndex: 1
+  },
+  disabled: {
+    pointerEvents: 'none',
+    background: 'transparent',
+    color: _colors["default"].text.corp.disabled
   }
 };
 exports["default"] = _default;