beem-component 1.5.7 → 1.6.0

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

@@ -14,42 +14,42 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _noteBar.BmNoteBar,
-  title: "components/NoteBar",
+  title: 'components/NoteBar',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the icons",
+      description: 'Size of the icons',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     children: {
-      description: "Note Description ",
+      description: 'Note Description ',
       defaultValue: {
         summary: undefined
       }
     },
     type: {
-      options: ["info", "warning", "error"],
+      options: ['info', 'warning', 'error'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Type of note",
+      description: 'Type of note',
       defaultValue: {
         summary: undefined
       }
     },
     color: {
-      description: "Color of the icon ",
+      description: 'Color of the icon ',
       defaultValue: {
         summary: undefined
       }
     },
     closeButton: {
-      description: "If present will allow to close the notebar, default size of the icon is small"
+      description: 'If present will allow to close the notebar, default size of the icon is small'
     }
   }
 };
@@ -62,16 +62,16 @@ var MainNoteBar = function MainNoteBar(args) {
 var NoteBar = MainNoteBar.bind({});
 exports.NoteBar = NoteBar;
 NoteBar.args = {
-  type: "warning",
-  size: "large",
+  type: 'warning',
+  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",
+  type: 'warning',
+  size: 'large',
   children: /*#__PURE__*/_react.default.createElement("p", null, "NoteBar"),
   color: undefined,
   closeButton: true

package/dist/components/PerformanceIndicator/performaceIndicator.stories.js

@@ -14,36 +14,36 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _performanceIndicator.BmPerformanceIndicator,
-  title: "components/PerformanceIndicator",
+  title: 'components/PerformanceIndicator',
   argTypes: {
     size: {
-      options: ["small", "medium", "large", "xlarge"],
+      options: ['small', 'medium', 'large', 'xlarge'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the Indicator (Can also be predefined e.g. 10px)",
+      description: 'Size of the Indicator (Can also be predefined e.g. 10px)',
       defaultValue: {
-        summary: "xlarge"
+        summary: 'xlarge'
       }
     },
     type: {
-      options: ["upwards", "downwards"],
+      options: ['upwards', 'downwards'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Type of Indicator",
+      description: 'Type of Indicator',
       defaultValue: {
         summary: undefined
       }
     },
     children: {
-      description: "Performance Indicator Value (h2)",
+      description: 'Performance Indicator Value (h2)',
       defaultValue: {
         summary: undefined
       }
     },
     color: {
-      description: "Color of Performance Indicator",
+      description: 'Color of Performance Indicator',
       defaultValue: {
         summary: undefined
       }
@@ -59,8 +59,8 @@ var MainPI = function MainPI(args) {
 var PerformanceIndicator = MainPI.bind({});
 exports.PerformanceIndicator = PerformanceIndicator;
 PerformanceIndicator.args = {
-  type: "upwards",
-  size: "xlarge",
-  children: "100%",
+  type: 'upwards',
+  size: 'xlarge',
+  children: '100%',
   color: undefined
 };

package/dist/components/PerformanceIndicator/performanceIndicator.js

@@ -5,18 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BmPerformanceIndicator = exports.BmPIWrapper = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _colors = require("../colors");
-
-var _iconStyles = require("../iconStyles");
-
 var _ArrowCircleUp = _interopRequireDefault(require("@mui/icons-material/ArrowCircleUp"));
 
 var _ArrowCircleDown = _interopRequireDefault(require("@mui/icons-material/ArrowCircleDown"));
 
+var _colors = require("../colors");
+
+var _iconStyles = require("../iconStyles");
+
 var _excluded = ["type", "children", "size", "color"];
 
 var _templateObject;
@@ -46,17 +48,17 @@ var BmPerformanceIndicator = function BmPerformanceIndicator(_ref2) {
       color = _ref2.color,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
-  return /*#__PURE__*/React.createElement(BmPIWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(BmPIWrapper, _extends({
     color: color
-  }, rest), type === "upwards" && /*#__PURE__*/React.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/React.createElement(_ArrowCircleUp.default, null),
-    size: size || "xlarge",
+  }, rest), type === 'upwards' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_ArrowCircleUp.default, null),
+    size: size || 'xlarge',
     color: color || "".concat(_colors.BmGrey400)
-  }), type === "downwards" && /*#__PURE__*/React.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/React.createElement(_ArrowCircleDown.default, null),
-    size: size || "xlarge",
+  }), type === 'downwards' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: /*#__PURE__*/_react.default.createElement(_ArrowCircleDown.default, null),
+    size: size || 'xlarge',
     color: color || "".concat(_colors.BmGrey400)
-  }), /*#__PURE__*/React.createElement("h2", null, children));
+  }), /*#__PURE__*/_react.default.createElement("h2", null, children));
 };
 
 exports.BmPerformanceIndicator = BmPerformanceIndicator;

