beem-component 1.5.8 → 1.5.9

package/src/lib/components/dropdownButton.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { KeyboardArrowDown } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmBtnIcon } from "../components/Buttons/buttonIconsOnly";
-import { BmButton } from "../components/Buttons/buttons";
+import React from 'react';
+import { KeyboardArrowDown } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmBtnIcon } from './Buttons/buttonIconsOnly';
+import { BmButton } from './Buttons/buttons';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -10,7 +10,7 @@ import {
   BmSecondaryDarkGreen,
   BmGrey400,
   BmGrey100,
-} from "./colors";
+} from './colors';
 
 const Wrapper = styled.div`
   display: flex;
@@ -21,51 +21,48 @@ const Wrapper = styled.div`
 export const Drop = styled(BmBtnIcon)`
   background: ${({ variant, disabled, color }) => {
     if (!disabled) {
-      if (variant === "primary") return `${color ? color : BmPrimaryBlue}`
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      if (variant === "destructive") return `${BmSecondaryRed}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "neutral") return `${BmPrimaryWhite}`;
-      return `${color ? color : BmPrimaryBlue}`
-    } else {
-      if (variant === "primary") return `${BmGrey100}`;
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      return `${BmGrey100}`;
+      if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+      if (variant === 'secondary') return 'none';
+      if (variant === 'tertiary') return 'none';
+      if (variant === 'destructive') return `${BmSecondaryRed}`;
+      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+      if (variant === 'neutral') return `${BmPrimaryWhite}`;
+      return `${color || BmPrimaryBlue}`;
     }
+    if (variant === 'primary') return `${BmGrey100}`;
+    if (variant === 'secondary') return 'none';
+    if (variant === 'tertiary') return 'none';
+    return `${BmGrey100}`;
   }};
   border: 0.071rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${color ? color : BmPrimaryBlue}`
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
-        return `${color ? color : BmPrimaryBlue}`
-      } else {
-        if (variant === "primary") return `${BmGrey100}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
+        if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
+        return `${color || BmPrimaryBlue}`;
       }
+      if (variant === 'primary') return `${BmGrey100}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
     border-left:  0.071rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
+        if (variant === 'primary') return `${BmPrimaryWhite}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
         return `${BmPrimaryWhite}`;
-      } else {
-        if (variant === "primary") return `${BmGrey400}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
       }
+      if (variant === 'primary') return `${BmGrey400}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
   border-top-left-radius: 0.071rem; */}
   border-bottom-left-radius: 0.071rem; */}

package/src/lib/components/examples/InfoAccordion.js

@@ -1,4 +1,4 @@
-/* eslint-disable react/prop-types */
+
 import React from "react";
 import { BmAccordion } from "./lib/components";
 import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
-import { createGlobalStyle } from "styled-components";
-import { h1, h2, h3, h4, h5, h6, p, input, a } from "./text";
+import { createGlobalStyle } from 'styled-components';
+import { h1, h2, h3, h4, h5, h6, p, input, a } from './text';
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px; cursor: pointer}

package/src/lib/components/iconStyles.js

@@ -1,23 +1,22 @@
-import React from "react";
+import React from 'react';
 
-import { withStyles } from "@material-ui/core/styles";
+import { withStyles } from '@material-ui/core/styles';
+import SvgIcon from '@material-ui/core/SvgIcon';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmGrey400,
   BmPrimaryBlack,
   BmSecondaryGrey,
-} from "./colors";
-
-import SvgIcon from "@material-ui/core/SvgIcon";
+} from './colors';
 
 const size = (props) => {
-  if (props.size === "xsmall") return "1.143rem !important";
-  if (props.size === "small") return "1.429rem !important";
-  if (props.size === "medium") return "1.714rem !important";
-  if (props.size === "large") return "1.714rem !important";
-  if (props.size === "xlarge") return "2.286rem !important";
-  if (!props.size) return "1.714rem !important";
+  if (props.size === 'xsmall') return '1.143rem !important';
+  if (props.size === 'small') return '1.429rem !important';
+  if (props.size === 'medium') return '1.714rem !important';
+  if (props.size === 'large') return '1.714rem !important';
+  if (props.size === 'xlarge') return '2.286rem !important';
+  if (!props.size) return '1.714rem !important';
   return props.size;
 };
 
