beem-component 1.5.6 → 1.5.9

package/src/lib/components/Checkbox/checkboxToggler.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {
+  BmGrey400,
+  BmSecondaryDarkGreen,
+  BmGrey200,
+  BmBgGrey38,
+} from '../colors';
+
+const CheckBoxWrapper = styled.div`
+  position: relative;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+const CheckBoxLabel = styled.label`
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 3rem;
+  height: 1.25rem;
+  border-radius: 1.25rem;
+  background: ${(props) => (props.disabled ? BmGrey400 : BmBgGrey38)};
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    border-radius: 100%;
+    width: 1.75rem;
+    height: 1.75rem;
+    background: ${BmGrey200};
+    transition: 0.2s;
+  }
+`;
+
+const Label = styled.label`
+  align-items: center;
+  display: flex;
+  position: relative;
+`;
+const CheckBox = styled.input`
+  opacity: 0;
+  z-index: 1;
+    ${({ checked, disabled }) =>
+      !disabled &&
+      checked !== undefined &&
+      checked === true &&
+      `
+      &:checked + ${CheckBoxLabel} {
+        background: ${BmSecondaryDarkGreen};
+        &::after {
+          content: '';
+          display: block;
+          width: 1.75rem;
+          height: 1.75rem;
+          margin-left: 1.25rem;
+          transition: 0.2s;
+        }  `}
+  }
+`;
+
+export const BmCheckboxToggle = ({ checked, onChange, disabled, label }) => {
+  return (
+    <CheckBoxWrapper>
+      <Label htmlFor={label} disabled={disabled}>
+        {label}
+      </Label>
+      <CheckBox
+        id={label || 'checkbox'}
+        type="checkbox"
+        checked={checked}
+        onChange={() => onChange && onChange(!checked)}
+        disabled={disabled}
+        hidden
+      />
+      <CheckBoxLabel htmlFor={label || 'checkbox'} disabled={disabled} />
+    </CheckBoxWrapper>
+  );
+};
+
+BmCheckboxToggle.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  label: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+};

package/src/lib/components/Checkbox/checkboxToggler.stories.js

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React, { useState } from 'react';
+import { BmCheckboxToggle } from './checkboxToggler';
+
+export default {
+  component: BmCheckboxToggle,
+  title: 'components/CheckboxToggler',
+  argTypes: {
+    label: {
+      description: 'Label (optional))',
+      defaultValue: { summary: undefined },
+    },
+    checked: {
+      description:
+        'If true, the checkbox is set to checked. If false, it is not checked.',
+      defaultValue: { summary: undefined },
+      control: { type: 'boolean' },
+    },
+    onChange: {
+      description: 'Invoked when the user clicks or drags the toggler.',
+    },
+    disabled: {
+      description: 'for disabling the checkbox toggler',
+    },
+  },
+};
+export const Sample = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <BmCheckboxToggle
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label={<h4>Field Label</h4>}
+    />
+  );
+};
+
+export const DisabledToggler = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <BmCheckboxToggle
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label={<h4>Field Label</h4>}
+      disabled
+    />
+  );
+};

package/src/lib/components/Lists/listBox.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from "react";
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryWhite } from "../colors";
-import PropTypes from "prop-types";
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey400, BmPrimaryWhite } from '../colors';
 
 const show = (isOpen) => {
   if (isOpen !== undefined) {
@@ -16,7 +16,7 @@ const show = (isOpen) => {
       margin-top: 0.5rem`;
     }
   }
-  return "flex";
+  return 'flex';
 };
 
 const BmListBoxWrapper = styled.div`
@@ -40,9 +40,9 @@ export const BmListBox = ({ children, showList, setShowList, ...rest }) => {
         setShowList(false);
       }
     };
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return () => {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [setShowList, showList]);
 

package/src/lib/components/Lists/listBox.stories.js

@@ -1,23 +1,20 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React, { useState } from "react";
-import { BmListBox } from "./listBox";
-import { KeyboardArrowRight } from "@material-ui/icons";
-import { BmRowLabel } from "./rowLabels";
-import { BmButton } from "../Buttons/buttons";
+import React, { useState } from 'react';
+import { KeyboardArrowRight } from '@material-ui/icons';
+import { BmListBox } from './listBox';
+import { BmRowLabel } from './rowLabels';
+import { BmButton } from '../Buttons/buttons';
 
 export default {
   component: BmListBox,
-  title: "components/Lists/ListBox",
+  title: 'components/Lists/ListBox',
   argTypes: {
     showList: {
-      description:
-        "Used for handling the display of listbox",
+      description: 'Used for handling the display of listbox',
     },
     setShowList: {
-      description:
-        "Function for handling the display of listbox",
+      description: 'Function for handling the display of listbox',
     },
-    
   },
 };
 

package/src/lib/components/Lists/listHeader.stories.js

@@ -1,28 +1,28 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmListHeader } from "./listheader";
-import "../../../main.scss";
-import { Favorite } from "@material-ui/icons";
+import React from 'react';
+import { Favorite } from '@material-ui/icons';
+import { BmListHeader } from './listheader';
+import '../../../main.scss';
 
 export default {
   component: BmListHeader,
-  title: "components/Lists/ListHeader",
-  argType: {
+  title: 'components/Lists/ListHeader',
+  argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the trailing icon",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the trailing icon',
+      defaultValue: { summary: 'large' },
     },
     trailingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: { summary: undefined },
     },
     color: {
-      description: "Color of the Icon and Border",
+      description: 'Color of the Icon and Border',
     },
     children: {
-      description: "List header text",
+      description: 'List header text',
     },
   },
 };

package/src/lib/components/Lists/listheader.js

@@ -1,8 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import { BmPrimaryBlack, BmPrimaryBlue } from "../colors";
-import { BmIcons } from "../iconStyles";
-import PropTypes from "prop-types";
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmPrimaryBlack, BmPrimaryBlue } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const Container = styled.div`
   display: flex;
