beem-component 1.0.2 → 1.0.6

package/src/lib/components/index.js

@@ -1,472 +1,76 @@
-import BmAccordion from "./Accordion";
-import { BmAvatar } from "./avatars";
-import { BmAlertIcon } from "./buttonAlertIcons";
-import { BmBtnIcon } from "./buttonIconsOnly";
-import { BmButton } from "./buttons";
-import { BmCheckboxToggler } from "./checkboxToggler";
-import { BmDropdown } from "./dropdown";
+import BmAccordion from "./Accordion/Accordion";
+import BmAvatar from "./Avatars/avatars";
+import { BmAlertIcon } from "./Buttons/buttonAlertIcons";
+import { BmBtnIcon } from "./Buttons/buttonIconsOnly";
+import { BmButton } from "./Buttons/buttons";
+import BmCard from "./Cards/cards";
+import { BmButtonDropDown } from "./dropdownButton";
+import { GlobalStyle } from "./globalStyles";
 import { BmInput } from "./input";
-import { BmLogo } from "./logo";
-import { BmSearch } from "./search";
-
-import {
-  BmTab,
-  BmTabItem,
-  BmTabWrapper,
-  BmTabText,
-  BmLeftTabIcon,
-  BmRightTabIcon,
-} from "./tabs";
-import { BmTag } from "./tags";
-
-// Navabar
-import {
-  BmNavbar,
-  BmNavbarItems,
-  GlobalNavbarWrapper,
-  OldBmNavbar,
-  BmNavBarProfile,
-  BmNavbarSearch,
-  BmNavbarLogo,
-} from "./navbar";
-
-// iconsStyles
+import { BmRouteLink } from "./RouteLink/link";
+import { BmListHeader } from "./Lists/listheader";
+import { BmRowLabel } from "./Lists/rowLabels";
+import BmModal from "./Modals/modal";
+import { BmProgressBar } from "./ProgressBar/progressbar";
+import { BmTab } from "./Tabs/tabs";
+import * as BmColors from "./colors";
+import { BmLoader } from "./Loader/loader";
+import { BmCheckbox } from "./checkbox";
 import {
-  BmButtonIcon,
-  BmSuccessIcon,
-  BmErrorIcon,
-  BmSearchIcon,
-  BmDropdownIcon,
-  BmDropupIcon,
   BmTagIcon,
   BmAvatarIcon,
+  BmIcons,
   BmChatbotIcon,
   BmEmojiIcon,
   BmQuickReplyIcon,
   BmSupport,
-  BmChatbot,
-  BmIcons,
   CopyToClipBoard,
 } from "./iconStyles";
+import { BmNoteBar } from "./NoteBar/noteBar";
+import { MainWrapper } from "../components/MainWrapper";
 
