beem-component 1.2.7 → 1.3.0

package/dist/components/BannerCard/bannerCard.stories.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SampleBanner = exports.GenericBanner = exports.FeatureBanner = exports.AnnouncementBanner = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bannerCards = _interopRequireDefault(require("./bannerCards"));
+
+var _ = require("..");
+
+var _colors = require("../colors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _bannerCards.default,
+  title: "components/Banner",
+  argTypes: {
+    border: {
+      options: ["dashed", "solid"],
+      control: {
+        type: "select"
+      },
+      description: "Banner border",
+      defaultValue: {
+        summary: "none"
+      }
+    },
+    bannerBg: {
+      description: "Banner Background Color, Can be set as 'default', or custom color"
+    },
+    content: {
+      options: ["left", "center", "right"],
+      control: {
+        type: "select"
+      },
+      description: "Aligning content of banner, will not work if closeButton is present"
+    }
+  }
+};
+exports.default = _default;
+
+var SampleBanner = function SampleBanner() {
+  return /*#__PURE__*/_react.default.createElement(_bannerCards.default, {
+    border: "dashed",
+    content: "center",
+    bannerBg: "default"
+  }, /*#__PURE__*/_react.default.createElement("h3", null, "Message Title"), /*#__PURE__*/_react.default.createElement("p", null, "Message Text"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmButton, {
+    size: "small"
+  }, "Label")));
+};
+
+exports.SampleBanner = SampleBanner;
+
+var AnnouncementBanner = function AnnouncementBanner() {
+  return /*#__PURE__*/_react.default.createElement(_bannerCards.default, {
+    bannerBg: "".concat(_colors.BmPrimaryBlue),
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    style: {
+      color: "white"
+    }
+  }, "Special Announcement Title"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: "white"
+    }
+  }, "Message Text"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmButton, {
+    variant: "neutral",
+    size: "small"
+  }, "Label")));
+};
+
+exports.AnnouncementBanner = AnnouncementBanner;
+
+var FeatureBanner = function FeatureBanner() {
+  return /*#__PURE__*/_react.default.createElement(_bannerCards.default, {
+    bannerBg: "".concat(_colors.BmSecondaryYellow),
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement(_.BmTag, {
+    variant: "light"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "New")), /*#__PURE__*/_react.default.createElement("h3", {
+    style: {
+      color: "white"
+    }
+  }, "New Feature Title"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: "white"
+    }
+  }, "Message Text"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmButton, {
+    size: "small"
+  }, "Label")));
+};
+
+exports.FeatureBanner = FeatureBanner;
+
+var GenericBanner = function GenericBanner() {
+  return /*#__PURE__*/_react.default.createElement(_bannerCards.default, {
+    border: "solid",
+    bannerBg: "default",
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h3", null, "New Feature Title"), /*#__PURE__*/_react.default.createElement("p", null, "Message Text"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmButton, {
+    size: "small"
+  }, "Label")));
+};
+
+exports.GenericBanner = GenericBanner;

package/dist/components/BannerCard/bannerCards.js

@@ -0,0 +1,107 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@material-ui/icons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _colors = require("../colors");
+
+var _excluded = ["closeButton", "children"];
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BannerCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  padding: 0.5rem;\n  border: 0.071rem\n    ", "\n    ", ";\n  border-radius: 0.25rem;\n  align-items: ", ";\n  background: ", "};\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])), function (_ref) {
+  var closeButton = _ref.closeButton,
+      show = _ref.show;
+
+  if (!closeButton) {
+    return "flex";
+  }
+
+  return show ? "flex" : "none";
+}, function (_ref2) {
+  var border = _ref2.border;
+  if (border === "dashed") return "dashed";
+  if (border === "solid") return "solid";
+  return "none";
+}, _colors.BmPrimaryBlue, function (_ref3) {
+  var content = _ref3.content,
+      closeButton = _ref3.closeButton;
+
+  if (!closeButton) {
+    if (content === "center") return "center";
+    if (content === "left") return "flex-start";
+    if (content === "right") return "flex-end";
+    return "center";
+  }
+}, function (_ref4) {
+  var bannerBg = _ref4.bannerBg;
+  if (bannerBg === "default") return "".concat(_colors.BmGrey50);
+  if (!bannerBg) return "none";
+  return bannerBg;
+});
+
+var BannerComponent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+
+var BmBanner = function BmBanner(_ref5) {
+  var closeButton = _ref5.closeButton,
+      children = _ref5.children,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(BannerCardWrapper, _extends({
+    closeButton: closeButton
+  }, rest, {
+    show: show
+  }), closeButton && /*#__PURE__*/_react.default.createElement(BannerComponent, null, children[0], " ", /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
+    size: "small",
+    onClick: function onClick() {
+      return setShow(!show);
+    }
+  })), closeButton ? children.slice(1) : children);
+};
+
+var _default = BmBanner;
+exports.default = _default;

package/dist/components/Cards/cards.js