@@ -11,7 +11,7 @@ export const Container = styled.div`
   padding: 0rem 1rem 1rem 1rem;
   border-bottom: 0.125rem solid
     ${({ color }) => {
-      return color ? color : `${BmPrimaryBlue}`;
+      return color || `${BmPrimaryBlue}`;
     }};
 `;
 
@@ -29,7 +29,7 @@ export const BmListHeader = ({
         <BmIcons
           icon={trailingIcon}
           color={color || `${BmPrimaryBlack}`}
-          size={size || "large"}
+          size={size || 'large'}
         />
       )}
     </Container>

package/src/lib/components/Lists/rowLabels.js

@@ -1,8 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import { BmGrey100, BmPrimaryBlack, BmPrimaryWhite } from "../colors";
-import { BmIcons } from "../iconStyles";
-import PropTypes from "prop-types";
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey100, BmPrimaryBlack, BmPrimaryWhite } from '../colors';
+import { BmIcons } from '../iconStyles';
 
 export const Container = styled.div`
   display: flex;
@@ -74,7 +74,7 @@ export const BmRowLabel = ({
           <BmIcons
             icon={trailingIcon}
             color={color || `${BmPrimaryBlack}}`}
-            size={size ||  'small'}
+            size={size || 'small'}
           />
         )}
       </RightContainer>

package/src/lib/components/Lists/rowLabels.stories.js

@@ -1,35 +1,35 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmRowLabel } from "./rowLabels";
-import "../../../main.scss";
-import { Favorite, KeyboardArrowRight } from "@material-ui/icons";
+import React from 'react';
+import { Favorite, KeyboardArrowRight } from '@material-ui/icons';
+import { BmRowLabel } from './rowLabels';
+import '../../../main.scss';
 
 export default {
   component: BmRowLabel,
-  title: "components/Lists/RowLabels",
-  argType: {
+  title: 'components/Lists/RowLabels',
+  argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the icons",
-      defaultValue: { summary: "small" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the icons',
+      defaultValue: { summary: 'small' },
     },
     trailingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: { summary: undefined },
     },
     leadingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: { summary: undefined },
     },
     color: {
-      description: "Color of the Icons",
+      description: 'Color of the Icons',
     },
     children: {
-      description: "Row Label text",
+      description: 'Row Label text',
     },
     label: {
-      description: "Label Text",
+      description: 'Label Text',
     },
   },
 };
@@ -52,8 +52,8 @@ LabelIcons.args = {
   ...TextLabel.args,
   trailingIcon: <KeyboardArrowRight />,
   leadingIcon: <Favorite />,
-  size: "large",
+  size: 'large',
 };
 
-//TODO: add checkbox button example
-//TODO: size not working
+// TODO: add checkbox button example
+// TODO: size not working

package/src/lib/components/Loader/loader.js

@@ -1,32 +1,32 @@
-import React from "react";
+import React from 'react';
 import Proptypes from 'prop-types';
-import CircularProgress from "@material-ui/core/CircularProgress";
-import styled from "styled-components";
-import { withStyles } from "@material-ui/core/styles";
+import CircularProgress from '@material-ui/core/CircularProgress';
+import styled from 'styled-components';
+import { withStyles } from '@material-ui/core/styles';
 import {
   BmPrimaryBlue,
   BmSecondaryDarkGreen,
   BmSecondaryRed,
   BmPrimaryGold,
-} from "../colors";
+} from '../colors';
 
 const style = {
   colorPrimary: {
     color: ({ type }) => {
-      if (type === "success") return `${BmSecondaryDarkGreen}`;
-      if (type === "warning") return `${BmPrimaryGold}`;
-      if (type === "error") return `${BmSecondaryRed}`;
+      if (type === 'success') return `${BmSecondaryDarkGreen}`;
+      if (type === 'warning') return `${BmPrimaryGold}`;
+      if (type === 'error') return `${BmSecondaryRed}`;
       return `${BmPrimaryBlue}`;
     },
   },
 };
 
 export const BmLoader = withStyles(style)(({ size, ...rest }) => {
-  let defaultSize = size || "2.286rem";
+  let defaultSize = size || '2.286rem';
   if (size) {
-    if (size === "large") defaultSize = "2.286rem";
-    if (size === "medium") defaultSize = "1.714rem";
-    if (size === "small") defaultSize = "1.429rem";
+    if (size === 'large') defaultSize = '2.286rem';
+    if (size === 'medium') defaultSize = '1.714rem';
+    if (size === 'small') defaultSize = '1.429rem';
   }
   return <CircularProgress action size={defaultSize} {...rest} />;
 });
@@ -40,4 +40,4 @@ export const Loader = styled.div`
 BmLoader.propTypes = {
   size: Proptypes.string,
   type: Proptypes.string,
-}
+};

