beem-component 1.5.6 → 1.5.9

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

@@ -1,24 +1,25 @@
-import React from "react";
-import { Done, DoneAll } from "@material-ui/icons";
-import FilePresentIcon from "@mui/icons-material/FilePresent";
-import DownloadIcon from "@mui/icons-material/Download";
-import styled from "styled-components";
-import BmAvatar from "../../Avatars/avatars";
-import { BmIcons } from "../../iconStyles";
-import { SessionDetails } from "./sessionDetails";
+/* eslint-disable react/display-name */
+import React from 'react';
+import { Done, DoneAll } from '@material-ui/icons';
+import FilePresentIcon from '@mui/icons-material/FilePresent';
+import DownloadIcon from '@mui/icons-material/Download';
+import styled from 'styled-components';
+import BmAvatar from '../../Avatars/avatars';
+import { BmIcons } from '../../iconStyles';
+import { SessionDetails } from './sessionDetails';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
   BmGrey200,
-} from "../../colors";
+} from '../../colors';
 
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
 `;
 
 BmChat.Body = styled.div`
@@ -33,13 +34,13 @@ BmChat.Body = styled.div`
 const Details = styled.div`
   display: flex;
   justify-content: ${({ state }) => {
-    if (state === "inbound") {
-      return "flex-start";
+    if (state === 'inbound') {
+      return 'flex-start';
     }
-    if (state === "outbound") {
-      return "flex-end";
+    if (state === 'outbound') {
+      return 'flex-end';
     }
-    return "row";
+    return 'row';
   }};
   > *:not(:last-child) {
     margin-right: 1rem;
@@ -49,7 +50,7 @@ const Details = styled.div`
   word-wrap: break-word !important;
   margin: 0rem;
   flex-grow: 1;
-  ${"" /* border: 1px solid red; */}
+  ${'' /* border: 1px solid red; */}
 `;
 
 const MessageDetails = styled.div`
@@ -69,22 +70,22 @@ const Messages = styled.div`
   padding: 0.5rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryWhite}`;
-      if (state === "outbound") return `${BmPrimaryBlue}`;
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -104,10 +105,10 @@ const MessagesSubDetails = styled.div`
 `;
 
 const handleState = ({ session }) => {
-  if (session === "bot") {
+  if (session === 'bot') {
     return <BmAvatar size="small" user="chatbot" />;
   }
-  if (session === "live") {
+  if (session === 'live') {
     return <BmAvatar size="small" user="employee" />;
   }
 };
@@ -120,22 +121,22 @@ const FileAttachmentWrapper = styled.div`
   padding: 1rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryWhite}`;
-      if (state === "outbound") return `${BmPrimaryBlue}`;
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -152,14 +153,14 @@ const FileAttachmentWrapper = styled.div`
     align-items: center;
     color: ${({ state }) => {
       if (state) {
-        if (state === "inbound") return `${BmPrimaryBlue}`;
-        if (state === "outbound") return `${BmPrimaryWhite}`;
+        if (state === 'inbound') return `${BmPrimaryBlue}`;
+        if (state === 'outbound') return `${BmPrimaryWhite}`;
       }
       return `${BmPrimaryWhite}`;
     }};
   }
-  ${"" /* max-width: 100%; */}
-  ${"" /* max-height: 100%; */}
+  ${'' /* max-width: 100%; */}
+  ${'' /* max-height: 100%; */}
 `;
 
 const BmFileAttachment = ({
@@ -178,21 +179,21 @@ const BmFileAttachment = ({
     </FileAttachmentWrapper>
   );
 };
-//Start of Component for Images
+// Start of Component for Images
 export const BmImageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -200,7 +201,7 @@ export const BmImageWrapper = styled.div`
 `;
 
 export const BmImage = styled.img`
-  ${"" /* Fix width */}
+  ${'' /* Fix width */}
   width: 100%;
   object-fit: cover;
   flex-grow: 1;
@@ -230,7 +231,7 @@ export const MessageState = styled.div`
   }
 `;
 
-//End of Component for Images
+// End of Component for Images
 
 BmChat.Details = ({
   children,
@@ -256,7 +257,7 @@ BmChat.Details = ({
       <Details state={state} {...rest}>
         {/* Adding for mobile */}
         <MessageState>
-          {state === "inbound" && session && handleState({ state, session })}
+          {state === 'inbound' && session && handleState({ state, session })}
         </MessageState>
         <MessageDetails>
           {/* For Images */}
@@ -281,14 +282,14 @@ BmChat.Details = ({
           )}
           <MessagesSubDetails>
             {displayTime && displayTime}
-            {status === "sent" && (
+            {status === 'sent' && (
               <BmIcons
                 icon={<DoneAll />}
                 color={`${BmSecondaryDarkGreen}`}
                 size="small"
               />
             )}
-            {status === "failed" && (
+            {status === 'failed' && (
               <BmIcons
                 icon={<Done />}
                 color={`${BmPrimaryBlack}`}
@@ -298,7 +299,7 @@ BmChat.Details = ({
           </MessagesSubDetails>
         </MessageDetails>
         <MessageState>
-          {state === "outbound" && session && handleState({ state, session })}
+          {state === 'outbound' && session && handleState({ state, session })}
         </MessageState>
       </Details>
     </>

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";
+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>