beem-component 1.5.8 → 1.5.9

package/src/lib/components/PerformanceIndicator/performanceIndicator.js

@@ -1,9 +1,10 @@
-import styled from "styled-components";
-import Proptypes from "prop-types";
-import { BmGrey400 } from "../colors";
-import { BmIcons } from "../iconStyles";
-import ArrowCircleUpIcon from "@mui/icons-material/ArrowCircleUp";
-import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
+import React from 'react';
+import styled from 'styled-components';
+import Proptypes from 'prop-types';
+import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
+import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
+import { BmGrey400 } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const BmPIWrapper = styled.div`
   display: flex;
@@ -29,17 +30,17 @@ export const BmPerformanceIndicator = ({
 }) => {
   return (
     <BmPIWrapper color={color} {...rest}>
-      {type === "upwards" && (
+      {type === 'upwards' && (
         <BmIcons
           icon={<ArrowCircleUpIcon />}
-          size={size || "xlarge"}
+          size={size || 'xlarge'}
           color={color || `${BmGrey400}`}
         />
       )}
-      {type === "downwards" && (
+      {type === 'downwards' && (
         <BmIcons
           icon={<ArrowCircleDownIcon />}
-          size={size || "xlarge"}
+          size={size || 'xlarge'}
           color={color || `${BmGrey400}`}
         />
       )}

package/src/lib/components/Pills/pills.js

@@ -1,19 +1,19 @@
-import React, { useState } from "react";
-import Proptypes from "prop-types";
+import React, { useState } from 'react';
+import Proptypes from 'prop-types';
 // eslint-disable-next-line no-unused-vars
-import { Clear, KeyboardArrowDown } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmAvatar } from "../Avatars/avatars";
-import { BmGrey100 } from "../colors";
-import { BmIcons } from "../iconStyles";
-import { p } from "../text";
+import { Clear, KeyboardArrowDown } from '@material-ui/icons';
+import styled from 'styled-components';
+import BmAvatar from '../Avatars/avatars';
+import { BmGrey100 } from '../colors';
+import { BmIcons } from '../iconStyles';
+import { p } from '../text';
 
 export const BmPillWrapper = styled.div`
   display: ${({ clicked }) => {
     if (clicked) {
-      return "flex";
+      return 'flex';
     }
-    return "none";
+    return 'none';
   }};
   flex-direction: row;
   justify-content: center;
