@occmundial/occ-atomic 3.0.0-beta.7 → 3.0.0-beta.70

package/build/Banner/Banner.js

@@ -9,17 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,38 +17,29 @@ var Banner = function Banner(_ref) {
   var id = _ref.id,
       style = _ref.style,
       className = _ref.className,
-      classes = _ref.classes,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth;
-  var isMobile = winWidth < _grid["default"].xs;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      cta = _ref.cta,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
+    style: style,
     className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    className: classes.container
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1",
-    className: classes.textFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    white: true,
-    small: isMobile,
-    tag: "div",
-    className: classes.textBanner
-  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    className: classes.iconFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "close",
-    colors: [_colors["default"].bgWhite],
-    onClick: onClose,
-    className: classes.icon
-  }))));
+    onClose: onClose,
+    banner: true,
+    cta: cta,
+    theme: theme,
+    icon: true,
+    size: size,
+    testId: testId
+  }, children);
 };
 
 Banner.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   winWidth: _propTypes["default"].number,
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
@@ -68,9 +49,18 @@ Banner.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote']),
+  size: _propTypes["default"].oneOf(['large', 'small']),
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
-
-var _default = (0, _WindowSize["default"])(Banner);
-
+var _default = Banner;
 exports["default"] = _default;

package/build/Banner/Banner.test.js

@@ -6,35 +6,82 @@ var _enzyme = require("enzyme");
 
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 var _index = _interopRequireDefault(require("./index"));
 
 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 reduceClasses = function reduceClasses(prev, curr) {
-  return Object.assign({}, prev, _defineProperty({}, curr, curr));
-};
-
-var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Banner", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
-      classes: classes
-    }));
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
+  it('Has content centered', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.prop('banner')).toEqual(true);
+  });
+  it('has a close icon button', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__close-icon'
+    }).length).toBe(1);
+  });
+  it('has a link', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info",
+      testId: "banner-test"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
+    expect(wrapper.find({
+      "data-testid": 'banner-test__link'
+    }).length).toBe(1);
+  });
 });
 describe("BannerJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      onClose: function onClose() {},
+      cta: {
+        text: 'Lorem ipsum.',
+        onClick: function onClick() {
+          return alert('CTA clicked!');
+        }
+      },
+      theme: "info"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"));
     expect(wrapper).toMatchSnapshot();
   });
-});
-describe("Banner styles", function () {
-  it('matches the snapshot', function () {
-    expect(_styles["default"]).toMatchSnapshot();
-  });
 });

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

@@ -2,32 +2,4 @@
 
 exports[`Banner matches the snapshot 1`] = `ShallowWrapper {}`;
 
