beem-component 1.2.8 → 1.3.1

package/dist/components/ProgressRing/progressRing.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomProgressRing = exports.BasicProgressRing = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _progressRing = _interopRequireDefault(require("./progressRing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _progressRing.default,
+  title: "components/ProgressRing",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the Progress Ring (Can also be predefined e.g. 50)",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    progress: {
+      description: "Progress Indicator"
+    },
+    variant: {
+      options: ["primary", "success", "warning", "danger"],
+      control: {
+        type: "select"
+      },
+      description: "Color of the Progress Ring",
+      defaultValue: {
+        summary: "xsmall"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainProgressRing = function MainProgressRing(args) {
+  return /*#__PURE__*/_react.default.createElement(_progressRing.default, args);
+};
+
+var BasicProgressRing = MainProgressRing.bind({});
+exports.BasicProgressRing = BasicProgressRing;
+BasicProgressRing.args = {
+  progress: 30,
+  variant: "success",
+  size: "xlarge"
+};
+var CustomProgressRing = MainProgressRing.bind({});
+exports.CustomProgressRing = CustomProgressRing;
+CustomProgressRing.args = {
+  progress: 50,
+  variant: "primary",
+  size: "40"
+};

package/dist/components/Tabs/tabs.js

@@ -29,34 +29,39 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmTabWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.714rem 1.714rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  ", "\n"])), _colors.BmPrimaryWhite, function (_ref) {
-  var state = _ref.state;
+var BmTabWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  ", "\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
+  var state = _ref.state,
+      disabled = _ref.disabled;
 
-  if (state === "active") {
+  if (state === "active" && !disabled) {
     return "inset 0px -3px 0px ".concat(_colors.BmPrimaryBlue);
   }
 
-  if (state === "inactive") {
-    return "inset 0px -3px 0px ".concat(_colors.BmGrey400);
-  }
-
   return "none";
 }, function (_ref2) {
   var color = _ref2.color,
       children = _ref2.children,
       disabled = _ref2.disabled;
   return children && disabled ? "\n    > * {\n     color: ".concat(_colors.BmGrey400, ";\n  }\n  ") : "\n    > * {\n     color: ".concat(color, ";\n  }\n  ");
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+
+  if (!disabled) {
+    return "inset 0px -3px 0px ".concat(_colors.BmGrey400);
+  }
+
+  return "none";
 });
 
-var BmTab = function BmTab(_ref3) {
-  var leadingIcon = _ref3.leadingIcon,
-      trailingIcon = _ref3.trailingIcon,
-      children = _ref3.children,
-      size = _ref3.size,
-      color = _ref3.color,
-      icon = _ref3.icon,
-      disabled = _ref3.disabled,
-      rest = _objectWithoutProperties(_ref3, _excluded);
+var BmTab = function BmTab(_ref4) {
+  var leadingIcon = _ref4.leadingIcon,
+      trailingIcon = _ref4.trailingIcon,
+      children = _ref4.children,
+      size = _ref4.size,
+      color = _ref4.color,
+      icon = _ref4.icon,
+      disabled = _ref4.disabled,
+      rest = _objectWithoutProperties(_ref4, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(BmTabWrapper, _extends({
     leadingIcon: leadingIcon,
@@ -65,11 +70,11 @@ var BmTab = function BmTab(_ref3) {
     disabled: disabled
   }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: leadingIcon,
-    size: size || 'large',
+    size: size || "large",
     color: disabled ? "".concat(_colors.BmGrey400) : color
   }), children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: trailingIcon,
-    size: size || 'large',
+    size: size || "large",
     color: disabled ? "".concat(_colors.BmGrey400) : color
   }));
 };
@@ -81,5 +86,6 @@ BmTab.propTypes = {
   leadingIcon: _propTypes.default.node,
   state: _propTypes.default.string,
   color: _propTypes.default.string,
-  size: _propTypes.default.string
+  size: _propTypes.default.string,
+  disabled: _propTypes.default.bool
 };

package/dist/components/Tabs/tabs.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Tabs = void 0;
+exports.default = exports.DisabledTab = exports.BasicTab = void 0;
 
 var _icons = require("@material-ui/icons");
 
@@ -25,7 +25,7 @@ var _default = {
       description: "Color of the Icons and Text"
     },
     state: {
-      options: ["active", "inactive"],
+      options: ["active"],
       control: {
         type: "select"
       },
@@ -40,6 +40,9 @@ var _default = {
       defaultValue: {
         summary: "large"
       }
+    },
+    disabled: {
+      description: "Disabled tab"
     }
   }
 };
@@ -49,12 +52,20 @@ var MainTab = function MainTab(args) {
   return /*#__PURE__*/_react.default.createElement(_tabs.BmTab, args);
 };
 
-var Tabs = MainTab.bind({});
-exports.Tabs = Tabs;
-Tabs.args = {
+var BasicTab = MainTab.bind({});
+exports.BasicTab = BasicTab;
+BasicTab.args = {
   children: /*#__PURE__*/_react.default.createElement("h3", null, "Tabs"),
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null),
   disabled: false,
   state: 'active'
+};
+var DisabledTab = MainTab.bind({});
+exports.DisabledTab = DisabledTab;
+DisabledTab.args = {
+  children: /*#__PURE__*/_react.default.createElement("h3", null, "Disabled Tabs"),
+  leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+  trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null),
+  disabled: true
 };

