beem-component 1.0.2 → 1.0.3

package/src/CHAT.js

@@ -1,170 +0,0 @@
-import React, { useState } from "react";
-// import "./lib/main.css";
-import SideBar from "./examples/SideBar";
-import { Main, MainWrapper } from "./lib/components/Chats/chatwrapper";
-import { Chat } from "./examples/Chat";
-import Navbars from "./examples/Navbar";
-import CustomerInformation from "./examples/CustomerInfo";
-import {
-  BmChatHeader,
-  BmChatHeaderText,
-  BmChatHeaderTime,
-  BmChatHeaderWrapper,
-} from "./lib/components/chatHeader";
-import {
-  BmButtonIcon,
-  BmChatbot,
-  BmIcons,
-  BmSupport,
-} from "./lib/components/iconStyles";
-import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
-import { BmChatInfoWrapper, BmChatMenuWrapper } from "./lib/components/wrapper";
-import { BmButtonDropDown } from "./lib/components/dropdownButton";
-import {
-  BmButtonDropdownItem,
-  BmDropDownItem,
-  BmDropDownMenu,
-  BmCustomizedDropdown,
-} from "./lib/components/dropdownItems";
-import { GlobalStyle } from "./lib/components/globalStyles";
-import {
-  ModalHeader,
-  Modal,
-  HeaderText,
-  CloseModal,
-} from "./lib/components/Modals/noteModalHeader";
-import { ModalBody } from "./lib/components/Modals/noteModalBody";
-import {
-  BmAgentButton,
-  BmAgentName,
-  BmAgentPill,
-  BmAgentSearch,
-  BmPreviousAgent,
-  BmPreviousAgentContent,
-  BmPreviousAgentIcon,
-  BmPreviousAgentMessage,
-  BmPreviousAgentName,
-  BmPreviousAgentTitle,
-  BmPreviousAgentWrapper,
-} from "./lib/components/Modals/modalBody";
-import { Add, Favorite, KeyboardArrowRight } from "@material-ui/icons";
-import { BmButton } from "./lib/components/buttons";
-import {
-  BmFooterButtons,
-  ModalFooter,
-} from "./lib/components/Modals/noteModalFooter";
-
-export const App = () => {
-  const [dropDownItem, setDropdownItem] = useState(false);
-  const [showModal, setShowModal] = useState(false);
-  return (
-    <>
-      <GlobalStyle />
-      <Navbars />
-      <MainWrapper>
-        <Main>
-          <SideBar />
-          <BmChatInfoWrapper>
-            <BmChatHeaderWrapper>
-              <BmChatHeader>
-                <BmChatHeaderText>Phone Number</BmChatHeaderText>
-                <BmChatHeaderTime>3.00</BmChatHeaderTime>
-                <BmButtonIcon icon={<ErrorOutlineIcon />} size="small" />
-              </BmChatHeader>
-              <BmCustomizedDropdown>
-                <BmButtonDropDown
-                  size="medium"
-                  onClick={() => setDropdownItem(!dropDownItem)}
-                  variant="primary"
-                >
-                  End Session
-                </BmButtonDropDown>
-                <BmDropDownMenu>
-                  <BmButtonDropdownItem isOpen={dropDownItem}>
-                    <BmDropDownItem
-                      size="small"
-                      leadingIcon={<BmSupport />}
-                      onClick={() => {
-                        setDropdownItem(!dropDownItem);
-                        setShowModal(true);
-                      }}
-                    >
-                      Transfer to Agent
-                    </BmDropDownItem>
-                    <BmDropDownItem
-                      size="small"
-                      leadingIcon={<BmChatbot />}
-                      onClick={() => {
-                        setDropdownItem(!dropDownItem);
-                      }}
-                    >
-                      Transfer to Bot
-                    </BmDropDownItem>
-                  </BmButtonDropdownItem>
-                </BmDropDownMenu>
-              </BmCustomizedDropdown>
-            </BmChatHeaderWrapper>
-            <BmChatMenuWrapper>
-              <Chat />
-              <CustomerInformation />
-            </BmChatMenuWrapper>
-          </BmChatInfoWrapper>
-          <Modal
-            show={showModal}
-            setShowModal={() => {
-              setShowModal(!showModal);
-            }}
-          >
-            <ModalHeader>
-              <HeaderText>Transfer to Agent</HeaderText>
-              <CloseModal
-                onClick={() => {
-                  setShowModal(!showModal);
-                }}
-              />
-            </ModalHeader>
-            <ModalBody>
-              <BmAgentSearch placeholder="Search for an agent" />
-              <BmAgentName>Selected Agent</BmAgentName>
-              <BmAgentPill leadingIcon={<Favorite />} size="xsmall" type="">
-                Label
-              </BmAgentPill>
-              <BmAgentButton
-                size="small"
-                variant="secondary"
-                trailingIcon={<Add />}
-              >
-                Add a note
-              </BmAgentButton>
-              <BmPreviousAgentWrapper>
-                <BmPreviousAgentTitle>Previous Agent</BmPreviousAgentTitle>
-                <BmPreviousAgentContent>
-                  <BmPreviousAgentIcon user="default" />
-                  <BmPreviousAgent>
-                    <BmPreviousAgentName>Juma Doe</BmPreviousAgentName>
-                    <BmPreviousAgentMessage>
-                      Handled Support
-                    </BmPreviousAgentMessage>
-                  </BmPreviousAgent>
-                  <BmIcons icon={<KeyboardArrowRight />} />
-                </BmPreviousAgentContent>
-              </BmPreviousAgentWrapper>
-            </ModalBody>
-            <ModalFooter>
-              <BmFooterButtons>
-                <BmButton variant="tertiary" size="medium">
-                  Cancel
-                </BmButton>
-                <BmButton variant="primary" size="medium">
-                  Transfer
-                </BmButton>
-              </BmFooterButtons>
-            </ModalFooter>
-          </Modal>
-        </Main>
-      </MainWrapper>
-    </>
-  );
-};
-
-export default App;

