beem-component 1.2.8 → 1.2.9

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/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/ProgressRing/progressRing.js

@@ -0,0 +1,186 @@
+"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 xsmall = 1.143;
+var small = 1.429;
+var medium = 1.714;
+var large = 1.714;
+var xlarge = 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 === "xsmall") {
+    initialSize = xsmall * 14;
+  }
+
+  if (size === "small") {
+    initialSize = small * 14;
+  }
+
+  if (size === "medium") {
+    initialSize = medium * 14;
+  }
+
+  if (size === "large") {
+    initialSize = large * 14;
+  }
+
+  if (size === "xlarge") {
+    initialSize = xlarge * 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 === "xsmall") return "1.143rem";
+  if (size === "small") return "1.429rem";
+  if (size === "medium") return "1.714rem";
+  if (size === "large") return "1.714rem";
+  if (size === "xlarge") return "2.286rem";
+  if (!size) return "1.714rem";
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  if (size === "xsmall") return "1.143rem";
+  if (size === "small") return "1.429rem";
+  if (size === "medium") return "1.714rem";
+  if (size === "large") return "1.714rem";
+  if (size === "xlarge") return "2.286rem";
+  if (!size) return "1.714rem";
+  return size;
+});
+
+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  position: absolute;\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;
+  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(ProgressRingCircle2, {
+    progress: progress,
+    ref: circleRef,
+    variant: variant,
+    cx: center,
+    cy: center,
+    r: radius,
+    strokeWidth: strokeWidth,
+    strokeDasharray: circumference,
+    strokeDashoffset: offset,
+    "data-testid": "progress-bar-bar"
+  }), /*#__PURE__*/_react.default.createElement(Text, {
+    x: "".concat(center),
+    y: "".concat(center),
+    size: size
+  }, progress, "%")));
+};
+
+BmProgressRing.propTypes = {
+  size: _propTypes.default.number.isRequired,
+  progress: _propTypes.default.number.isRequired,
+  variant: _propTypes.default.string
+};
+var _default = BmProgressRing;
+exports.default = _default;

