beem-component 1.5.8 → 1.5.9

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

@@ -1,45 +1,45 @@
-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 { 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}`;
     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}`;
       return `${BmGrey100}`;
     }};
 `;
@@ -48,13 +48,18 @@ 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" && (
+      {user !== 'chatbot' && user !== 'employee' && user !== 'default' && (
         <BmAvatarIcon icon={user} size={size} color={color} {...rest} />
       )}
     </BmAvatarWrapper>
@@ -68,4 +73,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>
-    
   );
 };

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

@@ -1,39 +1,39 @@
-import React, { useState } from "react";
-import { Clear } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmIcons } from "..";
-import { BmGrey50, BmPrimaryBlue } from "../colors";
+import React, { useState } from 'react';
+import { Clear } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmIcons } from '../iconStyles';
+import { BmGrey50, BmPrimaryBlue } from '../colors';
 
 const BannerCardWrapper = styled.div`
   display: ${({ closeButton, show }) => {
     if (!closeButton) {
-      return "flex";
+      return 'flex';
     }
-    return show ? "flex" : "none";
+    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";
+      if (border === 'dashed') return 'dashed';
+      if (border === 'solid') return 'solid';
+      return 'none';
     }}
     ${({ color }) => {
-      return color ? color : BmPrimaryBlue;
+      return color || 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";
+      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";
+    if (bannerBg === 'default') return `${BmGrey50}`;
+    if (!bannerBg) return 'none';
     return bannerBg;
   }}};
   > *:not(:last-child) {
@@ -53,7 +53,7 @@ const BmBanner = ({ closeButton, children, ...rest }) => {
     <BannerCardWrapper closeButton={closeButton} {...rest} show={show}>
       {closeButton && (
         <BannerComponent>
-          {children[0]}{" "}
+          {children[0]}{' '}
           <BmIcons
             icon={<Clear />}
             size="small"

package/src/lib/components/Buttons/Stories/basicbutton.stories.js

@@ -1,43 +1,43 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmButton } from "../buttons";
-import { Favorite, Home } from "@material-ui/icons";
+import React from 'react';
+import { Favorite, Home } from '@material-ui/icons';
+import { BmButton } from '../buttons';
 
 export default {
   component: BmButton,
-  title: "components/Buttons/Basic",
+  title: 'components/Buttons/Basic',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size',
+      defaultValue: { summary: 'large' },
     },
     variant: {
       options: [
-        "primary",
-        "secondary",
-        "tertiary",
-        "success",
-        "neutral",
-        "destructive",
+        'primary',
+        'secondary',
+        'tertiary',
+        'success',
+        'neutral',
+        'destructive',
       ],
-      control: { type: "select" },
-      description: "Variant",
-      defaultValue: { summary: "primary" },
+      control: { type: 'select' },
+      description: 'Variant',
+      defaultValue: { summary: 'primary' },
     },
     leadingIcon: {
-      description: "Material UI Icons",
+      description: 'Material UI Icons',
     },
     trailingIcon: {
-      description: "Material UI Icons",
+      description: 'Material UI Icons',
     },
     color: {
-      description: "Color of the Button",
+      description: 'Color of the Button',
     },
     children: {
-      description: "Text of the button",
-      default: "Button",
+      description: 'Text of the button',
+      default: 'Button',
     },
   },
 };
@@ -46,19 +46,19 @@ const MainButton = (args) => <BmButton {...args} />;
 
 export const BasicButton = MainButton.bind({});
 BasicButton.args = {
-  variant: "primary",
-  size: "large",
-  children: "Button",
+  variant: 'primary',
+  size: 'large',
+  children: 'Button',
   leadingIcon: <Home />,
   trailingIcon: <Favorite />,
 };
 
 export const ColoredButton = MainButton.bind({});
 ColoredButton.args = {
-  variant: "primary",
-  size: "large",
-  children: "Button",
+  variant: 'primary',
+  size: 'large',
+  children: 'Button',
   leadingIcon: <Home />,
   trailingIcon: <Favorite />,
-  color: "pink",
+  color: 'pink',
 };

package/src/lib/components/Buttons/Stories/buttonAlertIcons.stories.js

@@ -1,31 +1,31 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmAlertIcon } from "../buttonAlertIcons";
-import { AssignmentLateOutlined } from "@material-ui/icons";
+import React from 'react';
+import { AssignmentLateOutlined } from '@material-ui/icons';
+import { BmAlertIcon } from '../buttonAlertIcons';
 
 export default {
   component: BmAlertIcon,
-  title: "components/Buttons/AlertIcons",
+  title: 'components/Buttons/AlertIcons',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size',
+      defaultValue: { summary: 'large' },
     },
     icon: {
-      description: "Material UI Icons",
+      description: 'Material UI Icons',
     },
     color: {
-      description: "Color of the icon",
-      defaultValue: { summary: "#575757" },
+      description: 'Color of the icon',
+      defaultValue: { summary: '#575757' },
     },
     badgeContent: {
-      description: "Badge Content",
+      description: 'Badge Content',
     },
     badgeColor: {
-      description: "Color of the badge content",
-      defaultValue: { summary: "#F62E48" },
+      description: 'Color of the badge content',
+      defaultValue: { summary: '#F62E48' },
     },
   },
 };
