beem-component 1.0.5 → 1.0.9

package/src/lib/components/MessageCounter/MessageCounter.stories.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmCounter from "./messageCounter";
+import { text, select } from "@storybook/addon-knobs";
+
+export default {
+  component: BmCounter,
+  title: "components/MessageCounter",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the counter (can also be custom example: 10px)",
+      defaultValue: { summary: "small" },
+    },
+    children: {
+      description: "Counter Text",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const optionSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+export const MessageCounter = () => {
+  return (
+    <BmCounter size={select("size", optionSize, "large")}>
+      {text("children", "00")}
+    </BmCounter>
+  );
+};

package/src/lib/components/MessageCounter/messageCounter.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { BmPrimaryWhite, BmPrimaryBlue } from "../colors";
+import { h3, h4, p } from "../text";
+
+const BmCounter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: ${BmPrimaryWhite};
+  width: ${({ size }) => {
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "2.286rem";
+    if (!size) return "1.429rem";
+    return size;
+  }};
+  height: ${({ size }) => {
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "2.286rem";
+    if (!size) return "1.429rem";
+    return size;
+  }};
+  ${({ size }) => {
+    if (size === "large") return `${h3}`;
+    if (size === "medium") return `${h4}`;
+    if (size === "small") return `${p}`;
+    return `${p}`;
+  }}
+  border-radius: 50%;
+  text-align: center;
+  background: ${BmPrimaryBlue};
+`;
+
+BmCounter.propTypes = {
+  children: PropTypes.string,
+  size: PropTypes.string,
+};
+
+export default BmCounter;

package/src/lib/components/Tabs/tabs.js

@@ -5,7 +5,7 @@ import { BmGrey400, BmPrimaryBlue, BmPrimaryWhite } from "../colors";
 import { BmIcons } from "../iconStyles";
 
 const BmTabWrapper = styled.div`
-  display: inline-flex;
+  display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;

package/src/lib/components/Tabs/tabs.stories.js

@@ -33,4 +33,5 @@ Tabs.args = {
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
+  state: 'active',
 };

package/src/lib/components/iconStyles.js

@@ -106,11 +106,10 @@ const Avatarsize = (props) => {
   if (props.size === "small") return "1.143rem !important";
   if (props.size === "medium") return "1.429rem !important";
   if (props.size === "large") return "2.286rem !important";
-  if(!props.size) return "2.286rem !important";
+  if (!props.size) return "2.286rem !important";
   return props.size;
 };
 
-
 const AvatarIcon = {
   root: {
     fill: (props) => props.color || `${BmPrimaryWhite}`,
@@ -236,4 +235,3 @@ export const CopyToClipBoard = withStyles(icon)((props) => {
     </SvgIcon>
   );
 });
-

package/src/lib/components/index.js

@@ -1,5 +1,5 @@
 import BmAccordion from "./Accordion/Accordion";
-import { BmAvatar } from "./Avatars/avatars";
+import BmAvatar from "./Avatars/avatars";
 import { BmAlertIcon } from "./Buttons/buttonAlertIcons";
 import { BmBtnIcon } from "./Buttons/buttonIconsOnly";
 import { BmButton } from "./Buttons/buttons";
@@ -10,12 +10,14 @@ import { BmInput } from "./input";
 import { BmRouteLink } from "./RouteLink/link";
 import { BmListHeader } from "./Lists/listheader";
 import { BmRowLabel } from "./Lists/rowLabels";
+import { BmListBox } from "./Lists/listBox";
 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 { BmTag } from "./tags";
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -26,9 +28,16 @@ import {
   BmSupport,
   CopyToClipBoard,
 } from "./iconStyles";
-import { BmNoteBar } from "./NoteBar.js/noteBar";
+import { BmNoteBar } from "./NoteBar/noteBar";
 import { MainWrapper } from "../components/MainWrapper";
 
+//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 {
   BmAccordion,
   BmAvatar,
@@ -37,6 +46,7 @@ export {
   BmBtnIcon,
   BmColors,
   BmCard,
+  BmListBox,
   BmListHeader,
   BmRowLabel,
   BmModal,
@@ -46,11 +56,12 @@ export {
   BmTab,
   GlobalStyle,
   MainWrapper,
+  BmLoader,
   // Old components to be refactored
   BmButtonDropDown,
   BmCheckbox,
   BmInput,
-  BmLoader,
+  BmTag,
   //Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
   BmIcons,
@@ -60,4 +71,10 @@ export {
   BmQuickReplyIcon,
   BmSupport,
   CopyToClipBoard,
+  //Chat Components
+  BmChatHeader,
+  BmChat,
+  BmInfoTab,
+  BmContactCard,
+  BmCounter,
 };

package/src/lib/components/sidebar.js

@@ -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)`