@occmundial/occ-atomic 3.0.0-beta.29 → 3.0.0-beta.30

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [3.0.0-beta.30](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.29...v3.0.0-beta.30) (2024-07-16)
+
+
+### Bug Fixes
+
+* Remove unnecesary bp props in grid col ([97e839a](https://github.com/occmundial/occ-atomic/commit/97e839aa4621fcbb964615167165132628b646c3))
+* Remove unnecesary margins and set auto ([96d016a](https://github.com/occmundial/occ-atomic/commit/96d016a6f3f461f5b44cbd299d8c135dc846561c))
+
+
+### Features
+
+* Update grid with new design tokens ([0fd904d](https://github.com/occmundial/occ-atomic/commit/0fd904d044323108a1e573a93e7e1a6dea99d0ef))
+
 # [3.0.0-beta.29](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.28...v3.0.0-beta.29) (2024-07-09)
 
 

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/subatomic/grid.js

@@ -12,10 +12,10 @@ var _default = {
   lg: 1200,
   xl: 1500,
   full: '100%',
-  xsGrid: 564,
-  smGrid: 744,
-  mdGrid: 984,
-  lgGrid: 1164,
-  xlGrid: 1464
+  xsGrid: '100%',
+  smGrid: '100%',
+  mdGrid: '100%',
+  lgGrid: 1140,
+  xlGrid: 1440
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.29",
+  "version": "3.0.0-beta.30",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",