beem-component 1.5.7 → 1.6.0

package/.eslintrc

@@ -0,0 +1,62 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:react/recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended",
+    "plugin:jest/style",
+    "prettier"
+  ],
+  "plugins": [
+    "jest",
+    "jsdoc",
+    "prettier"
+  ],
+  "parser": "babel-eslint",
+  "rules": {
+    "prettier/prettier": "error",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.js",
+          "**/*.spec.js",
+          "**/**/.storybook/**",
+          "**/**/stories/**",
+          "**/*.stories.js"
+        ],
+        "peerDependencies": true
+      }
+    ],
+    "func-style": [
+      "error",
+      "expression"
+    ],
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "error",
+    "object-curly-newline": "off",
+    "no-console": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": 0,
+    "react/require-default-props": 0,
+    "consistent-return": 0,
+    "import/prefer-default-export": 0,
+    "react/forbid-prop-types": 0
+  },
+  "globals": {
+    "fetch": false
+  }
+}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}

package/babel.config.js

@@ -1,12 +1,11 @@
-
 module.exports = function (api) {
-    api.cache(true);
-    
-    const presets = [ "@babel/preset-env", "@babel/preset-react" ];
-    const plugins = [ "macros" ];
+  api.cache(true);
+
+  const presets = ['@babel/preset-env', '@babel/preset-react'];
+  const plugins = ['macros'];
 
-    return {
-      presets,
-      plugins
-    };
-}
+  return {
+    presets,
+    plugins,
+  };
+};

package/dist/components/Accordion/Accordion.js

@@ -13,12 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _icons = require("@material-ui/icons");
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
 
-var _icons = require("@material-ui/icons");
-
 var _excluded = ["children", "disabled", "expandIcon", "Open", "expandIconPosition"],
     _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
 
@@ -61,7 +61,7 @@ var _React$createContext = /*#__PURE__*/_react.default.createContext({}),
     Consumer = _React$createContext.Consumer;
 
 var Dropdown = function Dropdown(value, rest) {
-  if (value.expandIcon && value.expandIcon === "none") {
+  if (value.expandIcon && value.expandIcon === 'none') {
     return;
   }
 
@@ -73,7 +73,7 @@ var Dropdown = function Dropdown(value, rest) {
     }, rest));
   }
 
-  if (value.expandIcon && value.expandIcon !== "none") {
+  if (value.expandIcon && value.expandIcon !== 'none') {
     return /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
       icon: value.expandIcon
     });
@@ -94,7 +94,7 @@ var BmAccordion = function BmAccordion(_ref) {
       expandIconPosition = _ref.expandIconPosition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(Open ? true : false),
+  var _useState = (0, _react.useState)(!!Open),
       _useState2 = _slicedToArray(_useState, 2),
       toggle = _useState2[0],
       setToggle = _useState2[1];
@@ -122,13 +122,13 @@ BmAccordion.Title = function (_ref2) {
       onClick: function onClick() {
         return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
       }
-    }), value.expandIconPosition === "left" || value.expandIconPosition === undefined && Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    }), value.expandIconPosition === 'left' || value.expandIconPosition === undefined && Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
       icon: leadingIcon,
       size: size
     }), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
       icon: trailingIcon,
       size: size
-    }), value.expandIconPosition === "right" && Dropdown(value, rest));
+    }), value.expandIconPosition === 'right' && Dropdown(value, rest));
   });
 };
 

package/dist/components/Accordion/Accordion.stories.js

@@ -7,50 +7,50 @@ exports.default = exports.Accordion = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
 
 var _icons = require("@material-ui/icons");
 
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _Accordion.default,
   subcomponents: _Accordion.default.Title,
