beem-component 1.5.8 → 1.5.9

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))}
         />
       )}

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

@@ -1,36 +1,36 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { Favorite } from "@material-ui/icons";
-import React from "react";
-import { BmTag } from "./tags";
+import { Favorite } from '@material-ui/icons';
+import React from 'react';
+import { BmTag } from './tags';
 
 export default {
   component: BmTag,
-  title: "components/Tags",
+  title: 'components/Tags',
   argTypes: {
     color: {
-      control: { type: "text" },
+      control: { type: 'text' },
       description:
-        "Color of the Icons and Text, will work only if variant is not present",
+        'Color of the Icons and Text, will work only if variant is not present',
     },
     closeButton: {
-      control: { type: "boolean" },
-      description: "Will display (x) - Optional",
+      control: { type: 'boolean' },
+      description: 'Will display (x) - Optional',
     },
     onHide: {
       description:
-        "Handles closing of tags, will only work if closeButton is present (Optional)",
+        'Handles closing of tags, will only work if closeButton is present (Optional)',
     },
     size: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the icons",
-      defaultValue: { summary: "small" },
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the icons',
+      defaultValue: { summary: 'small' },
     },
     variant: {
-      options: ["success", "warning", "danger", "light", "neutral", undefined],
-      control: { type: "select" },
-      description: "Type of tag",
-      defaultValue: { summary: "neutral" },
+      options: ['success', 'warning', 'danger', 'light', 'neutral', undefined],
+      control: { type: 'select' },
+      description: 'Type of tag',
+      defaultValue: { summary: 'neutral' },
     },
   },
 };
@@ -42,12 +42,12 @@ Tags.args = {
   children: <p>Tags</p>,
   leadingIcon: <Favorite />,
   trailingIcon: <Favorite />,
-  variant: "success",
+  variant: 'success',
 };
 
 export const TagsWithCloseButton = () => {
   return (
-    <BmTag variant="light" closeButton onHide={() => console.log("Hide Tag")}>
+    <BmTag variant="light" closeButton onHide={() => alert('Hide Tag')}>
       <p>TAG</p>
     </BmTag>
   );

package/src/lib/components/breakpoints.js

@@ -1,7 +1,7 @@
 export const size = {
-  xs: "320px",
-  sm: "768px",
-  lg: "1200px",
+  xs: '320px',
+  sm: '768px',
+  lg: '1200px',
 };
 
 export const device = {

package/src/lib/components/checkbox.js

@@ -1,8 +1,9 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryBlack, BmPrimaryBlue, BmGrey100 } from "./colors";
+import styled from 'styled-components';
+import { BmGrey400, BmPrimaryBlack, BmPrimaryBlue, BmGrey100 } from './colors';
 
-const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
   display: flex;
   border: 0;
   height: 0.071rem;
@@ -28,7 +29,7 @@ const StyledCheckbox = styled.div`
     if (!disabled && checked) return `${BmPrimaryBlue}`;
     if (disabled && !checked) return `${BmGrey100}`;
     if (disabled && checked) return `${BmGrey100}`;
-    return "";
+    return '';
   }};
   border-radius: 0.143rem;
   transition: all 150ms;
@@ -36,11 +37,11 @@ const StyledCheckbox = styled.div`
     ${({ checked, disabled }) => {
       if (!disabled && checked) return `${BmPrimaryBlue}`;
       if (disabled && !checked) return `${BmGrey400}`;
-      if (disabled && checked) return "none";
+      if (disabled && checked) return 'none';
       return `${BmGrey400}`;
     }};
   ${Icon} {
-    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
+    visibility: ${(props) => (props.checked ? 'visible' : 'hidden')};
   }
 `;
 

package/src/lib/components/colors.js

@@ -1,61 +1,63 @@
 // Primary Colors
-export const BmPrimaryBlue = "#33B1BA";
+export const BmPrimaryBlue = '#33B1BA';
 
-export const BmPrimaryGold = "#F3A929";
+export const BmPrimaryGold = '#F3A929';
 
-export const BmPrimaryWhite = "#FFFFFF";
+export const BmPrimaryWhite = '#FFFFFF';
 
-export const BmPrimaryBlack = "#000000";
+export const BmPrimaryBlack = '#000000';
 
 // Secondary Colors
-export const BmSecondaryCyan = "#56C5CE";
+export const BmSecondaryCyan = '#56C5CE';
 
-export const BmSecondaryGrey = "#575757";
+export const BmSecondaryGrey = '#575757';
 
-export const BmSecondaryRed = "#F62E48";
+export const BmSecondaryRed = '#F62E48';
 
-export const BmSecondaryGreen = "#8CC63F";
+export const BmSecondaryGreen = '#8CC63F';
 
-export const BmSecondaryYellow = "#FFB822";
+export const BmSecondaryYellow = '#FFB822';
 
-export const BmSecondaryPurple = "#7A3FC6";
+export const BmSecondaryPurple = '#7A3FC6';
 
-export const BmSecondaryDarkGreen = "#04844B";
+export const BmSecondaryDarkGreen = '#04844B';
 
-export const BmSecondaryGreen8 = "rgba(4, 132, 75, 0.8)";
+export const BmSecondaryGreen8 = 'rgba(4, 132, 75, 0.8)';
 
-export const BmSecondaryRed8 = "rgba(246, 46, 72, 0.8)";
+export const BmSecondaryRed8 = 'rgba(246, 46, 72, 0.8)';
 
-export const BmSecondaryRed15 = "rgba(246, 46, 72, 0.15)";
+export const BmSecondaryRed15 = 'rgba(246, 46, 72, 0.15)';
 
-export const BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
+export const BmSecondaryGreen15 = 'rgba(4, 132, 75, 0.15)';
 
-export const BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)";
+export const BmSecondaryGold15 = 'rgba(243, 169, 41, 0.15)';
 
 // #33B1BA 12%
-export const BmSecondaryBlue12="rgba(51, 177, 186, 0.12)"; 
+export const BmSecondaryBlue12 = 'rgba(51, 177, 186, 0.12)';
 
 // Background Colors
-export const BmBgLightBlue = "#E1EAFC";
+export const BmBgLightBlue = '#E1EAFC';
 
-export const BmBgGreyBlue = "#F5F6FA";
+export const BmBgGreyBlue = '#F5F6FA';
 
-export const BmBgGrey45 = "rgba(0, 0, 0, 0.5)";
+export const BmBgGrey45 = 'rgba(0, 0, 0, 0.5)';
+
+export const BmBgGrey38 = 'rgba(0, 0, 0, 0.38)';
 
 // Grey Colors
-export const BmGrey600 = "#545454";
+export const BmGrey600 = '#545454';
 
-export const BmGrey500 = "#757575";
+export const BmGrey500 = '#757575';
 
-export const BmGrey400 = "#AFAFAF";
+export const BmGrey400 = '#AFAFAF';
 
-export const BmGrey200 = "#E2E2E2";
+export const BmGrey200 = '#E2E2E2';
 
-export const BmGrey100 = "#EEEEEE";
+export const BmGrey100 = '#EEEEEE';
 
-export const BmGrey50 = "#F6F6F6";
+export const BmGrey50 = '#F6F6F6';
 
 // Pictogram Colors
-export const BmPictogramBlue = "#CCEAEB";
+export const BmPictogramBlue = '#CCEAEB';
 
-export const BmPictogramGold = "#F8D8A2";
+export const BmPictogramGold = '#F8D8A2';