beem-component 1.3.9 → 1.4.2

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

@@ -1,10 +1,10 @@
-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 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 {
   BmPrimaryWhite,
@@ -12,13 +12,13 @@ import {
   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 +33,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;
@@ -68,22 +68,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}`;
   }};
@@ -103,11 +103,11 @@ const MessagesSubDetails = styled.div`
 `;
 
 const handleState = ({ session }) => {
-  if (session === "bot") {
-    return <BmAvatar size="small" user="chatbot" />;
+  if (session === 'bot') {
+    return <BmAvatar size='small' user='chatbot' />;
   }
-  if (session === "live") {
-    return <BmAvatar size="small" user="employee" />;
+  if (session === 'live') {
+    return <BmAvatar size='small' user='employee' />;
   }
 };
 
@@ -119,22 +119,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}`;
   }};
@@ -151,22 +151,29 @@ 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 = ({ state, file, src, fileName, ...rest }) => {
+const BmFileAttachment = ({
+  state,
+  file,
+  src,
+  fileName,
+  onDownload,
+  ...rest
+}) => {
   return (
     <FileAttachmentWrapper state={state} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
       {fileName}
-      <BmIcons icon={<DownloadIcon />} />
+      <BmIcons icon={<DownloadIcon />} onClick={onDownload} />
     </FileAttachmentWrapper>
   );
 };
@@ -176,15 +183,15 @@ export const BmImageWrapper = styled.div`
   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}`;
   }};
@@ -192,7 +199,7 @@ export const BmImageWrapper = styled.div`
 `;
 
 export const BmImage = styled.img`
-  ${"" /* Fix width */}
+  ${'' /* Fix width */}
   width: 100%;
   object-fit: cover;
   flex-grow: 1;
@@ -202,7 +209,7 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   return (
     <>
       <BmImageWrapper state={state} {...rest}>
-        <BmImage src={src} alt="src" />
+        <BmImage src={src} alt='src' />
         {fileName && (
           <BmFileAttachment
             state={state}
@@ -239,7 +246,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 */}
@@ -259,20 +266,20 @@ BmChat.Details = ({
         )}
         <MessagesSubDetails>
           {displayTime && displayTime}
-          {status === "sent" && (
+          {status === 'sent' && (
             <BmIcons
               icon={<DoneAll />}
               color={`${BmSecondaryDarkGreen}`}
-              size="small"
+              size='small'
             />
           )}
-          {status === "failed" && (
-            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />
+          {status === 'failed' && (
+            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size='small' />
           )}
         </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,17 +1,17 @@
 /* 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 { BmInput } from "../../input";
-import image from "../../../assets/chart-img.png";
-
+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 { BmInput } from '../../input';
+import image from '../../../assets/chart-img.png';
+// TODO: ADD DESCRIPTION
 export default {
   component: BmChat,
-  title: "components/Chat/MainChat/ChatBody",
+  title: 'components/Chat/MainChat/ChatBody',
 };
 
 export const ChatBody = () => {
@@ -19,61 +19,64 @@ export const ChatBody = () => {
     <BmChat>
       <BmChat.Body>
         <BmChat.Details
-          state="inbound"
-          session="bot"
+          state='inbound'
+          session='bot'
           displayTime={<p>12:00pm</p>}
-          status="sent"
+          status='sent'
         >
           <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}
         />
         <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={() => {
+            alert('hello');
+          }}
         />
       </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/ProgressRing/progressRing.js

@@ -88,7 +88,7 @@ const Text = styled.text`
 const BmProgressRing = (props) => {
   const [offset, setOffset] = useState(0);
   const circleRef = useRef(null);
-  const { size, progress, variant, children } = props;
+  const { size, progress, variant } = props;
 
   const initialMeasure = measurement(size);
 

package/src/lib/components/Tabs/tabs.js

@@ -11,9 +11,9 @@ const BmTabWrapper = styled.div`
   align-items: center;
   padding: 1rem;
   background: ${BmPrimaryWhite};
-  box-shadow: ${({ state, disabled }) => {
+  box-shadow: ${({ state, disabled, stateColor }) => {
     if (state === "active" && !disabled) {
-      return `inset 0px -3px 0px ${BmPrimaryBlue}`;
+      return `inset 0px -3px 0px ${stateColor ? stateColor : BmPrimaryBlue}`;
     }
     return "none";
   }};
@@ -86,6 +86,7 @@ BmTab.propTypes = {
   leadingIcon: PropTypes.node,
   state: PropTypes.string,
   color: PropTypes.string,
+  stateColor: PropTypes.string,
   size: PropTypes.string,
   disabled: PropTypes.bool,
 };

package/src/lib/components/Tabs/tabs.stories.js

@@ -16,6 +16,11 @@ export default {
       control: { type: "select" },
       description: "State of the Tabs (optional)",
     },
+    stateColor: {
+      control: { type: "text" },
+      description: "Color of the active state",
+      defaultValue: { summary: "primary blue" },
+    },
     size: {
       options: ["small", "medium", "large"],
       control: { type: "select" },
@@ -23,8 +28,7 @@ export default {
       defaultValue: { summary: "large" },
     },
     disabled: {
-      description:
-        "Disabled tab",
+      description: "Disabled tab",
     },
   },
 };
@@ -37,7 +41,7 @@ BasicTab.args = {
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
-  state: 'active',
+  state: "active",
 };
 
 export const DisabledTab = MainTab.bind({});
@@ -47,3 +51,13 @@ DisabledTab.args = {
   trailingIcon: <KeyboardArrowDown />,
   disabled: true,
 };
+
+export const ColoredTab = MainTab.bind({});
+ColoredTab.args = {
+  children: <h3>Tabs</h3>,
+  leadingIcon: <Favorite />,
+  trailingIcon: <KeyboardArrowDown />,
+  disabled: false,
+  state: "active",
+  stateColor: "red",
+};