-  title: "components/Accordion",
+  title: 'components/Accordion',
   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'
       }
     },
     disabled: {
-      description: "Optional",
+      description: 'Optional',
       defaultValue: {
         summary: false
       },
       control: {
-        type: "boolean"
+        type: 'boolean'
       }
     },
     Open: {
-      description: "Accordion body will be open initially",
+      description: 'Accordion body will be open initially',
       defaultValue: {
         summary: false
       },
       control: {
-        type: "boolean"
+        type: 'boolean'
       }
     },
     children: {
-      description: "Accordion Title Text",
+      description: 'Accordion Title Text',
       defaultValue: {
         summary: undefined
       }
@@ -62,23 +62,23 @@ var _default = {
       }
     },
     expandIconPosition: {
-      options: ["left", "right"],
+      options: ['left', 'right'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Position of the expand Icon",
+      description: 'Position of the expand Icon',
       defaultValue: {
-        summary: "left"
+        summary: 'left'
       }
     },
     leadingIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: {
         summary: undefined
       }
     },
     trailingIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: {
         summary: undefined
       }
@@ -87,25 +87,25 @@ var _default = {
 };
 exports.default = _default;
 var optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
 };
 var optionExpandIcon = {
-  left: "left",
-  right: "medium"
+  left: 'left',
+  right: 'medium'
 };
 
 var Accordion = function Accordion() {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
-    disabled: (0, _addonKnobs.boolean)("disabled", false),
-    Open: (0, _addonKnobs.boolean)("disabled", false)
+    disabled: (0, _addonKnobs.boolean)('disabled', false),
+    Open: (0, _addonKnobs.boolean)('disabled', false)
   }, /*#__PURE__*/_react.default.createElement(_Accordion.default.Title, {
     leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
     trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
-    size: (0, _addonKnobs.select)("size", optionSize, "large"),
-    expandIconPosition: (0, _addonKnobs.select)("expandIconPosition", optionExpandIcon, "left")
-  }, /*#__PURE__*/_react.default.createElement("h3", null, (0, _addonKnobs.text)("children", "Accordion"))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Body, null, "Accordion Body")));
+    size: (0, _addonKnobs.select)('size', optionSize, 'large'),
+    expandIconPosition: (0, _addonKnobs.select)('expandIconPosition', optionExpandIcon, 'left')
+  }, /*#__PURE__*/_react.default.createElement("h3", null, (0, _addonKnobs.text)('children', 'Accordion'))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Body, null, "Accordion Body")));
 };
 
 exports.Accordion = Accordion;

package/dist/components/Avatars/avatars.js

@@ -13,12 +13,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _SmartToy = _interopRequireDefault(require("@mui/icons-material/SmartToy"));
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
 
-var _SmartToy = _interopRequireDefault(require("@mui/icons-material/SmartToy"));
-
 var _excluded = ["user", "size", "color"];
 
 var _templateObject;
@@ -35,34 +35,34 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var BmAvatarWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  width: ", ";\n  background: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid\n    ", ";\n"])), function (_ref) {
   var size = _ref.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) return "3.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';
+  if (!size) return '3.429rem';
   return size;
 }, function (_ref2) {
   var size = _ref2.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) return "3.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';
+  if (!size) return '3.429rem';
   return size;
 }, function (_ref3) {
   var user = _ref3.user;
-  if (user === "chatbot") return "".concat(_colors.BmPrimaryBlue);
-  if (user === "employee") return "".concat(_colors.BmPrimaryBlue);
+  if (user === 'chatbot') return "".concat(_colors.BmPrimaryBlue);
+  if (user === 'employee') return "".concat(_colors.BmPrimaryBlue);
   return "".concat(_colors.BmGrey100);
 }, function (_ref4) {
   var type = _ref4.type;
-  if (type === "circle") return "7.143rem";
-  if (type === "square") return "0.179rem";
-  return "7.143rem";
+  if (type === 'circle') return '7.143rem';
+  if (type === 'square') return '0.179rem';
+  return '7.143rem';
 }, function (_ref5) {
   var user = _ref5.user;
-  if (user === "chatbot") return "".concat(_colors.BmPrimaryBlue);
-  if (user === "employee") return "".concat(_colors.BmPrimaryBlue);
+  if (user === 'chatbot') return "".concat(_colors.BmPrimaryBlue);
+  if (user === 'employee') return "".concat(_colors.BmPrimaryBlue);
   return "".concat(_colors.BmGrey100);
 });
 
