beem-component 1.0.4 → 1.0.8

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

@@ -0,0 +1,147 @@
+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,
+  BmSecondaryRed,
+  BmSecondaryDarkGreen,
+  BmGrey400,
+  BmGrey100,
+  BmSecondaryCyan,
+  BmGrey50,
+  BmSecondaryGreen8,
+  BmSecondaryRed8,
+} 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) {
+          return `${BmSecondaryCyan}`;
+        }
+      }
+    }};
+    border: 0.071rem solid
+      ${({ variant, disabled }) => {
+        if (!disabled) {
+          if (variant === "secondary") return `${BmSecondaryCyan}`;
+        }
+        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) {
+          return `${BmPrimaryBlue}`;
+        }
+      }
+    }};
+    box-shadow: ${({ variant, disabled }) => {
+      if (!disabled) {
+        if (
+          variant === "primary" ||
+          variant === "success" ||
+          variant === "destructive"
+        )
+          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)";
+        }
+      }
+    }};
+    border: 0.071rem solid
+      ${({ variant, disabled }) => {
+        if (!disabled) {
+          if (variant === "secondary") return `${BmPrimaryBlue}`;
+        }
+        return "none";
+      }};
+  }
+`;
+
+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}`;
+      return `${BmPrimaryBlue}`;
+    } else {
+      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}`;
+        return `${BmPrimaryBlue}`;
+      } else {
+        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}`;
+        return `${BmPrimaryWhite}`;
+      } else {
+        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;
+  padding: 0rem;
+`;
+
+export const Button = styled(BmButton)`
+  border-top-right-radius: 0.071rem;
+  border-bottom-right-radius: 0.071rem;
+  border-radius: none;
+  border-right: none;
+`;
+
+export const BmButtonDropDown = ({ children, ...rest }) => {
+  return (
+    <>
+      <ButtonDropdownWrapper {...rest}>
+        <Button {...rest}>{children}</Button>
+        <Dropdown {...rest} icon={<KeyboardArrowDown />} />
+      </ButtonDropdownWrapper>
+    </>
+  );
+};

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

@@ -0,0 +1,13 @@
+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" }}>
+      <BmButton>{children}</BmButton>
+      <BmButton leadingIcon={<KeyboardArrowDown />}></BmButton>
+    </div>
+  );
+};

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

@@ -33,7 +33,7 @@ const BeemButtonIcon = styled.button`
       return `${BmGrey100}`;
     }
   }};
-  border: 0.0625rem solid
+  border: 0.071rem solid
     ${({ variant, disabled }) => {
       if (!disabled) {
         if (variant === "active") return `${BmPrimaryBlue}`;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-
+//TODO: Button Links Pending
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -71,7 +71,7 @@ const BeemButton = styled.button`
     }
   }};
 
-  border: 0.0625rem solid
+  border: 0.071rem solid
     ${({ variant, disabled }) => {
       if (!disabled) {
         if (variant === "primary") return `${BmPrimaryBlue}`;
@@ -100,7 +100,7 @@ const BeemButton = styled.button`
         }
       }
     }};
