beem-component 1.5.8 → 1.5.9

package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from 'react';
-import BmChat from './chatBody';
-import { BmIcons } from '../../iconStyles';
 import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import QuickreplyIcon from '@mui/icons-material/Quickreply';
 import SendIcon from '@mui/icons-material/Send';
+import { BmIcons } from '../../iconStyles';
+import BmChat from './chatBody';
 import { BmInput } from '../../input';
 import image from '../../../assets/chart-img.png';
 // TODO: ADD DESCRIPTION
@@ -19,52 +19,58 @@ export const ChatBody = () => {
     <BmChat>
       <BmChat.Body>
         <BmChat.Details
-          state='inbound'
-          session='bot'
+          state="inbound"
+          session="bot"
           displayTime={<p>12:00pm</p>}
-          status='sent'
-          sessionDetails={{ message: <h3>Session Message</h3>, time: <p>12:00pm</p> }}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
         >
           <p>Inbound Text Message</p>
         </BmChat.Details>
         <BmChat.Details
-          state='inbound'
-          session='live'
+          state="inbound"
+          session="live"
           displayTime={<p>12:00pm</p>}
-          status='sent'
+          status="sent"
           fileName={<p>chat.png</p>}
           src={image}
-          sessionDetails={{ message: <h3>Session Message</h3>, time: <p>12:00pm</p> }}
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
         />
         <BmChat.Details
-          state='inbound'
-          session='live'
+          state="inbound"
+          session="live"
           displayTime={<p>10:00am</p>}
-          status='failed'
+          status="failed"
           fileName={<p>file.csv</p>}
           file={image}
         />
         <BmChat.Details
-          state='outbound'
-          session='bot'
+          state="outbound"
+          session="bot"
           displayTime={<p>12:00pm</p>}
-          status='sent'
+          status="sent"
         >
           <p>Outbound Text Message</p>
         </BmChat.Details>
         <BmChat.Details
-          state='outbound'
-          session='live'
+          state="outbound"
+          session="live"
           displayTime={<p>12:00pm</p>}
-          status='sent'
+          status="sent"
           fileName={<p>chat.png</p>}
           src={image}
         />
         <BmChat.Details
-          state='outbound'
-          session='live'
+          state="outbound"
+          session="live"
           displayTime={<p>10:00am</p>}
-          status='failed'
+          status="failed"
           fileName={<p>file.csv</p>}
           file={image}
           onDownload={() => {
@@ -73,12 +79,12 @@ export const ChatBody = () => {
         />
       </BmChat.Body>
       <BmChat.Footer>
-        <div className='chat-footer'>
-          <BmIcons icon={<EmojiEmotionsIcon />} size='xlarge' />
-          <BmIcons icon={<AttachFileIcon />} size='xlarge' />
-          <BmIcons icon={<QuickreplyIcon />} size='xlarge' />
-          <BmInput placeholder='Enter Message' style={{ flex: '1' }} />
-          <BmIcons icon={<SendIcon />} size='xlarge' />
+        <div className="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
         </div>
       </BmChat.Footer>
     </BmChat>

package/src/lib/components/ChatComponents/ChatBody/sessionDetails.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import styled from "styled-components";
-import { BmGrey200 } from "../../colors";
+import styled from 'styled-components';
+import { BmGrey200 } from '../../colors';
 
 const SessionDetailsWrapper = styled.div`
   display: flex;

package/src/lib/components/ChatComponents/ChatHeader/chatHeader.js

@@ -1,11 +1,11 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 // import { BmGrey400 } from "../colors";
 
 export const BmChatHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
   padding: 1rem;
   > *:not(:last-child) {
     margin-right: 0.5rem;

package/src/lib/components/ChatComponents/ChatHeader/chatHeader.stories.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmButton } from "../../Buttons/buttons";
-import { BmChatHeader } from "./chatHeader";
+import React from 'react';
+import { BmButton } from '../../Buttons/buttons';
+import { BmChatHeader } from './chatHeader';
 
 export default {
   component: BmChatHeader,
-  title: "components/Chat/MainChat/ChatHeader",
+  title: 'components/Chat/MainChat/ChatHeader',
 };
 
 export const ChatHeader = () => {

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const BmColorPicker = styled.div`
   width: 1.429rem;
@@ -8,4 +8,4 @@ export const BmColorPicker = styled.div`
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
-`;
+`;

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.stories.js

@@ -1,15 +1,16 @@
-import { BmColorPicker } from "./colorPicker";
+import React from 'react';
+import { BmColorPicker } from './colorPicker';
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   component: BmColorPicker,
-  title: "components/Chat/Components/ColorPicker",
+  title: 'components/Chat/Components/ColorPicker',
 };
 
 export const ColorPicker = () => {
   return (
     <>
-      {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
+      {['#33b1ba', '#000000', '#F62E48', '#8CC63F'].map((color) => (
         <BmColorPicker key={color} color={color} />
       ))}
     </>

package/src/lib/components/ChatComponents/ContactCards/contactCards.js

@@ -1,7 +1,7 @@
-import styled from "styled-components";
-import { BmSecondaryBlue12 } from "../../colors";
+import styled from 'styled-components';
+import { BmSecondaryBlue12 } from '../../colors';
 
-export const BmContactCard = styled.div`
+const BmContactCard = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -51,9 +51,11 @@ BmContactCard.SubDetails = styled.div`
     align-items: flex-start;
   }
   ${'' /* TODO */}
-  ${'' /* > :last-child {
+  ${
+    '' /* > :last-child {
     margin-left: auto;
-  } */}
+  } */
+  }
 `;
 
 export default BmContactCard;

package/src/lib/components/ChatComponents/ContactCards/contactCards.stories.js

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmContactCard from "./contactCards";
-import BmAvatar from "../../Avatars/avatars";
-import BmCounter from "../../MessageCounter/messageCounter";
-import { BmTag } from "../../Tags/tags";
+import React from 'react';
+import BmContactCard from './contactCards';
+import BmAvatar from '../../Avatars/avatars';
+import BmCounter from '../../MessageCounter/messageCounter';
+import { BmTag } from '../../Tags/tags';
 
 export default {
   component: { BmContactCard, BmAvatar, BmTag, BmCounter },
-  title: "components/Chat/Components/ContactCard",
+  title: 'components/Chat/Components/ContactCard',
 };
 
 export const ContactCard = () => {

package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const BmChatForm = styled.div`
   display: flex;
@@ -23,7 +23,7 @@ BmChatForm.Label = styled.div`
   width: 50%;
   overflow: hidden;
   text-overflow: ellipsis;
-`
+`;
 
 BmChatForm.Input = styled.input`
   text-align: right;
@@ -39,6 +39,6 @@ BmChatForm.Input = styled.input`
     text-decoration: none;
   }
   background: transparent;
-`
+`;
 
 export default BmChatForm;

package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.stories.js

@@ -1,15 +1,16 @@
-import { BmAccordion, BmChatForm } from "../..";
+import React from 'react';
+import { BmAccordion, BmChatForm } from '../..';
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   component: BmChatForm,
-  title: "components/Chat/Components/FormAccordion",
+  title: 'components/Chat/Components/FormAccordion',
 };
 
 export const FormAccordion = () => {
   return (
     <>
-      <div style={{ width: "30%" }}>
+      <div style={{ width: '30%' }}>
         <BmAccordion>
           <BmAccordion.Title>
             <h3>Information</h3>

package/src/lib/components/ChatComponents/InfoTab/infoTab.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const BmInfoTab = styled.div`
   display: flex;
@@ -19,7 +19,7 @@ BmInfoTab.Content = styled.div`
 BmInfoTab.Tabs = styled.div`
   display: flex;
   flex-direction: column;
-  >*:not(:first-child) {
+  > *:not(:first-child) {
     margin-top: 0.5rem;
   }
 `;

package/src/lib/components/ChatComponents/InfoTab/infoTab.stories.js

@@ -1,18 +1,18 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmInfoTab from "./infoTab";
-import { BmBtnIcon } from "../../Buttons/buttonIconsOnly";
-import { MoreVert, Phone } from "@material-ui/icons";
-import { BmIcons } from "../../iconStyles";
+import React from 'react';
+import { MoreVert, Phone } from '@material-ui/icons';
+import BmInfoTab from './infoTab';
+import { BmBtnIcon } from '../../Buttons/buttonIconsOnly';
+import { BmIcons } from '../../iconStyles';
 
 export default {
   component: BmInfoTab,
-  title: "components/Chat/Components/InfoTab",
+  title: 'components/Chat/Components/InfoTab',
 };
 
 export const InfoTab = () => {
   return (
-    <div style={{ maxWidth: "30%" }}>
+    <div style={{ maxWidth: '30%' }}>
       <BmInfoTab>
         <BmInfoTab.Content>
           <h2>Contact Name</h2>

package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js

@@ -1,15 +1,17 @@
-import { BmAccordion, BmChatLabels, BmTag } from "../..";
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import { BmAccordion, BmChatLabels, BmTag } from '../..';
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   component: BmChatLabels,
-  title: "components/Chat/Components/LabelAccordion",
+  title: 'components/Chat/Components/LabelAccordion',
 };
 
 export const LabelAccordion = () => {
   return (
     <>
-      <div style={{ width: "30%" }}>
+      <div style={{ width: '30%' }}>
         <BmAccordion>
           <BmAccordion.Title>
             <h3>Labels</h3>

package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmGrey100, BmGrey200 } from "../../colors";
+import styled from 'styled-components';
+import { BmGrey100, BmGrey200 } from '../../colors';
 
 const BmChatNotes = styled.div`
   display: flex;

package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js

@@ -1,17 +1,18 @@
-import { BmAccordion, BmChatLabels, BmChatNotes, BmIcons } from "../..";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { Delete, Edit } from "@material-ui/icons";
+import React from 'react';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { Delete, Edit } from '@material-ui/icons';
+import { BmAccordion, BmChatLabels, BmChatNotes, BmIcons } from '../..';
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   component: BmChatLabels,
-  title: "components/Chat/Components/NoteAccordion",
+  title: 'components/Chat/Components/NoteAccordion',
 };
 
 export const NoteAccordion = () => {
   return (
     <>
-      <div style={{ width: "30%" }}>
+      <div style={{ width: '30%' }}>
         <BmAccordion>
           <BmAccordion.Title>
             <h3>Notes</h3>

package/src/lib/components/Checkbox/checkboxToggler.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {
+  BmGrey400,
+  BmSecondaryDarkGreen,
+  BmGrey200,
+  BmBgGrey38,
+} from '../colors';
+
+const CheckBoxWrapper = styled.div`
+  position: relative;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+const CheckBoxLabel = styled.label`
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 3rem;
+  height: 1.25rem;
+  border-radius: 1.25rem;
+  background: ${(props) => (props.disabled ? BmGrey400 : BmBgGrey38)};
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    border-radius: 100%;
+    width: 1.75rem;
+    height: 1.75rem;
+    background: ${BmGrey200};
+    transition: 0.2s;
+  }
+`;
+
+const Label = styled.label`
+  align-items: center;
+  display: flex;
+  position: relative;
+`;
+const CheckBox = styled.input`
+  opacity: 0;
+  z-index: 1;
+    ${({ checked, disabled }) =>
+      !disabled &&
+      checked !== undefined &&
+      checked === true &&
+      `
+      &:checked + ${CheckBoxLabel} {
+        background: ${BmSecondaryDarkGreen};
+        &::after {
+          content: '';
+          display: block;
+          width: 1.75rem;
+          height: 1.75rem;
+          margin-left: 1.25rem;
+          transition: 0.2s;
+        }  `}
+  }
+`;
+
+export const BmCheckboxToggle = ({ checked, onChange, disabled, label }) => {
+  return (
+    <CheckBoxWrapper>
+      <Label htmlFor={label} disabled={disabled}>
+        {label}
+      </Label>
+      <CheckBox
+        id={label || 'checkbox'}
+        type="checkbox"
+        checked={checked}
+        onChange={() => onChange && onChange(!checked)}
+        disabled={disabled}
+        hidden
+      />
+      <CheckBoxLabel htmlFor={label || 'checkbox'} disabled={disabled} />
+    </CheckBoxWrapper>
+  );
+};
+
+BmCheckboxToggle.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  label: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+};

package/src/lib/components/Checkbox/checkboxToggler.stories.js

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React, { useState } from 'react';
+import { BmCheckboxToggle } from './checkboxToggler';
+
+export default {
+  component: BmCheckboxToggle,
+  title: 'components/CheckboxToggler',
+  argTypes: {
+    label: {
+      description: 'Label (optional))',
+      defaultValue: { summary: undefined },
+    },
+    checked: {
+      description:
+        'If true, the checkbox is set to checked. If false, it is not checked.',
+      defaultValue: { summary: undefined },
+      control: { type: 'boolean' },
+    },
+    onChange: {
+      description: 'Invoked when the user clicks or drags the toggler.',
+    },
+    disabled: {
+      description: 'for disabling the checkbox toggler',
+    },
+  },
+};
+export const Sample = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <BmCheckboxToggle
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label={<h4>Field Label</h4>}
+    />
+  );
+};
+
+export const DisabledToggler = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <BmCheckboxToggle
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label={<h4>Field Label</h4>}
+      disabled
+    />
+  );
+};

package/src/lib/components/Lists/listBox.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from "react";
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryWhite } from "../colors";
-import PropTypes from "prop-types";
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey400, BmPrimaryWhite } from '../colors';
 
 const show = (isOpen) => {
   if (isOpen !== undefined) {
@@ -16,7 +16,7 @@ const show = (isOpen) => {
       margin-top: 0.5rem`;
     }
   }
-  return "flex";
+  return 'flex';
 };
 
 const BmListBoxWrapper = styled.div`
@@ -40,9 +40,9 @@ export const BmListBox = ({ children, showList, setShowList, ...rest }) => {
         setShowList(false);
       }
     };
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return () => {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [setShowList, showList]);
 

package/src/lib/components/Lists/listBox.stories.js

@@ -1,23 +1,20 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React, { useState } from "react";
-import { BmListBox } from "./listBox";
-import { KeyboardArrowRight } from "@material-ui/icons";
-import { BmRowLabel } from "./rowLabels";
-import { BmButton } from "../Buttons/buttons";
+import React, { useState } from 'react';
+import { KeyboardArrowRight } from '@material-ui/icons';
+import { BmListBox } from './listBox';
+import { BmRowLabel } from './rowLabels';
+import { BmButton } from '../Buttons/buttons';
 
 export default {
   component: BmListBox,
-  title: "components/Lists/ListBox",
+  title: 'components/Lists/ListBox',
   argTypes: {
     showList: {
-      description:
-        "Used for handling the display of listbox",
+      description: 'Used for handling the display of listbox',
     },
     setShowList: {
-      description:
-        "Function for handling the display of listbox",
+      description: 'Function for handling the display of listbox',
     },
-    
   },
 };
 

package/src/lib/components/Lists/listHeader.stories.js

@@ -1,28 +1,28 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmListHeader } from "./listheader";
-import "../../../main.scss";
-import { Favorite } from "@material-ui/icons";
+import React from 'react';
+import { Favorite } from '@material-ui/icons';
+import { BmListHeader } from './listheader';
+import '../../../main.scss';
 
 export default {
   component: BmListHeader,
-  title: "components/Lists/ListHeader",
-  argType: {
+  title: 'components/Lists/ListHeader',
+  argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the trailing icon",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the trailing icon',
+      defaultValue: { summary: 'large' },
     },
     trailingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: { summary: undefined },
     },
     color: {
-      description: "Color of the Icon and Border",
+      description: 'Color of the Icon and Border',
     },
     children: {
-      description: "List header text",
+      description: 'List header text',
     },
   },
 };

package/src/lib/components/Lists/listheader.js

@@ -1,8 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import { BmPrimaryBlack, BmPrimaryBlue } from "../colors";
-import { BmIcons } from "../iconStyles";
-import PropTypes from "prop-types";
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmPrimaryBlack, BmPrimaryBlue } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const Container = styled.div`
   display: flex;
@@ -11,7 +11,7 @@ export const Container = styled.div`
   padding: 0rem 1rem 1rem 1rem;
   border-bottom: 0.125rem solid
     ${({ color }) => {
-      return color ? color : `${BmPrimaryBlue}`;
+      return color || `${BmPrimaryBlue}`;
     }};
 `;
 
@@ -29,7 +29,7 @@ export const BmListHeader = ({
         <BmIcons
           icon={trailingIcon}
           color={color || `${BmPrimaryBlack}`}
-          size={size || "large"}
+          size={size || 'large'}
         />
       )}
     </Container>