-import { Loader, BmLoader } from "./loaders";
-
-import { GlobalStyle } from "./globalStyles";
-
-// Main chat
-import {
-  BmChatWrapper,
-  BmChatText,
-  BmDisplayTime,
-  BmUserChat,
-  BmFileWrapper,
-  BmFileText,
-  FileIcons,
-  BmFileChat,
-  BmImageWrapper,
-  BmImage,
-  BmImageFileName,
-  BmImageChat,
-} from "./Chats/chat";
-import {
-  BmMessageTab,
-  BmMessageTabInput,
-  BmSend,
-  BmAttachment,
-  BmMessage,
-} from "./Chats/chatInput";
-
-import {
-  Main,
-  BmChat,
-  BmChatMenu,
-  MessageIn,
-  MessageOut,
-  MainWrapper,
-} from "./Chats/chatwrapper";
-
-// sidebar
-import {
-  BmSideBar,
-  BmSideBarSearch,
-  BmSideBarBtnIcon,
-  BmSideBarTab,
-} from "./sidebar";
-
-// Sidebar contacts
-import {
-  BmContact,
-  BmContactItem,
-  BmContactText,
-  BmContactName,
-  BmContactIcon,
-  BmMessageText,
-  BmMessageContact,
-  BmContactMessage,
-  BmContactDetails,
-  BmContactTime,
-  BmContactSideBar,
-  BmUnreadMessage,
-} from "./contacts";
-
-import * as BmColors from "../components/colors";
-import {
-  BmCustomerDetails,
-  BmCustomerInfoHeader,
-  BmCustomer,
-  BmCustomerInfoName,
-  BmMoreInfo,
-  BmBtnTag,
-  BmInfoTabWrapper,
-  BmIcon,
-  BmCustomerIcons,
-  BmCustomerInfoTab,
-} from "../components/CustomerInfo/customerInfo";
-
-import {
-  BmCustomerBar,
-  BmCustomerInfoAccordicon,
-} from "../components/CustomerInfo/customerInfoBar";
-
-import { BmButtonDropDown } from "../components/dropdownButton";
-import {
-  BmButtonDropdownItem,
-  BmDropDownItem,
-  BmDropDownMenu,
-  BmCustomizedDropdown,
-} from "../components/dropdownItems";
-
-import { BmProgressBar } from "../components/progressbar";
-
-import {
-  BmInfoAccordiconMenu,
-  BmInformation,
-  BmInfoHeaderText,
-  BmDropdownInfo,
-  BmInfoHeaderWrapper,
-  BmInfoHeader,
-  BmInfoContent,
-  BmInfoContentItem,
-  BmInfoContentLabel,
-  BmInfoContentValue,
-} from "../components/CustomerInfo/infoAccordion";
-import {
-  BmChatHeaderWrapper,
-  BmChatHeaderText,
-  BmChatHeaderTime,
-  BmChatHeaderInfoIcon,
-  BmChatHeader,
-} from "../components/chatHeader";
-
-import { BmChatInfoWrapper, BmChatMenuWrapper } from "./wrapper";
-
-import {
-  Overlay,
-  ModalContent,
-  ModalWrapper,
-  HeaderWrapper,
-  HeaderText,
-  Close,
-  CloseModal,
-  ModalHeader,
-  Modal,
-} from "./Modals/noteModalHeader";
-
-import { ModalBody } from "./Modals/noteModalBody";
-import { ModalFooter, BmFooterButtons } from "./Modals/noteModalFooter";
-
-import { BmReportsButton } from "./Reports/buttons";
-import {
-  BmCard,
-  CardTitleWrapper,
-  CardTitleText,
-  CardTitle,
-  BmCardBody,
-  BmCardBodyImg,
-  BmCardBodyText,
-  BmCardFooter,
-  BmCardFooterText,
-  BmCardDetails,
-} from "./Reports/cards";
-import {
-  BmReportsBody,
-  BmOverviewCards,
-  BmOverviewCharts,
-} from "./Reports/reportsBody";
-import {
-  BmReportsTitle,
-  BmReportsHeader,
-  BmReportsButtons,
-} from "./Reports/title";
-import {
-  BmReportsInfoHeader,
-  CloseNote,
-  BmReportsHeaderText,
-} from "./Reports/infoHeader";
-
-import {
-  BmChart,
-  BmChartHeader,
-  BmChartTitleText,
-  BmChartDetails,
-  BmChartBody,
-  BmChartBodyText,
-  BmChartBodyDetails,
-  BmChartHeading,
-  BmMainChartWrapper,
-  BmMainChartContent,
-  BmMainChart,
-} from "./Reports/charts";
-
-import {
-  BmAgentSearch,
-  BmAgentName,
-  BmAgentPill,
-  BmAgentButton,
-  BmPreviousAgentWrapper,
-  BmPreviousAgentTitle,
-  BmPreviousAgentContent,
-  BmPreviousAgentIcon,
-  BmPreviousAgent,
-  BmPreviousAgentName,
-  BmPreviousAgentMessage,
-} from "./Modals/modalBody";
-
-import { BmListHeader } from "./Lists/listheader";
-import { BmRowLabel } from "./Lists/rowLabels";
-import { BmContent } from "./SuperFluid/Content/index";
-import {
-  BmContentFooter,
-  BmContentTitle,
-  BmFooterLeft,
-  BmFooterRight,
-} from "./SuperFluid/ContentTitle.js";
-import {
-  BmSegmentCard,
-  BmSegmentSelector,
-  BmSegment,
-  BmSegmentCheckBox,
-  BmSegmentCompleteContent,
-  BmSegmentCompleteIcon,
-  BmSegmentCreateContent,
-} from "./SuperFluid/SegmentCard/index";
-import { BmInfoNote } from "./infoNote";
-import { BmCheckbox } from "./checkbox";
-import {
-  BmAddNote,
-  BmNoteInfo,
-  BmNote,
-  BmNoteFooter,
-  BmNoteDetails,
-} from "./CustomerInfo/notesInfo";
-import {
-  BmAddLabel,
-  BmLabelInfo,
-  BmLabels,
-  BmColorLabel,
-  BmColorLabelPicker,
-} from "./CustomerInfo/labelsInfo";
-import { BmAccordicon } from "./Accordicon";
-import { BmRouteLink } from "./Link";
+//Chat Components
+import BmChat from "../components/ChatBody/chatBody";
+import { BmChatHeader } from "./ChatHeader/chatHeader";
+import BmContactCard from "./ContactCards/contactCards";
+import BmInfoTab from "./InfoTab/infoTab";
+import BmCounter from "./MessageCounter/messageCounter";
 
 export {
-  BmColors,
   BmAccordion,
-  BmButton,
   BmAvatar,
   BmAlertIcon,
+  BmButton,
   BmBtnIcon,
-  BmCheckboxToggler,
-  BmDropdown,
-  BmInput,
-  BmLogo,
-  BmSearch,
+  BmColors,
+  BmCard,
+  BmListHeader,
+  BmRowLabel,
+  BmModal,
+  BmNoteBar,
+  BmProgressBar,
+  BmRouteLink,
   BmTab,
-  BmTabItem,
-  BmTabWrapper,
-  BmTabText,
-  BmLeftTabIcon,
-  BmRightTabIcon,
-  BmTag,
-  BmNavbar,
-  BmNavbarItems,
-  GlobalNavbarWrapper,
-  OldBmNavbar,
-  BmNavBarProfile,
-  BmNavbarSearch,
-  BmNavbarLogo,
-  BmChatWrapper,
-  BmChatText,
-  BmDisplayTime,
-  BmUserChat,
-  BmFileWrapper,
-  BmFileText,
-  FileIcons,
-  BmFileChat,
-  BmImageWrapper,
-  BmImage,
-  BmImageFileName,
-  BmImageChat,
-  BmMessageTab,
-  BmMessageTabInput,
-  BmSend,
-  BmAttachment,
-  BmMessage,
-  Main,
+  GlobalStyle,
   MainWrapper,
-  BmChat,
-  BmChatMenu,
-  MessageIn,
-  MessageOut,
-  BmSideBar,
-  BmSideBarSearch,
-  BmSideBarBtnIcon,
-  BmSideBarTab,
-  BmButtonIcon,
-  BmSuccessIcon,
-  BmErrorIcon,
-  BmSearchIcon,
-  BmDropdownIcon,
-  BmDropupIcon,
-  BmTagIcon,
+  // Old components to be refactored
+  BmButtonDropDown,
+  BmCheckbox,
+  BmInput,
+  BmLoader,
+  //Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
+  BmIcons,
+  BmTagIcon,
   BmChatbotIcon,
   BmEmojiIcon,
   BmQuickReplyIcon,
   BmSupport,
-  BmChatbot,
-  BmIcons,
-  BmContact,
-  BmContactItem,
-  BmContactText,
-  BmContactName,
-  BmContactIcon,
-  BmMessageText,
-  BmMessageContact,
-  BmContactMessage,
-  BmContactDetails,
-  BmContactTime,
-  BmContactSideBar,
-  BmUnreadMessage,
-  BmCustomerDetails,
-  BmCustomerInfoHeader,
-  BmCustomer,
-  BmCustomerInfoName,
-  BmMoreInfo,
-  BmBtnTag,
-  BmInfoTabWrapper,
-  BmIcon,
-  BmCustomerIcons,
-  BmCustomerInfoTab,
-  BmCustomerBar,
-  BmCustomerInfoAccordicon,
-  BmInfoAccordiconMenu,
-  BmInformation,
-  BmInfoHeaderText,
-  BmDropdownInfo,
-  BmInfoHeaderWrapper,
-  BmInfoHeader,
-  BmInfoContent,
-  BmInfoContentItem,
-  BmInfoContentLabel,
-  BmInfoContentValue,
-  BmChatHeaderWrapper,
-  BmChatHeaderText,
-  BmChatHeaderTime,
-  BmChatHeaderInfoIcon,
-  BmChatHeader,
-  BmChatInfoWrapper,
-  BmChatMenuWrapper,
-  Loader,
-  BmLoader,
-  BmButtonDropDown,
-  BmButtonDropdownItem,
-  BmDropDownItem,
-  BmDropDownMenu,
-  BmCustomizedDropdown,
-  GlobalStyle,
-  Overlay,
-  ModalContent,
-  ModalWrapper,
-  HeaderWrapper,
-  HeaderText,
-  Close,
-  CloseModal,
-  ModalHeader,
-  Modal,
-  BmAgentSearch,
-  BmAgentName,
-  BmAgentPill,
-  BmAgentButton,
-  BmPreviousAgentWrapper,
-  BmPreviousAgentTitle,
-  BmPreviousAgentContent,
-  BmPreviousAgentIcon,
-  BmPreviousAgent,
-  BmPreviousAgentName,
-  BmPreviousAgentMessage,
-  ModalBody,
-  ModalFooter,
-  BmFooterButtons,
-  BmReportsButton,
-  BmReportsBody,
-  BmReportsHeader,
-  CloseNote,
-  BmReportsHeaderText,
-  BmReportsTitle,
-  BmCard,
-  CardTitleWrapper,
-  CardTitleText,
-  CardTitle,
-  BmCardBody,
-  BmCardBodyImg,
-  BmCardBodyText,
-  BmCardFooter,
-  BmCardFooterText,
-  BmCardDetails,
-  BmChart,
-  BmChartHeader,
-  BmChartTitleText,
-  BmChartDetails,
-  BmChartBody,
-  BmChartBodyText,
-  BmChartBodyDetails,
-  BmChartHeading,
-  BmMainChartWrapper,
-  BmMainChartContent,
-  BmMainChart,
-  BmOverviewCards,
-  BmOverviewCharts,
-  BmReportsInfoHeader,
-  BmReportsButtons,
-  BmListHeader,
-  BmRowLabel,
-  BmSegmentCard,
-  BmSegmentSelector,
-  BmSegment,
-  BmSegmentCheckBox,
-  BmContentTitle,
-  BmContent,
-  BmFooterLeft,
-  BmFooterRight,
-  BmContentFooter,
-  BmInfoNote,
-  BmSegmentCompleteContent,
-  BmSegmentCompleteIcon,
-  BmSegmentCreateContent,
-  BmProgressBar,
-  BmCheckbox,
-  BmAddNote,
-  BmNoteInfo,
-  BmNote,
-  BmNoteFooter,
-  BmNoteDetails,
   CopyToClipBoard,
-  BmAddLabel,
-  BmLabelInfo,
-  BmLabels,
-  BmColorLabel,
-  BmColorLabelPicker,
-  BmAccordicon,
-  BmRouteLink,
+  //Chat Components
+  BmChatHeader,
+  BmChat,
+  BmInfoTab,
+  BmContactCard,
+  BmCounter,
 };