package/dist/components/Pills/pills.js

@@ -15,7 +15,7 @@ var _icons = require("@material-ui/icons");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _avatars = require("../Avatars/avatars");
+var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
 
 var _colors = require("../colors");
 
@@ -57,10 +57,10 @@ var BmPillWrapper = _styledComponents.default.div(_templateObject || (_templateO
   var clicked = _ref.clicked;
 
   if (clicked) {
-    return "flex";
+    return 'flex';
   }
 
-  return "none";
+  return 'none';
 }, _colors.BmGrey100, function (_ref2) {
   var label = _ref2.label,
       color = _ref2.color;
@@ -95,21 +95,21 @@ var BmPill = function BmPill(_ref3) {
     color: color,
     clicked: clicked
   }, rest), icon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    size: size || "xsmall",
+    size: size || 'xsmall',
     icon: icon,
     color: color
-  }), avatarIcon && /*#__PURE__*/_react.default.createElement(_avatars.BmAvatar, {
+  }), avatarIcon && /*#__PURE__*/_react.default.createElement(_avatars.default, {
     user: avatarIcon,
-    size: avatarSize || "xsmall",
+    size: avatarSize || 'xsmall',
     type: "circle",
     color: color
   }), label, onDelete && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     style: {
-      margin: "0rem 0rem 0rem 1rem"
+      margin: '0rem 0rem 0rem 1rem'
     },
-    size: size || "xsmall",
-    icon: deleteIcon ? deleteIcon : /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
-    color: color || "black"
+    size: size || 'xsmall',
+    icon: deleteIcon || /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
+    color: color || 'black'
   })));
 };
 

package/dist/components/Pills/pills.stories.js

@@ -9,8 +9,6 @@ var _icons = require("@material-ui/icons");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _colors = require("../colors");
-
 var _pills = require("./pills");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,60 +16,60 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _pills.BmPill,
-  title: "components/Pills",
+  title: 'components/Pills',
   argTypes: {
     icon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: {
         summary: undefined
       }
     },
     avatarIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: {
         summary: undefined
       }
     },
     size: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the Icon (Can also be predefined e.g. 10px)",
+      description: 'Size of the Icon (Can also be predefined e.g. 10px)',
       defaultValue: {
-        summary: "xsmall"
+        summary: 'xsmall'
       }
     },
     avatarSize: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the AvatarIcon (Can also be predefined e.g. 10px)",