package/dist/components/index.js

@@ -29,6 +29,12 @@ Object.defineProperty(exports, "BmAvatarIcon", {
     return _iconStyles.BmAvatarIcon;
   }
 });
+Object.defineProperty(exports, "BmBanner", {
+  enumerable: true,
+  get: function get() {
+    return _bannerCards.default;
+  }
+});
 Object.defineProperty(exports, "BmBtnIcon", {
   enumerable: true,
   get: function get() {
@@ -204,6 +210,12 @@ Object.defineProperty(exports, "BmProgressBar", {
     return _progressbar.BmProgressBar;
   }
 });
+Object.defineProperty(exports, "BmProgressRing", {
+  enumerable: true,
+  get: function get() {
+    return _progressRing.default;
+  }
+});
 Object.defineProperty(exports, "BmQuickReplyIcon", {
   enumerable: true,
   get: function get() {
@@ -349,6 +361,10 @@ var _checkbox = require("./checkbox");
 
 var _tags = require("../components/Tags/tags");
 
+var _bannerCards = _interopRequireDefault(require("../components/BannerCard/bannerCards"));
+
+var _progressRing = _interopRequireDefault(require("./ProgressRing/progressRing"));
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.2.8",
+    "version": "1.3.1",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,56 +1,52 @@
-import React, { useState } from "react";
+import React from "react";
 import "../src/main.scss";
-import { BmButton, MainWrapper, BmModal } from "./lib/components";
+import {
+  BmButton,
+  BmCard,
+  BmIcons,
+  BmNoteBar,
+  BmTab,
+  MainWrapper,
+} from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
-import SideBar from "./SideBar";
-import ChatHeader from "./ChatHeader";
-import Chat from "./Chat";
-import CustomerInfo from "./CustomerInfo";
-import InfoAccordion from "./InfoAccordion";
+import BmBanner from "./lib/components/BannerCard/bannerCards";
+import { FileCopyOutlined } from "@material-ui/icons";
+import BmProgressRing from "./lib/components/ProgressRing/progressRing";
 
 export const App = () => {
-  const [showModal, setShowModal] = useState(false);
   return (
     <>
       <GlobalStyle />
-      <MainWrapper>
+      {/* <MainWrapper> */}
+      <BmBanner border="dashed" content="center" bannerBg="default" closeButton>
+        <BmIcons icon={<FileCopyOutlined />} />
+        <h3>Message Title</h3>
+        <p>Message Text</p>
         <div>
-          <BmButton onClick={() => setShowModal(!showModal)}>
-            Click Me!
+          <BmButton variant="neutral" size="small">
+            Label
           </BmButton>
         </div>
-        <BmModal show={showModal} onHide={() => setShowModal(false)}>
-          <BmModal.Header closeButton>
-            <h2>Header</h2>
-          </BmModal.Header>
-          <BmModal.Body>
-            <p>This is a bodymdlkdmvlfdmvlkmvlkvmflkvmd;lkvmv;lkdmv;lmv;lfvm;lmre;mv;lkremvc;lkremvclfdmvlkfdmv;lkfdmv;lkfdmv;lfdmv;lfdmv;lfdmv;lfdmvlfd;mvlfd;vmfd;lvfdmlv</p>
-          </BmModal.Body>
-          <BmModal.Footer>
-            <p>This is a footer</p>
-          </BmModal.Footer>
-        </BmModal>
-        <div className="main-chat-container">
-          <div className="chat-container">
-            <div className="sidebar">
-              <SideBar />
-            </div>
-            <div className="chat">
-              <ChatHeader />
-              <div className="chat-menu">
-                <div className="chat-messages">
-                  <Chat />
-                </div>
-                <div className="chat-contact-info">
-                  <CustomerInfo />
-                  <InfoAccordion />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </MainWrapper>
+      </BmBanner>
+      <BmCard>
+        <BmCard.Header>
+          <h3>Card Header</h3>
+        </BmCard.Header>
+        <BmCard.Body>
+          <p>Hello</p>
+          <BmProgressRing progress="70" size="50" />
+        </BmCard.Body>
+        <BmCard.Footer>Card Footer</BmCard.Footer>
+      </BmCard>
+      <BmProgressRing progress="70" size="45" />
+      <BmTab state="active">
+        <h3>Tabs</h3>
+      </BmTab>
+      <BmNoteBar closeButton>
+        <p>Hello</p>
+      </BmNoteBar>
+      {/* </MainWrapper> */}
     </>
   );
 };

package/src/MainChat.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "../src/main.scss";
+import { MainWrapper } from "./lib/components";
+import { GlobalStyle } from "./lib/components/globalStyles";
+import "./lib/assets/css/sidebar.scss";
+import SideBar from "./SideBar";
+import ChatHeader from "./ChatHeader";
+import Chat from "./Chat";
+import CustomerInfo from "./CustomerInfo";
+import InfoAccordion from "./InfoAccordion";
+
+export const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <MainWrapper>
+        <div className="main-chat-container">
+          <div className="chat-container">
+            <div className="sidebar">
+              <SideBar />
+            </div>
+            <div className="chat">
+              <ChatHeader />
+              <div className="chat-menu">
+                <div className="chat-messages">
+                  <Chat />
+                </div>
+                <div className="chat-contact-info">
+                  <CustomerInfo />
+                  <InfoAccordion />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </MainWrapper>
+    </>
+  );
+};
+
+export default App;

package/src/lib/components/BannerCard/bannerCard.stories.js

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmBanner from "./bannerCards";
+import { BmButton, BmTag } from "..";
+import { BmPrimaryBlue, BmSecondaryYellow } from "../colors";
+
+export default {
+  component: BmBanner,
+  title: "components/Banner",
+  argTypes: {
+    border: {
+      options: ["dashed", "solid"],
+      control: { type: "select" },
+      description: "Banner border",
+      defaultValue: { summary: "none" },
+    },
+    bannerBg: {
+      description:
+        "Banner Background Color, Can be set as 'default', or custom color",
+    },
+    content: {
+      options: ["left", "center", "right"],
+      control: { type: "select" },
+      description:
+        "Aligning content of banner, will not work if closeButton is present",
+    },
+  },
+};
+
+export const SampleBanner = () => {
+  return (
+    <BmBanner border="dashed" content="center" bannerBg="default">
+      <h3>Message Title</h3>
+      <p>Message Text</p>
+      <div>
+        <BmButton size="small">Label</BmButton>
+      </div>
+    </BmBanner>
+  );
+};
+
+export const AnnouncementBanner = () => {
+  return (
+    <BmBanner bannerBg={`${BmPrimaryBlue}`} closeButton>
+      <h3 style={{ color: "white" }}>Special Announcement Title</h3>
+      <p style={{ color: "white" }}>Message Text</p>
+      <div>
+        <BmButton variant="neutral" size="small">
+          Label
+        </BmButton>
+      </div>
+    </BmBanner>
+  );
+};
+
+export const FeatureBanner = () => {
+  return (
+    <BmBanner bannerBg={`${BmSecondaryYellow}`} closeButton>
+      <BmTag variant="light">
+        <p>New</p>
+      </BmTag>
+      <h3 style={{ color: "white" }}>New Feature Title</h3>
+      <p style={{ color: "white" }}>Message Text</p>
+      <div>
+        <BmButton size="small">Label</BmButton>
+      </div>
+    </BmBanner>
+  );
+};
+
+export const GenericBanner = () => {
+  return (
+    <BmBanner border="solid" bannerBg="default" closeButton>
+      <h3>New Feature Title</h3>
+      <p>Message Text</p>
+      <div>
+        <BmButton size="small">Label</BmButton>
+      </div>
+    </BmBanner>
+    
+  );
+};

package/src/lib/components/BannerCard/bannerCards.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Clear } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmIcons } from "..";
+import { BmGrey50, BmPrimaryBlue } from "../colors";
+
+const BannerCardWrapper = styled.div`
+  display: ${({ closeButton, show }) => {
+    if (!closeButton) {
+      return "flex";
+    }
+    return show ? "flex" : "none";
+  }};
+  flex-direction: column;
+  padding: 0.5rem;
+  border: 0.071rem
+    ${({ border }) => {
+      if (border === "dashed") return "dashed";
+      if (border === "solid") return "solid";
+      return "none";
+    }}
+    ${BmPrimaryBlue};
+  border-radius: 0.25rem;
+  align-items: ${({ content, closeButton }) => {
+    if (!closeButton) {
+      if (content === "center") return "center";
+      if (content === "left") return "flex-start";
+      if (content === "right") return "flex-end";
+      return "center";
+    }
+  }};
+  background: ${({ bannerBg }) => {
+    if (bannerBg === "default") return `${BmGrey50}`;
+    if (!bannerBg) return "none";
+    return bannerBg;
+  }}};
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+const BannerComponent = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const BmBanner = ({ closeButton, children, ...rest }) => {
+  const [show, setShow] = useState(true);
+  return (
+    <BannerCardWrapper closeButton={closeButton} {...rest} show={show}>
+      {closeButton && (
+        <BannerComponent>
+          {children[0]}{" "}
+          <BmIcons
+            icon={<Clear />}
+            size="small"
+            onClick={() => setShow(!show)}
+          />
+        </BannerComponent>
+      )}
+      {closeButton ? children.slice(1) : children}
+    </BannerCardWrapper>
+  );
+};
+
+export default BmBanner;

package/src/lib/components/Cards/cards.js

@@ -7,31 +7,27 @@ const BmCard = styled.div`
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   border-radius: 0.25rem;
+  > * {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+
 `;
 
 BmCard.Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 1rem 1rem 0rem 1rem;
+  padding: 0.5rem 0.5rem 0rem 0.5rem;
 `;
 
 BmCard.Body = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  padding: 0rem 1rem;
+  padding: 0rem 0.5rem;
 `;
 
 BmCard.Footer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   border-top: 0.071rem solid ${BmGrey400};
-  padding: 1rem;
-  align-items: center;
+  padding: 0.5rem 0.5rem 0rem 0.5rem;
 `;
 
 export default BmCard;

package/src/lib/components/NoteBar/noteBar.js

@@ -1,17 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import Proptypes from "prop-types";
-import { Error, Info, Warning } from "@material-ui/icons";
+import { Clear, Error, Info, Warning } from "@material-ui/icons";
 import styled from "styled-components";
 import {
   BmGrey400,
   BmPrimaryBlue,
   BmSecondaryRed,
   BmPrimaryGold,
+  BmSecondaryGrey,
 } from "../colors";
 import { BmIcons } from "../iconStyles";
 
 export const NoteBarWrapper = styled.div`
-  display: flex;
+  display: ${({ closeButton, isOpen }) => {
+    if (!closeButton) {
+      return "flex";
+    }
+    return isOpen ? "flex" : "none";
+  }};
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 1rem;
@@ -22,9 +28,17 @@ export const NoteBarWrapper = styled.div`
   }
 `;
 
-export const BmNoteBar = ({ type, children, color, size, ...rest }) => {
+export const BmNoteBar = ({
+  type,
+  children,
+  color,
+  size,
+  closeButton,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
   return (
-    <NoteBarWrapper {...rest}>
+    <NoteBarWrapper closeButton={closeButton} isOpen={isOpen} {...rest}>
       {type === "info" && (
         <BmIcons
           icon={<Info />}
@@ -47,6 +61,15 @@ export const BmNoteBar = ({ type, children, color, size, ...rest }) => {
         />
       )}
       {children}
+      {closeButton && (
+        <BmIcons
+          icon={<Clear />}
+          color={color ? color : `${BmSecondaryGrey}`}
+          size={size ? size : "small"}
+          style={{ marginLeft: "auto" }}
+          onClick={() => setIsOpen(false)}
+        />
+      )}
     </NoteBarWrapper>
   );
 };
@@ -56,4 +79,5 @@ BmNoteBar.propTypes = {
   color: Proptypes.string,
   size: Proptypes.string,
   type: Proptypes.string,
+  closeButton: Proptypes.bool,
 };

package/src/lib/components/NoteBar/noteBar.stories.js

@@ -26,6 +26,9 @@ export default {
       description: "Color of the icon ",
       defaultValue: { summary: undefined },
     },
+    closeButton: {
+      description: "If present will allow to close the notebar, default size of the icon is small",
+    },
   },
 };
 
@@ -38,3 +41,12 @@ NoteBar.args = {
   children: <p>NoteBar</p>,
   color: undefined,
 };
+
+export const NoteBarWithCloseButton = MainNoteBar.bind({});
+NoteBarWithCloseButton.args = {
+  type: "warning",
+  size: "large",
+  children: <p>NoteBar</p>,
+  color: undefined,
+  closeButton: true,
+};