@@ -56,11 +56,11 @@ export const BmPill = ({
         clicked={clicked}
         {...rest}
       >
-        {icon && <BmIcons size={size || "xsmall"} icon={icon} color={color} />}
+        {icon && <BmIcons size={size || 'xsmall'} icon={icon} color={color} />}
         {avatarIcon && (
           <BmAvatar
             user={avatarIcon}
-            size={avatarSize || "xsmall"}
+            size={avatarSize || 'xsmall'}
             type="circle"
             color={color}
           />
@@ -68,10 +68,10 @@ export const BmPill = ({
         {label}
         {onDelete && (
           <BmIcons
-            style={{ margin: "0rem 0rem 0rem 1rem" }}
-            size={size || "xsmall"}
-            icon={deleteIcon ? deleteIcon : <Clear />}
-            color={color || "black"}
+            style={{ margin: '0rem 0rem 0rem 1rem' }}
+            size={size || 'xsmall'}
+            icon={deleteIcon || <Clear />}
+            color={color || 'black'}
           />
         )}
       </BmPillWrapper>

package/src/lib/components/Pills/pills.stories.js

@@ -1,47 +1,46 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { Delete, Favorite, Person } from "@material-ui/icons";
-import React from "react";
-import { BmPrimaryBlue } from "../colors";
-import { BmPill } from "./pills";
+import { Delete, Favorite, Person } from '@material-ui/icons';
+import React from 'react';
+import { BmPill } from './pills';
 
 export default {
   component: BmPill,
-  title: "components/Pills",
+  title: 'components/Pills',
   argTypes: {
     icon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: { summary: undefined },
     },
     avatarIcon: {
-      description: "Material-UI icon(optional)",
+      description: 'Material-UI icon(optional)',
       defaultValue: { summary: undefined },
     },
     size: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the Icon (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "xsmall" },
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the Icon (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'xsmall' },
     },
     avatarSize: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the AvatarIcon (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "xsmall" },
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the AvatarIcon (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'xsmall' },
     },
     label: {
-      description: "Pill label in uppercase",
-      defaultValue: { summary: "undefined" },
+      description: 'Pill label in uppercase',
+      defaultValue: { summary: 'undefined' },
     },
     color: {
-      description: "Color of Pill ",
-      defaultValue: { summary: "black" },
+      description: 'Color of Pill ',
+      defaultValue: { summary: 'black' },
     },
     onDelete: {
-      description: "Handles Deleting Pill",
+      description: 'Handles Deleting Pill',
       defaultValue: { summary: undefined },
     },
     deleteIcon: {
-      description: "Material-UI icon (Used only when OnDelete is present)",
+      description: 'Material-UI icon (Used only when OnDelete is present)',
       defaultValue: { summary: undefined },
     },
   },
@@ -52,7 +51,7 @@ const MainPill = (args) => <BmPill {...args} />;
 export const BasicPill = MainPill.bind({});
 BasicPill.args = {
   icon: <Favorite />,
-  label: "label",
+  label: 'label',
   color: undefined,
   onDelete: undefined,
   deleteIcon: undefined,
@@ -64,7 +63,7 @@ BasicPill.args = {
 export const CustomPill = MainPill.bind({});
 CustomPill.args = {
   icon: undefined,
-  label: "label",
+  label: 'label',
   color: undefined,
   onDelete: true,
   deleteIcon: <Delete />,

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -5,74 +5,72 @@ import wa from '../../assets/wa.png';
 import fb from '../../assets/fb.png';
 import insta from '../../assets/insta.png';
 
-
 const handleSize = (size) => {
-    if (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";
-    }
-    return "3.429rem"
+  if (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';
+  }
+  return '3.429rem';
 };
 
 const position = (size) => {
-    if (size) {
-        if (size === "large") return "2.286rem";
-        if (size === "medium") return "1.5rem";
-        if (size === "small") return "1rem";
-        if (size === "xsmall") return "0.714rem";
-    }
-    return "2.286rem"
+  if (size) {
+    if (size === 'large') return '2.286rem';
+    if (size === 'medium') return '1.5rem';
+    if (size === 'small') return '1rem';
+    if (size === 'xsmall') return '0.714rem';
+  }
+  return '2.286rem';
 };
 
 const ProfileImg = styled.img`
-    height: ${(props) => handleSize(props.size)};
-    width: ${(props) => handleSize(props.size)};
-    object-fit: contain;
-    border-radius: 50%;
-    display:flex;
+  height: ${(props) => handleSize(props.size)};
+  width: ${(props) => handleSize(props.size)};
+  object-fit: contain;
+  border-radius: 50%;
+  display: flex;
 `;
 
 const Profile = styled.div`
-    height: ${(props) => handleSize(props.size)};
-    width: ${(props) => handleSize(props.size)};
-    border-radius: 50%;
-    border: 1px solid ${BmBgLightBlue};
-    display:flex;
-    align-items:center;
-    justify-content: center;
-    position: relative;
-    background: ${BmSecondaryBlue12};
+  height: ${(props) => handleSize(props.size)};
+  width: ${(props) => handleSize(props.size)};
+  border-radius: 50%;
+  border: 1px solid ${BmBgLightBlue};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: ${BmSecondaryBlue12};
 `;
 
 const Content = styled.div`
-    display:flex;
-    align-items:center;
-    justify-content: center;
-    position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
 `;
 
-
 const Dot = styled.img`
-    position: absolute;
-    left: ${(props) => position(props.size)};
-    bottom: 0rem;
-    object-fit: contain;
-    height: 1rem;
-    width: 1rem;
+  position: absolute;
+  left: ${(props) => position(props.size)};
+  bottom: 0rem;
+  object-fit: contain;
+  height: 1rem;
+  width: 1rem;
 `;
 
 export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
-    return (
-        <>
-            <Profile size={size} {...rest}>
-                {content && !img && <Content>{content}</Content>}
-                {img && !content && <ProfileImg src={img} />}
-                {channel && channel === 'whatsapp' && <Dot size={size} src={wa} />}
-                {channel && channel === 'facebook' && <Dot size={size} src={fb} />}
-                {channel && channel === 'instagram' && <Dot size={size} src={insta} />}
-            </Profile>
-        </>
-    )
-}
+  return (
+    <>
+      <Profile size={size} {...rest}>
+        {content && !img && <Content>{content}</Content>}
+        {img && !content && <ProfileImg src={img} />}
+        {channel && channel === 'whatsapp' && <Dot size={size} src={wa} />}
+        {channel && channel === 'facebook' && <Dot size={size} src={fb} />}
+        {channel && channel === 'instagram' && <Dot size={size} src={insta} />}
+      </Profile>
+    </>
+  );
+};

package/src/lib/components/ProfileIcon/profileIcon.stories.js

@@ -1,31 +1,32 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmProfileIcon } from "./ProfileIcon";
+import React from 'react';
+import { BmProfileIcon } from './ProfileIcon';
 import beem from '../../assets/beem.jpeg';
 
-
 export default {
   component: BmProfileIcon,
-  title: "components/ProfileIcon",
+  title: 'components/ProfileIcon',
   argTypes: {
     size: {
-      options: ["xsmall", "small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the profile",
-      defaultValue: { summary: "large" },
+      options: ['xsmall', 'small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the profile',
+      defaultValue: { summary: 'large' },
     },
     img: {
-      description: "Image to be displayed (will not be displayed if content is present)",
+      description:
+        'Image to be displayed (will not be displayed if content is present)',
       defaultValue: { summary: undefined },
     },
     content: {
-      description: "Content to be displayed (will not be displayed if image is present)",
+      description:
+        'Content to be displayed (will not be displayed if image is present)',
       defaultValue: { summary: undefined },
     },
     channel: {
-      options: ["whatsapp", "instagram", "facebook"],
-      control: { type: "select" },
-      description: "Profile badge",
+      options: ['whatsapp', 'instagram', 'facebook'],
+      control: { type: 'select' },
+      description: 'Profile badge',
       defaultValue: { summary: undefined },
     },
   },
@@ -35,23 +36,22 @@ const MainProfileIcon = (args) => <BmProfileIcon {...args} />;
 
 export const Sample = MainProfileIcon.bind({});
 Sample.args = {
-  channel: "whatsapp",
-  size: "large",
+  channel: 'whatsapp',
+  size: 'large',
 };
 
 export const ImageProfile = MainProfileIcon.bind({});
 ImageProfile.args = {
-  channel: "whatsapp",
-  size: "large",
+  channel: 'whatsapp',
+  size: 'large',
   img: beem,
-  content: undefined
+  content: undefined,
 };
 
 export const ContentProfile = MainProfileIcon.bind({});
 ContentProfile.args = {
-  channel: "whatsapp",
-  size: "large",
+  channel: 'whatsapp',
+  size: 'large',
   content: <h4>BC</h4>,
-  img: undefined
+  img: undefined,
 };
-

package/src/lib/components/ProgressBar/progressbar.js

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 import Proptypes from 'prop-types';
-import { BmGrey100, BmPrimaryBlue } from "../colors";
+import { BmGrey100, BmPrimaryBlue } from '../colors';
 
 const Container = styled.div`
   height: 0.75rem;
@@ -36,8 +36,7 @@ export const BmProgressBar = (props) => {
   );
 };
 
-
 BmProgressBar.propTypes = {
   value: Proptypes.string.isRequired,
   color: Proptypes.string,
-}
+};

package/src/lib/components/ProgressBar/progressbar.stories.js

@@ -1,19 +1,18 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmProgressBar } from "./progressbar";
-import { Home } from "@material-ui/icons";
+import React from 'react';
+import { BmProgressBar } from './progressbar';
 
 export default {
   component: BmProgressBar,
-  title: "components/ProgressBar",
+  title: 'components/ProgressBar',
   argTypes: {
     value: {
-      control: { type: "text" },
-      description: "Progress value",
+      control: { type: 'text' },
+      description: 'Progress value',
     },
     color: {
-      control: { type: "text" },
-      description: "Color of the progress bar",
+      control: { type: 'text' },
+      description: 'Color of the progress bar',
     },
   },
 };
@@ -22,5 +21,5 @@ const MainProgressBar = (args) => <BmProgressBar {...args} />;
 
 export const ProgressBar = MainProgressBar.bind({});
 ProgressBar.args = {
-  value: "50",
+  value: '50',
 };

package/src/lib/components/ProgressRing/progressRing.js

@@ -1,13 +1,14 @@
-import React, { useEffect, useState, useRef } from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
+/* eslint-disable no-shadow */
+import React, { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import {
   BmGrey100,
   BmPrimaryBlue,
   BmSecondaryDarkGreen,
   BmPrimaryGold,
   BmSecondaryRed,
-} from "../colors";
+} from '../colors';
 
 const small = 1.429;
 const medium = 1.714;
@@ -16,18 +17,18 @@ const large = 2.286;
 let center;
 let radius;
 let circumference;
-let strokeWidth = 5;
+const strokeWidth = 5;
 let initialSize;
 
 const measurement = (size) => {
   let initialSize = size || large * 14;
-  if (size === "small") {
+  if (size === 'small') {
     initialSize = small * 14;
   }
-  if (size === "medium") {
+  if (size === 'medium') {
     initialSize = medium * 14;
   }
-  if (size === "large") {
+  if (size === 'large') {
     initialSize = large * 14;
   }
   center = initialSize / 2;
@@ -38,17 +39,17 @@ const measurement = (size) => {
 const ProgressRingWrapper = styled.svg`
   display: flex;
   width: ${({ size }) => {
-    if (size === "small") return "1.429rem";
-    if (size === "medium") return "1.714rem";
-    if (size === "large") return "2.286rem";
-    if (!size) return "2.286rem";
+    if (size === 'small') return '1.429rem';
+    if (size === 'medium') return '1.714rem';
+    if (size === 'large') return '2.286rem';
+    if (!size) return '2.286rem';
     return `${size}px`;
   }};
   height: ${({ size }) => {
-    if (size === "small") return "1.429rem";
-    if (size === "medium") return "1.714rem";
-    if (size === "large") return "2.286rem";
-    if (!size) return "2.286rem";
+    if (size === 'small') return '1.429rem';
+    if (size === 'medium') return '1.714rem';
+    if (size === 'large') return '2.286rem';
+    if (!size) return '2.286rem';
     return `${size}px`;
   }};
 `;
@@ -61,10 +62,10 @@ const ProgressRingCircle2 = styled.circle`
   fill: none;
   stroke: ${({ variant, progress }) => {
     if (progress) {
-      if (variant === "primary") return `${BmPrimaryBlue}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "warning") return `${BmPrimaryGold}`;
-      if (variant === "danger") return `${BmSecondaryRed}`;
+      if (variant === 'primary') return `${BmPrimaryBlue}`;
+      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+      if (variant === 'warning') return `${BmPrimaryGold}`;
+      if (variant === 'danger') return `${BmSecondaryRed}`;
       if (!variant) return `${BmPrimaryBlue}`;
     }
     if (!progress) return `${BmGrey100}`;
@@ -74,12 +75,12 @@ const ProgressRingCircle2 = styled.circle`
 const Text = styled.text`
   font-size: ${() => {
     if (initialSize >= 50 && initialSize < 100) {
-      return "1rem";
+      return '1rem';
     }
     if (initialSize >= 100) {
-      return "2rem";
+      return '2rem';
     }
-    return "0.5rem";
+    return '0.5rem';
   }};
   text-anchor: middle;
   fill: black;
@@ -101,7 +102,7 @@ const BmProgressRing = (props) => {
     const progressOffset = ((100 - progress) / 100) * circumference;
     setOffset(progressOffset);
 
-    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+    circleRef.current.style = 'transition: stroke-dashoffset 850ms ease-in-out';
   }, [setOffset, progress, offset]);
 
   return (

package/src/lib/components/ProgressRing/progressRing.stories.js

@@ -1,25 +1,25 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmProgressRing from "./progressRing";
+import React from 'react';
+import BmProgressRing from './progressRing';
 
 export default {
   component: BmProgressRing,
-  title: "components/ProgressRing",
+  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" },
+      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",
+      description: 'Progress Indicator',
     },
     variant: {
-      options: ["primary", "success", "warning", "danger"],
-      control: { type: "select" },
-      description: "Color of the Progress Ring",
-      defaultValue: { summary: "xsmall" },
+      options: ['primary', 'success', 'warning', 'danger'],
+      control: { type: 'select' },
+      description: 'Color of the Progress Ring',
+      defaultValue: { summary: 'xsmall' },
     },
   },
 };
@@ -28,14 +28,14 @@ const MainProgressRing = (args) => <BmProgressRing {...args} />;
 
 export const BasicProgressRing = MainProgressRing.bind({});
 BasicProgressRing.args = {
- progress: 30,
- variant: "success",
- size: "xlarge"
+  progress: 30,
+  variant: 'success',
+  size: 'xlarge',
 };
 
 export const CustomProgressRing = MainProgressRing.bind({});
 CustomProgressRing.args = {
   progress: 50,
-  variant: "primary",
-  size: "40"
- };
+  variant: 'primary',
+  size: '40',
+};

package/src/lib/components/RouteLink/link.js

@@ -1,13 +1,14 @@
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import { BmPrimaryBlue } from "../colors";
-import { p } from "../text";
-import { darken } from "polished";
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { darken } from 'polished';
+import { BmPrimaryBlue } from '../colors';
+import { p } from '../text';
 
-//TODO: To be fixed for hover states
+// TODO: To be fixed for hover states
 export const BmRouteLink = styled(Link)`
   ${p}
-  color: ${(props) => (props.color ? props.color : `${BmPrimaryBlue} `)} !important;
+  color: ${(props) =>
+    props.color ? props.color : `${BmPrimaryBlue} `} !important;
   text-decoration: none;
   &:hover,
   &:focus,
@@ -16,6 +17,7 @@ export const BmRouteLink = styled(Link)`
     &:before {
       font-weight: normal;
     }
-    color: ${(props) => darken(0.1, props.color ? props.color : `${BmPrimaryBlue}`)} !important;
+    color: ${(props) =>
+      darken(0.1, props.color ? props.color : `${BmPrimaryBlue}`)} !important;
   }
 `;