-exports[`Banner styles matches the snapshot 1`] = `
-Object {
-  "container": Object {
-    "backgroundColor": "#222222",
-    "padding": 16,
-  },
-  "icon": Object {
-    "cursor": "pointer",
-  },
-  "iconFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "padding": 0,
-    },
-    "paddingLeft": 16,
-    "paddingTop": 16,
-  },
-  "textBanner": Object {
-    "display": "inline-block",
-  },
-  "textFlex": Object {
-    "@media screen and (min-width:576px)": Object {
-      "textAlign": "center",
-    },
-    "textAlign": "start",
-  },
-}
-`;
-
 exports[`BannerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Banner/index.js

@@ -5,14 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
 var _Banner = _interopRequireDefault(require("./Banner"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_Banner["default"]);
-
+var _default = _Banner["default"];
 exports["default"] = _default;

package/build/Button/Button.js

@@ -89,7 +89,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       if (block) classNames += " ".concat(classes.block);
       if (className) classNames += " ".concat(className);
 
-      if (!children && icon) {
+      if (!children && (icon || iconRight)) {
         classNames += " ".concat(classes.iconOnly);
         if (round) classNames += " ".concat(classes.round);
       }

package/build/Button/Button.test.js

@@ -134,15 +134,4 @@ describe("Button styles", function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });
-  it('returns the right icons', function () {
-    var props = {
-      icon: 'testing'
-    };
-    expect(_styles["default"].primary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
-    expect(_styles["default"].secondary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
-    expect(_styles["default"].tertiary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
-    expect(_styles["default"].ghostPink['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
-    expect(_styles["default"].ghostGrey['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM1QTVEN0I=)');
-    expect(_styles["default"].ghostWhite['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
-  });
 });

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

@@ -48,27 +48,27 @@ Object {
     "pointerEvents": "none",
   },
   "ghostGrey": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#5A5D7B",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#5A5D7B",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#D3D4DC",
+      },
       "background": "transparent",
       "color": "#878A9F",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.1)",
+      "background": "rgba(8, 13, 57, 0.1)",
     },
-    "&:hover": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.05)",
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(8, 13, 57, 0.1)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    "&:hover": Object {
+      "background": "rgba(8, 13, 57, 0.05)",
     },
     "background": "transparent",
     "color": "#5A5D7B",
@@ -77,13 +77,7 @@ Object {
     "& $loadIcon": Object {
       "fill": "#f13465",
     },
-    "& span span": Object {
-      "background": [Function],
-    },
     "&$disabled": Object {
-      "& span span": Object {
-        "background": [Function],
-      },
       "background": "transparent !important",
       "border": "none !important",
       "color": "#fa90ac !important",
@@ -107,25 +101,25 @@ Object {
     ],
   },
   "ghostWhite": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "rgba(255,255,255,0.7)",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "transparent",
       "color": "rgba(255,255,255,0.7)",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
   },
@@ -136,6 +130,7 @@ Object {
   },
   "iconOnly": Object {
     "& span span, & svg": Object {
+      "marginLeft": 0,
       "marginRight": 0,
     },
     "padding": Array [
@@ -173,7 +168,7 @@ Object {
     "width": "100%",
   },
   "loadIcon": Object {
-    "fill": "#fff",
+    "fill": "rgba(255,255,255,0.7)",
     "height": 24,
     "width": 24,
   },
@@ -197,29 +192,29 @@ Object {
     ],
   },
   "primary": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "rgba(255,255,255,0.7)",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "#F6809E",
       "color": "rgba(255,255,255,0.7)",
       "cursor": "not-allowed",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "#821C36",
     },
     "&:focus": Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(241, 52, 101, 0.3)",
+    },
     "&:hover": Object {
       "background": "#A32444",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-    },
     "background": "#D32E58",
     "color": "#fff",
     "outline": "2px solid rgba(255,255,255,0.2)",
@@ -229,57 +224,57 @@ Object {
     "borderRadius": "50%",
   },
   "secondary": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#083CAE",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#083CAE",
     },
     "&$disabled": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "& $icon, & $iconRight": Object {
+        "fill": "#8DA5DA",
+      },
+      "background": "rgba(8, 60, 174, 0.1)",
       "color": "#486EC3",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.2)",
+      "background": "rgba(8, 60, 174, 0.2)",
     },
-    "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(8, 60, 174, 0.3)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    "&:hover": Object {
+      "background": "rgba(8, 60, 174, 0.1)",
     },
-    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "background": "rgba(8, 60, 174, 0.05)",
     "color": "#083CAE",
   },
   "tertiary": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#083CAE",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#083CAE",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#8DA5DA",
+      },
       "background": "transparent",
       "color": "#486EC3",
-      "outline": "2px solid #8DA5DA",
-    },
-    "&$disabled span span": Object {
-      "background": [Function],
+      "outlineColor": "#8DA5DA",
     },
     "&:active": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.1)",
+      "background": "rgba(8, 60, 174, 0.1)",
     },
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
-    "&:hover": Object {
-      "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(8, 60, 174, 0.3)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    "&:hover": Object {
+      "background": "rgba(8, 60, 174, 0.05)",
     },
     "background": "transparent",
     "color": "#083CAE",
@@ -287,15 +282,16 @@ Object {
     "outlineOffset": "-2px",
   },
   "tertiaryWhite": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "rgba(255,255,255,0.7)",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "transparent",
       "color": "rgba(255,255,255,0.7)",
-    },
-    "&$disabled span span": Object {
-      "background": [Function],
+      "outlineColor": "rgba(255,255,255,0.2)",
     },
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
@@ -303,12 +299,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #fff",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
     "outline": "2px solid #fff",