package/src/lib/components/input.js

@@ -1,5 +1,7 @@
+import { Done, ErrorOutline } from "@material-ui/icons";
 import React from "react";
 import styled from "styled-components";
+import { BmIcons } from ".";
 import {
   BmPrimaryWhite,
   BmGrey400,
@@ -114,8 +116,12 @@ export const BmInput = ({ id, iconSize, label, state, ...rest }) => {
           state={state}
           disabled={state === "disabled" ? true : false}
         />
-        {state && state === "complete" && <BmSuccessIcon size="small" />}
-        {state && state === "incomplete" && <BmErrorIcon size="small" />}
+        {state && state === "complete" && (
+          <BmIcons icon={<ErrorOutline />} size="small" />
+        )}
+        {state && state === "incomplete" && (
+          <BmIcons icon={<Done />} size="small" />
+        )}
       </BmInputWrapper>
       {label && (
         <BmInputLabel htmlFor={id} state={state} {...rest}>

package/src/lib/components/sidebar.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { BmBtnIcon } from "./buttonIconsOnly";
+import { BmBtnIcon } from "../components/Buttons/buttonIconsOnly";
 import { BmGrey400, BmPrimaryWhite } from "./colors";
 import { BmTab } from "./tabs";
 
@@ -11,9 +11,8 @@ export const BmSideBar = styled.div`
   max-height: 100%;
   height: 100%;
   overflow: auto;
-  max-width: 25%;
-  width: 25%;
-  ${'' /* border: 0.714rem solid black; */}
+  max-width: 20%;
+  width: 20%;
 `;
 
 export const BmSideBarSearch = styled.div`
@@ -21,6 +20,7 @@ export const BmSideBarSearch = styled.div`
   flex-direction: flex-start;
   align-items: center;
   padding: 1.714rem !important;
+  flex-wrap: wrap;
 `;
 
 export const BmSideBarBtnIcon = styled(BmBtnIcon)`