@@ -15,10 +15,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
+var BmCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  > * {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n"])), _colors.BmPrimaryWhite, _colors.BmGrey400);
 
-BmCard.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 1rem 1rem 0rem 1rem;\n"])));
-BmCard.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n  margin-bottom: 1rem;\n  padding: 0rem 1rem;\n"])));
-BmCard.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-top: 0.071rem solid ", ";\n  padding: 1rem;\n  align-items: center;\n"])), _colors.BmGrey400);
+BmCard.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 1rem 0rem 1rem;\n"])));
+BmCard.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0rem 1rem;\n"])));
+BmCard.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 0.071rem solid ", ";\n  padding: 1rem;\n"])), _colors.BmGrey400);
 var _default = BmCard;
 exports.default = _default;

package/dist/components/Modals/modal.js

@@ -58,20 +58,7 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
 
 exports.Overlay = Overlay;
 
-var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  ", "\n  background: ", ";\n  ", "\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), ''
-/* margin: auto; */
-, _colors.BmPrimaryWhite, ''
-/* width: ${({ size }) => {
-if (size) {
-if (size === "small") return "300px"; 
-if (size === "default") return "500px"; 
-if (size === "large") return "800px"; 
-if (size === "xlarge") return "1140px";
-return size;
-}
-return "500px";
-}}; */
-);
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
 
 exports.ModalContent = ModalContent;
 

package/dist/components/Modals/modals.stories.js

@@ -35,22 +35,18 @@ var _default = {
   component: _modal.default,
   title: "components/Modals",
   argType: {
-    size: {
-      options: ["small", "default", "large", "xlarge"],
-      control: {
-        type: "select"
-      },
-      description: "Size of the Modal (Optional)",
-      defaultValue: {
-        summary: "default"
-      }
-    },
+    // size: {
+    //   options: ["small", "default", "large", "xlarge"],
+    //   control: { type: "select" },
+    //   description: "Size of the Modal (Optional)",
+    //   defaultValue: { summary: "default" },
+    // },
     closeButton: {
       description: "Placed on BmModal.Header component. Displays the close button (X)"
     },
-    centered: {
-      description: "Centers the modal"
-    },
+    // centered: {
+    //   description: "Centers the modal",
+    // },
     show: {
       control: {
         type: "boolean"
@@ -78,8 +74,7 @@ var SampleModal = function SampleModal() {
     show: showModal,
     onHide: function onHide() {
       return setShowModal(false);
-    },
-    centered: true
+    }
   }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
     closeButton: true
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer"))));

package/dist/components/NoteBar/noteBar.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoteBarWrapper = exports.BmNoteBar = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,30 +19,66 @@ var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
 
-var _excluded = ["type", "children", "color", "size"];
+var _excluded = ["type", "children", "color", "size", "closeButton"];
 
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 _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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var NoteBarWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400);
+var NoteBarWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: row;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), function (_ref) {
+  var closeButton = _ref.closeButton,
+      isOpen = _ref.isOpen;
 
-exports.NoteBarWrapper = NoteBarWrapper;
+  if (!closeButton) {
+    return "flex";
+  }
+
+  return isOpen ? "flex" : "none";
+}, _colors.BmGrey400);
 
-var BmNoteBar = function BmNoteBar(_ref) {
-  var type = _ref.type,
-      children = _ref.children,
-      color = _ref.color,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
+exports.NoteBarWrapper = NoteBarWrapper;
 
-  return /*#__PURE__*/_react.default.createElement(NoteBarWrapper, rest, type === "info" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+var BmNoteBar = function BmNoteBar(_ref2) {
+  var type = _ref2.type,
+      children = _ref2.children,
+      color = _ref2.color,
+      size = _ref2.size,
+      closeButton = _ref2.closeButton,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(NoteBarWrapper, _extends({
+    closeButton: closeButton,
+    isOpen: isOpen
+  }, rest), type === "info" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Info, null),
     color: color ? color : "".concat(_colors.BmPrimaryBlue),
     size: size ? size : "large"
@@ -52,7 +90,17 @@ var BmNoteBar = function BmNoteBar(_ref) {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Warning, null),
     color: color ? color : "".concat(_colors.BmPrimaryGold),
     size: size ? size : "large"
-  }), children);
+  }), children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
+    color: color ? color : "".concat(_colors.BmSecondaryGrey),
+    size: size ? size : "small",
+    style: {
+      marginLeft: "auto"
+    },
+    onClick: function onClick() {
+      return setIsOpen(false);
+    }
+  }));
 };
 
 exports.BmNoteBar = BmNoteBar;
@@ -60,5 +108,6 @@ BmNoteBar.propTypes = {
   children: _propTypes.default.object,
   color: _propTypes.default.string,
   size: _propTypes.default.string,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  closeButton: _propTypes.default.bool
 };

package/dist/components/NoteBar/noteBar.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NoteBar = void 0;
+exports.default = exports.NoteBarWithCloseButton = exports.NoteBar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -47,6 +47,9 @@ var _default = {
       defaultValue: {
         summary: undefined
       }
+    },
+    closeButton: {
+      description: "If present will allow to close the notebar, default size of the icon is small"
     }
   }
 };