+      description: 'Size of the AvatarIcon (Can also be predefined e.g. 10px)',
       defaultValue: {
-        summary: "xsmall"
+        summary: 'xsmall'
       }
     },
     label: {
-      description: "Pill label in uppercase",
+      description: 'Pill label in uppercase',
       defaultValue: {
-        summary: "undefined"
+        summary: 'undefined'
       }
     },
     color: {
-      description: "Color of Pill ",
+      description: 'Color of Pill ',
       defaultValue: {
-        summary: "black"
+        summary: 'black'
       }
     },
     onDelete: {
-      description: "Handles Deleting Pill",
+      description: 'Handles Deleting Pill',
       defaultValue: {
         summary: undefined
       }
     },
     deleteIcon: {
-      description: "Material-UI icon (Used only when OnDelete is present)",
+      description: 'Material-UI icon (Used only when OnDelete is present)',
       defaultValue: {
         summary: undefined
       }
@@ -88,7 +86,7 @@ var BasicPill = MainPill.bind({});
 exports.BasicPill = BasicPill;
 BasicPill.args = {
   icon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
-  label: "label",
+  label: 'label',
   color: undefined,
   onDelete: undefined,
   deleteIcon: undefined,
@@ -100,7 +98,7 @@ var CustomPill = MainPill.bind({});
 exports.CustomPill = CustomPill;
 CustomPill.args = {
   icon: undefined,
-  label: "label",
+  label: 'label',
   color: undefined,
   onDelete: true,
   deleteIcon: /*#__PURE__*/_react.default.createElement(_icons.Delete, null),

package/dist/components/ProfileIcon/ProfileIcon.js

@@ -33,41 +33,41 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var handleSize = function handleSize(size) {
   if (size) {
-    if (size === "large") return "3.429rem";
-    if (size === "medium") return "2.286rem";
-    if (size === "small") return "1.714rem";
-    if (size === "xsmall") return "1.429rem";
+    if (size === 'large') return '3.429rem';
+    if (size === 'medium') return '2.286rem';
+    if (size === 'small') return '1.714rem';
+    if (size === 'xsmall') return '1.429rem';
   }
 
-  return "3.429rem";
+  return '3.429rem';
 };
 
 var position = function position(size) {
   if (size) {
-    if (size === "large") return "2.286rem";
-    if (size === "medium") return "1.5rem";
-    if (size === "small") return "1rem";
-    if (size === "xsmall") return "0.714rem";
+    if (size === 'large') return '2.286rem';
+    if (size === 'medium') return '1.5rem';
+    if (size === 'small') return '1rem';
+    if (size === 'xsmall') return '0.714rem';
   }
 
-  return "2.286rem";
+  return '2.286rem';
 };
 
-var ProfileImg = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    object-fit: contain;\n    border-radius: 50%;\n    display:flex;\n"])), function (props) {
+var ProfileImg = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  object-fit: contain;\n  border-radius: 50%;\n  display: flex;\n"])), function (props) {
   return handleSize(props.size);
 }, function (props) {
   return handleSize(props.size);
 });
 
-var Profile = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    border-radius: 50%;\n    border: 1px solid ", ";\n    display:flex;\n    align-items:center;\n    justify-content: center;\n    position: relative;\n    background: ", ";\n"])), function (props) {
+var Profile = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  border-radius: 50%;\n  border: 1px solid ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  background: ", ";\n"])), function (props) {
   return handleSize(props.size);
 }, function (props) {
   return handleSize(props.size);
 }, _colors.BmBgLightBlue, _colors.BmSecondaryBlue12);
 
-var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display:flex;\n    align-items:center;\n    justify-content: center;\n    position: absolute;\n"])));
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n"])));
 
-var Dot = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: ", ";\n    bottom: 0rem;\n    object-fit: contain;\n    height: 1rem;\n    width: 1rem;\n"])), function (props) {
+var Dot = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: ", ";\n  bottom: 0rem;\n  object-fit: contain;\n  height: 1rem;\n  width: 1rem;\n"])), function (props) {
   return position(props.size);
 });
 

package/dist/components/ProfileIcon/profileIcon.stories.js