@@ -28,34 +27,32 @@ const ButtonIcon = {
     width: (props) => size(props),
     fill: ({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "active") return `${BmPrimaryWhite}`;
-        if (variant === "enabled") return `${BmPrimaryBlack}`;
-        if (variant === "destructive") return `${BmPrimaryWhite}`;
-        if (variant === "success") return `${BmPrimaryWhite}`;
-        if (variant === "neutral") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`;
+        if (variant === 'active') return `${BmPrimaryWhite}`;
+        if (variant === 'enabled') return `${BmPrimaryBlack}`;
+        if (variant === 'destructive') return `${BmPrimaryWhite}`;
+        if (variant === 'success') return `${BmPrimaryWhite}`;
+        if (variant === 'neutral') return `${color || BmPrimaryBlue}`;
+        if (variant === 'primary') return `${BmPrimaryWhite}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return `${color || BmPrimaryBlue}`;
         return `${BmPrimaryWhite}`;
-      } else {
-        return `${BmGrey400}`;
       }
+      return `${BmGrey400}`;
     },
     color: ({ variant, disabled, color }) => {
       if (color) return color;
       if (!disabled) {
-        if (variant === "active") return `${BmPrimaryWhite}`;
-        if (variant === "enabled") return `${BmPrimaryBlack}`;
-        if (variant === "destructive") return `${BmPrimaryWhite}`;
-        if (variant === "success") return `${BmPrimaryWhite}`;
-        if (variant === "neutral") return `${BmPrimaryBlue}`;
-        if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`;
-        if (variant === "tertiary") return `${color ? color : BmPrimaryBlue}`;
+        if (variant === 'active') return `${BmPrimaryWhite}`;
+        if (variant === 'enabled') return `${BmPrimaryBlack}`;
+        if (variant === 'destructive') return `${BmPrimaryWhite}`;
+        if (variant === 'success') return `${BmPrimaryWhite}`;
+        if (variant === 'neutral') return `${BmPrimaryBlue}`;
+        if (variant === 'primary') return `${BmPrimaryWhite}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return `${color || BmPrimaryBlue}`;
         return `${BmPrimaryWhite}`;
-      } else {
-        return `${BmGrey400}`;
       }
+      return `${BmGrey400}`;
     },
   },
 };