@@ -63,4 +66,13 @@ NoteBar.args = {
   size: "large",
   children: /*#__PURE__*/_react.default.createElement("p", null, "NoteBar"),
   color: undefined
+};
+var NoteBarWithCloseButton = MainNoteBar.bind({});
+exports.NoteBarWithCloseButton = NoteBarWithCloseButton;
+NoteBarWithCloseButton.args = {
+  type: "warning",
+  size: "large",
+  children: /*#__PURE__*/_react.default.createElement("p", null, "NoteBar"),
+  color: undefined,
+  closeButton: true
 };

package/dist/components/ProgressRing/progressRing.js

@@ -0,0 +1,176 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var small = 1.429;
+var medium = 1.714;
+var large = 2.286;
+var center;
+var radius;
+var circumference;
+var strokeWidth = 5;
+var initialSize;
+
+var measurement = function measurement(size) {
+  var initialSize = size || large * 14;
+
+  if (size === "small") {
+    initialSize = small * 14;
+  }
+
+  if (size === "medium") {
+    initialSize = medium * 14;
+  }
+
+  if (size === "large") {
+    initialSize = large * 14;
+  }
+
+  center = initialSize / 2;
+  radius = initialSize / 2 - strokeWidth / 2;
+  circumference = 2 * Math.PI * radius;
+  return {
+    center: center,
+    radius: radius,
+    circumference: circumference,
+    initialSize: initialSize
+  };
+};
+
+var ProgressRingWrapper = _styledComponents.default.svg(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: ", ";\n  height: ", ";\n"])), function (_ref) {
+  var size = _ref.size;
+  if (size === "small") return "1.429rem";
+  if (size === "medium") return "1.714rem";
+  if (size === "large") return "2.286rem";
+  if (!size) return "2.286rem";
+  return "".concat(size, "px");
+}, function (_ref2) {
+  var size = _ref2.size;
+  if (size === "small") return "1.429rem";
+  if (size === "medium") return "1.714rem";
+  if (size === "large") return "2.286rem";
+  if (!size) return "2.286rem";
+  return "".concat(size, "px");
+});
+
+var ProgressRingCircle1 = _styledComponents.default.circle(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  fill: none;\n"])));
+
+var ProgressRingCircle2 = _styledComponents.default.circle(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  fill: none;\n  stroke: ", ";\n"])), function (_ref3) {
+  var variant = _ref3.variant,
+      progress = _ref3.progress;
+
+  if (progress) {
+    if (variant === "primary") return "".concat(_colors.BmPrimaryBlue);
+    if (variant === "success") return "".concat(_colors.BmSecondaryDarkGreen);
+    if (variant === "warning") return "".concat(_colors.BmPrimaryGold);
+    if (variant === "danger") return "".concat(_colors.BmSecondaryRed);
+    if (!variant) return "".concat(_colors.BmPrimaryBlue);
+  }
+
+  if (!progress) return "".concat(_colors.BmGrey100);
+});
+
+var Text = _styledComponents.default.text(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-anchor: middle;\n  fill: black;\n"])), function () {
+  if (initialSize >= 50 && initialSize < 100) {
+    return "1rem";
+  }
+
+  if (initialSize >= 100) {
+    return "2rem";
+  }
+
+  return "0.5rem";
+});
+
+var BmProgressRing = function BmProgressRing(props) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      offset = _useState2[0],
+      setOffset = _useState2[1];
+
+  var circleRef = (0, _react.useRef)(null);
+  var size = props.size,
+      progress = props.progress,
+      variant = props.variant,
+      children = props.children;
+  console.log({
+    children: children
+  });
+  var initialMeasure = measurement(size);
+  circumference = initialMeasure.circumference;
+  radius = initialMeasure.radius;
+  center = initialMeasure.center;
+  initialSize = initialMeasure.initialSize;
+  (0, _react.useEffect)(function () {
+    var progressOffset = (100 - progress) / 100 * circumference;
+    setOffset(progressOffset);
+    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+  }, [setOffset, progress, offset]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ProgressRingWrapper, {
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(ProgressRingCircle1, {
+    stroke: "".concat(_colors.BmGrey100),
+    cx: center,
+    cy: center,
+    r: radius,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_react.default.createElement(Text, {
+    x: "".concat(center),
+    y: "".concat(center),
+    size: size
+  }, progress), /*#__PURE__*/_react.default.createElement(ProgressRingCircle2, {
+    progress: progress,
+    ref: circleRef,
+    variant: variant,
+    cx: center,
+    cy: center,
+    r: radius,
+    strokeWidth: strokeWidth,
+    strokeDasharray: circumference,
+    strokeDashoffset: offset,
+    "data-testid": "progress-bar-bar"
+  })));
+};
+
+BmProgressRing.propTypes = {
+  size: _propTypes.default.number.isRequired,
+  progress: _propTypes.default.number.isRequired,
+  variant: _propTypes.default.string
+};
+var _default = BmProgressRing;
+exports.default = _default;