@@ -36,7 +36,7 @@ export const ButtonAlertIcon = MainButtonAlertIcon.bind({});
 ButtonAlertIcon.args = {
   icon: <AssignmentLateOutlined />,
   badgeContent: 4,
-  badgeColor: "red",
-  size: "large",
-  color: "black",
+  badgeColor: 'red',
+  size: 'large',
+  color: 'black',
 };

package/src/lib/components/Buttons/Stories/buttonIconsOnly.stories.js

@@ -1,39 +1,39 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmBtnIcon } from "../buttonIconsOnly";
-import { Favorite } from "@material-ui/icons";
+import React from 'react';
+import { Favorite } from '@material-ui/icons';
+import { BmBtnIcon } from '../buttonIconsOnly';
 
 export default {
   component: BmBtnIcon,
-  title: "components/Buttons/IconsOnly",
+  title: 'components/Buttons/IconsOnly',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size',
+      defaultValue: { summary: 'large' },
     },
     variant: {
       options: [
-        "primary",
-        "secondary",
-        "tertiary",
-        "success",
-        "neutral",
-        "destructive",
-        "active",
-        "enabled",
+        'primary',
+        'secondary',
+        'tertiary',
+        'success',
+        'neutral',
+        'destructive',
+        'active',
+        'enabled',
       ],
-      control: { type: "select" },
-      description: "Variant",
-      defaultValue: { summary: "primary" },
+      control: { type: 'select' },
+      description: 'Variant',
+      defaultValue: { summary: 'primary' },
     },
     icon: {
-      description: "Material UI Icons",
+      description: 'Material UI Icons',
     },
     color: {
-      description: "Color of the button",
-      defaultValue: { summary: "primary color" },
+      description: 'Color of the button',
+      defaultValue: { summary: 'primary color' },
     },
   },
 };
@@ -43,7 +43,7 @@ const MainButtonIcon = (args) => <BmBtnIcon {...args} />;
 export const ButtonIcon = MainButtonIcon.bind({});
 ButtonIcon.args = {
   icon: <Favorite />,
-  size: "large",
-  variant: "primary",
+  size: 'large',
+  variant: 'primary',
   color: undefined,
 };

package/src/lib/components/Buttons/buttonAlertIcons.js

@@ -1,27 +1,24 @@
-import React from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core/styles";
-import {
-  BmSecondaryGrey,
-  BmSecondaryRed,
-  BmPrimaryWhite,
-} from "../colors";
-import Badge from "@material-ui/core/Badge";
-import { PoppinsMedium } from "../typography";
+/* eslint-disable no-shadow */
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import { BmSecondaryGrey, BmSecondaryRed, BmPrimaryWhite } from '../colors';
+import { PoppinsMedium } from '../typography';
 
 const size = (props) => {
-  if (props.size === "small") return "1.429rem";
-  if (props.size === "medium") return "1.714rem";
-  if (props.size === "large") return "2.286rem";
-  return "2.286rem";
+  if (props.size === 'small') return '1.429rem';
+  if (props.size === 'medium') return '1.714rem';
+  if (props.size === 'large') return '2.286rem';
+  return '2.286rem';
 };
 
 const Badgesize = (props) => {
-  if (props.size === "small") return "0.857rem";
-  if (props.size === "medium") return "0.857rem";
-  if (props.size === "large") return "0.857rem";
-  return "0.857rem";
+  if (props.size === 'small') return '0.857rem';
+  if (props.size === 'medium') return '0.857rem';
+  if (props.size === 'large') return '0.857rem';
+  return '0.857rem';
 };
 
 const AlertIcon = {
@@ -40,13 +37,13 @@ const BadgeIcon = () => ({
     background: (props) => props.badgeColor || `${BmSecondaryRed}`,
     color: `${BmPrimaryWhite}`,
     fontFamily: `${PoppinsMedium}`,
-    fontStyle: "normal",
+    fontStyle: 'normal',
     fontWeight: 500,
-    fontSize: "0.643rem",
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
-    letterSpacing: "-0.02em",
+    fontSize: '0.643rem',
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    letterSpacing: '-0.02em',
   },
 });