@@ -71,13 +68,13 @@ export const BmButtonIcon = withStyles(ButtonIcon)((props) => {
 // Tags
 const TagIcon = {
   root: {
-    height: (props) => size(props) || "1.143rem !important",
-    width: (props) => size(props) || "1.143rem !important",
+    height: (props) => size(props) || '1.143rem !important',
+    width: (props) => size(props) || '1.143rem !important',
     fill: ({ variant, color }) => {
       if (color) {
         return color;
       }
-      if (variant === "neutral" || variant === "light")
+      if (variant === 'neutral' || variant === 'light')
         return `${BmPrimaryBlack}`;
       return `${BmPrimaryWhite}`;
     },
@@ -85,7 +82,7 @@ const TagIcon = {
       if (color) {
         return color;
       }
-      if (variant === "neutral" || variant === "light")
+      if (variant === 'neutral' || variant === 'light')
         return `${BmPrimaryBlack}`;
       return `${BmPrimaryWhite}`;
     },
@@ -101,11 +98,11 @@ export const BmTagIcon = withStyles(TagIcon)((props) => {
 
 // Avatar Icons
 const Avatarsize = (props) => {
-  if (props.size === "xsmall") return "0.857rem !important";
-  if (props.size === "small") return "1.143rem !important";
-  if (props.size === "medium") return "1.429rem !important";
-  if (props.size === "large") return "2.286rem !important";
-  if (!props.size) return "2.286rem !important";
+  if (props.size === 'xsmall') return '0.857rem !important';
+  if (props.size === 'small') return '1.143rem !important';
+  if (props.size === 'medium') return '1.429rem !important';
+  if (props.size === 'large') return '2.286rem !important';
+  if (!props.size) return '2.286rem !important';
   return props.size;
 };
 
@@ -126,13 +123,13 @@ export const BmAvatarIcon = withStyles(AvatarIcon)((props) => {
   return null;
 });
 
-//check on sizing
+// check on sizing
 export const BmChatbotIcon = withStyles(AvatarIcon)((props) => {
   return (
     <SvgIcon action {...props}>
       <path
         d="M19 8.975V6C19 5.46957 18.7893 4.96086 18.4142 4.58579C18.0391 4.21072 17.5304 4 17 4H11V2.688C11.305 2.414 11.5 2.02 11.5 1.578C11.5 1.18018 11.342 0.798647 11.0607 0.517343C10.7794 0.236038 10.3978 0.0780029 10 0.0780029C9.60218 0.0780029 9.22064 0.236038 8.93934 0.517343C8.65804 0.798647 8.5 1.18018 8.5 1.578C8.5 2.02 8.695 2.414 9 2.688V4H3C2.46957 4 1.96086 4.21072 1.58579 4.58579C1.21071 4.96086 1 5.46957 1 6V8.998L0.928 9.003C0.675888 9.02097 0.439955 9.13382 0.26775 9.31883C0.095544 9.50384 -0.000132994 9.74725 1.38752e-07 10V12C1.38752e-07 12.2652 0.105357 12.5196 0.292893 12.7071C0.48043 12.8946 0.734784 13 1 13V18C1 18.5304 1.21071 19.0391 1.58579 19.4142C1.96086 19.7893 2.46957 20 3 20H17C17.5304 20 18.0391 19.7893 18.4142 19.4142C18.7893 19.0391 19 18.5304 19 18V13C19.2652 13 19.5196 12.8946 19.7071 12.7071C19.8946 12.5196 20 12.2652 20 12V10.062C20.0116 9.90681 19.9869 9.75104 19.928 9.607C19.726 9.119 19.293 9.002 19 8.975ZM5 10C5 8.896 5.672 8 6.5 8C7.328 8 8 8.896 8 10C8 11.104 7.328 12 6.5 12C5.672 12 5 11.104 5 10ZM13.998 16C12.997 15.997 6.001 16 6 16V14C6 14 13.001 13.998 14.002 14L13.998 16ZM13.5 12C12.672 12 12 11.104 12 10C12 8.896 12.672 8 13.5 8C14.328 8 15 8.896 15 10C15 11.104 14.328 12 13.5 12Z"
-        fill={props.color || "white"}
+        fill={props.color || 'white'}
       />
     </SvgIcon>
   );
@@ -144,7 +141,7 @@ const EmojiSize = () => {
   // if (props.size === "small") return "1.429rem";
   // if (props.size === "medium") return "1.714rem";
   // if (props.size === "large") return "1.714rem";
-  return "2.286rem !important";
+  return '2.286rem !important';
 };
 
 const EmojiIcon = {
@@ -169,7 +166,7 @@ export const BmQuickReplyIcon = withStyles(EmojiIcon)((props) => {
     <SvgIcon action {...props}>
       <path
         d="M5.33332 23.3932V5.83317H26.6667V13.8332H29.3333V5.83317C29.3333 4.3665 28.1333 3.1665 26.6667 3.1665H5.33332C3.86666 3.1665 2.67999 4.3665 2.67999 5.83317L2.66666 29.8332L7.99999 24.4998H20V21.8332H6.89332L5.33332 23.3932Z"
-        fill={props.color || "#575757"}
+        fill={props.color || '#575757'}
       />
     </SvgIcon>
   );
@@ -208,19 +205,19 @@ export const BmSupport = withStyles(icon)((props) => {
     <SvgIcon action {...props}>
       <path
         d="M21 12.22C21 6.73 16.74 3 12 3C7.31 3 3 6.65 3 12.28C2.4 12.62 2 13.26 2 14V16C2 17.1 2.9 18 4 18H5V11.9C5 8.03 8.13 4.9 12 4.9C15.87 4.9 19 8.03 19 11.9V19H11V21H19C20.1 21 21 20.1 21 19V17.78C21.59 17.47 22 16.86 22 16.14V13.84C22 13.14 21.59 12.53 21 12.22Z"
-        fill={props.color || "black"}
+        fill={props.color || 'black'}
       />
       <path
         d="M9 14C9.55228 14 10 13.5523 10 13C10 12.4477 9.55228 12 9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14Z"
-        fill={props.color || "black"}
+        fill={props.color || 'black'}
       />
       <path
         d="M15 14C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14Z"
-        fill={props.color || "black"}
+        fill={props.color || 'black'}
       />
       <path
         d="M18 11.03C17.7615 9.62413 17.0334 8.34796 15.9444 7.42738C14.8555 6.5068 13.4759 6.00117 12.05 6C9.01997 6 5.75997 8.51 6.01997 12.45C7.2531 11.9454 8.34221 11.1435 9.1902 10.1158C10.0382 9.08808 10.6187 7.86652 10.88 6.56C12.19 9.19 14.88 11 18 11.03Z"
-        fill={props.color || "black"}
+        fill={props.color || 'black'}
       />
     </SvgIcon>
   );

package/src/lib/components/index.js

@@ -1,27 +1,27 @@
-import BmAccordion from "./Accordion/Accordion";
-import BmAvatar from "./Avatars/avatars";
-import { BmAlertIcon } from "./Buttons/buttonAlertIcons";
-import { BmBtnIcon } from "./Buttons/buttonIconsOnly";
-import { BmButton } from "./Buttons/buttons";
-import BmCard from "./Cards/cards";
-import { BmButtonDropDown } from "./dropdownButton";
-import { GlobalStyle } from "./globalStyles";
-import { BmInput } from "./input";
-import { BmRouteLink } from "./RouteLink/link";
-import { BmListHeader } from "./Lists/listheader";
-import { BmRowLabel } from "./Lists/rowLabels";
-import { BmListBox } from "./Lists/listBox";
-import BmModal from "./Modals/modal";
-import { BmProgressBar } from "./ProgressBar/progressbar";
-import { BmTab } from "./Tabs/tabs";
-import * as BmColors from "./colors";
-import { BmLoader } from "./Loader/loader";
-import { BmCheckbox } from "./checkbox";
-import { BmTag } from "../components/Tags/tags";
-import BmBanner from "../components/BannerCard/bannerCards";
-import BmProgressRing from "./ProgressRing/progressRing";
-import {BmProfileIcon} from './ProfileIcon/ProfileIcon';
-
+import BmAccordion from './Accordion/Accordion';
+import BmAvatar from './Avatars/avatars';
+import { BmAlertIcon } from './Buttons/buttonAlertIcons';
+import { BmBtnIcon } from './Buttons/buttonIconsOnly';
+import { BmButton } from './Buttons/buttons';
+import BmCard from './Cards/cards';
+import { BmButtonDropDown } from './dropdownButton';
+import { GlobalStyle } from './globalStyles';
+import { BmInput } from './input';
+import { BmRouteLink } from './RouteLink/link';
+import { BmListHeader } from './Lists/listheader';
+import { BmRowLabel } from './Lists/rowLabels';
+import { BmListBox } from './Lists/listBox';
+import BmModal from './Modals/modal';
+import { BmProgressBar } from './ProgressBar/progressbar';
+import { BmTab } from './Tabs/tabs';
+import * as BmColors from './colors';
+import { BmLoader } from './Loader/loader';
+import { BmCheckbox } from './checkbox';
+import { BmTag } from './Tags/tags';
+import BmBanner from './BannerCard/bannerCards';
+import BmProgressRing from './ProgressRing/progressRing';
+import { BmProfileIcon } from './ProfileIcon/ProfileIcon';
+import { BmCheckboxToggle } from './Checkbox/checkboxToggler';
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -31,30 +31,30 @@ import {
   BmQuickReplyIcon,
   BmSupport,
   CopyToClipBoard,
-} from "./iconStyles";
-import { BmNoteBar } from "./NoteBar/noteBar";
-import { MainWrapper } from "../components/MainWrapper";
+} from './iconStyles';
+import { BmNoteBar } from './NoteBar/noteBar';
+import { MainWrapper } from './MainWrapper';
 
-//Chat Components
-import BmChat from "./ChatComponents/ChatBody/chatBody";
-import { BmChatHeader } from "./ChatComponents/ChatHeader/chatHeader";
-import BmContactCard from "./ChatComponents/ContactCards/contactCards";
-import BmInfoTab from "./ChatComponents/InfoTab/infoTab";
-import BmCounter from "./MessageCounter/messageCounter";
-//Chat Accordion components
-import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";
-import BmChatLabels from "./ChatComponents/LabelAccordion/LabelAccordion";
-import BmChatNotes from "./ChatComponents/NoteAccordion/NoteAccordion";
-import { BmColorPicker } from "./ChatComponents/ColorPicker/colorPicker";
+// Chat Components
+import BmChat from './ChatComponents/ChatBody/chatBody';
+import { BmChatHeader } from './ChatComponents/ChatHeader/chatHeader';
+import BmContactCard from './ChatComponents/ContactCards/contactCards';
+import BmInfoTab from './ChatComponents/InfoTab/infoTab';
+import BmCounter from './MessageCounter/messageCounter';
+// Chat Accordion components
+import BmChatForm from './ChatComponents/FormAccordion/FormAccordion';
+import BmChatLabels from './ChatComponents/LabelAccordion/LabelAccordion';
+import BmChatNotes from './ChatComponents/NoteAccordion/NoteAccordion';
+import { BmColorPicker } from './ChatComponents/ColorPicker/colorPicker';
 
-//SuperFluid Components
-import { BmContent } from "./SuperFluid/Content/index";
+// SuperFluid Components
+import { BmContent } from './SuperFluid/Content/index';
 import {
   BmContentFooter,
   BmContentTitle,
   BmFooterLeft,
   BmFooterRight,
-} from "./SuperFluid/ContentTitle.js/index.js";
+} from './SuperFluid/ContentTitle.js';
 import {
   BmSegmentCard,
   BmSegmentSelector,
@@ -63,7 +63,7 @@ import {
   BmSegmentCompleteContent,
   BmSegmentCompleteIcon,
   BmSegmentCreateContent,
-} from "./SuperFluid/SegmentCard/index";
+} from './SuperFluid/SegmentCard/index';
 
 export {
   BmAccordion,
@@ -79,6 +79,7 @@ export {
   BmBanner,
   BmProgressRing,
   BmProfileIcon,
+  BmCheckboxToggle,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,
@@ -93,7 +94,7 @@ export {
   BmButtonDropDown,
   BmCheckbox,
   BmInput,
-  //Old SFL componets to be refactored
+  // Old SFL componets to be refactored
   BmContent,
   BmContentFooter,
   BmContentTitle,
@@ -106,7 +107,7 @@ export {
   BmSegmentCompleteContent,
   BmSegmentCompleteIcon,
   BmSegmentCreateContent,
-  //Icons (Remove unused ones and check on the sizing for custom icons)
+  // Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
   BmIcons,
   BmTagIcon,
@@ -115,13 +116,13 @@ export {
   BmQuickReplyIcon,
   BmSupport,
   CopyToClipBoard,
-  //Chat Components
+  // Chat Components
   BmChatHeader,
   BmChat,
   BmInfoTab,
   BmContactCard,
   BmCounter,
-  //Chat Accordion Components
+  // Chat Accordion Components
   BmChatForm,
   BmChatLabels,
   BmChatNotes,

package/src/lib/components/input.js

@@ -1,7 +1,7 @@
-import { Done, ErrorOutline } from "@material-ui/icons";
-import React from "react";
-import styled from "styled-components";
-import { BmIcons } from ".";
+import { Done, ErrorOutline } from '@material-ui/icons';
+import React from 'react';
+import styled from 'styled-components';
+import { BmIcons } from './iconStyles';
 import {
   BmPrimaryWhite,
   BmGrey400,
@@ -13,7 +13,7 @@ import {
   BmSecondaryDarkGreen,
   BmSecondaryRed15,
   BmGrey100,
-} from "./colors";
+} from './colors';
 
 const BmInputLabel = styled.div`
   font-family: Open Sans;
@@ -25,7 +25,7 @@ const BmInputLabel = styled.div`
   letter-spacing: -0.02em;
   color: ${({ state }) => {
     if (state) {
-      if (state === "incomplete") return `${BmSecondaryRed}`;
+      if (state === 'incomplete') return `${BmSecondaryRed}`;
       return `${BmSecondaryGrey}`;
     }
     return `${BmSecondaryGrey}`;
@@ -38,7 +38,7 @@ export const BmInputField = styled.input`
   letter-spacing: -0.02em;
   color: ${({ state }) => {
     if (state) {
-      if (state === "disabled") return `${BmGrey400}`;
+      if (state === 'disabled') return `${BmGrey400}`;
       return `${BmPrimaryBlack}`;
     }
     return `${BmPrimaryBlack}`;
@@ -53,10 +53,10 @@ export const BmInputField = styled.input`
   }
   background: ${({ state }) => {
     if (state) {
-      if (state === "pressed") return `${BmGrey50}`; // TODO: to be reviewed
-      if (state === "positive") return `${BmSecondaryGreen15}`;
-      if (state === "negative") return `${BmSecondaryRed15}`;
-      if (state === "disabled") return `${BmGrey100}`;
+      if (state === 'pressed') return `${BmGrey50}`; // TODO: to be reviewed
+      if (state === 'positive') return `${BmSecondaryGreen15}`;
+      if (state === 'negative') return `${BmSecondaryRed15}`;
+      if (state === 'disabled') return `${BmGrey100}`;
       return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
@@ -80,9 +80,9 @@ const BmInputWrapper = styled.div`
   padding: 0rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "pressed") return `${BmGrey50}`;
-      if (state === "positive") return `${BmSecondaryGreen15}`;
-      if (state === "disabled") return `${BmGrey100}`;
+      if (state === 'pressed') return `${BmGrey50}`;
+      if (state === 'positive') return `${BmSecondaryGreen15}`;
+      if (state === 'disabled') return `${BmGrey100}`;
       return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
@@ -90,9 +90,9 @@ const BmInputWrapper = styled.div`
 
   border: ${({ state }) => {
     if (state) {
-      if (state === "positive") return `0.071rem solid ${BmSecondaryDarkGreen}`;
-      if (state === "negative") return `0.071rem solid ${BmSecondaryRed}`;
-      if (state === "disabled") return `0.071rem solid ${BmGrey100}`;
+      if (state === 'positive') return `0.071rem solid ${BmSecondaryDarkGreen}`;
+      if (state === 'negative') return `0.071rem solid ${BmSecondaryRed}`;
+      if (state === 'disabled') return `0.071rem solid ${BmGrey100}`;
       return `0.071rem solid ${BmGrey400}`;
     }
     return `0.071rem solid ${BmGrey400}`;
@@ -113,12 +113,12 @@ export const BmInput = ({ id, iconSize, label, state, ...rest }) => {
           id={id}
           {...rest}
           state={state}
-          disabled={state === "disabled" ? true : false}
+          disabled={state === 'disabled'}
         />
-        {state && state === "complete" && (
+        {state && state === 'complete' && (
           <BmIcons icon={<ErrorOutline />} size="small" />
         )}
-        {state && state === "incomplete" && (
+        {state && state === 'incomplete' && (
           <BmIcons icon={<Done />} size="small" />
         )}
       </BmInputWrapper>

package/src/lib/components/text.js

@@ -1,4 +1,4 @@
-import { PoppinsMedium, OpenSans } from "./typography";
+import { PoppinsMedium, OpenSans } from './typography';
 
 // 32px
 export const h1 = `font-family: ${PoppinsMedium};

package/src/lib/components/typography.js

@@ -1,16 +1,16 @@
-export const H1 = "2.286rem";
-export const H2 = "1.714rem";
-export const H3 = "1.286rem";
-export const H4 = "1.143rem";
-export const H5 = "0.857rem";
-export const H6 = "0.714rem";
-export const P = "0.929rem";
+export const H1 = '2.286rem';
+export const H2 = '1.714rem';
+export const H3 = '1.286rem';
+export const H4 = '1.143rem';
+export const H5 = '0.857rem';
+export const H6 = '0.714rem';
+export const P = '0.929rem';
 
-export const QuoteMark = "3.429rem";
-export const PullQuote = "1.286rem";
-export const Captions = "0.714rem";
-export const Hero = "1rem";
+export const QuoteMark = '3.429rem';
+export const PullQuote = '1.286rem';
+export const Captions = '0.714rem';
+export const Hero = '1rem';
 
-export const PoppinsMedium = "PoppinsMedium";
-export const Poppins = "Poppins";
-export const OpenSans = "OpenSans";
+export const PoppinsMedium = 'PoppinsMedium';
+export const Poppins = 'Poppins';
+export const OpenSans = 'OpenSans';

package/src/reportWebVitals.js

@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

package/babel.config.js

@@ -1,12 +0,0 @@
-
-module.exports = function (api) {
-    api.cache(true);
-    
-    const presets = [ "@babel/preset-env", "@babel/preset-react" ];
-    const plugins = [ "macros" ];
-
-    return {
-      presets,
-      plugins
-    };
-}