beem-component 1.0.2 → 1.0.6

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,58 @@
+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;
+`;
+
+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>
+  );
+};

package/src/lib/components/Lists/listBox.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { BmGrey400, BmPrimaryWhite } from "../colors";
+import PropTypes from "prop-types";
+
+const show = (isOpen) => {
+  if (isOpen !== undefined) {
+    if (isOpen === true) {
+      return `display: flex;
+      position: absolute;
+      margin-top: 0.5rem`;
+    }
+    if (isOpen === false) {
+      return `display: none;
+      position: absolute;
+      margin-top: 0.5rem`;
+    }
+  }
+  return "flex";
+};
+export const BmListBox = styled.div`
+  ${(props) => show(props.isOpen)};
+  flex-direction: column;
+  padding: 0.286rem 0rem;
+  background: ${BmPrimaryWhite};
+  border: 0.071rem solid ${BmGrey400};
+  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);
+  border-radius: 0.21875rem;
+  z-index: 99999;
+  cursor: pointer;
+`;
+
+BmListBox.propTypes = {
+  isOpen: PropTypes.bool,
+}

package/src/lib/components/Lists/listBox.stories.js

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React, { useState } from "react";
+import { BmListBox } from "./listBox";
+import { KeyboardArrowRight } from "@material-ui/icons";
+import { BmRowLabel } from "./rowLabels";
+import { BmButton } from "../Buttons/buttons";
+
+export default {
+  component: BmListBox,
+  title: "components/Lists/ListBox",
+  argTypes: {
+    isOpen: {
+      description:
+        "true/false (optional), Used for handling the display of listbox",
+    },
+  },
+};
+
+export const ListBox = () => {
+  return (
+    <BmListBox>
+      <BmRowLabel trailingIcon={<KeyboardArrowRight />} size="large">
+        <h4>Row Label</h4>
+      </BmRowLabel>
+      <BmRowLabel size="large">
+        <h4>Row Label</h4>
+      </BmRowLabel>
+    </BmListBox>
+  );
+};
+
+export const FunctionalListBox = () => {
+  const [List, showList] = useState(true);
+  return (
+    <>
+      <BmButton onClick={() => showList(!List)}>Click Me!</BmButton>
+      <BmListBox isOpen={List}>
+        <BmRowLabel trailingIcon={<KeyboardArrowRight />} size="large">
+          <h4>Row Label</h4>
+        </BmRowLabel>
+        <BmRowLabel size="large">
+          <h4>Row Label</h4>
+        </BmRowLabel>
+      </BmListBox>
+    </>
+  );
+};

package/src/lib/components/Lists/listHeader.stories.js

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmListHeader } from "./listheader";
+import "../../../main.scss";
+import { Favorite } from "@material-ui/icons";
+
+export default {
+  component: BmListHeader,
+  title: "components/Lists/ListHeader",
+  argType: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the trailing icon",
+      defaultValue: { summary: "large" },
+    },
+    trailingIcon: {
+      description: "Material-UI Icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    color: {
+      description: "Color of the Icon",
+    },
+    children: {
+      description: "List header text",
+    },
+  },
+};
+
+const MainListHeader = (args) => <BmListHeader {...args} />;
+
+export const ListHeader = MainListHeader.bind({});
+ListHeader.args = {
+  children: <h3>List Header</h3>,
+  trailingIcon: <Favorite />,
+};

package/src/lib/components/Lists/listheader.js

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { BmPrimaryBlack, BmPrimaryBlue } from "../colors";
 import { BmIcons } from "../iconStyles";
+import PropTypes from "prop-types";
 
 export const Container = styled.div`
   display: flex;
@@ -11,19 +12,24 @@ export const Container = styled.div`
   border-bottom: 0.125rem solid ${BmPrimaryBlue};
 `;
 
-export const Title = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const Icon = styled(BmIcons)`
-  margin-left: auto;
-`;
-
-export const BmListHeader = ({ children, trailingIcon }) => {
+export const BmListHeader = ({ children, trailingIcon, size, color }) => {
   return (
     <Container>
-      <Title>{children}</Title>
-      {trailingIcon && <Icon icon={trailingIcon} color={`${BmPrimaryBlack}`} />}
+      {children}
+      {trailingIcon && (
+        <BmIcons
+          icon={trailingIcon}
+          color={color || `${BmPrimaryBlack}` }
+          size={size || 'large'}
+        />
+      )}
     </Container>
   );
 };
+
+BmListHeader.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  color: PropTypes.string,
+  size: PropTypes.string,
+};

package/src/lib/components/Lists/rowLabels.js

@@ -2,31 +2,34 @@ import React from "react";
 import styled from "styled-components";
 import { BmGrey100, BmPrimaryBlack, BmPrimaryWhite } from "../colors";
 import { BmIcons } from "../iconStyles";
+import PropTypes from "prop-types";
 
 export const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 1rem;
+  justify-content: space-between;
   background: ${BmPrimaryWhite};
   margin: 0rem;
-
   &:hover {
     background: ${BmGrey100};
   }
 `;
 
-export const Title = styled.p`
-  color: ${BmPrimaryBlack};
-`;
-
-export const LeftIcon = styled(BmIcons)`
-  margin-right: 0.5rem;
+export const LeftContainer = styled.div`
+  display: flex;
+  flex-direction: flex-start;
+  align-items: center;
+  > * {
+    margin-right: 0.5rem;
+  }
 `;
 
 export const RightContainer = styled.div`
   margin-left: auto;
   display: flex;
+  flex-direction: flex-end;
   align-items: center;
 `;
 
