beem-component 1.5.7 → 1.6.0

package/src/lib/components/Loader/loader.stories.js

@@ -1,22 +1,22 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmLoader } from "./loader";
+import React from 'react';
+import { BmLoader } from './loader';
 
 export default {
   component: BmLoader,
-  title: "components/Loader",
+  title: 'components/Loader',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the loader (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the loader (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'large' },
     },
     type: {
-      options: ["success", "warning", "error"],
-      control: { type: "select" },
-      description: "Type of loader",
-      defaultValue: { summary: "Beem default loader" },
+      options: ['success', 'warning', 'error'],
+      control: { type: 'select' },
+      description: 'Type of loader',
+      defaultValue: { summary: 'Beem default loader' },
     },
   },
 };
@@ -25,6 +25,6 @@ const MainLoader = (args) => <BmLoader {...args} />;
 
 export const Loader = MainLoader.bind({});
 Loader.args = {
-  type: "success",
-  size: "small",
-};
+  type: 'success',
+  size: 'small',
+};

package/src/lib/components/MainWrapper/index.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmBgGreyBlue } from "../colors";
+import styled from 'styled-components';
+import { BmBgGreyBlue } from '../colors';
 
 export const MainWrapper = styled.div`
   padding: 2.1875rem;

package/src/lib/components/MessageCounter/MessageCounter.stories.js

@@ -1,35 +1,35 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmCounter from "./messageCounter";
-import { text, select } from "@storybook/addon-knobs";
+import React from 'react';
+import { text, select } from '@storybook/addon-knobs';
+import BmCounter from './messageCounter';
 
 export default {
   component: BmCounter,
-  title: "components/MessageCounter",
+  title: 'components/MessageCounter',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the counter (can also be custom example: 10px)",
-      defaultValue: { summary: "small" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the counter (can also be custom example: 10px)',
+      defaultValue: { summary: 'small' },
     },
     children: {
-      description: "Counter Text",
+      description: 'Counter Text',
       defaultValue: { summary: undefined },
     },
   },
 };
 
 const optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
 
 export const MessageCounter = () => {
   return (
-    <BmCounter size={select("size", optionSize, "large")}>
-      {text("children", "00")}
+    <BmCounter size={select('size', optionSize, 'large')}>
+      {text('children', '00')}
     </BmCounter>
   );
 };

package/src/lib/components/MessageCounter/messageCounter.js

@@ -1,7 +1,7 @@
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { BmPrimaryWhite, BmPrimaryBlue } from "../colors";
-import { h3, h4, p } from "../text";
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmPrimaryWhite, BmPrimaryBlue } from '../colors';
+import { h3, h4, p } from '../text';
 
 const BmCounter = styled.div`
   display: flex;
