beem-component 1.0.1 → 1.0.5

package/src/lib/components/CustomerInfo/customerInfo.js

@@ -1,91 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryBlack,
-  BmPrimaryWhite,
-  BmSecondaryGrey,
-} from "../colors";
-import { BmButtonIcon } from "../iconStyles";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import { BmBtnIcon } from "../buttonIconsOnly";
-
-// Outer Box
-export const BmCustomerDetails = styled.div`
-  display: flex;
-  flex-direction: row;
-  background: ${BmPrimaryWhite};
-  border-bottom: 0.071rem solid ${BmGrey400};
-  padding: 1.714rem;
-`;
-
-// Customer Info Header Wrapper
-export const BmCustomerInfoHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 100%;
-  width: 100%;
-`;
-
-// Customer Name Wrapper
-export const BmCustomer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-export const BmCustomerInfoName = styled.h2`
-  color: ${BmPrimaryBlack};
-`;
-
-export const BmMoreInfo = (props) => {
-  return (
-    <BmButtonIcon
-      icon={<MoreVertIcon />}
-      color={`${BmSecondaryGrey}`}
-      {...props}
-    />
-  );
-};
-
-// Tag Details
-export const BmBtnTag = styled.h4`
-  text-align: center;
-  color: ${BmPrimaryBlack};
-  margin: 0.571rem 0rem;
-`;
-
-export const BmInfoTabWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0rem;
-`;
-
-export const BmIcon = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding: 0rem 1.714rem;
-  justify-content: space-between;
-`;
-
-export const BmCustomerIcons = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 1.143rem;
-  flex-wrap: wrap;
-`;
-
-export const BmCustomerInfoTab = ({ icon, children, ...rest }) => {
-  return (
-    <>
-      <BmInfoTabWrapper>
-        {icon && <BmBtnIcon icon={icon} {...rest} />}
-        <BmBtnTag {...rest}>{children}</BmBtnTag>
-      </BmInfoTabWrapper>
-    </>
-  );
-};

package/src/lib/components/CustomerInfo/customerInfoBar.js

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryWhite } from "../colors";
-
-export const BmCustomerBar = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: ${BmPrimaryWhite};
-  border: 0.071rem solid ${BmGrey400};
-  max-height: 100%;
-  height: 100%;
-  overflow: auto;
-  max-width: 30%;
-  width: 30%;
-`;
-
-
-export const BmCustomerInfoAccordicon = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 0rem;
-  overflow: auto;  
-  height: 40vh;
-`;

package/src/lib/components/CustomerInfo/infoAccordion.js

