@occmundial/occ-atomic 3.0.0-beta.54 → 3.0.0-beta.56

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [3.0.0-beta.56](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.55...v3.0.0-beta.56) (2024-09-04)
+
+
+### Bug Fixes
+
+* Add default value for new props ([2841eae](https://github.com/occmundial/occ-atomic/commit/2841eaec4e570934f6b02f21f9e262892f3a33fd))
+* Add new props to set bg transparent and borders ([dd0a333](https://github.com/occmundial/occ-atomic/commit/dd0a3334ebc1b4edfa75d9a0d2520b2cccd14309))
+
+# [3.0.0-beta.55](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.54...v3.0.0-beta.55) (2024-09-04)
+
+
+### Bug Fixes
+
+* Change display flex for grid in columns links ([cfd1291](https://github.com/occmundial/occ-atomic/commit/cfd12917a84d009d8d6176861592533ffc491d1f))
+
 # [3.0.0-beta.54](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.53...v3.0.0-beta.54) (2024-09-04)
 
 

package/build/Footer/Footer.js

@@ -39,18 +39,20 @@ var Footer = function Footer(_ref) {
       topElement = _ref.topElement,
       bottomLinksClassName = _ref.bottomLinksClassName,
       sectionDivider = _ref.sectionDivider,
-      classes = _ref.classes;
+      classes = _ref.classes,
+      footerDivider = _ref.footerDivider,
+      containerDivider = _ref.containerDivider,
+      transparent = _ref.transparent;
   return /*#__PURE__*/_react["default"].createElement("footer", {
-    className: classes.footer
+    className: "".concat(transparent ? classes.footerTransparent : classes.footer).concat(footerDivider ? " ".concat(classes.borderTop) : '')
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     fluid: isFluid,
-    className: classes.footerContainer
+    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("div", {
-      key: index,
-      className: classes.listContainer
+      key: index
     }, column.map(function (list) {
       return /*#__PURE__*/_react["default"].createElement(_List["default"], {
         key: list.key,
@@ -146,11 +148,23 @@ Footer.propTypes = {
   bottomLinksClassName: _propTypes["default"].string,
 
   /** Flag to display an horizontal line between sections */
-  sectionDivider: _propTypes["default"].bool
+  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 = Footer;
 exports["default"] = _default;

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

@@ -23,6 +23,9 @@ Object {
     "flexDirection": "column",
     "gap": "16px",
   },
+  "borderTop": Object {
+    "borderTop": "1px solid #EDEDF1",
+  },
   "bottomContainer": Object {
     "@media (min-width: 768px)": Object {
       "rowGap": "24px",
@@ -50,34 +53,28 @@ Object {
   "column": Object {
     "@media (min-width: 576px)": Object {
       "columnGap": "16px",
-      "flexDirection": "row",
+      "gridTemplateColumns": "repeat(2, minmax(0, 1fr))",
       "rowGap": "40px",
     },
     "@media (min-width: 992px)": Object {
       "columnGap": "24px",
+      "gridTemplateColumns": "repeat(4, minmax(0, 1fr))",
       "rowGap": 0,
     },
-    "display": "flex",
-    "flexDirection": "column",
-    "flexWrap": "wrap",
+    "display": "grid",
   },
   "copyright": Object {
     "& > p": Object {
       "margin": 0,
     },
     "color": "#5A5D7B",
-    "font": "300 16px/1.5 'OccText', sans-serif",
+    "font": "300 14px/1.5 'OccText', sans-serif",
   },
   "divider": Object {
     "borderTop": "1px solid #EDEDF1",
   },
   "footer": Object {
     "backgroundColor": "#fff",
-    "borderTop": "1px solid #EDEDF1",
-    "padding": Array [
-      "40px",
-      0,
-    ],
   },
   "footerContainer": Object {
     "@media (min-width: 576px)": Object {
@@ -88,8 +85,15 @@ Object {
     },
     "display": "flex",
     "flexDirection": "column",
+    "padding": Array [
+      "40px",
+      0,
+    ],
     "rowGap": "24px",
   },
+  "footerTransparent": Object {
+    "backgroundColor": "transparent",
+  },
   "link": Object {
     "&:focus-visible": Object {
       "borderRadius": "4px",
@@ -101,7 +105,8 @@ Object {
       "color": "#080D39",
     },
     "color": "#5A5D7B",
-    "font": "300 16px/1.5 'OccText', sans-serif",
+    "cursor": "pointer",
+    "font": "300 14px/1.5 'OccText', sans-serif",
     "textDecoration": "none",
     "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
@@ -118,15 +123,6 @@ Object {
     ],
     "width": 1,
   },
-  "listContainer": Object {
-    "@media (min-width: 576px)": Object {
-      "flexBasis": "calc(50% - 16px)",
-    },
-    "@media (min-width: 992px)": Object {
-      "flexBasis": "calc(25% - 24px)",
-    },
-    "flexBasis": "100%",
-  },
   "listElement": Object {
     "@media (min-width: 768px)": Object {
       "display": "inline-block",

package/build/Footer/styles.js

@@ -19,7 +19,7 @@ var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
 
 var _styles = require("../Text/styles");
 
-var _footerContainer, _column, _listContainer;
+var _footerContainer, _column;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,13 +27,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var _default = {
   footer: {
-    backgroundColor: _colors["default"].bg.surface["default"],
-    borderTop: "1px solid ".concat(_colors["default"].border["default"].subtle),
-    padding: [_spacing["default"]['size-7'], 0]
+    backgroundColor: _colors["default"].bg.surface["default"]
+  },
+  footerTransparent: {
+    backgroundColor: 'transparent'
+  },
+  borderTop: {
+    borderTop: "1px solid ".concat(_colors["default"].border["default"].subtle)
   },
   footerContainer: (_footerContainer = {
     display: 'flex',
     flexDirection: 'column',
+    padding: [_spacing["default"]['size-7'], 0],
     rowGap: _spacing["default"]['size-5']
   }, _defineProperty(_footerContainer, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
     rowGap: _spacing["default"]['size-7']
@@ -41,16 +46,15 @@ var _default = {
     rowGap: _spacing["default"]['size-8']
   }), _footerContainer),
   column: (_column = {
-    display: 'flex',
-    flexDirection: 'column',
-    flexWrap: 'wrap'
+    display: 'grid'
   }, _defineProperty(_column, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
-    flexDirection: 'row',
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
     columnGap: _spacing["default"]['size-4'],
     rowGap: _spacing["default"]['size-7']
   }), _defineProperty(_column, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
     columnGap: _spacing["default"]['size-5'],
-    rowGap: 0
+    rowGap: 0,
+    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))'
   }), _column),
   link: {
     font: (0, _styles.parseFontValue)(_fonts["default"]['body-small']),
@@ -75,13 +79,6 @@ var _default = {
     position: 'relative',
     display: 'inline-block'
   }),
-  listContainer: (_listContainer = {
-    flexBasis: '100%'
-  }, _defineProperty(_listContainer, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
-    flexBasis: "calc(50% - ".concat(_spacing["default"]['size-4'], ")")
-  }), _defineProperty(_listContainer, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
-    flexBasis: "calc(25% - ".concat(_spacing["default"]['size-5'], ")")
-  }), _listContainer),
   bottomSection: {
     display: 'flex',
     flexDirection: 'column',

package/package.json

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