beem-component 1.5.8 → 1.5.9

package/src/lib/components/Buttons/buttonIconsOnly.js

@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
 import {
   BmPrimaryWhite,
@@ -10,8 +10,8 @@ import {
   BmSecondaryRed,
   BmSecondaryDarkGreen,
   BmGrey400,
-} from "../colors";
-import { BmButtonIcon } from "../iconStyles";
+} from '../colors';
+import { BmButtonIcon } from '../iconStyles';
 
 const BeemButtonIcon = styled.button`
   display: flex;
@@ -20,34 +20,32 @@ const BeemButtonIcon = styled.button`
   justify-content: center;
   background: ${({ variant, disabled, color }) => {
     if (!disabled) {
-      if (variant === "active") return `${BmPrimaryBlue}`;
-      if (variant === "enabled") return `${BmGrey50}`;
-      if (variant === "destructive") return `${BmSecondaryRed}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "neutral") return `${BmPrimaryWhite}`;
-      if (variant === "primary") return `${color ? color : BmPrimaryBlue}`;
-      if (variant === "secondary") return `${BmPrimaryWhite}`;
-      if (variant === "tertiary") return `${BmPrimaryWhite}`;
-      return `${color ? color : BmPrimaryBlue}`;
-    } else {
-      return `${BmGrey100}`;
+      if (variant === 'active') return `${BmPrimaryBlue}`;
+      if (variant === 'enabled') return `${BmGrey50}`;
+      if (variant === 'destructive') return `${BmSecondaryRed}`;
+      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+      if (variant === 'neutral') return `${BmPrimaryWhite}`;
+      if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+      if (variant === 'secondary') return `${BmPrimaryWhite}`;
+      if (variant === 'tertiary') return `${BmPrimaryWhite}`;
+      return `${color || BmPrimaryBlue}`;
     }
+    return `${BmGrey100}`;
   }};
   border: 0.071rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "active") return `${BmPrimaryBlue}`;
-        if (variant === "enabled") return `${BmGrey50}`;
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
-        if (variant === "primary") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "tertiary") return `${BmPrimaryWhite}`;
-        return `${color ? color : BmPrimaryBlue}`;
-      } else {
-        return `${BmGrey100}`;
+        if (variant === 'active') return `${BmPrimaryBlue}`;
+        if (variant === 'enabled') return `${BmGrey50}`;
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
+        if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return `${BmPrimaryWhite}`;
+        return `${color || BmPrimaryBlue}`;
       }
+      return `${BmGrey100}`;
     }};
   box-sizing: border-box;
   border-radius: 0.25rem;
@@ -62,7 +60,13 @@ export const BmBtnIcon = (props) => {
   const { variant, size, disabled, children, icon, color, ...rest } = props;
 
   return (
-    <BeemButtonIcon color={color} size={size} variant={variant} disabled={disabled} {...rest}>
+    <BeemButtonIcon
+      color={color}
+      size={size}
+      variant={variant}
+      disabled={disabled}
+      {...rest}
+    >
       {icon && (
         <BmIconWrapper>
           <BmButtonIcon

package/src/lib/components/Buttons/buttons.js

@@ -1,9 +1,9 @@
-import React from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { darken } from "polished";
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { darken } from 'polished';
 
-//TODO: Button Links Pending
+// TODO: Button Links Pending
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -14,30 +14,29 @@ import {
   BmGrey50,
   BmSecondaryGreen8,
   BmSecondaryRed8,
-} from "../colors";
-import { BmButtonIcon } from "../iconStyles";
-import { h3, h4 } from "../text";
+} from '../colors';
+import { BmButtonIcon } from '../iconStyles';
+import { h3, h4 } from '../text';
 
 const ButtonText = styled.div`
   ${({ size }) => {
-    if (size === "large") return `${h3}`;
-    if (size === "medium") return `${h3}`;
-    if (size === "small") return `${h4}`;
+    if (size === 'large') return `${h3}`;
+    if (size === 'medium') return `${h3}`;
+    if (size === 'small') return `${h4}`;
     return `${h3}`;
   }}
   text-align: center;
   color: ${({ variant, disabled, color }) => {
     if (!disabled) {
-      if (variant === "primary") return `${BmPrimaryWhite}`;
-      if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
-      if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`
-      if (variant === "destructive") return `${BmPrimaryWhite}`;
-      if (variant === "success") return `${BmPrimaryWhite}`;
-      if (variant === "neutral") return `${color ? color : BmPrimaryBlue}`
+      if (variant === 'primary') return `${BmPrimaryWhite}`;
+      if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+      if (variant === 'tertiary') return `${color || BmPrimaryBlue}`;
+      if (variant === 'destructive') return `${BmPrimaryWhite}`;
+      if (variant === 'success') return `${BmPrimaryWhite}`;
+      if (variant === 'neutral') return `${color || BmPrimaryBlue}`;
       return `${BmPrimaryWhite}`;
-    } else {
-      return `${BmGrey400}`;
     }
+    return `${BmGrey400}`;
   }};
   padding: 0rem;
 `;
@@ -49,116 +48,114 @@ const BeemButton = styled.button`
   align-items: center;
   border-radius: 0.25rem;
   padding: ${({ size }) => {
-    if (size === "large") return "0.625rem 1.5rem";
-    if (size === "medium") return "0.4375rem 1rem";
-    if (size === "small") return "0.375rem 0.75rem";
-    return "0.625rem 1.5rem";
+    if (size === 'large') return '0.625rem 1.5rem';
+    if (size === 'medium') return '0.4375rem 1rem';
+    if (size === 'small') return '0.375rem 0.75rem';
+    return '0.625rem 1.5rem';
   }};
   background: ${({ variant, disabled, color }) => {
     if (!disabled) {
-      if (variant === "primary") return `${color ? color : BmPrimaryBlue}`;
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      if (variant === "destructive") return `${BmSecondaryRed}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "neutral") return `${BmPrimaryWhite}`;
-      return `${color ? color : BmPrimaryBlue}`;
-    } else {
-      if (variant === "primary") return `${BmGrey100}`;
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      return `${BmGrey100}`;
+      if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+      if (variant === 'secondary') return 'none';
+      if (variant === 'tertiary') return 'none';
+      if (variant === 'destructive') return `${BmSecondaryRed}`;
+      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+      if (variant === 'neutral') return `${BmPrimaryWhite}`;
+      return `${color || BmPrimaryBlue}`;
     }
+    if (variant === 'primary') return `${BmGrey100}`;
+    if (variant === 'secondary') return 'none';
+    if (variant === 'tertiary') return 'none';
+    return `${BmGrey100}`;
   }};
 
   border: 0.071rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
-        return `${color ? color : BmPrimaryBlue}`;
-      } else {
-        if (variant === "primary") return `${BmGrey100}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
+        if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
+        return `${color || BmPrimaryBlue}`;
       }
+      if (variant === 'primary') return `${BmGrey100}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
 
   &:hover {
     background: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary")
-          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
-        if (variant === "neutral") return `${BmGrey50}`;
-        if (variant === "success") return `${BmSecondaryGreen8}`;
-        if (variant === "destructive") return `${BmSecondaryRed8}`;
+        if (variant === 'primary')
+          return `${darken(0.1, color || BmPrimaryBlue)}`;
+        if (variant === 'neutral') return `${BmGrey50}`;
+        if (variant === 'success') return `${BmSecondaryGreen8}`;
+        if (variant === 'destructive') return `${BmSecondaryRed8}`;
         if (!variant) {
-          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
+          return `${darken(0.1, color || BmPrimaryBlue)}`;
         }
       }
     }};
     border: 0.071rem solid
       ${({ variant, disabled, color }) => {
         if (!disabled) {
-          if (variant === "secondary")
-            return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
+          if (variant === 'secondary')
+            return `${darken(0.1, color || BmPrimaryBlue)}`;
         }
-        return "none";
+        return 'none';
       }};
   }
   &:active {
     background: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary")
-          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
-        if (variant === "neutral") return `${BmGrey100}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "destructive") return `${BmSecondaryRed}`;
+        if (variant === 'primary')
+          return `${darken(0.1, color || BmPrimaryBlue)}`;
+        if (variant === 'neutral') return `${BmGrey100}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
         if (!variant) {
-          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
+          return `${darken(0.1, color || BmPrimaryBlue)}`;
         }
       }
     }};
     box-shadow: ${({ variant, disabled }) => {
       if (!disabled) {
         if (
-          variant === "primary" ||
-          variant === "success" ||
-          variant === "destructive"
+          variant === 'primary' ||
+          variant === 'success' ||
+          variant === 'destructive'
         )
-          return "inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)";
+          return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
         if (!variant) {
-          return "inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)";
+          return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
         }
       }
     }};
     border: 0.071rem solid
       ${({ variant, disabled, color }) => {
         if (!disabled) {
-          if (variant === "secondary")
-            return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
+          if (variant === 'secondary')
+            return `${darken(0.1, color || BmPrimaryBlue)}`;
         }
-        return "none";
+        return 'none';
       }};
   }
 
   &:hover ${ButtonText} {
     color: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "secondary" || variant === "tertiary")
