beem-component 1.5.8 → 1.6.1

package/package.json

@@ -1,24 +1,35 @@
 {
     "name": "beem-component",
-    "version": "1.5.8",
+    "version": "1.6.1",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
-        "start": "PORT=3002 react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "build-storybook": "build-storybook",
         "clean": "rimraf dist",
         "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
+        "eject": "react-scripts eject",
+        "start": "PORT=3002 react-scripts start",
         "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
+        "test": "react-scripts test"
     },
-    "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2",
-        "babel-loader": "8.1.0"
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
     },
     "dependencies": {
         "@emotion/react": "^11.7.1",
@@ -30,6 +41,7 @@
         "js-file-download": "^0.4.12",
         "node-sass": "^6.0.1",
         "polished": "^4.1.3",
+        "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0",
@@ -38,29 +50,14 @@
         "styled-components": "^5.3.0",
         "web-vitals": "^1.1.2"
     },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
     "devDependencies": {
-        "@babel/cli": "^7.14.8",
+        "@babel/cli": "^7.16.0",
+        "@babel/core": "^7.16.0",
         "@babel/preset-env": "^7.14.8",
         "@babel/preset-react": "^7.14.5",
-        "cross-env": "^7.0.3",
+        "@commitlint/cli": "^14.1.0",
+        "@commitlint/config-conventional": "^14.1.0",
+        "@commitlint/travis-cli": "^14.1.0",
         "@storybook/addon-actions": "^6.3.2",
         "@storybook/addon-controls": "^6.3.12",
         "@storybook/addon-docs": "^6.3.12",
@@ -72,6 +69,32 @@
         "@storybook/preset-create-react-app": "^3.2.0",
         "@storybook/react": "^6.3.2",
         "@storybook/theming": "^6.4.9",
+        "babel-eslint": "^10.1.0",
+        "babel-plugin-react-intl": "^5.1.18",
+        "babel-plugin-styled-components": "^1.13.3",
+        "babel-preset-react-app": "^10.0.0",
+        "commitizen": "^4.2.4",
+        "cross-env": "^7.0.3",
+        "cz-conventional-changelog": "^3.3.0",
+        "eslint-config-airbnb": "^18.2.1",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-jest": "^25.2.2",
+        "eslint-plugin-jsdoc": "^32.2.0",
+        "eslint-plugin-jsx-a11y": "^6.4.1",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.26.1",
+        "generate-changelog": "^1.8.0",
+        "husky": "^7.0.4",
+        "lint-staged": "^11.2.6",
+        "prettier": "^2.4.1",
         "storybook-addon-jsx": "^7.3.14"
+    },
+    "peerDependencies": {
+        "babel-loader": "8.1.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-scripts": "4.0.3",
+        "web-vitals": "^1.1.2"
     }
 }

package/src/App.js

