beem-component 1.8.2 → 1.8.4

package/src/examples/SideBar.js

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
-import { BmTabItem } from "../lib/components/tabs";
-import { BmSearch } from "../lib/components/search";
-import ForumIcon from "@material-ui/icons/Forum";
+import React, { useState } from 'react';
+import ForumIcon from '@material-ui/icons/Forum';
+import { FilterList } from '@material-ui/icons';
+import { BmTabItem } from '../lib/components/tabs';
+import { BmSearch } from '../lib/components/search';
 import {
   BmSideBar,
   BmSideBarBtnIcon,
   BmSideBarSearch,
   BmSideBarTab,
-} from "../lib/components/sidebar";
-import { FilterList } from "@material-ui/icons";
+} from '../lib/components/sidebar';
 import {
   BmContact,
   BmContactItem,
@@ -20,10 +20,10 @@ import {
   BmMessageContact,
   BmMessageText,
   BmUnreadMessage,
-} from "../lib/components/contacts";
-import { BmAvatar } from "../lib/components/avatars";
-import { BmTag } from "../lib/components/tags";
-import { BmContactIcon } from "../lib/components/contacts";
+  BmContactIcon,
+} from '../lib/components/contacts';
+import { BmAvatar } from '../lib/components/avatars';
+import { BmTag } from '../lib/components/tags';
 
 export const SideBar = () => {
   const [selectedContact, setSelectedContact] = useState(false);
@@ -44,7 +44,7 @@ export const SideBar = () => {
         <BmSideBarBtnIcon
           icon={<FilterList />}
           variant="neutral"
-          onClick={() => alert("hello")}
+          onClick={() => alert('hello')}
         />
       </BmSideBarSearch>
       {/* Contacts */}

package/src/examples/Tags.js

@@ -1,6 +1,6 @@
-import { Favorite } from "@material-ui/icons";
-import React, { Component } from "react";
-import { BmTag } from "../lib/components/tags";
+import { Favorite } from '@material-ui/icons';
+import React, { Component } from 'react';
+import { BmTag } from '../lib/components/tags';
 
 export class Tags extends Component {
   render() {

package/src/lib/components/ButtonGroup/buttonGroup.js

@@ -0,0 +1,38 @@
+/* eslint-disable consistent-return */
+/* eslint-disable no-unused-vars */
+import { darken } from 'polished';
+import styled from 'styled-components';
+import { BmGrey50, BmPrimaryWhite } from '../colors';
+import { BmTab } from '../Tabs/tabs';
+
+const BmButtonGroup = styled.div`
+  display: inline-flex;
+  border: 0.071rem solid ${BmPrimaryWhite};
+  background: ${(props) => (props.bgColor ? props.bgColor : BmGrey50)};
+  padding: 0.25rem;
+`;
+
+const Item = styled(BmTab)`
+  ${({ active }) =>
+    active &&
+    `  
+    border: 0.071rem solid ${BmPrimaryWhite};
+    background: ${BmPrimaryWhite} !important;
+  `};
+  box-shadow: none !important;
+  background: ${(props) => (props.bgColor ? props.bgColor : BmGrey50)};
+  border-radius: 0rem;
+  padding: 0.5rem 2rem;
+  &:hover {
+    background: ${({ bgColor, active }) => {
+      if (!active) {
+        if (bgColor) return `${darken(0.1, bgColor)}`;
+        return `${darken(0.1, BmGrey50)}`;
+      }
+    }};
+  }
+`;
+
+BmButtonGroup.Item = Item;
+
+export default BmButtonGroup;

package/src/lib/components/Buttons/buttonDropdown copy.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { KeyboardArrowDown } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmBtnIcon } from "./buttonIconsOnly";
-import { BmButton } from "./buttons";
+import React from 'react';
+import { KeyboardArrowDown } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmBtnIcon } from './buttonIconsOnly';
+import { BmButton } from './buttons';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -14,17 +14,17 @@ import {
   BmGrey50,
   BmSecondaryGreen8,
   BmSecondaryRed8,
-} from "../colors";
+} from '../colors';
 
 const ButtonDropdownWrapper = styled.div`
   display: flex;
   &:hover {
     background: ${({ variant, disabled }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmSecondaryCyan}`;
-        if (variant === "neutral") return `${BmGrey50}`;
-        if (variant === "success") return `${BmSecondaryGreen8}`;
-        if (variant === "destructive") return `${BmSecondaryRed8}`;
+        if (variant === 'primary') return `${BmSecondaryCyan}`;
+        if (variant === 'neutral') return `${BmGrey50}`;
+        if (variant === 'success') return `${BmSecondaryGreen8}`;
+        if (variant === 'destructive') return `${BmSecondaryRed8}`;
         if (!variant) {
           return `${BmSecondaryCyan}`;
         }
@@ -33,18 +33,18 @@ const ButtonDropdownWrapper = styled.div`
     border: 0.071rem solid
       ${({ variant, disabled }) => {
         if (!disabled) {
-          if (variant === "secondary") return `${BmSecondaryCyan}`;
+          if (variant === 'secondary') return `${BmSecondaryCyan}`;
         }
-        return "none";
+        return 'none';
       }};
   }
   &:active {
     background: ${({ variant, disabled }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryBlue}`;
-        if (variant === "neutral") return `${BmGrey100}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "destructive") return `${BmSecondaryRed}`;
+        if (variant === 'primary') return `${BmPrimaryBlue}`;
+        if (variant === 'neutral') return `${BmGrey100}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
         if (!variant) {
           return `${BmPrimaryBlue}`;
         }
@@ -53,22 +53,22 @@ const ButtonDropdownWrapper = styled.div`
     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 }) => {
         if (!disabled) {
-          if (variant === "secondary") return `${BmPrimaryBlue}`;
+          if (variant === 'secondary') return `${BmPrimaryBlue}`;
         }
-        return "none";
+        return 'none';
       }};
   }
 `;
@@ -76,52 +76,49 @@ const ButtonDropdownWrapper = styled.div`
 const Dropdown = styled(BmBtnIcon)`
   background: ${({ variant, disabled }) => {
     if (!disabled) {
-      if (variant === "primary") return `${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}`;
+      if (variant === 'primary') return `${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 `${BmPrimaryBlue}`;
-    } else {
-      if (variant === "primary") return `${BmGrey100}`;
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      return `${BmGrey100}`;
     }
+    if (variant === 'primary') return `${BmGrey100}`;
+    if (variant === 'secondary') return 'none';
+    if (variant === 'tertiary') return 'none';
+    return `${BmGrey100}`;
   }};
   border: 0.0625rem solid
     ${({ variant, disabled }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryBlue}`;
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
+        if (variant === 'primary') return `${BmPrimaryBlue}`;
+        if (variant === 'secondary') return `${BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
         return `${BmPrimaryBlue}`;
-      } else {
-        if (variant === "primary") return `${BmGrey100}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
       }
+      if (variant === 'primary') return `${BmGrey100}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
 
   border-left: 0.071rem solid
     ${({ variant, disabled }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${BmPrimaryBlue}`;
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
+        if (variant === 'primary') return `${BmPrimaryWhite}`;
+        if (variant === 'secondary') return `${BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
         return `${BmPrimaryWhite}`;
-      } else {
-        if (variant === "primary") return `${BmGrey400}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
       }
+      if (variant === 'primary') return `${BmGrey400}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
   border-top-left-radius: 0.071rem;
   border-bottom-left-radius: 0.071rem;

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

@@ -1,13 +1,13 @@
-import { Home, KeyboardArrowDown } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmBtnIcon } from "./buttonIconsOnly";
-import { BmButton } from "./buttons";
+import { Home, KeyboardArrowDown } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmBtnIcon } from './buttonIconsOnly';
+import { BmButton } from './buttons';
 
 export const BmButtonDropdown = ({ children }) => {
   return (
-    <div style={{ display: "flex", flexDirection: "row" }}>
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
       <BmButton>{children}</BmButton>
-      <BmButton leadingIcon={<KeyboardArrowDown />}></BmButton>
+      <BmButton leadingIcon={<KeyboardArrowDown />} />
     </div>
   );
 };

package/src/lib/components/Chats/chat.js

@@ -1,6 +1,6 @@
-import { AttachFile, Done, DoneAll, GetApp } from "@material-ui/icons";
-import React from "react";
-import styled from "styled-components";
+import { AttachFile, Done, DoneAll, GetApp } from '@material-ui/icons';
+import React from 'react';
+import styled from 'styled-components';
 import {
   BmGrey400,
   BmPrimaryBlack,
@@ -9,8 +9,8 @@ import {
   BmGrey100,
   BmSecondaryGrey,
   BmSecondaryGreen,
-} from "../colors";
-import { BmIcons } from "../iconStyles";
+} from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const BmChatWrapper = styled.div`
   display: flex;
@@ -19,8 +19,8 @@ export const BmChatWrapper = styled.div`
   padding: 1.143rem;
   background: ${({ type }) => {
     if (type) {
-      if (type === "inbound") return `${BmPrimaryWhite}`;
-      if (type === "outbound") return `${BmPrimaryBlue}`;
+      if (type === 'inbound') return `${BmPrimaryWhite}`;
+      if (type === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -38,8 +38,8 @@ export const BmChatText = styled.p`
   max-width: 100%;
   color: ${({ type }) => {
     if (type) {
-      if (type === "inbound") return `${BmPrimaryBlack}`;
-      if (type === "outbound") return `${BmPrimaryWhite}`;
+      if (type === 'inbound') return `${BmPrimaryBlack}`;
+      if (type === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryBlack}`;
   }};
@@ -79,17 +79,17 @@ export const BmUserChat = ({
         </BmChatText>
       </BmChatWrapper>
       <BmDisplay>
-        {type === "outbound" && status === "sent" && (
+        {type === 'outbound' && status === 'sent' && (
           <BmIcons
             icon={<DoneAll />}
-            size={size || "small"}
+            size={size || 'small'}
             color={color || `${BmSecondaryGreen}`}
           />
         )}
-        {type === "outbound" && status === "failed" && (
+        {type === 'outbound' && status === 'failed' && (
           <BmIcons
             icon={<Done />}
-            size={size || "small"}
+            size={size || 'small'}
             color={color || `${BmPrimaryBlack}`}
           />
         )}
@@ -99,7 +99,7 @@ export const BmUserChat = ({
   );
 };
 
-//File Attachments
+// File Attachments
 export const BmFileWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -107,8 +107,8 @@ export const BmFileWrapper = styled.div`
   padding: 1.143rem;
   background: ${({ type }) => {
     if (type) {
-      if (type === "inbound") return `${BmPrimaryWhite}`;
-      if (type === "outbound") return `${BmPrimaryBlue}`;
+      if (type === 'inbound') return `${BmPrimaryWhite}`;
+      if (type === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -127,8 +127,8 @@ export const BmFileText = styled.p`
   max-width: 100%;
   color: ${({ type }) => {
     if (type) {
-      if (type === "inbound") return `${BmPrimaryBlue}`;
-      if (type === "outbound") return `${BmPrimaryWhite}`;
+      if (type === 'inbound') return `${BmPrimaryBlue}`;
+      if (type === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryBlue}`;
   }};
@@ -139,8 +139,8 @@ export const BmFileText = styled.p`
 export const FileIcons = styled(BmIcons)`
   color: ${({ type }) => {
     if (type) {
-      if (type === "inbound") return `${BmPrimaryBlack}`;
-      if (type === "outbound") return `${BmPrimaryWhite}`;
+      if (type === 'inbound') return `${BmPrimaryBlack}`;
+      if (type === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryBlack}`;
   }};
@@ -152,13 +152,13 @@ export const BmFileChat = ({ children, displayTime, type, ...rest }) => {
       <BmFileWrapper type={type} {...rest}>
         <BmIcons
           icon={<AttachFile />}
-          color={type === "outbound" ? `${BmPrimaryWhite}` : `${BmPrimaryBlue}`}
+          color={type === 'outbound' ? `${BmPrimaryWhite}` : `${BmPrimaryBlue}`}
         />
         <BmFileText type={type}>{children}</BmFileText>
         <BmIcons
           icon={<GetApp />}
           color={
-            type === "outbound" ? `${BmPrimaryWhite}` : `${BmSecondaryGrey}`
+            type === 'outbound' ? `${BmPrimaryWhite}` : `${BmSecondaryGrey}`
           }
         />
       </BmFileWrapper>
@@ -179,7 +179,7 @@ export const BmImageWrapper = styled.div`
 
 export const BmImage = styled.img`
   width: 100%;
-  ${"" /* height: 100%; */}
+  ${'' /* height: 100%; */}
   object-fit: cover;
   flex-grow: 1;
 `;

package/src/lib/components/Chats/chatInput.js

@@ -1,14 +1,14 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
+import { Send } from '@material-ui/icons';
 import {
   BmGrey400,
   BmGrey50,
   BmPrimaryWhite,
   BmSecondaryGrey,
-} from "../colors";
-import { BmEmojiIcon } from "../iconStyles";
-import { Send } from "@material-ui/icons";
-import { BmInputField } from "../input";
+} from '../colors';
+import { BmEmojiIcon } from '../iconStyles';
+import { BmInputField } from '../input';
 
 // Main wrapper
 export const BmMessageTab = styled.div`
@@ -49,13 +49,13 @@ export const BmSend = (props) => {
 };
 
 // Div for attachments
-export const BmAttachment = styled("div")`
+export const BmAttachment = styled('div')`
   justify-content: center;
   padding-right: 1.143rem !important;
 `;
 
 // Div for message input
-export const BmMessage = styled("div")`
+export const BmMessage = styled('div')`
   display: flex;
   flex-direction: row;
   align-items: center;

package/src/lib/components/Chats/chatwrapper.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmBgGreyBlue, BmGrey400 } from "../colors";
+import styled from 'styled-components';
+import { BmBgGreyBlue, BmGrey400 } from '../colors';
 
 // Main wrapper
 export const Main = styled.div`

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

@@ -61,4 +61,3 @@ export const hiddenToggleLabel = () => {
     />
   );
 };
-

package/src/lib/components/chatHeader.js

@@ -1,5 +1,10 @@
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryBlack, BmPrimaryWhite, BmSecondaryGrey } from "./colors";
+import styled from 'styled-components';
+import {
+  BmGrey400,
+  BmPrimaryBlack,
+  BmPrimaryWhite,
+  BmSecondaryGrey,
+} from './colors';
 
 export const BmChatHeaderWrapper = styled.div`
   display: flex;
@@ -33,6 +38,6 @@ export const BmChatHeader = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding : 1.286rem 0rem;
+  padding: 1.286rem 0rem;
   margin: 0rem;
 `;

package/src/lib/components/contacts.js

@@ -1,11 +1,11 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 import {
   BmGrey100,
   BmPrimaryBlack,
   BmPrimaryBlue,
   BmPrimaryWhite,
-} from "./colors";
+} from './colors';
 
 export const BmContactSideBar = styled.div`
   display: flex;

package/src/lib/components/dropdown.js

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import { BmPrimaryWhite, BmSecondaryGrey, BmGrey400 } from "./colors";
-import { BmDropdownIcon } from "./iconStyles";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { BmPrimaryWhite, BmSecondaryGrey, BmGrey400 } from './colors';
+import { BmDropdownIcon } from './iconStyles';
 
 const BmDropdownWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: static;
-  ${"" /* box-sizing: border-box; */}
+  ${'' /* box-sizing: border-box; */}
   margin: 0rem;
   padding: 0.5rem 1.143rem;
   background: ${BmPrimaryWhite};
@@ -80,8 +80,8 @@ export const BmDropdown = ({ ...rest }) => {
       <DownIcon />
       {isOpen && (
         <DropDownContent>
-          <BmDropdownItem onClick={() => setValue("any")}>ANY</BmDropdownItem>
-          <BmDropdownItem onClick={() => setValue("all")}>ALL</BmDropdownItem>
+          <BmDropdownItem onClick={() => setValue('any')}>ANY</BmDropdownItem>
+          <BmDropdownItem onClick={() => setValue('all')}>ALL</BmDropdownItem>
         </DropDownContent>
       )}
     </BmDropdownWrapper>

package/src/lib/components/dropdownItems.js

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
-import { BmGrey100, BmGrey400, BmPrimaryBlack, BmPrimaryWhite } from "./colors";
-import { BmIcons } from "./iconStyles";
+import React from 'react';
+import styled from 'styled-components';
+import { BmGrey100, BmGrey400, BmPrimaryBlack, BmPrimaryWhite } from './colors';
+import { BmIcons } from './iconStyles';
 
 export const BmCustomizedDropdown = styled.div`
   display: flex;
@@ -9,8 +9,8 @@ export const BmCustomizedDropdown = styled.div`
 `;
 
 export const BmButtonDropdownItem = styled.div`
-  ${"" /* display: inline-block; */}
-  display: ${({ isOpen }) => (isOpen ? "flex" : "none")}};
+  ${'' /* display: inline-block; */}
+  display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')}};
   flex-direction: column;
   ${'' /* align-items: flex-start; */}
   padding: 0.286rem 0rem;