@@ -10,23 +10,23 @@ const BmCounter = styled.div`
   text-align: center;
   color: ${BmPrimaryWhite};
   width: ${({ size }) => {
-    if (size === "small") return "1.429rem";
-    if (size === "medium") return "1.714rem";
-    if (size === "large") return "2.286rem";
-    if (!size) return "1.429rem";
+    if (size === 'small') return '1.429rem';
+    if (size === 'medium') return '1.714rem';
+    if (size === 'large') return '2.286rem';
+    if (!size) return '1.429rem';
     return size;
   }};
   height: ${({ size }) => {
-    if (size === "small") return "1.429rem";
-    if (size === "medium") return "1.714rem";
-    if (size === "large") return "2.286rem";
-    if (!size) return "1.429rem";
+    if (size === 'small') return '1.429rem';
+    if (size === 'medium') return '1.714rem';
+    if (size === 'large') return '2.286rem';
+    if (!size) return '1.429rem';
     return size;
   }};
   ${({ size }) => {
-    if (size === "large") return `${h3}`;
-    if (size === "medium") return `${h4}`;
-    if (size === "small") return `${p}`;
+    if (size === 'large') return `${h3}`;
+    if (size === 'medium') return `${h4}`;
+    if (size === 'small') return `${p}`;
     return `${p}`;
   }}
   border-radius: 50%;
@@ -39,4 +39,4 @@ BmCounter.propTypes = {
   size: PropTypes.string,
 };
 
-export default BmCounter;
+export default BmCounter;

package/src/lib/components/Modals/modal.js

@@ -1,9 +1,13 @@
-import React, { useEffect, useCallback, useState } from "react";
-import PropTypes from "prop-types";
-import { Clear } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmBgGrey45, BmPrimaryWhite } from "../colors";
-import { BmIcons } from "../iconStyles";
+/* eslint-disable no-undef */
+
+/* eslint-disable react/display-name */
+
+import React, { useEffect, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Clear } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmBgGrey45, BmPrimaryWhite } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 const { Provider, Consumer } = React.createContext();
 
@@ -51,14 +55,7 @@ export const ModalWrapper = styled.div`
   overflow-y: auto;
 `;
 
-export const BmModal = ({
-  children,
-  show,
-  size,
-  onHide,
-  centered,
-  ...rest
-}) => {
+const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
   const [toggle, setToggle] = useState(show);
   useEffect(() => {
     setToggle(show);
@@ -66,16 +63,16 @@ export const BmModal = ({
 
   const keyPress = useCallback(
     (e) => {
-      if (e.key === "Escape" && show && onHide !== undefined) {
+      if (e.key === 'Escape' && show && onHide !== undefined) {
         onHide(false);
       }
     },
-    [onHide, show],
+    [onHide, show]
   );
 
   useEffect(() => {
-    document.addEventListener("keydown", keyPress);
-    return () => document.removeEventListener("keydown", keyPress);
+    document.addEventListener('keydown', keyPress);
+    return () => document.removeEventListener('keydown', keyPress);
   }, [keyPress]);
 
   return (
@@ -100,7 +97,7 @@ const ModalHeader = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items:center;
+  align-items: center;
 `;
 
 BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
@@ -120,7 +117,9 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
                 }
                 {...rest}
               />
-            ) : <p>&nbsp;</p>}
+            ) : (
+              <p>&nbsp;</p>
+            )}
           </ModalHeader>
         </>
       )}
@@ -132,7 +131,7 @@ BmModal.SubHeader = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items:center;
+  align-items: center;
 `;
 
 BmModal.Body = styled.div`
@@ -142,7 +141,8 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  ${'' /* max-height: ${({ size }) => {
+  ${
+    '' /* max-height: ${({ size }) => {
     if (size) {
       if (size === "small") return "21.429rem";
       if (size === "default") return "35.714rem";
@@ -152,7 +152,8 @@ BmModal.Body = styled.div`
     }
     return "35.714rem";
   }};
-  overflow: auto; */}
+  overflow: auto; */
+  }
 `;
 
 BmModal.Footer = styled.div`
@@ -167,4 +168,5 @@ BmModal.propTypes = {
   onHide: PropTypes.func.isRequired,
   closeButton: PropTypes.bool,
 };
+
 export default BmModal;

package/src/lib/components/Modals/modals.stories.js