@@ -1,11 +1,10 @@
-import React, { useState } from "react";
-import { BmModal, BmButton, GlobalStyle } from "./lib/components";
-import { BmProfileIcon } from "./lib/components/ProfileIcon/ProfileIcon";
-import beem from './lib/assets/beem.jpeg';
+import React, { useState } from 'react';
+import { GlobalStyle, BmModal, BmButton } from './lib/components';
+import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
 
 const Chat = () => {
+  const [checked, setChecked] = useState(false);
   const [showModal, setShowModal] = useState(false);
-
   return (
     <>
       <GlobalStyle />
@@ -20,14 +19,18 @@ const Chat = () => {
           <h5>This modal has a sub heading</h5>
         </BmModal.SubHeader>
         <BmModal.Body>
-          <BmProfileIcon img={beem} content={<h3>TV</h3>} channel="facebook" size="xsmall" />
+          <BmCheckboxToggle
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            disabled
+            label={<h3>Field Label</h3>}
+          />
           <p>This is a body</p>
         </BmModal.Body>
         <BmModal.Footer>
           <p>This is a footer</p>
         </BmModal.Footer>
       </BmModal>
-      <BmProfileIcon img={beem} channel="instagram" />
     </>
   );
 };

package/src/index.js

@@ -1,15 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root"),
+  document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

package/src/lib/components/Accordion/Accordion.js

@@ -1,14 +1,16 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { BmPrimaryWhite } from "../colors";
-import { BmIcons } from "../iconStyles";
-import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
+/* eslint-disable react/display-name */
+/* eslint-disable react/destructuring-assignment */
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons';
+import { BmPrimaryWhite } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 const { Provider, Consumer } = React.createContext({});
 
 const Dropdown = (value, rest) => {
-  if (value.expandIcon && value.expandIcon === "none") {
+  if (value.expandIcon && value.expandIcon === 'none') {
     return;
   }
   if (!value.expandIcon) {
@@ -18,7 +20,7 @@ const Dropdown = (value, rest) => {
       <BmIcons icon={<KeyboardArrowDown />} {...rest} />
     );
   }
-  if (value.expandIcon && value.expandIcon !== "none") {
+  if (value.expandIcon && value.expandIcon !== 'none') {
     return <BmIcons icon={value.expandIcon} />;
   }
 };
@@ -44,12 +46,28 @@ const BmAccordionWrapper = styled.div`
   flex-direction: column;
 `;
 
-const BmAccordion = ({ children, disabled, expandIcon, Open, expandIconPosition, ...rest }) => {
-  const [toggle, setToggle] = useState(Open ? true : false);
+const BmAccordion = ({
+  children,
+  disabled,
+  expandIcon,
+  Open,
+  expandIconPosition,
+  ...rest
+}) => {
+  const [toggle, setToggle] = useState(!!Open);
 
   return (
     <BmAccordionWrapper>
-      <Provider value={{ toggle, setToggle, disabled, expandIcon, expandIconPosition, ...rest }}>
+      <Provider
+        value={{
+          toggle,
+          setToggle,
+          disabled,
+          expandIcon,
+          expandIconPosition,
+          ...rest,
+        }}
+      >
         {children}
       </Provider>
     </BmAccordionWrapper>
@@ -74,12 +92,12 @@ BmAccordion.Title = ({
               : value.setToggle(false)
           }
         >
-          {value.expandIconPosition === "left" ||
-          (value.expandIconPosition === undefined && Dropdown(value, rest))}
+          {value.expandIconPosition === 'left' ||
+            (value.expandIconPosition === undefined && Dropdown(value, rest))}
           {leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
           <BmAccordionDetails>{children}</BmAccordionDetails>
           {trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
-          {value.expandIconPosition === "right" && Dropdown(value, rest)}
+          {value.expandIconPosition === 'right' && Dropdown(value, rest)}
         </BmAccordionMenu>
       )}
     </Consumer>

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

@@ -1,32 +1,32 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmAccordion from "./Accordion";
-import { text, boolean, select } from "@storybook/addon-knobs";
-import { Favorite, Home } from "@material-ui/icons";
+import React from 'react';
+import { text, boolean, select } from '@storybook/addon-knobs';
+import { Favorite, Home } from '@material-ui/icons';
+import BmAccordion from './Accordion';
 
 export default {
   component: BmAccordion,
   subcomponents: BmAccordion.Title,
-  title: "components/Accordion",
+  title: 'components/Accordion',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the icons",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the icons',
+      defaultValue: { summary: 'large' },
     },
     disabled: {
-      description: "Optional",
+      description: 'Optional',
       defaultValue: { summary: false },
-      control: { type: "boolean" },
+      control: { type: 'boolean' },
     },
     Open: {
-      description: "Accordion body will be open initially",
+      description: 'Accordion body will be open initially',
       defaultValue: { summary: false },
-      control: { type: "boolean" },
+      control: { type: 'boolean' },
     },
     children: {
-      description: "Accordion Title Text",
+      description: 'Accordion Title Text',
       defaultValue: { summary: undefined },
     },
     expandIcon: {
@@ -34,51 +34,51 @@ export default {
       defaultValue: { summary: undefined },
     },
     expandIconPosition: {
-      options: ["left", "right"],
-      control: { type: "select" },
-      description: "Position of the expand Icon",
-      defaultValue: { summary: "left" },
+      options: ['left', 'right'],
+      control: { type: 'select' },
+      description: 'Position of the expand Icon',
+      defaultValue: { summary: 'left' },
     },
     leadingIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: { summary: undefined },
     },
     trailingIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: { summary: undefined },
     },
   },
 };
 
 const optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
 
 const optionExpandIcon = {
-  left: "left",
-  right: "medium",
+  left: 'left',
+  right: 'medium',
 };
 
 export const Accordion = () => {
   return (
     <div>
       <BmAccordion
-        disabled={boolean("disabled", false)}
-        Open={boolean("disabled", false)}
+        disabled={boolean('disabled', false)}
+        Open={boolean('disabled', false)}
       >
         <BmAccordion.Title
           leadingIcon={<Home />}
           trailingIcon={<Favorite />}
-          size={select("size", optionSize, "large")}
+          size={select('size', optionSize, 'large')}
           expandIconPosition={select(
-            "expandIconPosition",
+            'expandIconPosition',
             optionExpandIcon,
-            "left",
+            'left'
           )}
         >
-          <h3>{text("children", "Accordion")}</h3>
+          <h3>{text('children', 'Accordion')}</h3>
         </BmAccordion.Title>
         <BmAccordion.Body>Accordion Body</BmAccordion.Body>
       </BmAccordion>

package/src/lib/components/Avatars/avatars.js

@@ -1,45 +1,49 @@
-import { Person } from "@material-ui/icons";
-import React from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import { BmGrey100, BmPrimaryBlue } from "../colors";
-import { BmAvatarIcon } from "../iconStyles";
+import { Person } from '@material-ui/icons';
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
+import ChatIcon from '@mui/icons-material/Chat';
+import { BmGrey100, BmPrimaryBlue } from '../colors';
+import { BmAvatarIcon } from '../iconStyles';
 
 export const BmAvatarWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   height: ${({ size }) => {
-    if (size === "large") return "3.429rem";
-    if (size === "medium") return "2.286rem";
-    if (size === "small") return "1.714rem";
-    if (size === "xsmall") return "1.429rem";
-    if (!size) return "3.429rem";
+    if (size === 'large') return '3.429rem';
+    if (size === 'medium') return '2.286rem';
+    if (size === 'small') return '1.714rem';
+    if (size === 'xsmall') return '1.429rem';
+    if (!size) return '3.429rem';
     return size;
   }};
   width: ${({ size }) => {
-    if (size === "large") return "3.429rem";
-    if (size === "medium") return "2.286rem";
-    if (size === "small") return "1.714rem";
-    if (size === "xsmall") return "1.429rem";
-    if (!size) return "3.429rem";
+    if (size === 'large') return '3.429rem';
+    if (size === 'medium') return '2.286rem';
+    if (size === 'small') return '1.714rem';
+    if (size === 'xsmall') return '1.429rem';
+    if (!size) return '3.429rem';
     return size;
   }};
   background: ${({ user }) => {
-    if (user === "chatbot") return `${BmPrimaryBlue}`;
-    if (user === "employee") return `${BmPrimaryBlue}`;
+    if (user === 'chatbot') return `${BmPrimaryBlue}`;
+    if (user === 'employee') return `${BmPrimaryBlue}`;
+    if (user === 'sms') return `${BmPrimaryBlue}`;
     return `${BmGrey100}`;
   }};
   border-radius: ${({ type }) => {
-    if (type === "circle") return "7.143rem";
-    if (type === "square") return "0.179rem";
-    return "7.143rem";
+    if (type === 'circle') return '7.143rem';
+    if (type === 'square') return '0.179rem';
+    return '7.143rem';
   }};
   border: 0.071rem solid
     ${({ user }) => {
-      if (user === "chatbot") return `${BmPrimaryBlue}`;
-      if (user === "employee") return `${BmPrimaryBlue}`;
+      if (user === 'chatbot') return `${BmPrimaryBlue}`;
+      if (user === 'employee') return `${BmPrimaryBlue}`;
+      if (user === 'sms') return `${BmPrimaryBlue}`;
+
       return `${BmGrey100}`;
     }};
 `;
@@ -48,15 +52,26 @@ const BmAvatar = (props) => {
   const { user, size, color, ...rest } = props;
   return (
     <BmAvatarWrapper user={user} size={size} {...rest}>
-      {user === "employee" && (
+      {user === 'employee' && (
         <BmAvatarIcon icon={<Person />} size={size} color={color} {...rest} />
       )}
-      {user === "chatbot" && (
-        <BmAvatarIcon icon={<SmartToyIcon />} size={size} color={color} {...rest} />
+      {user === 'chatbot' && (
+        <BmAvatarIcon
+          icon={<SmartToyIcon />}
+          size={size}
+          color={color}
+          {...rest}
+        />
       )}
-      {user !== "chatbot" && user !== "employee" && user !== "default" && (
-        <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
+      {user === 'sms' && (
+        <BmAvatarIcon icon={<ChatIcon />} size={size} color={color} {...rest} />
       )}
+      {user !== 'chatbot' &&
+        user !== 'employee' &&
+        user !== 'sms' &&
+        user !== 'default' && (
+          <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
+        )}
     </BmAvatarWrapper>
   );
 };
@@ -68,4 +83,4 @@ BmAvatar.propTypes = {
   user: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
-export default BmAvatar;
+export default BmAvatar;

package/src/lib/components/Avatars/avatars.stories.js

@@ -1,23 +1,23 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmAvatar from "./avatars";
-import { Home } from "@material-ui/icons";
+import React from 'react';
+import { Home } from '@material-ui/icons';
+import BmAvatar from './avatars';
 
 export default {
   component: BmAvatar,
-  title: "components/Avatars",
+  title: 'components/Avatars',
   argTypes: {
     size: {
-      options: ["xsmall", "small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the Avatar",
-      defaultValue: { summary: "large" },
+      options: ['xsmall', 'small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the Avatar',
+      defaultValue: { summary: 'large' },
     },
     type: {
-      options: ["circle", "square"],
-      control: { type: "select" },
-      description: "Shape of the Avatar",
-      defaultValue: { summary: "circle" },
+      options: ['circle', 'square'],
+      control: { type: 'select' },
+      description: 'Shape of the Avatar',
+      defaultValue: { summary: 'circle' },
     },
     user: {
       description:
@@ -31,15 +31,15 @@ const MainAvatar = (args) => <BmAvatar {...args} />;
 
 export const Avatar = MainAvatar.bind({});
 Avatar.args = {
-  user: "chatbot",
-  size: "large",
-  type: "circle",
+  user: 'chatbot',
+  size: 'large',
+  type: 'circle',
 };
 
 export const CustomAvatar = MainAvatar.bind({});
 CustomAvatar.args = {
   user: <Home />,
-  size: "large",
-  type: "square",
-  color: "#000000",
+  size: 'large',
+  type: 'square',
+  color: '#000000',
 };

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

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