beem-component 2.0.27 → 2.1.0

package/dist/components/BmSelector/BmSelector.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const CustomRadio = _styledComponents.default.span.withConfig({
+  displayName: "BmSelector__CustomRadio"
+})(["display:inline-block;width:0.2143rem;height:0.2143rem;border-radius:714.2143rem;transition:all 0.1s ease-in-out;flex-shrink:0;", " @media (max-width:42.8571rem){width:0.0714rem;height:0.0714rem;}"], _ref => {
+  let {
+    selected,
+    themeColor
+  } = _ref;
+  return selected ? "\n    border: .1429rem solid ".concat(themeColor || '#33B1BA', ";\n    background-color: ").concat(themeColor || '#33B1BA', ";\n  ") : "\n    border: .1429rem solid transparent;\n    background-color: transparent;\n  ";
+});
+const RadioGroupWrapper = _styledComponents.default.div.withConfig({
+  displayName: "BmSelector__RadioGroupWrapper"
+})(["display:flex;flex-direction:column;gap:0.75rem;@media (max-width:42.8571rem){gap:0.5rem;}"]);
+const TimeSlotCard = _styledComponents.default.div.withConfig({
+  displayName: "BmSelector__TimeSlotCard"
+})(["display:flex;align-items:center;gap:0.75rem;border:0.0714rem solid ", ";background-color:", ";padding:1rem 1rem;border-radius:0.5rem;transition:border-color 0.2s ease;cursor:pointer;&:hover{border-color:", ";}@media (max-width:42.8571rem){padding:0.75rem 0.75rem;gap:0.5rem;}"], _ref2 => {
+  let {
+    selected,
+    themeColor
+  } = _ref2;
+  return selected ? themeColor : "".concat(themeColor, "1A");
+}, _ref3 => {
+  let {
+    selected,
+    themeColor
+  } = _ref3;
+  return selected ? hexToRgba(themeColor, 0.08) : 'transparent';
+}, _ref4 => {
+  let {
+    themeColor
+  } = _ref4;
+  return themeColor;
+});
+const Label = _styledComponents.default.label.withConfig({
+  displayName: "BmSelector__Label"
+})(["display:flex;align-items:center;flex:1;font-size:0.875rem;font-weight:500;cursor:pointer;svg{font-size:1.1rem;margin-right:0.4rem;color:", ";@media (max-width:42.8571rem){font-size:1rem;}}"], _ref5 => {
+  let {
+    themeColor
+  } = _ref5;
+  return themeColor || '#33B1BA';
+});
+const TimeText = _styledComponents.default.span.withConfig({
+  displayName: "BmSelector__TimeText"
+})(["color:", ";", " @media (max-width:42.8571rem){font-size:0.85rem;}"], _ref6 => {
+  let {
+    textColor
+  } = _ref6;
+  return textColor || '#000';
+}, _ref7 => {
+  let {
+    fontWeight
+  } = _ref7;
+  return fontWeight && "font-weight: ".concat(fontWeight, ";");
+});
+const HiddenInput = _styledComponents.default.input.attrs({
+  type: 'radio'
+}).withConfig({
+  displayName: "BmSelector__HiddenInput"
+})(["display:none;"]);
+const BmSelector = _ref8 => {
+  let {
+    data = [],
+    selectedDataId,
+    onChange,
+    icon: Icon,
+    themeColor,
+    textColor,
+    fontWeight,
+    name = 'selection'
+  } = _ref8;
+  return /*#__PURE__*/_react.default.createElement(RadioGroupWrapper, null, data.map(item => {
+    const isSelected = selectedDataId === item.id;
+    return /*#__PURE__*/_react.default.createElement("label", {
+      key: item.id,
+      htmlFor: item.id
+    }, /*#__PURE__*/_react.default.createElement(HiddenInput, {
+      id: item.id,
+      name: name,
+      value: item.id,
+      checked: isSelected,
+      onChange: () => onChange(item.id)
+    }), /*#__PURE__*/_react.default.createElement(TimeSlotCard, {
+      selected: isSelected,
+      themeColor: themeColor
+    }, /*#__PURE__*/_react.default.createElement(CustomRadio, {
+      selected: isSelected,
+      themeColor: themeColor
+    }), /*#__PURE__*/_react.default.createElement(Label, {
+      htmlFor: item.id,
+      themeColor: themeColor
+    }, /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement(TimeText, {
+      fontWeight: fontWeight,
+      textColor: textColor
+    }, item.label))));
+  }));
+};
+var _default = exports.default = BmSelector;