@@ -1,96 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryBlack,
-  BmPrimaryWhite,
-  BmSecondaryGrey,
-} from "../colors";
-import { BmDropdownIcon, BmDropupIcon } from "../iconStyles";
-
-export const BmInfoAccordiconMenu = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-export const BmInformation = styled.div`
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-`;
-
-export const BmInfoHeaderText = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const BmDropdownInfo = styled.div`
-  margin-right: 0.571rem;
-`;
-
-export const BmInfoHeaderWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding: 0.571rem 1.143rem;
-  background: ${BmPrimaryWhite};
-  box-shadow: ${(isOpen) => {
-    if (isOpen) return `inset 0rem 0.071rem 0rem ${BmGrey400}`;
-    return `inset 0rem -0.071rem 0rem ${BmGrey400}, inset 0rem 0.071rem 0rem ${BmGrey400};`;
-  }};
-`;
-
-export const BmInfoHeader = ({ children, isOpen, ...rest }) => {
-  return (
-    <>
-      <BmInfoHeaderWrapper {...rest}>
-        <BmDropdownInfo {...rest}>
-          {isOpen ? <BmDropupIcon {...rest} /> : <BmDropdownIcon {...rest} />}
-        </BmDropdownInfo>
-        <BmInfoHeaderText {...rest}>{children}</BmInfoHeaderText>
-      </BmInfoHeaderWrapper>
-    </>
-  );
-};
-
-export const BmInfoContent = styled.div`
-  display: ${({ isOpen }) => (isOpen ? "flex" : "none")}};
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 0rem 1.143rem 1.143rem;
-`;
-
-export const BmInfoContentItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 100%;
-  margin-bottom: 0.571rem;
-`;
-
-export const BmInfoContentLabel = styled.h4`
-  color: ${BmPrimaryBlack};
-  margin: 0rem;
-  text-align: left;
-  width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const BmInfoContentValue = styled.input`
-  text-align: right;
-  color: ${BmSecondaryGrey};
-  width: 40%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: none;
-  &:visited,
-  &:active,
-  &:hover,
-  &:focus {
-    outline: none !important;
-    text-decoration: none;
-    color: ${BmPrimaryBlack};
-  }
-  background: transparent;
-`;

package/src/lib/components/CustomerInfo/labelsInfo.js

@@ -1,37 +0,0 @@
-import styled from "styled-components";
-import { BmInput } from "../input";
-
-export const BmAddLabel = styled(BmInput)`
-  width: 100%;
-  margin-bottom: 0.5rem;
-`;
-
-export const BmLabels = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  flex-wrap: wrap;
-`;
-
-export const BmColorLabel = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-export const BmColorLabelPicker = styled.div`
-  width: 1.429rem;
-  height: 1.429rem;
-  border-radius: 50%;
-  margin: 0.5rem;
-  background: ${(props) => (props.color ? props.color : "green")};
-`;
-
-export const BmLabelInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  > *:not(:first-child) {
-    margin-top: 1.143rem;
-  }
-`;

package/src/lib/components/CustomerInfo/notesInfo.js

@@ -1,61 +0,0 @@
-import styled from "styled-components";
-import { BmGrey100, BmGrey400, BmSecondaryGrey } from "../colors";
-import { BmInputField } from "../input";
-
-export const BmAddNote = styled(BmInputField)`
-  padding: 1rem 1.143rem;
-  display: flex;
-  color: ${BmSecondaryGrey};
-  background: ${BmGrey100};
-  flex-grow: 1;
-  border: none !important;
-  &:visited,
-  &:active,
-  &:hover,
-  &:focus {
-    outline: none !important;
-    text-decoration: none !important;
-  }
-`;
-
-export const BmNoteInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  ${"" /* margin: 0rem 1.143rem; */}
-`;
-
-export const BmNote = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 1rem 1.143rem;
-  margin-top: 1.143rem;
-  p {
-    color: ${BmSecondaryGrey};
-  }
-
-  border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem;
-`;
-
-export const BmNoteDetails = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 0.857rem;
-  width: 50%;
-`;
-
-export const BmNoteFooter = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 0.857rem;
-  width: 100%;
-  > * {
-    &:last-child {
-      margin-left: auto;
-    }
-  }
-`;

package/src/lib/components/Modals/modalBody.js

@@ -1,66 +0,0 @@
-import styled from "styled-components";
-import { BmAvatar } from "../avatars";
-import { BmButton } from "../buttons";
-import { BmPrimaryBlack } from "../colors";
-import { BmPill } from "../pills";
-import { BmSearch } from "../search";
-
-export const BmAgentSearch = styled(BmSearch)`
-  width: 20vw;
-  max-width: 20vw;
-  display: flex-end;
-`;
-
-export const BmAgentName = styled.p`
-  color: ${BmPrimaryBlack};
-  margin-top: 1.714rem;
-`;
-
-export const BmAgentPill = styled(BmPill)`
-  margin-top: 0.571rem;
-`;
-
-export const BmAgentButton = styled(BmButton)`
-  margin-top: 1.143rem;
-`;
-
-export const BmPreviousAgentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0rem;
-  margin: 1.714rem 0rem;
-  width: 100%;
-`;
-
-export const BmPreviousAgentTitle = styled.p`
-  color: ${BmPrimaryBlack};
-  display: flex;
-`;
-
-export const BmPreviousAgentContent = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0rem;
-  margin-top: 0.571rem;
-  width: 100%;
-`;
-
-export const BmPreviousAgentIcon = styled(BmAvatar)`
-  margin-right: 1.143rem;
-`;
-
-export const BmPreviousAgent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-
-export const BmPreviousAgentName = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const BmPreviousAgentMessage = styled.p`
-  color: ${BmPrimaryBlack};
-`;

package/src/lib/components/Modals/noteModalBody.js

@@ -1,10 +0,0 @@
-import styled from "styled-components";
-
-export const ModalBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  ${'' /* padding: 0rem 1.143rem; */}
-  margin-top: 0.571rem;
-`;
-