@@ -38,24 +41,52 @@ export const Label = styled.p`
     margin-right: 0.5rem;
   `}
 `;
-
-export const BmRowLabel = ({ children, trailingIcon, leadingIcon, label, ...rest }) => {
+export const BmRowLabel = ({
+  children,
+  trailingIcon,
+  leadingIcon,
+  label,
+  color,
+  size,
+  ...rest
+}) => {
   return (
-    <Container {...rest}>
-      {leadingIcon && (
-        <LeftIcon icon={leadingIcon} color={`${BmPrimaryBlack}`} />
-      )}
-      <Title>{children}</Title>
+    <Container
+      trailingIcon={trailingIcon}
+      leadingIcon={leadingIcon}
+      label={label}
+      size={size}
+      {...rest}
+    >
+      <LeftContainer>
+        {leadingIcon && (
+          <BmIcons
+            icon={leadingIcon}
+            color={color || `${BmPrimaryBlack}}`}
+            size={size || 'small'}
+          />
+        )}
+        {children}
+      </LeftContainer>
       <RightContainer>
         {label && <Label trailingIcon={trailingIcon}>{label}</Label>}
         {trailingIcon && (
           <BmIcons
             icon={trailingIcon}
-            color={`${BmPrimaryBlack}`}
-            size="small"
+            color={color || `${BmPrimaryBlack}}`}
+            size={size ||  'small'}
           />
         )}
       </RightContainer>
     </Container>
   );
 };
+
+BmRowLabel.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  label: PropTypes.object,
+  leadingIcon: PropTypes.node,
+  color: PropTypes.string,
+  size: PropTypes.string,
+};

package/src/lib/components/Lists/rowLabels.stories.js

@@ -0,0 +1,59 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmRowLabel } from "./rowLabels";
+import "../../../main.scss";
+import { Favorite, KeyboardArrowRight } from "@material-ui/icons";
+
+export default {
+  component: BmRowLabel,
+  title: "components/Lists/RowLabels",
+  argType: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the icons",
+      defaultValue: { summary: "small" },
+    },
+    trailingIcon: {
+      description: "Material-UI Icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    leadingIcon: {
+      description: "Material-UI Icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    color: {
+      description: "Color of the Icons",
+    },
+    children: {
+      description: "Row Label text",
+    },
+    label: {
+      description: "Label Text",
+    },
+  },
+};
+
+const MainRowLabel = (args) => <BmRowLabel {...args} />;
+
+export const TextOnly = MainRowLabel.bind({});
+TextOnly.args = {
+  children: <h3>Row Label</h3>,
+};
+
+export const TextLabel = MainRowLabel.bind({});
+TextLabel.args = {
+  children: <h3>Row Label</h3>,
+  label: <h3>Label</h3>,
+};
+
+export const LabelIcons = MainRowLabel.bind({});
+LabelIcons.args = {
+  ...TextLabel.args,
+  trailingIcon: <KeyboardArrowRight />,
+  leadingIcon: <Favorite />,
+  size: "large",
+};
+
+//TODO: add checkbox button example
+//TODO: size not working

package/src/lib/components/{loaders.js → Loader/loader.js}

@@ -1,26 +1,32 @@
-import React from 'react';
+import React from "react";
+import Proptypes from 'prop-types';
 import CircularProgress from "@material-ui/core/CircularProgress";
 import styled from "styled-components";
 import { withStyles } from "@material-ui/core/styles";
-import { BmPrimaryBlue } from "./colors";
+import {
+  BmPrimaryBlue,
+  BmSecondaryDarkGreen,
+  BmSecondaryRed,
+  BmPrimaryGold,
+} from "../colors";
 
 const style = {
   colorPrimary: {
-    color: ({ color }) => {
-      if (color) return color;
+    color: ({ type }) => {
+      if (type === "success") return `${BmSecondaryDarkGreen}`;
+      if (type === "warning") return `${BmPrimaryGold}`;
+      if (type === "error") return `${BmSecondaryRed}`;
       return `${BmPrimaryBlue}`;
     },
   },
 };
 
 export const BmLoader = withStyles(style)(({ size, ...rest }) => {
-  let defaultSize;
+  let defaultSize = size || "2.286rem";
   if (size) {
     if (size === "large") defaultSize = "2.286rem";
     if (size === "medium") defaultSize = "1.714rem";
     if (size === "small") defaultSize = "1.429rem";
-  } else {
-    defaultSize = size;
   }
   return <CircularProgress action size={defaultSize} {...rest} />;
 });
@@ -30,3 +36,8 @@ export const Loader = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
+BmLoader.propTypes = {
+  size: Proptypes.string,
+  type: Proptypes.string,
+}

package/src/lib/components/Loader/loader.stories.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmLoader } from "./loader";
+
+export default {
+  component: BmLoader,
+  title: "components/Loader",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the loader (Can also be predefined e.g. 10px)",
+      defaultValue: { summary: "large" },
+    },
+    type: {
+      options: ["success", "warning", "error"],
+      control: { type: "select" },
+      description: "Type of loader",
+      defaultValue: { summary: "Beem default loader" },
+    },
+  },
+};
+
+const MainLoader = (args) => <BmLoader {...args} />;
+
+export const Loader = MainLoader.bind({});
+Loader.args = {
+  type: "success",
+  size: "small",
+};

package/src/lib/components/MainWrapper/index.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { BmBgGreyBlue } from "../colors";
+
+export const MainWrapper = styled.div`
+  padding: 2.1875rem;
+  background-color: ${BmBgGreyBlue};
+`;