beem-component 1.5.6 → 1.5.9

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();
 
@@ -28,7 +32,7 @@ export const ModalContent = styled.div`
   max-width: 100%;
 
   > *:not(:last-child) {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
   @media (min-width: 576px) {
     max-width: 500px;
@@ -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 }) => {
@@ -109,8 +106,9 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
       {(value) => (
         <>
           <ModalHeader {...rest}>
+            <p>&nbsp;</p>
             {children}
-            {closeButton && (
+            {closeButton ? (
               <BmIcons
                 size="xlarge"
                 icon={<Clear />}
@@ -119,6 +117,8 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
                 }
                 {...rest}
               />
+            ) : (
+              <p>&nbsp;</p>
             )}
           </ModalHeader>
         </>
@@ -127,6 +127,13 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
   );
 };
 
+BmModal.SubHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
 BmModal.Body = styled.div`
   display: flex;
   flex-direction: column;
@@ -134,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";
@@ -144,7 +152,8 @@ BmModal.Body = styled.div`
     }
     return "35.714rem";
   }};
-  overflow: auto; */}
+  overflow: auto; */
+  }
 `;
 
 BmModal.Footer = styled.div`
@@ -159,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',
     },
   },
 };
@@ -51,6 +51,31 @@ export const SampleModal = () => {
     </>
   );
 };
+
+export const ModalWithSubHeader = () => {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+    </>
+  );
+};
 export const ExampleModal = () => {
   const [showModal, setShowModal] = useState(false);
   return (

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>

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

@@ -1,47 +1,46 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { Delete, Favorite, Person } from "@material-ui/icons";
-import React from "react";
-import { BmPrimaryBlue } from "../colors";
-import { BmPill } from "./pills";
+import { Delete, Favorite, Person } from '@material-ui/icons';
+import React from 'react';
+import { BmPill } from './pills';
 
 export default {
   component: 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"],
-      control: { type: "select" },
-      description: "Size of the Icon (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "xsmall" },
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the Icon (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'xsmall' },
     },
     avatarSize: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the AvatarIcon (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "xsmall" },
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the AvatarIcon (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'xsmall' },
     },
     label: {
-      description: "Pill label in uppercase",
-      defaultValue: { summary: "undefined" },
+      description: 'Pill label in uppercase',
+      defaultValue: { summary: 'undefined' },
     },
     color: {
-      description: "Color of Pill ",
-      defaultValue: { summary: "black" },
+      description: 'Color of Pill ',
+      defaultValue: { 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 },
     },
   },
@@ -52,7 +51,7 @@ const MainPill = (args) => <BmPill {...args} />;
 export const BasicPill = MainPill.bind({});
 BasicPill.args = {
   icon: <Favorite />,
-  label: "label",
+  label: 'label',
   color: undefined,
   onDelete: undefined,
   deleteIcon: undefined,
@@ -64,7 +63,7 @@ BasicPill.args = {
 export const CustomPill = MainPill.bind({});
 CustomPill.args = {
   icon: undefined,
-  label: "label",
+  label: 'label',
   color: undefined,
   onDelete: true,
   deleteIcon: <Delete />,

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BmSecondaryBlue12, BmBgLightBlue } from '../colors';
+import wa from '../../assets/wa.png';
+import fb from '../../assets/fb.png';
+import insta from '../../assets/insta.png';
+
+const 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';
+  }
+  return '3.429rem';
+};
+
+const 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';
+  }
+  return '2.286rem';
+};
+
+const ProfileImg = styled.img`
+  height: ${(props) => handleSize(props.size)};
+  width: ${(props) => handleSize(props.size)};
+  object-fit: contain;
+  border-radius: 50%;
+  display: flex;
+`;
+
+const Profile = styled.div`
+  height: ${(props) => handleSize(props.size)};
+  width: ${(props) => handleSize(props.size)};
+  border-radius: 50%;
+  border: 1px solid ${BmBgLightBlue};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: ${BmSecondaryBlue12};
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+`;
+
+const Dot = styled.img`
+  position: absolute;
+  left: ${(props) => position(props.size)};
+  bottom: 0rem;
+  object-fit: contain;
+  height: 1rem;
+  width: 1rem;
+`;
+
+export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
+  return (
+    <>
+      <Profile size={size} {...rest}>
+        {content && !img && <Content>{content}</Content>}
+        {img && !content && <ProfileImg src={img} />}
+        {channel && channel === 'whatsapp' && <Dot size={size} src={wa} />}
+        {channel && channel === 'facebook' && <Dot size={size} src={fb} />}
+        {channel && channel === 'instagram' && <Dot size={size} src={insta} />}
+      </Profile>
+    </>
+  );
+};