-    border: 0.0625rem solid
+    border: 0.071rem solid
       ${({ variant, disabled }) => {
         if (!disabled) {
           if (variant === "secondary") return `${BmSecondaryCyan}`;
@@ -133,7 +133,7 @@ const BeemButton = styled.button`
         }
       }
     }};
-    border: 0.0625rem solid
+    border: 0.071rem solid
       ${({ variant, disabled }) => {
         if (!disabled) {
           if (variant === "secondary") return `${BmPrimaryBlue}`;

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

@@ -1,23 +1,18 @@
-import React from "react";
 import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryBlack,
-  BmPrimaryWhite,
-  BmPrimaryBlue,
-} from "../colors";
+import { BmGrey400, BmPrimaryWhite } from "../colors";
 
-export const BmCard = styled.div`
+const BmCard = styled.div`
   display: flex;
   flex-direction: column;
   background: ${BmPrimaryWhite};
-  border: 0.0625rem solid ${BmGrey400};
+  border: 0.071rem solid ${BmGrey400};
   border-radius: 0.21875rem;
 `;
 
 BmCard.Header = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   padding: 1rem 1rem 0rem 1rem;
 `;
 
@@ -30,41 +25,13 @@ BmCard.Body = styled.div`
   padding: 0rem 1rem;
 `;
 
-export const CardTitleText = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const BmCardBodyText = styled.h1`
-  display: flex;
-  color: ${BmPrimaryBlack};
-  align-items: center;
-`;
-
-export const BmCardBodyImg = styled.div`
-  display: flex;
-  background: ${BmPrimaryBlue};
-  height: 3rem;
-  width: 3rem;
-`;
-
 BmCard.Footer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  border-top: 0.0625rem solid ${BmGrey400};
+  border-top: 0.071rem solid ${BmGrey400};
   padding: 1rem;
   align-items: center;
 `;
 
-export const BmCardFooterText = styled.p`
-  display: flex;
-  color: ${BmPrimaryBlack};
-  align-items: center;
-`;
-
-export const BmCardDetails = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export default BmCard;
+export default BmCard;

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

@@ -1,11 +1,9 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from "react";
 import BmCard from "./cards";
-import { text, boolean, select } from "@storybook/addon-knobs";
+import { text, boolean } from "@storybook/addon-knobs";
 import "../../../main.scss";
-import { Favorite, Home } from "@material-ui/icons";
 import { BmButton } from "../Buttons/buttons";
-import { BmTag } from "../tags";
 import Image from "../../assets/beem.jpeg";
 
 export default {

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

@@ -0,0 +1,145 @@
+import { Done, DoneAll } from "@material-ui/icons";
+import React from "react";
+import styled from "styled-components";
+import BmAvatar from "../Avatars/avatars";
+import { BmIcons } from "../iconStyles";
+import {
+  BmGrey400,
+  BmGrey50,
+  BmPrimaryWhite,
+  BmPrimaryBlue,
+  BmPrimaryBlack,
+  BmSecondaryDarkGreen,
+} from "../colors";
+
+const BmChat = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+`;
+
+BmChat.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 1.5rem;
+`;
+
+const Details = styled.div`
+  display: flex;
+  ${"" /* align-items: center; */}
+  justify-content: ${({ state }) => {
+    if (state === "inbound") {
+      return "flex-start";
+    }
+    if (state === "outbound") {
+      return "flex-end";
+    }
+    return "row";
+  }};
+  > *:not(:last-child) {
+    margin-right: 1rem;
+  }
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+  margin: 0rem;
+`;
+
+const MessageDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 50%;
+  > * {
+    margin-top: 0.5rem;
+  }
+`;
+
+const Messages = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.143rem;
+  background: ${({ state }) => {
+    if (state) {
+      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}`;
+    }
+    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";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey400};
+  word-break: break-all;
+  margin: 0rem;
+`;
+
+const MessagesSubDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  margin-top: 0.5rem;
+`;
+
+const handleState = ({ session }) => {
+  if (session === "bot") {
+    return <BmAvatar size="small" user="chatbot" />;
+  }
+  if (session === "live") {
+    return <BmAvatar size="small" user="employee" />;
+  }
+};
+
+BmChat.Details = ({
+  children,
+  state,
+  displayTime,
+  status,
+  session,
+  ...rest
+}) => {
+  return (
+    <Details state={state} {...rest}>
+      {state === "inbound" && session && handleState({ state, session })}
+      <MessageDetails>
+        <Messages state={state}>{children}</Messages>
+        <MessagesSubDetails>
+          {displayTime && displayTime}
+          {status === "sent" && (
+            <BmIcons icon={<DoneAll />} color={`${BmSecondaryDarkGreen}`} size="small" />
+          )}
+          {status === "failed" && <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />}
+        </MessagesSubDetails>
+      </MessageDetails>
+      {state === "outbound" && session && handleState({ state, session })}
+    </Details>
+  );
+};
+
+BmChat.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-top: 0.071rem solid ${BmGrey400};
+  padding: 0.5rem 0rem;
+  align-items: center;
+  justify-content: center;
+  background: ${BmGrey50};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+
+export default BmChat;

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

@@ -0,0 +1,48 @@
+/* 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 BmAvatar from "../Avatars/avatars";
+import { DoneAll } from "@material-ui/icons";
+import { BmInput } from "../input";
+
+export default {
+  component: BmChat,
+  title: "components/Chat/ChatBody",
+};
+
+export const ChatBody = () => {
+  return (
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+        >
+          <p>Inbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+      </BmChat.Body>
+      <BmChat.Footer>
+        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+        <BmInput placeholder="Enter Message" />
+        <BmIcons icon={<SendIcon />} size="xlarge" />
+      </BmChat.Footer>
+    </BmChat>
+  );
+};

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

@@ -0,0 +1,16 @@
+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};
+  padding: 1rem;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  button {
+    margin-left: auto;
+  }
+`;

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

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmButton } from "../Buttons/buttons";
+import { BmChatHeader } from "./chatHeader";
+
+export default {
+  component: BmChatHeader,
+  title: "components/Chat/ChatHeader",
+};
+
+export const ChatHeader = () => {
+  return (
+    <BmChatHeader>
+      <h2>Contact Name</h2>
+      <p>Last seen: 00:00</p>
+      <BmButton size="medium">End Session</BmButton>
+    </BmChatHeader>
+  );
+};

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

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { BmGrey100 } from "../colors";
+
+export const BmContactCard = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  > *:not(:last-child) {
+    margin-right: 1rem;
+  }
+  &:hover {
+    background: ${BmGrey100};
+  }
+
+  ${({ active }) =>
+    active &&
+    `    
+    background: ${BmGrey100};
+  `}
+  cursor: pointer;
+  padding: 1rem 1.5rem;
+`;
+
+BmContactCard.Profile = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+BmContactCard.Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+BmContactCard.SubDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: flex-start;
+  }
+  ${'' /* TODO */}
+  ${'' /* > :last-child {
+    margin-left: auto;
+  } */}
+`;
+
+export default BmContactCard;

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

@@ -0,0 +1,34 @@
+/* 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";
+
+export default {
+  component: { BmContactCard, BmAvatar, BmTag, BmCounter },
+  title: "components/ContactCard",
+};
+
+export const ContactCard = () => {
+  return (
+    <BmContactCard>
+      <BmContactCard.Profile>
+        <BmAvatar user="chatbot" size="medium" />
+      </BmContactCard.Profile>
+      <BmContactCard.Details>
+        <BmContactCard.SubDetails>
+          <h3>Contact Names</h3>
+        </BmContactCard.SubDetails>
+        <BmContactCard.SubDetails>
+          <p>Message text</p>
+          <BmCounter>10</BmCounter>
+        </BmContactCard.SubDetails>
+        <BmContactCard.SubDetails>
+          <BmTag variant="success">label</BmTag>
+          <p>10:00 am</p>
+        </BmContactCard.SubDetails>
+      </BmContactCard.Details>
+    </BmContactCard>
+  );
+};

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

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { BmGrey400 } from "../colors";
+
+const BmInfoTab = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  border: 0.071rem solid ${BmGrey400};
+  > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+BmInfoTab.Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+BmInfoTab.Tabs = styled.div`
+  display: flex;
+  flex-direction: column;
+  >*:not(:first-child) {
+    margin-top: 0.5rem;
+  }
+`;
+
+export default BmInfoTab;

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

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