package/dist/components/ProgressRing/progressRing.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomProgressRing = exports.BasicProgressRing = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _progressRing = _interopRequireDefault(require("./progressRing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _progressRing.default,
+  title: "components/ProgressRing",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the Progress Ring (Can also be predefined e.g. 50)",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    progress: {
+      description: "Progress Indicator"
+    },
+    variant: {
+      options: ["primary", "success", "warning", "danger"],
+      control: {
+        type: "select"
+      },
+      description: "Color of the Progress Ring",
+      defaultValue: {
+        summary: "xsmall"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainProgressRing = function MainProgressRing(args) {
+  return /*#__PURE__*/_react.default.createElement(_progressRing.default, args);
+};
+
+var BasicProgressRing = MainProgressRing.bind({});
+exports.BasicProgressRing = BasicProgressRing;
+BasicProgressRing.args = {
+  progress: 30,
+  variant: "success",
+  size: "xlarge"
+};
+var CustomProgressRing = MainProgressRing.bind({});
+exports.CustomProgressRing = CustomProgressRing;
+CustomProgressRing.args = {
+  progress: 50,
+  variant: "primary",
+  size: "40"
+};

package/dist/components/index.js

@@ -29,6 +29,12 @@ Object.defineProperty(exports, "BmAvatarIcon", {
     return _iconStyles.BmAvatarIcon;
   }
 });
+Object.defineProperty(exports, "BmBanner", {
+  enumerable: true,
+  get: function get() {
+    return _bannerCards.default;
+  }
+});
 Object.defineProperty(exports, "BmBtnIcon", {
   enumerable: true,
   get: function get() {
@@ -204,6 +210,12 @@ Object.defineProperty(exports, "BmProgressBar", {
     return _progressbar.BmProgressBar;
   }
 });
+Object.defineProperty(exports, "BmProgressRing", {
+  enumerable: true,
+  get: function get() {
+    return _progressRing.default;
+  }
+});
 Object.defineProperty(exports, "BmQuickReplyIcon", {
   enumerable: true,
   get: function get() {
@@ -349,6 +361,10 @@ var _checkbox = require("./checkbox");
 
 var _tags = require("../components/Tags/tags");
 
+var _bannerCards = _interopRequireDefault(require("../components/BannerCard/bannerCards"));
+
+var _progressRing = _interopRequireDefault(require("./ProgressRing/progressRing"));
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.2.8",
+    "version": "1.2.9",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,56 +1,36 @@
-import React, { useState } from "react";
+import React from "react";
 import "../src/main.scss";
-import { BmButton, MainWrapper, BmModal } from "./lib/components";
+import { BmButton, BmCard, BmIcons, MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
-import SideBar from "./SideBar";
-import ChatHeader from "./ChatHeader";
-import Chat from "./Chat";
-import CustomerInfo from "./CustomerInfo";
-import InfoAccordion from "./InfoAccordion";
+import BmBanner from "./lib/components/BannerCard/bannerCards";
+import { FileCopyOutlined } from "@material-ui/icons";
+import ProgressBar from "./lib/components/ProgressRing/progressRing";
 
 export const App = () => {
-  const [showModal, setShowModal] = useState(false);
   return (
     <>
       <GlobalStyle />
-      <MainWrapper>
+      {/* <MainWrapper> */}
+      <BmBanner border="dashed" content="center" bannerBg="default" closeButton>
+        <BmIcons icon={<FileCopyOutlined />} />
+        <h3>Message Title</h3>
+        <p>Message Text</p>
         <div>
-          <BmButton onClick={() => setShowModal(!showModal)}>
-            Click Me!
+          <BmButton variant="neutral" size="small">
+            Label
           </BmButton>
         </div>
-        <BmModal show={showModal} onHide={() => setShowModal(false)}>
-          <BmModal.Header closeButton>
-            <h2>Header</h2>
-          </BmModal.Header>
-          <BmModal.Body>
-            <p>This is a bodymdlkdmvlfdmvlkmvlkvmflkvmd;lkvmv;lkdmv;lmv;lfvm;lmre;mv;lkremvc;lkremvclfdmvlkfdmv;lkfdmv;lkfdmv;lfdmv;lfdmv;lfdmv;lfdmvlfd;mvlfd;vmfd;lvfdmlv</p>
-          </BmModal.Body>
-          <BmModal.Footer>
-            <p>This is a footer</p>
-          </BmModal.Footer>
-        </BmModal>
-        <div className="main-chat-container">
-          <div className="chat-container">
-            <div className="sidebar">
-              <SideBar />
-            </div>
-            <div className="chat">
-              <ChatHeader />
-              <div className="chat-menu">
-                <div className="chat-messages">
-                  <Chat />
-                </div>
-                <div className="chat-contact-info">
-                  <CustomerInfo />
-                  <InfoAccordion />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </MainWrapper>
+      </BmBanner>
+      <BmCard>
+        <BmCard.Header>
+          <h3>Card Header</h3>
+        </BmCard.Header>
+        <BmCard.Body></BmCard.Body>
+        <BmCard.Footer>Card Footer</BmCard.Footer>
+      </BmCard>
+        <ProgressBar progress="70" size="40" />
+      {/* </MainWrapper> */}
     </>
   );
 };

package/src/MainChat.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "../src/main.scss";
+import { MainWrapper } from "./lib/components";
+import { GlobalStyle } from "./lib/components/globalStyles";
+import "./lib/assets/css/sidebar.scss";
+import SideBar from "./SideBar";
+import ChatHeader from "./ChatHeader";
+import Chat from "./Chat";
+import CustomerInfo from "./CustomerInfo";
+import InfoAccordion from "./InfoAccordion";
+
+export const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <MainWrapper>
+        <div className="main-chat-container">
+          <div className="chat-container">
+            <div className="sidebar">
+              <SideBar />
+            </div>
+            <div className="chat">
+              <ChatHeader />
+              <div className="chat-menu">
+                <div className="chat-messages">
+                  <Chat />
+                </div>
+                <div className="chat-contact-info">
+                  <CustomerInfo />
+                  <InfoAccordion />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </MainWrapper>
+    </>
+  );
+};
+
+export default App;

package/src/lib/components/BannerCard/bannerCard.stories.js

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmBanner from "./bannerCards";
+import { BmButton, BmTag } from "..";
+import { BmPrimaryBlue, BmSecondaryYellow } from "../colors";
+
+export default {
+  component: BmBanner,
+  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",
+    },
+  },
+};
+
+export const SampleBanner = () => {
+  return (
+    <BmBanner border="dashed" content="center" bannerBg="default">
+      <h3>Message Title</h3>
+      <p>Message Text</p>
+      <div>
+        <BmButton size="small">Label</BmButton>
+      </div>
+    </BmBanner>
+  );
+};
+
+export const AnnouncementBanner = () => {
+  return (
+    <BmBanner bannerBg={`${BmPrimaryBlue}`} closeButton>
+      <h3 style={{ color: "white" }}>Special Announcement Title</h3>
+      <p style={{ color: "white" }}>Message Text</p>
+      <div>
+        <BmButton variant="neutral" size="small">
+          Label
+        </BmButton>
+      </div>
+    </BmBanner>
+  );
+};
+
+export const FeatureBanner = () => {
+  return (
+    <BmBanner bannerBg={`${BmSecondaryYellow}`} closeButton>
+      <BmTag variant="light">
+        <p>New</p>
+      </BmTag>
+      <h3 style={{ color: "white" }}>New Feature Title</h3>
+      <p style={{ color: "white" }}>Message Text</p>
+      <div>
+        <BmButton size="small">Label</BmButton>
+      </div>
+    </BmBanner>
+  );
+};
+
+export const GenericBanner = () => {
+  return (
+    <BmBanner border="solid" bannerBg="default" closeButton>
+      <h3>New Feature Title</h3>
+      <p>Message Text</p>
+      <div>
+        <BmButton size="small">Label</BmButton>
+      </div>
+    </BmBanner>
+    
+  );
+};

package/src/lib/components/BannerCard/bannerCards.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Clear } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmIcons } from "..";
+import { BmGrey50, BmPrimaryBlue } from "../colors";
+
+const BannerCardWrapper = styled.div`
+  display: ${({ closeButton, show }) => {
+    if (!closeButton) {
+      return "flex";
+    }
+    return show ? "flex" : "none";
+  }};
+  flex-direction: column;
+  padding: 0.5rem;
+  border: 0.071rem
+    ${({ border }) => {
+      if (border === "dashed") return "dashed";
+      if (border === "solid") return "solid";
+      return "none";
+    }}
+    ${BmPrimaryBlue};
+  border-radius: 0.25rem;
+  align-items: ${({ content, closeButton }) => {
+    if (!closeButton) {
+      if (content === "center") return "center";
+      if (content === "left") return "flex-start";
+      if (content === "right") return "flex-end";
+      return "center";
+    }
+  }};
+  background: ${({ bannerBg }) => {
+    if (bannerBg === "default") return `${BmGrey50}`;
+    if (!bannerBg) return "none";
+    return bannerBg;
+  }}};
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+const BannerComponent = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const BmBanner = ({ closeButton, children, ...rest }) => {
+  const [show, setShow] = useState(true);
+  return (
+    <BannerCardWrapper closeButton={closeButton} {...rest} show={show}>
+      {closeButton && (
+        <BannerComponent>
+          {children[0]}{" "}
+          <BmIcons
+            icon={<Clear />}
+            size="small"
+            onClick={() => setShow(!show)}
+          />
+        </BannerComponent>
+      )}
+      {closeButton ? children.slice(1) : children}
+    </BannerCardWrapper>
+  );
+};
+
+export default BmBanner;

package/src/lib/components/ProgressRing/progressRing.js

@@ -0,0 +1,156 @@
+import React, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import {
+  BmGrey100,
+  BmPrimaryBlue,
+  BmSecondaryDarkGreen,
+  BmPrimaryGold,
+  BmSecondaryRed,
+} from "../colors";
+
+const xsmall = 1.143;
+const small = 1.429;
+const medium = 1.714;
+const large = 1.714;
+const xlarge = 2.286;
+
+let center;
+let radius;
+let circumference;
+let strokeWidth = 5;
+let initialSize;
+
+const measurement = (size) => {
+  let initialSize = size || large * 14;
+  if (size === "xsmall") {
+    initialSize = xsmall * 14;
+  }
+  if (size === "small") {
+    initialSize = small * 14;
+  }
+  if (size === "medium") {
+    initialSize = medium * 14;
+  }
+  if (size === "large") {
+    initialSize = large * 14;
+  }
+  if (size === "xlarge") {
+    initialSize = xlarge * 14;
+  }
+  center = initialSize / 2;
+  radius = initialSize / 2 - strokeWidth / 2;
+  circumference = 2 * Math.PI * radius;
+  return { center, radius, circumference, initialSize };
+};
+const ProgressRingWrapper = styled.svg`
+  display: flex;
+  width: ${({ size }) => {
+    if (size === "xsmall") return "1.143rem";
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "1.714rem";
+    if (size === "xlarge") return "2.286rem";
+    if (!size) return "1.714rem";
+    return size;
+  }};
+  height: ${({ size }) => {
+    if (size === "xsmall") return "1.143rem";
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "1.714rem";
+    if (size === "xlarge") return "2.286rem";
+    if (!size) return "1.714rem";
+    return size;
+  }};
+`;
+
+const ProgressRingCircle1 = styled.circle`
+  fill: none;
+`;
+
+const ProgressRingCircle2 = styled.circle`
+  fill: none;
+  stroke: ${({ variant, progress }) => {
+    if (progress) {
+      if (variant === "primary") return `${BmPrimaryBlue}`;
+      if (variant === "success") return `${BmSecondaryDarkGreen}`;
+      if (variant === "warning") return `${BmPrimaryGold}`;
+      if (variant === "danger") return `${BmSecondaryRed}`;
+      if (!variant) return `${BmPrimaryBlue}`;
+    }
+    if (!progress) return `${BmGrey100}`;
+  }};
+`;
+
+const Text = styled.text`
+  font-size: ${() => {
+    if (initialSize >= 50 && initialSize < 100) {
+      return "1rem";
+    }
+    if (initialSize >= 100) {
+      return "2rem";
+    }
+    return "0.5rem";
+  }};
+  text-anchor: middle;
+  fill: black;
+  position: absolute;
+`;
+
+const BmProgressRing = (props) => {
+  const [offset, setOffset] = useState(0);
+  const circleRef = useRef(null);
+  const { size, progress, variant } = props;
+
+  const initialMeasure = measurement(size);
+
+  circumference = initialMeasure.circumference;
+  radius = initialMeasure.radius;
+  center = initialMeasure.center;
+  initialSize = initialMeasure.initialSize;
+
+  useEffect(() => {
+    const progressOffset = ((100 - progress) / 100) * circumference;
+    setOffset(progressOffset);
+
+    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+  }, [setOffset, progress, offset]);
+
+  return (
+    <>
+      <ProgressRingWrapper size={size}>
+        <ProgressRingCircle1
+          stroke={`${BmGrey100}`}
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+        <ProgressRingCircle2
+          progress={progress}
+          ref={circleRef}
+          variant={variant}
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          data-testid="progress-bar-bar"
+        />
+        <Text x={`${center}`} y={`${center}`} size={size}>
+          {progress}%
+        </Text>
+      </ProgressRingWrapper>
+    </>
+  );
+};
+
+BmProgressRing.propTypes = {
+  size: PropTypes.number.isRequired,
+  progress: PropTypes.number.isRequired,
+  variant: PropTypes.string,
+};
+
+export default BmProgressRing;

package/src/lib/components/ProgressRing/progressRing.stories.js

@@ -0,0 +1,41 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmProgressRing from "./progressRing";
+
+export default {
+  component: BmProgressRing,
+  title: "components/ProgressRing",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      control: { type: "select" },
+      description: "Size of the Progress Ring (Can also be predefined e.g. 50)",
+      defaultValue: { summary: "large" },
+    },
+    progress: {
+      description: "Progress Indicator",
+    },
+    variant: {
+      options: ["primary", "success", "warning", "danger"],
+      control: { type: "select" },
+      description: "Color of the Progress Ring",
+      defaultValue: { summary: "xsmall" },
+    },
+  },
+};
+
+const MainProgressRing = (args) => <BmProgressRing {...args} />;
+
+export const BasicProgressRing = MainProgressRing.bind({});
+BasicProgressRing.args = {
+ progress: 30,
+ variant: "success",
+ size: "xlarge"
+};
+
+export const CustomProgressRing = MainProgressRing.bind({});
+CustomProgressRing.args = {
+  progress: 50,
+  variant: "primary",
+  size: "40"
+ };

package/src/lib/components/index.js

@@ -18,6 +18,9 @@ import * as BmColors from "./colors";
 import { BmLoader } from "./Loader/loader";
 import { BmCheckbox } from "./checkbox";
 import { BmTag } from "../components/Tags/tags";
+import BmBanner from "../components/BannerCard/bannerCards";
+import BmProgressRing from "./ProgressRing/progressRing";
+
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -72,6 +75,8 @@ export {
   BmListBox,
   BmListHeader,
   BmRowLabel,
+  BmBanner,
+  BmProgressRing,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,