@@ -77,15 +77,15 @@ var BmAvatar = function BmAvatar(props) {
   return /*#__PURE__*/_react.default.createElement(BmAvatarWrapper, _extends({
     user: user,
     size: size
-  }, rest), user === "employee" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+  }, rest), user === 'employee' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
     icon: /*#__PURE__*/_react.default.createElement(_icons.Person, null),
     size: size,
     color: color
-  }, rest)), user === "chatbot" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+  }, rest)), user === 'chatbot' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
     icon: /*#__PURE__*/_react.default.createElement(_SmartToy.default, null),
     size: size,
     color: color
-  }, rest)), user !== "chatbot" && user !== "employee" && user !== "default" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+  }, rest)), user !== 'chatbot' && user !== 'employee' && user !== 'default' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
     icon: user,
     size: size,
     color: color

package/dist/components/Avatars/avatars.stories.js

@@ -7,35 +7,35 @@ exports.default = exports.CustomAvatar = exports.Avatar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _avatars = _interopRequireDefault(require("./avatars"));
-
 var _icons = require("@material-ui/icons");
 
+var _avatars = _interopRequireDefault(require("./avatars"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _avatars.default,
-  title: "components/Avatars",
+  title: 'components/Avatars',
   argTypes: {
     size: {
-      options: ["xsmall", "small", "medium", "large"],
+      options: ['xsmall', 'small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the Avatar",
+      description: 'Size of the Avatar',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     type: {
-      options: ["circle", "square"],
+      options: ['circle', 'square'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Shape of the Avatar",
+      description: 'Shape of the Avatar',
       defaultValue: {
-        summary: "circle"
+        summary: 'circle'
       }
     },
     user: {
@@ -55,15 +55,15 @@ var MainAvatar = function MainAvatar(args) {
 var Avatar = MainAvatar.bind({});
 exports.Avatar = Avatar;
 Avatar.args = {
-  user: "chatbot",
-  size: "large",
-  type: "circle"
+  user: 'chatbot',
+  size: 'large',
+  type: 'circle'
 };
 var CustomAvatar = MainAvatar.bind({});
 exports.CustomAvatar = CustomAvatar;
 CustomAvatar.args = {
   user: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
-  size: "large",
-  type: "square",
-  color: "#000000"
+  size: 'large',
+  type: 'square',
+  color: '#000000'
 };

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

@@ -18,27 +18,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _bannerCards.default,
-  title: "components/Banner",
+  title: 'components/Banner',
   argTypes: {
     border: {
-      options: ["dashed", "solid"],
+      options: ['dashed', 'solid'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Banner border",
+      description: 'Banner border',
       defaultValue: {
-        summary: "none"
+        summary: 'none'
       }
     },
     bannerBg: {
       description: "Banner Background Color, Can be set as 'default', or custom color"
     },
     content: {
-      options: ["left", "center", "right"],
+      options: ['left', 'center', 'right'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Aligning content of banner, will not work if closeButton is present"
+      description: 'Aligning content of banner, will not work if closeButton is present'
     }
   }
 };
@@ -62,11 +62,11 @@ var AnnouncementBanner = function AnnouncementBanner() {
     closeButton: true
   }, /*#__PURE__*/_react.default.createElement("h3", {
     style: {
-      color: "white"
+      color: 'white'
     }
   }, "Special Announcement Title"), /*#__PURE__*/_react.default.createElement("p", {
     style: {
-      color: "white"
+      color: 'white'
     }
   }, "Message Text"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmButton, {
     variant: "neutral",
@@ -84,11 +84,11 @@ var FeatureBanner = function FeatureBanner() {
     variant: "light"
   }, /*#__PURE__*/_react.default.createElement("p", null, "New")), /*#__PURE__*/_react.default.createElement("h3", {
     style: {
-      color: "white"
+      color: 'white'
     }
   }, "New Feature Title"), /*#__PURE__*/_react.default.createElement("p", {
     style: {
-      color: "white"
+      color: 'white'
     }
   }, "Message Text"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.BmButton, {
     size: "small"

package/dist/components/BannerCard/bannerCards.js

@@ -13,7 +13,7 @@ var _icons = require("@material-ui/icons");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ = require("..");
+var _iconStyles = require("../iconStyles");
 
 var _colors = require("../colors");
 
@@ -52,32 +52,32 @@ var BannerCardWrapper = _styledComponents.default.div(_templateObject || (_templ
       show = _ref.show;
 
   if (!closeButton) {
-    return "flex";
+    return 'flex';
   }
 
-  return show ? "flex" : "none";
+  return show ? 'flex' : 'none';
 }, function (_ref2) {
   var border = _ref2.border;
-  if (border === "dashed") return "dashed";
-  if (border === "solid") return "solid";
-  return "none";
+  if (border === 'dashed') return 'dashed';
+  if (border === 'solid') return 'solid';
+  return 'none';
 }, function (_ref3) {
   var color = _ref3.color;
-  return color ? color : _colors.BmPrimaryBlue;
+  return color || _colors.BmPrimaryBlue;
 }, function (_ref4) {
   var content = _ref4.content,
       closeButton = _ref4.closeButton;
 
   if (!closeButton) {
-    if (content === "center") return "center";
-    if (content === "left") return "flex-start";
-    if (content === "right") return "flex-end";
-    return "center";
+    if (content === 'center') return 'center';
+    if (content === 'left') return 'flex-start';
+    if (content === 'right') return 'flex-end';
+    return 'center';
   }
 }, function (_ref5) {
   var bannerBg = _ref5.bannerBg;
-  if (bannerBg === "default") return "".concat(_colors.BmGrey50);
-  if (!bannerBg) return "none";
+  if (bannerBg === 'default') return "".concat(_colors.BmGrey50);
+  if (!bannerBg) return 'none';
   return bannerBg;
 });
 
@@ -97,7 +97,7 @@ var BmBanner = function BmBanner(_ref6) {
     closeButton: closeButton
   }, rest, {
     show: show
-  }), closeButton && /*#__PURE__*/_react.default.createElement(BannerComponent, null, children[0], " ", /*#__PURE__*/_react.default.createElement(_.BmIcons, {
+  }), closeButton && /*#__PURE__*/_react.default.createElement(BannerComponent, null, children[0], ' ', /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
     size: "small",
     onClick: function onClick() {

package/dist/components/Buttons/Stories/basicbutton.stories.js

@@ -7,49 +7,49 @@ exports.default = exports.ColoredButton = exports.BasicButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _buttons = require("../buttons");
-
 var _icons = require("@material-ui/icons");
 
+var _buttons = require("../buttons");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _buttons.BmButton,
-  title: "components/Buttons/Basic",
+  title: 'components/Buttons/Basic',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size",
+      description: 'Size',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     variant: {
-      options: ["primary", "secondary", "tertiary", "success", "neutral", "destructive"],
+      options: ['primary', 'secondary', 'tertiary', 'success', 'neutral', 'destructive'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Variant",
+      description: 'Variant',
       defaultValue: {
-        summary: "primary"
+        summary: 'primary'
       }
     },
     leadingIcon: {
-      description: "Material UI Icons"
+      description: 'Material UI Icons'
     },
     trailingIcon: {
-      description: "Material UI Icons"
+      description: 'Material UI Icons'
     },
     color: {
-      description: "Color of the Button"
+      description: 'Color of the Button'
     },
     children: {
-      description: "Text of the button",
-      default: "Button"
+      description: 'Text of the button',
+      default: 'Button'
     }
   }
 };
@@ -62,19 +62,19 @@ var MainButton = function MainButton(args) {
 var BasicButton = MainButton.bind({});
 exports.BasicButton = BasicButton;
 BasicButton.args = {
-  variant: "primary",
-  size: "large",
-  children: "Button",
+  variant: 'primary',
+  size: 'large',
+  children: 'Button',
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null)
 };
 var ColoredButton = MainButton.bind({});
 exports.ColoredButton = ColoredButton;
 ColoredButton.args = {
-  variant: "primary",
-  size: "large",
-  children: "Button",
+  variant: 'primary',
+  size: 'large',
+  children: 'Button',
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
-  color: "pink"
+  color: 'pink'
 };