@@ -1,12 +1,12 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React, { useState } from "react";
-import BmModal from "./modal";
-import { BmButton } from "../Buttons/buttons";
+import React, { useState } from 'react';
+import BmModal from './modal';
+import { BmButton } from '../Buttons/buttons';
 
 export default {
   component: BmModal,
-  title: "components/Modals",
-  argType: {
+  title: 'components/Modals',
+  argTypes: {
     // size: {
     //   options: ["small", "default", "large", "xlarge"],
     //   control: { type: "select" },
@@ -15,17 +15,17 @@ export default {
     // },
     closeButton: {
       description:
-        "Placed on BmModal.Header component. Displays the close button (X)",
+        'Placed on BmModal.Header component. Displays the close button (X)',
     },
     // centered: {
     //   description: "Centers the modal",
     // },
     show: {
-      control: { type: "boolean" },
-      description: "Handling the opening and closing of the modal",
+      control: { type: 'boolean' },
+      description: 'Handling the opening and closing of the modal',
     },
     onHide: {
-      description: "Handling the closing of the modal",
+      description: 'Handling the closing of the modal',
     },
   },
 };

package/src/lib/components/NoteBar/noteBar.js

@@ -1,22 +1,22 @@
-import React, { useState } from "react";
-import Proptypes from "prop-types";
-import { Clear, Error, Info, Warning } from "@material-ui/icons";
-import styled from "styled-components";
+import React, { useState } from 'react';
+import Proptypes from 'prop-types';
+import { Clear, Error, Info, Warning } from '@material-ui/icons';
+import styled from 'styled-components';
 import {
   BmGrey400,
   BmPrimaryBlue,
   BmSecondaryRed,
   BmPrimaryGold,
   BmSecondaryGrey,
-} from "../colors";
-import { BmIcons } from "../iconStyles";
+} from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const NoteBarWrapper = styled.div`
   display: ${({ closeButton, isOpen }) => {
     if (!closeButton) {
-      return "flex";
+      return 'flex';
     }
-    return isOpen ? "flex" : "none";
+    return isOpen ? 'flex' : 'none';
   }};
   flex-direction: row;
   align-items: center;
@@ -39,34 +39,34 @@ export const BmNoteBar = ({
   const [isOpen, setIsOpen] = useState(true);
   return (
     <NoteBarWrapper closeButton={closeButton} isOpen={isOpen} {...rest}>
-      {type === "info" && (
+      {type === 'info' && (
         <BmIcons
           icon={<Info />}
-          color={color ? color : `${BmPrimaryBlue}`}
-          size={size ? size : "large"}
+          color={color || `${BmPrimaryBlue}`}
+          size={size || 'large'}
         />
       )}
-      {type === "error" && (
+      {type === 'error' && (
         <BmIcons
           icon={<Error />}
-          color={color ? color : `${BmSecondaryRed}`}
-          size={size ? size : "large"}
+          color={color || `${BmSecondaryRed}`}
+          size={size || 'large'}
         />
       )}
-      {type === "warning" && (
+      {type === 'warning' && (
         <BmIcons
           icon={<Warning />}
-          color={color ? color : `${BmPrimaryGold}`}
-          size={size ? size : "large"}
+          color={color || `${BmPrimaryGold}`}
+          size={size || 'large'}
         />
       )}
       {children}
       {closeButton && (
         <BmIcons
           icon={<Clear />}
-          color={color ? color : `${BmSecondaryGrey}`}
-          size={size ? size : "small"}
-          style={{ marginLeft: "auto" }}
+          color={color || `${BmSecondaryGrey}`}
+          size={size || 'small'}
+          style={{ marginLeft: 'auto' }}
           onClick={() => setIsOpen(false)}
         />
       )}

package/src/lib/components/NoteBar/noteBar.stories.js

@@ -1,33 +1,34 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmNoteBar } from "./noteBar";
+import React from 'react';
+import { BmNoteBar } from './noteBar';
 
 export default {
   component: BmNoteBar,
-  title: "components/NoteBar",
+  title: 'components/NoteBar',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the icons",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the icons',
+      defaultValue: { summary: 'large' },
     },
     children: {
-      description: "Note Description ",
+      description: 'Note Description ',
       defaultValue: { summary: undefined },
     },
     type: {
-      options: ["info", "warning", "error"],
-      control: { type: "select" },
-      description: "Type of note",
+      options: ['info', 'warning', 'error'],
+      control: { type: 'select' },
+      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',
     },
   },
 };
@@ -36,16 +37,16 @@ const MainNoteBar = (args) => <BmNoteBar {...args} />;
 
 export const NoteBar = MainNoteBar.bind({});
 NoteBar.args = {
-  type: "warning",
-  size: "large",
+  type: 'warning',
+  size: 'large',
   children: <p>NoteBar</p>,
   color: undefined,
 };
 
 export const NoteBarWithCloseButton = MainNoteBar.bind({});
 NoteBarWithCloseButton.args = {
-  type: "warning",
-  size: "large",
+  type: 'warning',
+  size: 'large',
   children: <p>NoteBar</p>,
   color: undefined,
   closeButton: true,

package/src/lib/components/PerformanceIndicator/performaceIndicator.stories.js

@@ -1,29 +1,29 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmPerformanceIndicator } from "./performanceIndicator";
+import React from 'react';
+import { BmPerformanceIndicator } from './performanceIndicator';
 
 export default {
   component: BmPerformanceIndicator,
-  title: "components/PerformanceIndicator",
+  title: 'components/PerformanceIndicator',
   argTypes: {
     size: {
-      options: ["small", "medium", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the Indicator (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "xlarge" },
+      options: ['small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the Indicator (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'xlarge' },
     },
     type: {
-      options: ["upwards", "downwards"],
-      control: { type: "select" },
-      description: "Type of Indicator",
+      options: ['upwards', 'downwards'],
+      control: { type: 'select' },
+      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 },
     },
   },
@@ -33,8 +33,8 @@ const MainPI = (args) => <BmPerformanceIndicator {...args} />;
 
 export const PerformanceIndicator = MainPI.bind({});
 PerformanceIndicator.args = {
-  type: "upwards",
-  size: "xlarge",
-  children: "100%",
+  type: 'upwards',
+  size: 'xlarge',
+  children: '100%',
   color: undefined,
 };

package/src/lib/components/PerformanceIndicator/performanceIndicator.js

@@ -1,9 +1,10 @@
-import styled from "styled-components";
-import Proptypes from "prop-types";
-import { BmGrey400 } from "../colors";
-import { BmIcons } from "../iconStyles";
-import ArrowCircleUpIcon from "@mui/icons-material/ArrowCircleUp";
-import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
+import React from 'react';
+import styled from 'styled-components';
+import Proptypes from 'prop-types';
+import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
+import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
+import { BmGrey400 } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const BmPIWrapper = styled.div`
   display: flex;
@@ -29,17 +30,17 @@ export const BmPerformanceIndicator = ({
 }) => {
   return (
     <BmPIWrapper color={color} {...rest}>
-      {type === "upwards" && (
+      {type === 'upwards' && (
         <BmIcons
           icon={<ArrowCircleUpIcon />}
-          size={size || "xlarge"}
+          size={size || 'xlarge'}
           color={color || `${BmGrey400}`}
         />
       )}
-      {type === "downwards" && (
+      {type === 'downwards' && (
         <BmIcons
           icon={<ArrowCircleDownIcon />}
-          size={size || "xlarge"}
+          size={size || 'xlarge'}
           color={color || `${BmGrey400}`}
         />
       )}

package/src/lib/components/Pills/pills.js

@@ -1,19 +1,19 @@
-import React, { useState } from "react";
-import Proptypes from "prop-types";
+import React, { useState } from 'react';
+import Proptypes from 'prop-types';
 // eslint-disable-next-line no-unused-vars
-import { Clear, KeyboardArrowDown } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmAvatar } from "../Avatars/avatars";
-import { BmGrey100 } from "../colors";
-import { BmIcons } from "../iconStyles";
-import { p } from "../text";
+import { Clear, KeyboardArrowDown } from '@material-ui/icons';
+import styled from 'styled-components';
+import BmAvatar from '../Avatars/avatars';
+import { BmGrey100 } from '../colors';
+import { BmIcons } from '../iconStyles';
+import { p } from '../text';
 
 export const BmPillWrapper = styled.div`
   display: ${({ clicked }) => {
     if (clicked) {
-      return "flex";
+      return 'flex';
     }
-    return "none";
+    return 'none';
   }};
   flex-direction: row;
   justify-content: center;
@@ -56,11 +56,11 @@ export const BmPill = ({
         clicked={clicked}
         {...rest}
       >
-        {icon && <BmIcons size={size || "xsmall"} icon={icon} color={color} />}
+        {icon && <BmIcons size={size || 'xsmall'} icon={icon} color={color} />}
         {avatarIcon && (
           <BmAvatar
             user={avatarIcon}
-            size={avatarSize || "xsmall"}
+            size={avatarSize || 'xsmall'}
             type="circle"
             color={color}
           />
@@ -68,10 +68,10 @@ export const BmPill = ({
         {label}
         {onDelete && (
           <BmIcons
-            style={{ margin: "0rem 0rem 0rem 1rem" }}
-            size={size || "xsmall"}
-            icon={deleteIcon ? deleteIcon : <Clear />}
-            color={color || "black"}
+            style={{ margin: '0rem 0rem 0rem 1rem' }}
+            size={size || 'xsmall'}
+            icon={deleteIcon || <Clear />}
+            color={color || 'black'}
           />
         )}
       </BmPillWrapper>