package/src/lib/components/Modals/noteModalFooter.js

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const ModalFooter = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding: 1.143rem;
-  margin-top: 0.571rem;
-`;
-
-export const BmFooterButtons = styled.div`
-  display: flex;
-  margin-left: auto;
-  ${'' /* width: 50%; */}
-  align-items: center;
-  justify-content: space-between;
-`;

package/src/lib/components/Modals/noteModalHeader.js

@@ -1,103 +0,0 @@
-import React, { useEffect, useCallback } from "react";
-import { Clear } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmPrimaryBlack, BmPrimaryWhite } from "../colors";
-import { BmIcons } from "../iconStyles";
-
-export const Overlay = styled.div`
- 	position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-  background-color: ${BmPrimaryBlack};
-  opacity: 0.5;
-}
-`;
-export const ModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0rem 1.143rem;
-  border: 0.071rem solid black;
-  width: 30vw;
-  margin: auto;
-  background: ${BmPrimaryWhite};
-`;
-
-export const ModalWrapper = styled.div`
-  z-index: 9999;
-  overflow-x: auto;
-  overflow-y: auto;
-  outline: 0;
-  position: fixed;
-  height: auto;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-
-export const HeaderWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 1.143rem 0rem;
-`;
-
-export const HeaderText = styled.h2`
-  text-align: center;
-  display: flex;
-  color: ${BmPrimaryBlack};
-  margin-left: auto;
-`;
-
-export const Close = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
-`;
-
-export const CloseModal = ({ ...rest }) => {
-  return (
-    <Close>
-      <BmIcons size="xlarge" icon={<Clear />} {...rest} />
-    </Close>
-  );
-};
-
-export const ModalHeader = (props) => {
-  return (
-    <>
-      <HeaderWrapper>{props.children}</HeaderWrapper>
-    </>
-  );
-};
-
-export const Modal = ({ children, show, setShowModal }) => {
-  const keyPress = useCallback(
-    (e) => {
-      if (e.key === "Escape" && show) {
-        setShowModal(false);
-      }
-    },
-    [setShowModal, show],
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", keyPress);
-    return () => document.removeEventListener("keydown", keyPress);
-  }, [keyPress]);
-
-  return (
-    <>
-      {show && (
-        <>
-          <Overlay />
-          <ModalWrapper showModal={show}>
-            <ModalContent>{children}</ModalContent>
-          </ModalWrapper>
-        </>
-      )}
-    </>
-  );
-};

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

@@ -1,5 +0,0 @@
-import styled from "styled-components";
-
-export const BmReportsButton = styled.div`
-  margin: 0.5rem 0rem 1rem 0rem;
-`;

package/src/lib/components/Reports/charts.js

@@ -1,79 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryWhite, BmPrimaryBlack } from "../colors";
-
-export const BmChart = styled.div`
-  display: inline-block;
-  flex-direction: column;
-  background: ${BmPrimaryWhite};
-  border: 0.0625rem solid ${BmGrey400};
-  border-radius: 0.21875rem;
-  width: calc(50% - 0.75rem);
-`;
-
-export const BmChartHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 0rem 0rem 1rem;
-`;
-
-export const BmChartTitleText = styled.h3`
-  color: ${BmPrimaryBlack};
-  align-items: center;
-`;
-
-export const BmChartDetails = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const BmChartBody = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  padding: 0rem 1rem;
-`;
-
-export const BmChartBodyText = styled.h1`
-  display: flex;
-  color: ${BmPrimaryBlack};
-  align-items: center;
-`;
-
-export const BmChartBodyDetails = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const BmChartHeading = styled.h4`
-  display: flex;
-  color: ${BmPrimaryBlack};
-  align-items: center;
-  padding: 0rem 1rem;
-`;
-
-export const BmMainChartWrapper = styled.div`
-  display: flex;
-  ${"" /* background: ${BmPrimaryBlue}; */}
-  padding: 1rem;
-`;
-
-export const BmMainChartContent = styled.div`
-  display: flex;
-  ${"" /* background: ${BmPrimaryBlue}; */}
-  ${"" /* border: 0.0625rem solid ; */}
-  width: 100%;
-  height: 20vw;
-`;
-
-export const BmMainChart = (props) => {
-  return (
-    <BmMainChartWrapper>
-      <BmMainChartContent>{props.children}</BmMainChartContent>
-    </BmMainChartWrapper>
-  );
-};

package/src/lib/components/Reports/infoHeader.js

@@ -1,63 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryWhite,
-  BmPrimaryBlue,
-  BmSecondaryGrey,
-} from "../colors";
-import { BmIcons } from "../iconStyles";
-import InfoIcon from "@material-ui/icons/Info";
-import { Clear } from "@material-ui/icons";
-
-export const BmReportsInfoHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  background: ${BmPrimaryWhite};
-  border: 0.0625rem solid ${BmGrey400};
-  border-radius:  0.21875rem;
-`;
-
-export const IconWrapper = styled.div`
-  margin-right: 0.5rem;
-`;
-
-export const CloseButtonWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
-`;
-
-export const CloseNote = () => {
-  return (
-    <CloseButtonWrapper>
-      <BmIcons icon={<Clear />} />
-    </CloseButtonWrapper>
-  );
-};
-
-export const TextHeaderWrapper = styled.div`
-  display: flex;
-  flex-direction: flex-start;
-  align-items: center;
-`;
-
-export const BmReportsHeaderNote = styled.h4`
-  color: ${BmSecondaryGrey};
-`;
-
-export const BmReportsHeaderText = (props) => {
-  return (
-    <>
-      <TextHeaderWrapper>
-        <IconWrapper props={props}>
-          <BmIcons color={`${BmPrimaryBlue}`} icon={<InfoIcon />} {...props} />
-        </IconWrapper>
-        <BmReportsHeaderNote>{props.children}</BmReportsHeaderNote>
-      </TextHeaderWrapper>
-    </>
-  );
-};

package/src/lib/components/Reports/reportsBody.js

@@ -1,29 +0,0 @@
-import styled from "styled-components";
-import { BmGrey50 } from "../colors";
-
-export const BmReportsBody = styled.div`
-  background: ${BmGrey50};
-  border-radius: 0.21875rem;
-  justify-content: flex-start;
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const BmOverviewCards = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: flex-start;
-  align-items: center;
-  margin-bottom: 1rem;
-  width: 100%;
-`;
-
-export const BmOverviewCharts = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: flex-start;
-  align-items: center;
-  margin-bottom: 1rem;
-  width: 100%;
-`;

package/src/lib/components/Reports/title.js

@@ -1,19 +0,0 @@
-import styled from "styled-components";
-import { BmPrimaryBlack, BmPrimaryWhite } from "../colors";
-import { BmButtonDropDown } from "../dropdownButton";
-
-export const BmReportsHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-`;
-
-export const BmReportsTitle = styled.h1`
-  color: ${BmPrimaryBlack};
-`;
-
-export const BmReportsButtons = styled(BmButtonDropDown)`
-  background: ${BmPrimaryWhite};
-`;