package/src/Complete.js

@@ -1,48 +0,0 @@
-import React from "react";
-import { BmContent } from "./lib/components/SuperFluid/Content";
-import { BmProgressBar } from "./lib/components/progressbar";
-import {
-  BmContentFooter,
-  BmFooterRight,
-} from "./lib/components/SuperFluid/ContentTitle.js/index.js";
-import {
-  BmSegment,
-  BmSegmentCompleteIcon,
-  BmSegmentCompleteContent,
-} from "./lib/components/SuperFluid/SegmentCard";
-import { BmButton } from "./lib/components/buttons";
-
-export const Complete = () => {
-  return (
-    <>
-      <BmContent>
-        <BmProgressBar value="100" />
-        <BmSegment>
-          <BmSegmentCompleteContent>
-            <BmSegmentCompleteIcon />
-            <h1>Your customer segments have been saved</h1>
-            <p>
-              Congrats! Your customer segements have been saved. You can
-              instantly use them to create a campaign or use any of our products
-            </p>
-            <h4>View your segments</h4>
-          </BmSegmentCompleteContent>
-        </BmSegment>
-        <BmContentFooter>
-          <BmFooterRight>
-            <div>
-              <BmButton variant="tertiary" size="medium">
-                Finish
-              </BmButton>
-            </div>
-            <div>
-              <BmButton variant="primary" size="medium">
-                Create Campaign
-              </BmButton>
-            </div>
-          </BmFooterRight>
-        </BmContentFooter>
-      </BmContent>
-    </>
-  );
-};

package/src/CreateSegments.js

@@ -1,48 +0,0 @@
-import React from "react";
-import { BmContent } from "./lib/components/SuperFluid/Content";
-import { BmProgressBar } from "./lib/components/progressbar";
-import {
-  BmContentFooter,
-  BmContentTitle,
-  BmFooterRight,
-} from "./lib/components/SuperFluid/ContentTitle.js/index.js";
-import {
-  BmSegment,
-  BmSegmentCreateContent,
-} from "./lib/components/SuperFluid/SegmentCard";
-import { BmButton } from "./lib/components/buttons";
-import { BmInfoNote } from "./lib/components/infoNote";
-
-export const CreateSegment = () => {
-  return (
-    <>
-      <BmContent>
-        <BmProgressBar value="100" />
-        <BmContentTitle>Choose what segments you want to keep</BmContentTitle>
-        <BmSegment>
-          <BmSegmentCreateContent>
-            <BmInfoNote type="info">
-              Your segment will take some time to process. We will notify you
-              when it is ready.
-            </BmInfoNote>
-            <h2>Segment Creation Status</h2>
-          </BmSegmentCreateContent>
-        </BmSegment>
-        <BmContentFooter>
-          <BmFooterRight>
-            <div>
-              <BmButton variant="tertiary" size="medium">
-                Finish
-              </BmButton>
-            </div>
-            <div>
-              <BmButton variant="primary" size="medium">
-                Create Campaign
-              </BmButton>
-            </div>
-          </BmFooterRight>
-        </BmContentFooter>
-      </BmContent>
-    </>
-  );
-};