@@ -16,36 +16,36 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _ProfileIcon.BmProfileIcon,
-  title: "components/ProfileIcon",
+  title: 'components/ProfileIcon',
   argTypes: {
     size: {
-      options: ["xsmall", "small", "medium", "large"],
+      options: ['xsmall', 'small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the profile",
+      description: 'Size of the profile',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     img: {
-      description: "Image to be displayed (will not be displayed if content is present)",
+      description: 'Image to be displayed (will not be displayed if content is present)',
       defaultValue: {
         summary: undefined
       }
     },
     content: {
-      description: "Content to be displayed (will not be displayed if image is present)",
+      description: 'Content to be displayed (will not be displayed if image is present)',
       defaultValue: {
         summary: undefined
       }
     },
     channel: {
-      options: ["whatsapp", "instagram", "facebook"],
+      options: ['whatsapp', 'instagram', 'facebook'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Profile badge",
+      description: 'Profile badge',
       defaultValue: {
         summary: undefined
       }
@@ -61,22 +61,22 @@ var MainProfileIcon = function MainProfileIcon(args) {
 var Sample = MainProfileIcon.bind({});
 exports.Sample = Sample;
 Sample.args = {
-  channel: "whatsapp",
-  size: "large"
+  channel: 'whatsapp',
+  size: 'large'
 };
 var ImageProfile = MainProfileIcon.bind({});
 exports.ImageProfile = ImageProfile;
 ImageProfile.args = {
-  channel: "whatsapp",
-  size: "large",
+  channel: 'whatsapp',
+  size: 'large',
   img: _beem.default,
   content: undefined
 };
 var ContentProfile = MainProfileIcon.bind({});
 exports.ContentProfile = ContentProfile;
 ContentProfile.args = {
-  channel: "whatsapp",
-  size: "large",
+  channel: 'whatsapp',
+  size: 'large',
   content: /*#__PURE__*/_react.default.createElement("h4", null, "BC"),
   img: undefined
 };

package/dist/components/ProgressBar/progressbar.stories.js

@@ -9,26 +9,24 @@ var _react = _interopRequireDefault(require("react"));
 
 var _progressbar = require("./progressbar");
 
-var _icons = require("@material-ui/icons");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _progressbar.BmProgressBar,
-  title: "components/ProgressBar",
+  title: 'components/ProgressBar',
   argTypes: {
     value: {
       control: {
-        type: "text"
+        type: 'text'
       },
-      description: "Progress value"
+      description: 'Progress value'
     },
     color: {
       control: {
-        type: "text"
+        type: 'text'
       },
-      description: "Color of the progress bar"
+      description: 'Color of the progress bar'
     }
   }
 };
@@ -41,5 +39,5 @@ var MainProgressBar = function MainProgressBar(args) {
 var ProgressBar = MainProgressBar.bind({});
 exports.ProgressBar = ProgressBar;
 ProgressBar.args = {
-  value: "50"
+  value: '50'
 };

package/dist/components/ProgressRing/progressRing.js

@@ -49,15 +49,15 @@ var initialSize;
 var measurement = function measurement(size) {
   var initialSize = size || large * 14;
 
-  if (size === "small") {
+  if (size === 'small') {
     initialSize = small * 14;
   }
 
-  if (size === "medium") {
+  if (size === 'medium') {
     initialSize = medium * 14;
   }
 
-  if (size === "large") {
+  if (size === 'large') {
     initialSize = large * 14;
   }
 
@@ -74,17 +74,17 @@ var measurement = function measurement(size) {
 
 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";
+  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";
+  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");
 });
 
@@ -95,10 +95,10 @@ var ProgressRingCircle2 = _styledComponents.default.circle(_templateObject3 || (
       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 === '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);
   }
 
@@ -107,14 +107,14 @@ var ProgressRingCircle2 = _styledComponents.default.circle(_templateObject3 || (
 
 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";
+    return '1rem';
   }
 
   if (initialSize >= 100) {
-    return "2rem";
+    return '2rem';
   }
 
-  return "0.5rem";
+  return '0.5rem';
 });
 
 var BmProgressRing = function BmProgressRing(props) {
@@ -135,7 +135,7 @@ var BmProgressRing = function BmProgressRing(props) {
   (0, _react.useEffect)(function () {
     var progressOffset = (100 - progress) / 100 * circumference;
     setOffset(progressOffset);
-    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+    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