package/dist/components/BmSelector/BmSelector.stories.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _Event = _interopRequireDefault(require("@mui/icons-material/Event"));
+var _BmSelector = _interopRequireDefault(require("./BmSelector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const icons = {
+  AccessTimeIcon: _AccessTime.default,
+  EventIcon: _Event.default
+};
+var _default = exports.default = {
+  title: 'Components/BmSelector',
+  component: _BmSelector.default,
+  argTypes: {
+    icon: {
+      name: 'Icon',
+      control: {
+        type: 'select'
+      },
+      options: Object.keys(icons),
+      defaultValue: 'AccessTimeIcon'
+    },
+    themeColor: {
+      control: 'color',
+      defaultValue: '#33B1BA'
+    },
+    textColor: {
+      control: 'color',
+      defaultValue: '#33B1BA'
+    },
+    fontWeight: {
+      control: 'text',
+      defaultValue: ''
+    },
+    data: {
+      control: 'object',
+      defaultValue: [{
+        id: 'slot-1',
+        label: '08:00 AM - 08:30 AM',
+        value: {
+          startDate: '08:00 AM',
+          endDate: '08:30 AM'
+        }
+      }, {
+        id: 'slot-2',
+        label: '09:00 AM - 09:30 AM',
+        value: {
+          startDate: '09:00 AM',
+          endDate: '09:30 AM'
+        }
+      }]
+    }
+  }
+};
+const baseSlots = [{
+  id: 'slot-1',
+  // ⚠️ id is mandatory for tracking selection
+  label: '10:00 AM - 10:30 AM',
+  value: {
+    startDate: '10:00 AM',
+    endDate: '10:30 AM'
+  }
+}, {
+  id: 'slot-2',
+  label: '10:30 AM - 11:10 AM',
+  value: {
+    startDate: '10:30 AM',
+    endDate: '11:10 AM'
+  }
+}];
+const Default = args => {
+  var _args$data$0$id, _args$data;
+  const [selectedDataId, setSelectedDataId] = (0, _react.useState)((_args$data$0$id = (_args$data = args.data) === null || _args$data === void 0 || (_args$data = _args$data[0]) === null || _args$data === void 0 ? void 0 : _args$data.id) !== null && _args$data$0$id !== void 0 ? _args$data$0$id : '');
+  return /*#__PURE__*/_react.default.createElement(_BmSelector.default, _extends({}, args, {
+    data: baseSlots,
+    selectedDataId: selectedDataId,
+    onChange: setSelectedDataId,
+    icon: icons[args.iconKey] || _AccessTime.default
+  }));
+};
+exports.Default = Default;
+Default.args = {
+  data: [{
+    id: 'slot-1',
+    label: '08:00 AM - 08:30 AM',
+    value: {
+      startDate: '08:00 AM',
+      endDate: '08:30 AM'
+    }
+  }, {
+    id: 'slot-2',
+    label: '09:00 AM - 09:30 AM',
+    value: {
+      startDate: '09:00 AM',
+      endDate: '09:30 AM'
+    }
+  }],
+  themeColor: '#33B1BA',
+  textColor: '#33B1BA',
+  fontWeight: '',
+  icon: 'AccessTimeIcon'
+};
+const Example = () => {
+  const slots = [{
+    id: 'slot-1',
+    // ⚠️ id is required
+    label: '10:00 AM - 10:30 AM',
+    value: {
+      startDate: '10:00 AM',
+      endDate: '10:30 AM'
+    }
+  }, {
+    id: 'slot-2',
+    label: '10:30 AM - 11:10 AM',
+    value: {
+      startDate: '10:30 AM',
+      endDate: '11:10 AM'
+    }
+  }];
+  const [selectedDataId, setSelectedDataId] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement(_BmSelector.default, {
+    data: slots,
+    selectedDataId: selectedDataId,
+    onChange: setSelectedDataId,
+    icon: _AccessTime.default,
+    themeColor: "#33B1BA",
+    textColor: "#33B1BA",
+    fontWeight: "600"
+  });
+};
+exports.Example = Example;

package/dist/components/ButtonGroup/buttonGroup.js

@@ -8,30 +8,29 @@ var _polished = require("polished");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
 var _tabs = require("../Tabs/tabs");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable consistent-return */
 /* eslint-disable no-unused-vars */
 
-var BmButtonGroup = _styledComponents.default.div.withConfig({
+const BmButtonGroup = _styledComponents.default.div.withConfig({
   displayName: "buttonGroup__BmButtonGroup"
-})(["display:inline-flex;border:0.071rem solid ", ";background:", ";padding:0.25rem;"], _colors.BmPrimaryWhite, function (props) {
-  return props.bgColor ? props.bgColor : _colors.BmGrey50;
-});
-var Item = (0, _styledComponents.default)(_tabs.BmTab).withConfig({
+})(["display:inline-flex;border:0.071rem solid ", ";background:", ";padding:0.25rem;"], _colors.BmPrimaryWhite, props => props.bgColor ? props.bgColor : _colors.BmGrey50);
+const Item = (0, _styledComponents.default)(_tabs.BmTab).withConfig({
   displayName: "buttonGroup__Item"
-})(["", ";box-shadow:none !important;background:", ";border-radius:0rem;padding:0.5rem 2rem;&:hover{background:", ";}"], function (_ref) {
-  var active = _ref.active;
+})(["", ";box-shadow:none !important;background:", ";border-radius:0rem;padding:0.5rem 2rem;&:hover{background:", ";}"], _ref => {
+  let {
+    active
+  } = _ref;
   return active && "  \n    border: 0.071rem solid ".concat(_colors.BmPrimaryWhite, ";\n    background: ").concat(_colors.BmPrimaryWhite, " !important;\n  ");
-}, function (props) {
-  return props.bgColor ? props.bgColor : _colors.BmGrey50;
-}, function (_ref2) {
-  var bgColor = _ref2.bgColor,
-    active = _ref2.active;
+}, props => props.bgColor ? props.bgColor : _colors.BmGrey50, _ref2 => {
+  let {
+    bgColor,
+    active
+  } = _ref2;
   if (!active) {
     if (bgColor) return "".concat((0, _polished.darken)(0.1, bgColor));
     return "".concat((0, _polished.darken)(0.1, _colors.BmGrey50));
   }
 });
 BmButtonGroup.Item = Item;
-var _default = BmButtonGroup;
-exports.default = _default;
+var _default = exports.default = BmButtonGroup;

package/dist/components/ButtonGroup/buttonGroup.stories.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -8,33 +7,19 @@ exports.default = exports.BasicSample = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _buttonGroup = _interopRequireDefault(require("./buttonGroup"));
 require("../../../main.scss");
-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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* eslint-disable import/no-anonymous-default-export */
+var _default = exports.default = {
   component: _buttonGroup.default,
   title: 'components/ButtonGroup'
 };
-exports.default = _default;
-var BasicSample = function BasicSample() {
-  var _useState = (0, _react.useState)(),
-    _useState2 = _slicedToArray(_useState, 2),
-    item = _useState2[0],
-    setItem = _useState2[1];
-  var Occurance = ['Now', 'Later', 'Recurring'];
-  return /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, Occurance && Occurance.map(function (e) {
-    return /*#__PURE__*/_react.default.createElement(_buttonGroup.default.Item, {
-      onClick: function onClick() {
-        return setItem(e);
-      },
-      active: e === item
-    }, /*#__PURE__*/_react.default.createElement("p", null, e));
-  }));
+const BasicSample = () => {
+  const [item, setItem] = (0, _react.useState)();
+  const Occurance = ['Now', 'Later', 'Recurring'];
+  return /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, Occurance && Occurance.map(e => /*#__PURE__*/_react.default.createElement(_buttonGroup.default.Item, {
+    onClick: () => setItem(e),
+    active: e === item
+  }, /*#__PURE__*/_react.default.createElement("p", null, e))));
 };
 exports.BasicSample = BasicSample;

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

@@ -7,9 +7,9 @@ exports.default = exports.ColoredButton = exports.BasicButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("@material-ui/icons");
 var _buttons = require("../buttons");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable import/no-anonymous-default-export */
-var _default = {
+var _default = exports.default = {
   component: _buttons.BmButton,
   title: 'components/Buttons/Basic',
   argTypes: {
@@ -48,12 +48,8 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var MainButton = function MainButton(args) {
-  return /*#__PURE__*/_react.default.createElement(_buttons.BmButton, args);
-};
-var BasicButton = MainButton.bind({});
-exports.BasicButton = BasicButton;
+const MainButton = args => /*#__PURE__*/_react.default.createElement(_buttons.BmButton, args);
+const BasicButton = exports.BasicButton = MainButton.bind({});
 BasicButton.args = {
   variant: 'primary',
   size: 'large',
@@ -61,8 +57,7 @@ BasicButton.args = {
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null)
 };
-var ColoredButton = MainButton.bind({});
-exports.ColoredButton = ColoredButton;
+const ColoredButton = exports.ColoredButton = MainButton.bind({});
 ColoredButton.args = {
   variant: 'primary',
   size: 'large',

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

@@ -7,9 +7,9 @@ exports.default = exports.ButtonAlertIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("@material-ui/icons");
 var _buttonAlertIcons = require("../buttonAlertIcons");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable import/no-anonymous-default-export */
-var _default = {
+var _default = exports.default = {
   component: _buttonAlertIcons.BmAlertIcon,
   title: 'components/Buttons/AlertIcons',
   argTypes: {
@@ -43,12 +43,8 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var MainButtonAlertIcon = function MainButtonAlertIcon(args) {
-  return /*#__PURE__*/_react.default.createElement(_buttonAlertIcons.BmAlertIcon, args);
-};
-var ButtonAlertIcon = MainButtonAlertIcon.bind({});
-exports.ButtonAlertIcon = ButtonAlertIcon;
+const MainButtonAlertIcon = args => /*#__PURE__*/_react.default.createElement(_buttonAlertIcons.BmAlertIcon, args);
+const ButtonAlertIcon = exports.ButtonAlertIcon = MainButtonAlertIcon.bind({});
 ButtonAlertIcon.args = {
   icon: /*#__PURE__*/_react.default.createElement(_icons.AssignmentLateOutlined, null),
   badgeContent: 4,

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

@@ -7,9 +7,9 @@ exports.default = exports.ButtonIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("@material-ui/icons");
 var _buttonIconsOnly = require("../buttonIconsOnly");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable import/no-anonymous-default-export */
-var _default = {
+var _default = exports.default = {
   component: _buttonIconsOnly.BmBtnIcon,
   title: 'components/Buttons/IconsOnly',
   argTypes: {
@@ -44,12 +44,8 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var MainButtonIcon = function MainButtonIcon(args) {
-  return /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, args);
-};
-var ButtonIcon = MainButtonIcon.bind({});
-exports.ButtonIcon = ButtonIcon;
+const MainButtonIcon = args => /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, args);
+const ButtonIcon = exports.ButtonIcon = MainButtonIcon.bind({});
 ButtonIcon.args = {
   icon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
   size: 'large',

package/dist/components/Buttons/buttonAlertIcons.js

@@ -11,71 +11,53 @@ var _styles = require("@material-ui/core/styles");
 var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
 var _colors = require("../colors");
 var _typography = require("../typography");
-var _excluded = ["icon", "badgeContent", "badgeColor", "size"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-var size = function size(props) {
+const _excluded = ["icon", "badgeContent", "badgeColor", "size"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-shadow */
+const size = props => {
   if (props.size === 'small') return '1.429rem';
   if (props.size === 'medium') return '1.714rem';
   if (props.size === 'large') return '2.286rem';
   return '2.286rem';
 };
-var Badgesize = function Badgesize(props) {
+const Badgesize = props => {
   if (props.size === 'small') return '0.857rem';
   if (props.size === 'medium') return '0.857rem';
   if (props.size === 'large') return '0.857rem';
   return '0.857rem';
 };
-var AlertIcon = {
+const AlertIcon = {
   root: {
-    height: function height(props) {
-      return size(props);
-    },
-    width: function width(props) {
-      return size(props);
-    },
-    fill: function fill(props) {
-      return props.color || "".concat(_colors.BmSecondaryGrey);
-    }
+    height: props => size(props),
+    width: props => size(props),
+    fill: props => props.color || "".concat(_colors.BmSecondaryGrey)
   }
 };
-var BadgeIcon = function BadgeIcon() {
-  return {
-    badge: {
-      height: function height(props) {
-        return Badgesize(props);
-      },
-      width: function width(props) {
-        return Badgesize(props);
-      },
-      minWidth: function minWidth(props) {
-        return Badgesize(props);
-      },
-      background: function background(props) {
-        return props.badgeColor || "".concat(_colors.BmSecondaryRed);
-      },
-      color: "".concat(_colors.BmPrimaryWhite),
-      fontFamily: "".concat(_typography.PoppinsMedium),
-      fontStyle: 'normal',
-      fontWeight: 500,
-      fontSize: '0.643rem',
-      display: 'flex',
-      alignItems: 'center',
-      textAlign: 'center',
-      letterSpacing: '-0.02em'
-    }
-  };
-};
-var BmBadge = (0, _styles.withStyles)(BadgeIcon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_Badge.default, _extends({
-    action: true
-  }, props));
+const BadgeIcon = () => ({
+  badge: {
+    height: props => Badgesize(props),
+    width: props => Badgesize(props),
+    minWidth: props => Badgesize(props),
+    background: props => props.badgeColor || "".concat(_colors.BmSecondaryRed),
+    color: "".concat(_colors.BmPrimaryWhite),
+    fontFamily: "".concat(_typography.PoppinsMedium),
+    fontStyle: 'normal',
+    fontWeight: 500,
+    fontSize: '0.643rem',
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    letterSpacing: '-0.02em'
+  }
 });
-var BmIcon = (0, _styles.withStyles)(AlertIcon)(function (props) {
+const BmBadge = (0, _styles.withStyles)(BadgeIcon)(props => /*#__PURE__*/_react.default.createElement(_Badge.default, _extends({
+  action: true
+}, props)));
+const BmIcon = exports.BmIcon = (0, _styles.withStyles)(AlertIcon)(props => {
   if (props.icon) {
-    var Icon = props.icon.type;
+    const Icon = props.icon.type;
     return /*#__PURE__*/_react.default.createElement(BmBadge, {
       badgeContent: props.badgeContent,
       badgeColor: props.badgeColor,
@@ -86,16 +68,16 @@ var BmIcon = (0, _styles.withStyles)(AlertIcon)(function (props) {
   }
   return null;
 });
-exports.BmIcon = BmIcon;
-var BmBtnIconWrapper = _styledComponents.default.button.withConfig({
+const BmBtnIconWrapper = exports.BmBtnIconWrapper = _styledComponents.default.button.withConfig({
   displayName: "buttonAlertIcons__BmBtnIconWrapper"
 })(["display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0.536rem;border:none;background:none;"]);
-exports.BmBtnIconWrapper = BmBtnIconWrapper;
-var BmAlertIcon = function BmAlertIcon(props) {
-  var icon = props.icon,
-    badgeContent = props.badgeContent,
-    badgeColor = props.badgeColor,
-    size = props.size,
+const BmAlertIcon = props => {
+  const {
+      icon,
+      badgeContent,
+      badgeColor,
+      size
+    } = props,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(BmBtnIconWrapper, null, /*#__PURE__*/_react.default.createElement(BmIcon, _extends({
     icon: icon,