package/src/FileUploadSFL.js

@@ -1,110 +0,0 @@
-import React, { useState } from "react";
-import { BmContent } from "./lib/components/SuperFluid/Content";
-import { BmProgressBar } from "./lib/components/progressbar";
-import {
-  BmContentFooter,
-  BmContentTitle,
-  BmFooterLeft,
-  BmFooterRight,
-} from "./lib/components/SuperFluid/ContentTitle.js";
-import {
-  BmSegment,
-  BmSegmentSelector,
-  BmSegmentCard,
-  BmSegmentCheckBox,
-} from "./lib/components/SuperFluid/SegmentCard";
-import { BmListHeader } from "./lib/components/Lists/listheader";
-import { KeyboardArrowRight } from "@material-ui/icons";
-import { BmRowLabel } from "./lib/components/Lists/rowLabels";
-import { BmSearch } from "./lib/components/search";
-import { BmButton } from "./lib/components/buttons";
-
-export const UploadFile = () => {
-  const [value, setCheckbox] = useState(false);
-
-  return (
-    <>
-      <BmContent>
-        <BmProgressBar value="10" />
-        <BmContentTitle>Choose what segments you want to keep</BmContentTitle>
-        <BmSegment>
-          <BmSegmentCard>
-            <BmListHeader>Attributes</BmListHeader>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>Age</BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>
-              Gender
-            </BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>
-              Organization
-            </BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>
-              Occupation
-            </BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>
-              Location
-            </BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>Value</BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>
-              Status
-            </BmRowLabel>
-            <BmRowLabel trailingIcon={<KeyboardArrowRight />}>Other</BmRowLabel>
-          </BmSegmentCard>
-          <BmSegmentSelector>
-            <BmSearch placeholder="Search for attributes"></BmSearch>
-            <BmSegmentCheckBox
-              checked={value}
-              onChange={() => setCheckbox(!value)}
-              value={value}
-              label="High Value Customers"
-            />
-            <BmSegmentCheckBox
-              checked={value}
-              onChange={() => setCheckbox(!value)}
-              value={value}
-              label="Average Value Customers"
-            />
-            <BmSegmentCheckBox
-              checked={value}
-              onChange={() => setCheckbox(!value)}
-              value={value}
-              label="Low Value Customers"
-            />
-            <BmSegmentCheckBox
-              checked={value}
-              onChange={() => setCheckbox(!value)}
-              value={value}
-              label="Frequent Customers"
-            />
-            <BmSegmentCheckBox
-              checked={value}
-              onChange={() => setCheckbox(!value)}
-              value={value}
-              label="Occasional Customers"
-            />
-          </BmSegmentSelector>
-        </BmSegment>
-        <BmContentFooter>
-          <BmFooterLeft>
-            <div>
-              <BmButton variant="secondary" size="medium">
-                Go Back
-              </BmButton>
-            </div>
-          </BmFooterLeft>
-          <BmFooterRight>
-            <div>
-              <BmButton variant="tertiary" size="medium">
-                Finish Later
-              </BmButton>
-            </div>
-            <div>
-              <BmButton variant="primary" size="medium">
-                Upload
-              </BmButton>
-            </div>
-          </BmFooterRight>
-        </BmContentFooter>
-      </BmContent>
-    </>
-  );
-};

package/src/examples/CustomerInfo.js

