beem-component 1.5.6 → 1.5.9

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

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from 'react';
+import { BmProfileIcon } from './ProfileIcon';
+import beem from '../../assets/beem.jpeg';
+
+export default {
+  component: BmProfileIcon,
+  title: 'components/ProfileIcon',
+  argTypes: {
+    size: {
+      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)',
+      defaultValue: { summary: undefined },
+    },
+    content: {
+      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',
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainProfileIcon = (args) => <BmProfileIcon {...args} />;
+
+export const Sample = MainProfileIcon.bind({});
+Sample.args = {
+  channel: 'whatsapp',
+  size: 'large',
+};
+
+export const ImageProfile = MainProfileIcon.bind({});
+ImageProfile.args = {
+  channel: 'whatsapp',
+  size: 'large',
+  img: beem,
+  content: undefined,
+};
+
+export const ContentProfile = MainProfileIcon.bind({});
+ContentProfile.args = {
+  channel: 'whatsapp',
+  size: 'large',
+  content: <h4>BC</h4>,
+  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;
   }
 `;

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

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BrowserRouter, Switch } from "react-router-dom";
-import { BmRouteLink } from "./link";
+import React from 'react';
+import { BrowserRouter, Switch } from 'react-router-dom';
+import { BmRouteLink } from './link';
 
 export default {
   component: BmRouteLink,
-  title: "components/RouteLink",
+  title: 'components/RouteLink',
 };
 
 export const SampleLink = () => {

package/src/lib/components/ScrollBar/scrollBar.js

@@ -1,26 +1,27 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const ScrollbarWrapper = styled.div(() => ({
-  "::-webkit-scrollbar-thumb": {
-    background: "blue",
-    maxHeight: "10px",
-    display: "block",
-    width: "10em",
-    overflow: "auto",
-    height: "2em",
+  '::-webkit-scrollbar-thumb': {
+    background: 'blue',
+    maxHeight: '10px',
+    display: 'block',
+    width: '10em',
+    overflow: 'auto',
+    height: '2em',
   },
 }));
 
 export const Scrollbar = styled.div`
-::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: 0.714rem !important;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #E2E2E2;
-}`;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #e2e2e2;
+  }
+`;
 
 export const Content = styled.div(() => ({
-  direction: "ltr", // if you want to show the scroll bar on the left
+  direction: 'ltr', // if you want to show the scroll bar on the left
 }));
 
 export default ScrollbarWrapper;

package/src/lib/components/SuperFluid/Content/index.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryWhite } from "../../colors";
+import styled from 'styled-components';
+import { BmGrey400, BmPrimaryWhite } from '../../colors';
 
 export const BmContent = styled.div`
   display: flex;

package/src/lib/components/SuperFluid/ContentTitle.js/index.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmPrimaryBlack } from "../../colors";
+import styled from 'styled-components';
+import { BmPrimaryBlack } from '../../colors';
 
 export const BmContentTitle = styled.h1`
   color: ${BmPrimaryBlack};

package/src/lib/components/SuperFluid/SegmentCard/index.js

@@ -1,9 +1,10 @@
-import React from "react";
-import { CheckCircle } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmCheckbox } from "../../checkbox";
-import { BmGrey400, BmPrimaryWhite, BmPrimaryBlue } from "../../colors";
-import { BmIcons } from "../../iconStyles";
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { CheckCircle } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmCheckbox } from '../../checkbox';
+import { BmGrey400, BmPrimaryWhite, BmPrimaryBlue } from '../../colors';
+import { BmIcons } from '../../iconStyles';
 
 export const BmSegmentCard = styled.div`
   display: flex;
@@ -27,7 +28,7 @@ export const BmSegmentSelector = styled.div`
   border-left: none;
   border-radius: 0rem 0.188rem 0.25rem 0rem;
   margin: 0rem;
-  width: 80%; 
+  width: 80%;
 `;
 
 export const BmSegment = styled.div`
@@ -86,7 +87,7 @@ export const BmSegmentCompleteIcon = (props) => {
     <BmIcons
       icon={<CheckCircle />}
       color={props.color ? props.color : `${BmPrimaryBlue}`}
-      size={props.size ? props.size : "5rem"}
+      size={props.size ? props.size : '5rem'}
     />
   );
 };

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