-          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
+        if (variant === 'secondary' || variant === 'tertiary')
+          return `${darken(0.1, color || BmPrimaryBlue)}`;
       }
     }};
   }
   &:active ${ButtonText} {
     color: ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "secondary" || variant === "tertiary")
-          return `${darken(0.1, color ? color : BmPrimaryBlue)}`;
+        if (variant === 'secondary' || variant === 'tertiary')
+          return `${darken(0.1, color || BmPrimaryBlue)}`;
       }
     }};
   }

package/src/lib/components/Cards/cards.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryWhite } from "../colors";
+import styled from 'styled-components';
+import { BmGrey400, BmPrimaryWhite } from '../colors';
 
 const BmCard = styled.div`
   display: flex;
@@ -14,7 +14,6 @@ const BmCard = styled.div`
     justify-content: space-between;
     margin-bottom: 0.5rem;
   }
-
 `;
 
 BmCard.Header = styled.div`

package/src/lib/components/Cards/cards.stories.js

@@ -1,17 +1,17 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmCard from "./cards";
-import { text, boolean } from "@storybook/addon-knobs";
-import "../../../main.scss";
-import { BmButton } from "../Buttons/buttons";
-import Image from "../../assets/beem.jpeg";
+import React from 'react';
+import { text, boolean } from '@storybook/addon-knobs';
+import BmCard from './cards';
+import '../../../main.scss';
+import { BmButton } from '../Buttons/buttons';
+import Image from '../../assets/beem.jpeg';
 
 export default {
   component: BmCard,
-  title: "components/Card",
+  title: 'components/Card',
   argTypes: {
     children: {
-      description: "Accordion Title Text",
+      description: 'Accordion Title Text',
       defaultValue: { summary: undefined },
     },
   },
@@ -19,9 +19,9 @@ export default {
 export const BasicCardSample = () => {
   return (
     <div>
-      <BmCard disabled={boolean("disabled", false)}>
+      <BmCard disabled={boolean('disabled', false)}>
         <BmCard.Header>
-          <h3>{text("children", "Card Header")}</h3>
+          <h3>{text('children', 'Card Header')}</h3>
         </BmCard.Header>
         <BmCard.Body>Card Body</BmCard.Body>
         <BmCard.Footer>Card Footer</BmCard.Footer>

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>
     </>