@@ -1,248 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useState } from "react";
-import {
-  BmCustomer,
-  BmCustomerDetails,
-  BmCustomerInfoHeader,
-  BmCustomerIcons,
-  BmCustomerInfoName,
-  BmCustomerInfoTab,
-  BmMoreInfo,
-} from "../lib/components/CustomerInfo/customerInfo";
-import {
-  BmCustomerBar,
-  BmCustomerInfoAccordicon,
-} from "../lib/components/CustomerInfo/customerInfoBar";
-import CallIcon from "@material-ui/icons/Call";
-import EmailIcon from "@material-ui/icons/Email";
-import NoteAddIcon from "@material-ui/icons/NoteAdd";
-import AddIcon from "@material-ui/icons/Add";
-import PriorityHighIcon from "@material-ui/icons/PriorityHigh";
-import {
-  BmInfoContent,
-  BmInfoContentItem,
-  BmInfoContentLabel,
-  BmInfoContentValue,
-  BmInfoHeader,
-  BmInformation,
-} from "../lib/components/CustomerInfo/infoAccordion";
-import {
-  BmNoteInfo,
-  BmAddNote,
-  BmNote,
-  BmNoteDetails,
-  BmNoteFooter,
-} from "../lib/components/CustomerInfo/notesInfo";
-import {
-  BmAddLabel,
-  BmColorLabel,
-  BmColorLabelContainer,
-  BmColorLabelPicker,
-  BmLabelInfo,
-  BmLabels,
-} from "../lib/components/CustomerInfo/labelsInfo";
-import {
-  BmIcons,
-  BmTagIcon,
-  CopyToClipBoard,
-} from "../lib/components/iconStyles";
-import { Delete, Edit } from "@material-ui/icons";
-import { BmTag } from "../lib/components/tags";
-import { BmAccordicon } from "../lib/components/Accordicon";
-import { ModalBody } from "../lib/components/Modals/noteModalBody";
-import {
-  BmFooterButtons,
-  ModalFooter,
-} from "../lib/components/Modals/noteModalFooter";
-import {
-  CloseModal,
-  HeaderText,
-  Modal,
-  ModalHeader,
-} from "../lib/components/Modals/noteModalHeader";
-import { BmInput } from "../lib/components/input";
-import { BmButton } from "../lib/components/buttons";
-
-const CustomerInformation = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  const toggling = () => setIsOpen(!isOpen);
-  const [showModal, setShowModal] = useState(false);
-
-  return (
-    <>
-      {/* Main Customer SideBar */}
-      <BmCustomerBar>
-        {/* Main Header */}
-        <BmCustomerDetails>
-          <BmCustomerInfoHeader>
-            {/* Contact Name */}
-            <BmCustomer>
-              <BmCustomerInfoName>Phone Number</BmCustomerInfoName>
-              <BmMoreInfo />
-            </BmCustomer>
-            {/* Buttons */}
-            <BmCustomerIcons>
-              {/* <BmIcon> */}
-              <BmCustomerInfoTab icon={<CallIcon />}>Call</BmCustomerInfoTab>
-              <BmCustomerInfoTab icon={<EmailIcon />}>Email</BmCustomerInfoTab>
-              <BmCustomerInfoTab icon={<NoteAddIcon />}>Note</BmCustomerInfoTab>
-              <BmCustomerInfoTab icon={<AddIcon />}>Log</BmCustomerInfoTab>
-              <BmCustomerInfoTab icon={<PriorityHighIcon />} variant="enabled">
-                Priority
-              </BmCustomerInfoTab>
-              {/* </BmIcon> */}
-            </BmCustomerIcons>
-          </BmCustomerInfoHeader>
-        </BmCustomerDetails>
-        {/* Information */}
-        <BmCustomerInfoAccordicon>
-          <BmInformation>
-            <BmInfoHeader onClick={toggling} isOpen={isOpen}>
-              Information
-            </BmInfoHeader>
-            <BmInfoContent isOpen={isOpen}>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>First Name</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Last Name</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Phone Number</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Email</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>SmartCard No.</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Priority</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Preferred Language</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Source</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-              <BmInfoContentItem>
-                <BmInfoContentLabel>Facebook ID</BmInfoContentLabel>
-                <BmInfoContentValue placeholder="Enter here" />
-              </BmInfoContentItem>
-            </BmInfoContent>
-          </BmInformation>
-          <BmInformation>
-            {/* Notes */}
-            <BmAccordicon dropdown onClick={toggling} isOpen={isOpen}>
-              <h3>Notes</h3>
-            </BmAccordicon>
-            <BmInfoContent isOpen={isOpen}>
-              <BmInfoContentItem>
-                <BmNoteInfo>
-                  <BmAddNote type="text" placeholder="Add Note" />
-                  <BmNote>
-                    <p>
-                      User reports that his channels dont seem to be working
-                      despite following the instructions
-                    </p>
-                    <BmNoteDetails>
-                      <BmIcons
-                        icon={<Edit />}
-                        size="xsmall"
-                        onClick={() => alert("hello")}
-                      />
-                      <BmIcons icon={<CopyToClipBoard />} size="xsmall" />
-                      <BmIcons icon={<Delete />} size="xsmall" />
-                    </BmNoteDetails>
-                    <BmNoteFooter>
-                      <p>Added by: </p>
-                      <p>3.00pm</p>
-                    </BmNoteFooter>
-                  </BmNote>
-                </BmNoteInfo>
-              </BmInfoContentItem>
-            </BmInfoContent>
-          </BmInformation>
-          {/* Labels */}
-          <BmInformation>
-            <BmAccordicon dropdown onClick={toggling} isOpen={isOpen}>
-              <h3>Labels</h3>
-              <a
-                onClick={() => {
-                  setShowModal(true);
-                }}
-              >
-                Manage Labels
-              </a>
-            </BmAccordicon>
-            <BmInfoContent isOpen={isOpen}>
-              <BmInfoContentItem>
-                <BmLabelInfo>
-                  {/* SearchIcon */}
-                  <BmAddNote type="text" placeholder="Add Note" />
-                  <h4>Added Labels</h4>
-                  <BmLabels>
-                    <BmTag variant="#33b1ba" trailingIcon={<Delete />}>
-                      A
-                    </BmTag>
-                    <BmTag variant="purple" trailingIcon={<Delete />}>
-                      B
-                    </BmTag>
-                    <BmTag variant="orange" trailingIcon={<Delete />}>
-                      C
-                    </BmTag>
-                  </BmLabels>
-                </BmLabelInfo>
-              </BmInfoContentItem>
-            </BmInfoContent>
-          </BmInformation>
-        </BmCustomerInfoAccordicon>
-      </BmCustomerBar>
-      <Modal
-        show={showModal}
-        setShowModal={() => {
-          setShowModal(!showModal);
-        }}
-      >
-        <ModalHeader>
-          <HeaderText>Add Labels</HeaderText>
-          <CloseModal
-            onClick={() => {
-              setShowModal(!showModal);
-            }}
-          />
-        </ModalHeader>
-        <ModalBody>
-          <BmAddLabel type="text" placeholder="Add label" />
-          <BmColorLabel>
-            {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
-              <BmColorLabelPicker
-                color={color}
-                onClick={() => {
-                  alert(color);
-                }}
-              />
-            ))}
-          </BmColorLabel>
-        </ModalBody>
-        <ModalFooter>
-          <BmFooterButtons>
-            <BmButton variant="primary" size="medium">
-              Save
-            </BmButton>
-          </BmFooterButtons>
-        </ModalFooter>
-      </Modal>
-    </>
-  );
-};
-
-export default CustomerInformation;

package/src/lib/assets/content_copy_black.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>

package/src/lib/components/Accordicon.js

@@ -1,43 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { BmPrimaryWhite, BmGrey400 } from "./colors";
-import { BmDropdownIcon, BmDropupIcon } from "./iconStyles";
-
-export const BmAccordiconMenu = styled.div`
-  display: flex;
-  flex-direction: row;
-  ${"" /* justify-content: space-between; */}
-  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};`;
-  }};
-  > *:not(:last-child) {
-    margin-right: 0.5rem;
-  }
-`;
-
-export const BmAccordiconDetails = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-export const BmAccordicon = ({
-  children,
-  isOpen,
-  dropdown,
-  trailingIcon,
-  ...rest
-}) => {
-  return (
-    <>
-      <BmAccordiconMenu {...rest}>
-        {dropdown &&
-          (isOpen ? <BmDropupIcon {...rest} /> : <BmDropdownIcon {...rest} />)}
-        <BmAccordiconDetails>{children}</BmAccordiconDetails>
-      </BmAccordiconMenu>
-    </>
-  );
-};