@@ -1,8 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { BmGrey400, BmPrimaryBlue, BmPrimaryWhite } from "../colors";
-import { BmIcons } from "../iconStyles";
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey400, BmPrimaryBlue, BmPrimaryWhite } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 const BmTabWrapper = styled.div`
   display: flex;
@@ -12,10 +12,10 @@ const BmTabWrapper = styled.div`
   padding: 1rem;
   background: ${BmPrimaryWhite};
   box-shadow: ${({ state, disabled, stateColor }) => {
-    if (state === "active" && !disabled) {
-      return `inset 0px -3px 0px ${stateColor ? stateColor : BmPrimaryBlue}`;
+    if (state === 'active' && !disabled) {
+      return `inset 0px -3px 0px ${stateColor || BmPrimaryBlue}`;
     }
-    return "none";
+    return 'none';
   }};
   > *:not(:last-child) {
     margin-right: 0.5rem;
@@ -38,7 +38,7 @@ const BmTabWrapper = styled.div`
       if (!disabled) {
         return `inset 0px -3px 0px ${BmGrey400}`;
       }
-      return "none";
+      return 'none';
     }};
   }
 `;
@@ -64,7 +64,7 @@ export const BmTab = ({
       {leadingIcon && (
         <BmIcons
           icon={leadingIcon}
-          size={size || "large"}
+          size={size || 'large'}
           color={disabled ? `${BmGrey400}` : color}
         />
       )}
@@ -72,7 +72,7 @@ export const BmTab = ({
       {trailingIcon && (
         <BmIcons
           icon={trailingIcon}
-          size={size || "large"}
+          size={size || 'large'}
           color={disabled ? `${BmGrey400}` : color}
         />
       )}

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

@@ -1,34 +1,34 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { Favorite, KeyboardArrowDown } from "@material-ui/icons";
-import React from "react";
-import { BmTab } from "./tabs";
+import { Favorite, KeyboardArrowDown } from '@material-ui/icons';
+import React from 'react';
+import { BmTab } from './tabs';
 
 export default {
   component: BmTab,
-  title: "components/Tabs",
+  title: 'components/Tabs',
   argTypes: {
     color: {
-      control: { type: "text" },
-      description: "Color of the Icons and Text",
+      control: { type: 'text' },
+      description: 'Color of the Icons and Text',
     },
     state: {
-      options: ["active"],
-      control: { type: "select" },
-      description: "State of the Tabs (optional)",
+      options: ['active'],
+      control: { type: 'select' },
+      description: 'State of the Tabs (optional)',
     },
     stateColor: {
-      control: { type: "text" },
-      description: "Color of the active state",
-      defaultValue: { summary: "primary blue" },
+      control: { type: 'text' },
+      description: 'Color of the active state',
+      defaultValue: { summary: 'primary blue' },
     },
     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: "Disabled tab",
+      description: 'Disabled tab',
     },
   },
 };
@@ -41,7 +41,7 @@ BasicTab.args = {
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
-  state: "active",
+  state: 'active',
 };
 
 export const DisabledTab = MainTab.bind({});
@@ -58,6 +58,6 @@ ColoredTab.args = {
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
-  state: "active",
-  stateColor: "red",
+  state: 'active',
+  stateColor: 'red',
 };

package/src/lib/components/Tags/tags.js

@@ -1,7 +1,10 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { BmIcons } from "../iconStyles";
+/* eslint-disable react/no-children-prop */
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Clear } from '@material-ui/icons';
+import { BmIcons } from '../iconStyles';
 import {
   BmPrimaryWhite,
   BmSecondaryDarkGreen,
@@ -10,11 +13,10 @@ import {
   BmGrey100,
   BmGrey400,
   BmPrimaryGold,
-} from "../../components/colors";
-import { Clear } from "@material-ui/icons";
+} from '../colors';
 
 const Color = ({ variant, color }) => {
-  if (variant === "success" || variant === "warning" || variant === "danger") {
+  if (variant === 'success' || variant === 'warning' || variant === 'danger') {
     return `${BmPrimaryWhite}`;
   }
   if (!variant && color) {
@@ -24,12 +26,12 @@ const Color = ({ variant, color }) => {
 };
 
 const BeemTag = styled.button`
-  ${"" /* display: flex; */}
+  ${'' /* display: flex; */}
   display: ${({ closeButton, show }) => {
     if (!closeButton) {
-      return "flex";
+      return 'flex';
     }
-    return show ? "flex" : "none";
+    return show ? 'flex' : 'none';
   }};
   flex-direction: row;
   justify-content: center;
@@ -37,20 +39,20 @@ const BeemTag = styled.button`
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   background: ${({ variant }) => {
-    if (variant === "neutral") return `${BmGrey100}`;
-    if (variant === "success") return `${BmSecondaryDarkGreen}`;
-    if (variant === "warning") return `${BmPrimaryGold}`;
-    if (variant === "danger") return `${BmSecondaryRed}`;
-    if (variant === "light") return `${BmPrimaryWhite}`;
+    if (variant === 'neutral') return `${BmGrey100}`;
+    if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+    if (variant === 'warning') return `${BmPrimaryGold}`;
+    if (variant === 'danger') return `${BmSecondaryRed}`;
+    if (variant === 'light') return `${BmPrimaryWhite}`;
     if (!variant) return `${BmGrey100}`;
   }};
   border: 0.071rem solid
     ${({ variant }) => {
-      if (variant === "neutral") return `${BmGrey100}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "warning") return `${BmPrimaryGold}`;
-      if (variant === "danger") return `${BmSecondaryRed}`;
-      if (variant === "light") return `${BmGrey400}`;
+      if (variant === 'neutral') return `${BmGrey100}`;
+      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+      if (variant === 'warning') return `${BmPrimaryGold}`;
+      if (variant === 'danger') return `${BmSecondaryRed}`;
+      if (variant === 'light') return `${BmGrey400}`;
       return `${BmGrey100}`;
     }};
   > * {
@@ -96,7 +98,7 @@ export const BmTag = (props) => {
           icon={leadingIcon}
           variant={variant}
           color={Color({ color, variant })}
-          size={size || "small"}
+          size={size || 'small'}
         />
       )}
       {children}
@@ -105,15 +107,15 @@ export const BmTag = (props) => {
           icon={trailingIcon}
           disabled={disabled}
           color={Color({ color, variant })}
-          size={size || "small"}
+          size={size || 'small'}
         />
       )}
       {closeButton && (
         <BmIcons
           icon={<Clear />}
           color={Color({ color, variant })}
-          size={size ? size : "small"}
-          style={{ marginLeft: "auto" }}
+          size={size || 'small'}
+          style={{ marginLeft: 'auto' }}
           onClick={() => onHide && onHide(setToggle(!toggle))}
         />
       )}