package/src/lib/components/Loader/loader.stories.js

@@ -1,22 +1,22 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import { BmLoader } from "./loader";
+import React from 'react';
+import { BmLoader } from './loader';
 
 export default {
   component: BmLoader,
-  title: "components/Loader",
+  title: 'components/Loader',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the loader (Can also be predefined e.g. 10px)",
-      defaultValue: { summary: "large" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the loader (Can also be predefined e.g. 10px)',
+      defaultValue: { summary: 'large' },
     },
     type: {
-      options: ["success", "warning", "error"],
-      control: { type: "select" },
-      description: "Type of loader",
-      defaultValue: { summary: "Beem default loader" },
+      options: ['success', 'warning', 'error'],
+      control: { type: 'select' },
+      description: 'Type of loader',
+      defaultValue: { summary: 'Beem default loader' },
     },
   },
 };
@@ -25,6 +25,6 @@ const MainLoader = (args) => <BmLoader {...args} />;
 
 export const Loader = MainLoader.bind({});
 Loader.args = {
-  type: "success",
-  size: "small",
-};
+  type: 'success',
+  size: 'small',
+};

package/src/lib/components/MainWrapper/index.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmBgGreyBlue } from "../colors";
+import styled from 'styled-components';
+import { BmBgGreyBlue } from '../colors';
 
 export const MainWrapper = styled.div`
   padding: 2.1875rem;

package/src/lib/components/MessageCounter/MessageCounter.stories.js

@@ -1,35 +1,35 @@
 /* eslint-disable import/no-anonymous-default-export */
-import React from "react";
-import BmCounter from "./messageCounter";
-import { text, select } from "@storybook/addon-knobs";
+import React from 'react';
+import { text, select } from '@storybook/addon-knobs';
+import BmCounter from './messageCounter';
 
 export default {
   component: BmCounter,
-  title: "components/MessageCounter",
+  title: 'components/MessageCounter',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
-      control: { type: "select" },
-      description: "Size of the counter (can also be custom example: 10px)",
-      defaultValue: { summary: "small" },
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+      description: 'Size of the counter (can also be custom example: 10px)',
+      defaultValue: { summary: 'small' },
     },
     children: {
-      description: "Counter Text",
+      description: 'Counter Text',
       defaultValue: { summary: undefined },
     },
   },
 };
 
 const optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
 
 export const MessageCounter = () => {
   return (
-    <BmCounter size={select("size", optionSize, "large")}>
-      {text("children", "00")}
+    <BmCounter size={select('size', optionSize, 'large')}>
+      {text('children', '00')}
     </BmCounter>
   );
 };

package/src/lib/components/MessageCounter/messageCounter.js

@@ -1,7 +1,7 @@
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { BmPrimaryWhite, BmPrimaryBlue } from "../colors";
-import { h3, h4, p } from "../text";
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmPrimaryWhite, BmPrimaryBlue } from '../colors';
+import { h3, h4, p } from '../text';
 
 const BmCounter = styled.div`
   display: flex;
@@ -10,23 +10,23 @@ const BmCounter = styled.div`
   text-align: center;
   color: ${BmPrimaryWhite};
   width: ${({ size }) => {
-    if (size === "small") return "1.429rem";
-    if (size === "medium") return "1.714rem";
-    if (size === "large") return "2.286rem";
-    if (!size) return "1.429rem";
+    if (size === 'small') return '1.429rem';
+    if (size === 'medium') return '1.714rem';
+    if (size === 'large') return '2.286rem';
+    if (!size) return '1.429rem';
     return size;
   }};
   height: ${({ size }) => {
-    if (size === "small") return "1.429rem";
-    if (size === "medium") return "1.714rem";
-    if (size === "large") return "2.286rem";
-    if (!size) return "1.429rem";
+    if (size === 'small') return '1.429rem';
+    if (size === 'medium') return '1.714rem';
+    if (size === 'large') return '2.286rem';
+    if (!size) return '1.429rem';
     return size;
   }};
   ${({ size }) => {
-    if (size === "large") return `${h3}`;
-    if (size === "medium") return `${h4}`;
-    if (size === "small") return `${p}`;
+    if (size === 'large') return `${h3}`;
+    if (size === 'medium') return `${h4}`;
+    if (size === 'small') return `${p}`;
     return `${p}`;
   }}
   border-radius: 50%;
@@ -39,4 +39,4 @@ BmCounter.propTypes = {
   size: PropTypes.string,
 };
 
-export default BmCounter;
+export default BmCounter;