beem-component 1.0.2 → 1.0.6

package/src/lib/components/Buttons/Stories/buttonAlertIcons.stories.js

@@ -0,0 +1,42 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmAlertIcon } from "../buttonAlertIcons";
+import { AssignmentLateOutlined } from "@material-ui/icons";
+
+export default {
+  component: BmAlertIcon,
+  title: "components/Buttons/AlertIcons",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size",
+      defaultValue: { summary: "large" },
+    },
+    icon: {
+      description: "Material UI Icons",
+    },
+    color: {
+      description: "Color of the icon",
+      defaultValue: { summary: "#575757" },
+    },
+    badgeContent: {
+      description: "Badge Content",
+    },
+    badgeColor: {
+      description: "Color of the badge content",
+      defaultValue: { summary: "#F62E48" },
+    },
+  },
+};
+
+const MainButtonAlertIcon = (args) => <BmAlertIcon {...args} />;
+
+export const ButtonAlertIcon = MainButtonAlertIcon.bind({});
+ButtonAlertIcon.args = {
+  icon: <AssignmentLateOutlined />,
+  badgeContent: 4,
+  badgeColor: "red",
+  size: "large",
+  color: "black",
+};

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

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmBtnIcon } from "../buttonIconsOnly";
+import { Favorite } from "@material-ui/icons";
+
+export default {
+  component: BmBtnIcon,
+  title: "components/Buttons/IconsOnly",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size",
+      defaultValue: { summary: "large" },
+    },
+    variant: {
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "success",
+        "neutral",
+        "destructive",
+        "active",
+        "enabled",
+      ],
+      control: { type: "select" },
+      description: "Variant",
+      defaultValue: { summary: "primary" },
+    },
+    icon: {
+      description: "Material UI Icons",
+    },
+    color: {
+      description: "Color of the button",
+      defaultValue: { summary: "primary color" },
+    },
+  },
+};
+
+const MainButtonIcon = (args) => <BmBtnIcon {...args} />;
+
+export const ButtonIcon = MainButtonIcon.bind({});
+ButtonIcon.args = {
+  icon: <Favorite />,
+  size: "large",
+  variant: "primary",
+  color: undefined,
+};

package/src/lib/components/{buttonAlertIcons.js → Buttons/buttonAlertIcons.js}

@@ -1,8 +1,14 @@
-import React from 'react';
+import React from "react";
 import styled from "styled-components";
+import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
-import { BmSecondaryGrey, BmSecondaryRed, BmPrimaryWhite } from "./colors";
+import {
+  BmSecondaryGrey,
+  BmSecondaryRed,
+  BmPrimaryWhite,
+} from "../colors";
 import Badge from "@material-ui/core/Badge";
+import { PoppinsMedium } from "../typography";
 
 const size = (props) => {
   if (props.size === "small") return "1.429rem";
@@ -22,22 +28,21 @@ const AlertIcon = {
   root: {
     height: (props) => size(props),
     width: (props) => size(props),
-    fill: (props) => props.color ||`${BmSecondaryGrey}`
+    fill: (props) => props.color || `${BmSecondaryGrey}`,
   },
 };
 
-const BadgeIcon = (props) => ({
+const BadgeIcon = () => ({
   badge: {
     height: (props) => Badgesize(props),
     width: (props) => Badgesize(props),
     minWidth: (props) => Badgesize(props),
-    background:(props) => props.badgeColor || `${BmSecondaryRed}`,
+    background: (props) => props.badgeColor || `${BmSecondaryRed}`,
     color: `${BmPrimaryWhite}`,
-    fontFamily: "Poppins",
+    fontFamily: `${PoppinsMedium}`,
     fontStyle: "normal",
     fontWeight: 500,
     fontSize: "0.643rem",
-    lineHeight: "0.929rem",
     display: "flex",
     alignItems: "center",
     textAlign: "center",
@@ -69,8 +74,6 @@ export const BmBtnIconWrapper = styled.button`
   justify-content: center;
   align-items: center;
   padding: 0.536rem;
-  height: 3.357rem;
-  ${"" /* added */}
   border: none;
   background: none;
 `;
@@ -89,3 +92,11 @@ export const BmAlertIcon = (props) => {
     </BmBtnIconWrapper>
   );
 };
+
+BmAlertIcon.propTypes = {
+  size: PropTypes.string,
+  badgeColor: PropTypes.string,
+  badgeContent: PropTypes.string,
+  icon: PropTypes.node,
+  color: PropTypes.string,
+};

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/{buttonIconsOnly.js → Buttons/buttonIconsOnly.js}

@@ -1,5 +1,7 @@
 import React from "react";
 import styled from "styled-components";
+import PropTypes from "prop-types";
+
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -8,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;
@@ -31,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}`;
@@ -75,3 +77,11 @@ export const BmBtnIcon = (props) => {
     </BeemButtonIcon>
   );
 };
+
+BmBtnIcon.propTypes = {
+  size: PropTypes.string,
+  variant: PropTypes.string,
+  icon: PropTypes.node,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+};

package/src/lib/components/{buttons.js → 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,
@@ -13,9 +13,9 @@ import {
   BmSecondaryCyan,
   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 }) => {
@@ -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}`;
@@ -161,11 +161,11 @@ const BeemButton = styled.button`
 `;
 
 export const BmLeftIcon = styled(BmButtonIcon)`
-  padding-right: 0.5rem;
+  margin-right: 0.5rem;
 `;
 
 export const BmRightIcon = styled(BmButtonIcon)`
-  padding-left: 0.5rem;
+  margin-left: 0.5rem;
 `;
 export const BmButton = (props) => {
   const {
@@ -219,9 +219,9 @@ export const BmButton = (props) => {
 
 BmButton.propTypes = {
   size: PropTypes.string,
-  variant: PropTypes.string.isRequired,
-};
-
-BmButton.defaultProps = {
-  onClick: undefined,
+  variant: PropTypes.string,
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
 };

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

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { BmGrey400, BmPrimaryWhite } from "../colors";
+
+const BmCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: ${BmPrimaryWhite};
+  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;
+`;
+
+BmCard.Body = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0rem 1rem;
+`;
+
+BmCard.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-top: 0.071rem solid ${BmGrey400};
+  padding: 1rem;
+  align-items: center;
+`;
+
+export default BmCard;

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

@@ -0,0 +1,50 @@
+/* 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";
+
+export default {
+  component: BmCard,
+  title: "components/Card",
+  argTypes: {
+    children: {
+      description: "Accordion Title Text",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+export const BasicCardSample = () => {
+  return (
+    <div>
+      <BmCard disabled={boolean("disabled", false)}>
+        <BmCard.Header>
+          <h3>{text("children", "Card Header")}</h3>
+        </BmCard.Header>
+        <BmCard.Body>Card Body</BmCard.Body>
+        <BmCard.Footer>Card Footer</BmCard.Footer>
+      </BmCard>
+    </div>
+  );
+};
+
+export const Example = () => {
+  return (
+    <BmCard>
+      <BmCard.Header>
+        <h3>Overview</h3>
+      </BmCard.Header>
+      <BmCard.Body>
+        <img src={Image} alt="Imagebody" />
+      </BmCard.Body>
+      <BmCard.Footer>
+        <BmButton size="small">Send</BmButton>
+        <BmButton variant="tertiary" size="small">
+          View
+        </BmButton>
+      </BmCard.Footer>
+    </BmCard>
+  );
+};

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;