beem-component 1.0.1 → 1.0.5

package/src/lib/components/{buttonAlertIcons.js → Buttons/buttonAlertIcons.js}

@@ -1,8 +1,14 @@
-import React from 'react';
+import React from "react";
 import styled from "styled-components";
+import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
-import { BmSecondaryGrey, BmSecondaryRed, BmPrimaryWhite } from "./colors";
+import {
+  BmSecondaryGrey,
+  BmSecondaryRed,
+  BmPrimaryWhite,
+} from "../colors";
 import Badge from "@material-ui/core/Badge";
+import { PoppinsMedium } from "../typography";
 
 const size = (props) => {
   if (props.size === "small") return "1.429rem";
@@ -22,22 +28,21 @@ const AlertIcon = {
   root: {
     height: (props) => size(props),
     width: (props) => size(props),
-    fill: (props) => props.color ||`${BmSecondaryGrey}`
+    fill: (props) => props.color || `${BmSecondaryGrey}`,
   },
 };
 
-const BadgeIcon = (props) => ({
+const BadgeIcon = () => ({
   badge: {
     height: (props) => Badgesize(props),
     width: (props) => Badgesize(props),
     minWidth: (props) => Badgesize(props),
-    background:(props) => props.badgeColor || `${BmSecondaryRed}`,
+    background: (props) => props.badgeColor || `${BmSecondaryRed}`,
     color: `${BmPrimaryWhite}`,
-    fontFamily: "Poppins",
+    fontFamily: `${PoppinsMedium}`,
     fontStyle: "normal",
     fontWeight: 500,
     fontSize: "0.643rem",
-    lineHeight: "0.929rem",
     display: "flex",
     alignItems: "center",
     textAlign: "center",
@@ -69,8 +74,6 @@ export const BmBtnIconWrapper = styled.button`
   justify-content: center;
   align-items: center;
   padding: 0.536rem;
-  height: 3.357rem;
-  ${"" /* added */}
   border: none;
   background: none;
 `;
@@ -89,3 +92,11 @@ export const BmAlertIcon = (props) => {
     </BmBtnIconWrapper>
   );
 };
+
+BmAlertIcon.propTypes = {
+  size: PropTypes.string,
+  badgeColor: PropTypes.string,
+  badgeContent: PropTypes.string,
+  icon: PropTypes.node,
+  color: PropTypes.string,
+};

package/src/lib/components/{buttonIconsOnly.js → Buttons/buttonIconsOnly.js}

@@ -1,5 +1,7 @@
 import React from "react";
 import styled from "styled-components";
+import PropTypes from "prop-types";
+
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -8,8 +10,8 @@ import {
   BmSecondaryRed,
   BmSecondaryDarkGreen,
   BmGrey400,
-} from "./colors";
-import { BmButtonIcon } from "./iconStyles";
+} from "../colors";
+import { BmButtonIcon } from "../iconStyles";
 
 const BeemButtonIcon = styled.button`
   display: flex;
@@ -75,3 +77,11 @@ export const BmBtnIcon = (props) => {
     </BeemButtonIcon>
   );
 };
+
+BmBtnIcon.propTypes = {
+  size: PropTypes.string,
+  variant: PropTypes.string,
+  icon: PropTypes.node,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
+};

package/src/lib/components/{buttons.js → Buttons/buttons.js}

@@ -13,9 +13,9 @@ import {
   BmSecondaryCyan,
   BmSecondaryGreen8,
   BmSecondaryRed8,
-} from "./colors";
-import { BmButtonIcon } from "./iconStyles";
-import { h3, h4 } from "./text";
+} from "../colors";
+import { BmButtonIcon } from "../iconStyles";
+import { h3, h4 } from "../text";
 
 const ButtonText = styled.div`
   ${({ size }) => {
@@ -161,11 +161,11 @@ const BeemButton = styled.button`
 `;
 
 export const BmLeftIcon = styled(BmButtonIcon)`
-  padding-right: 0.5rem;
+  margin-right: 0.5rem;
 `;
 
 export const BmRightIcon = styled(BmButtonIcon)`
-  padding-left: 0.5rem;
+  margin-left: 0.5rem;
 `;
 export const BmButton = (props) => {
   const {
@@ -219,9 +219,9 @@ export const BmButton = (props) => {
 
 BmButton.propTypes = {
   size: PropTypes.string,
-  variant: PropTypes.string.isRequired,
-};
-
-BmButton.defaultProps = {
-  onClick: undefined,
+  variant: PropTypes.string,
+  leadingIcon: PropTypes.node,
+  trailingIcon: PropTypes.node,
+  color: PropTypes.string,
+  disabled: PropTypes.bool,
 };

package/src/lib/components/{Reports → Cards}/cards.js

@@ -13,29 +13,15 @@ export const BmCard = styled.div`
   background: ${BmPrimaryWhite};
   border: 0.0625rem solid ${BmGrey400};
   border-radius: 0.21875rem;
-  width: calc(25% - 1rem);
-  ${'' /* margin-right: 0.5rem; */}
 `;
 
-export const CardTitleWrapper = styled.div`
+BmCard.Header = styled.div`
   display: flex;
   flex-direction: row;
   padding: 1rem 1rem 0rem 1rem;
 `;
 
-export const CardTitleText = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const CardTitle = (props) => {
-  return (
-    <CardTitleWrapper>
-      <CardTitleText>{props.children}</CardTitleText>
-    </CardTitleWrapper>
-  );
-};
-
-export const BmCardBody = styled.div`
+BmCard.Body = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -44,6 +30,10 @@ export const BmCardBody = styled.div`
   padding: 0rem 1rem;
 `;
 
+export const CardTitleText = styled.h3`
+  color: ${BmPrimaryBlack};
+`;
+
 export const BmCardBodyText = styled.h1`
   display: flex;
   color: ${BmPrimaryBlack};
@@ -57,12 +47,12 @@ export const BmCardBodyImg = styled.div`
   width: 3rem;
 `;
 
-export const BmCardFooter = styled.div`
+BmCard.Footer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   border-top: 0.0625rem solid ${BmGrey400};
-  padding: 1rem 0rem 1rem 1rem;
+  padding: 1rem;
   align-items: center;
 `;
 
@@ -76,3 +66,5 @@ export const BmCardDetails = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export default BmCard;

package/src/lib/components/Cards/cards.stories.js

@@ -0,0 +1,52 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmCard from "./cards";
+import { text, boolean, select } from "@storybook/addon-knobs";
+import "../../../main.scss";
+import { Favorite, Home } from "@material-ui/icons";
+import { BmButton } from "../Buttons/buttons";
+import { BmTag } from "../tags";
+import Image from "../../assets/beem.jpeg";
+
+export default {
+  component: BmCard,
+  title: "components/Card",
+  argTypes: {
+    children: {
+      description: "Accordion Title Text",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+export const BasicCardSample = () => {
+  return (
+    <div>
+      <BmCard disabled={boolean("disabled", false)}>
+        <BmCard.Header>
+          <h3>{text("children", "Card Header")}</h3>
+        </BmCard.Header>
+        <BmCard.Body>Card Body</BmCard.Body>
+        <BmCard.Footer>Card Footer</BmCard.Footer>
+      </BmCard>
+    </div>
+  );
+};
+
+export const Example = () => {
+  return (
+    <BmCard>
+      <BmCard.Header>
+        <h3>Overview</h3>
+      </BmCard.Header>
+      <BmCard.Body>
+        <img src={Image} alt="Imagebody" />
+      </BmCard.Body>
+      <BmCard.Footer>
+        <BmButton size="small">Send</BmButton>
+        <BmButton variant="tertiary" size="small">
+          View
+        </BmButton>
+      </BmCard.Footer>
+    </BmCard>
+  );
+};

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

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { BmGrey400, BmPrimaryWhite } from "../colors";
+import PropTypes from "prop-types";
+
+const show = (isOpen) => {
+  if (isOpen !== undefined) {
+    if (isOpen === true) {
+      return `display: flex;
+      position: absolute;
+      margin-top: 0.5rem`;
+    }
+    if (isOpen === false) {
+      return `display: none;
+      position: absolute;
+      margin-top: 0.5rem`;
+    }
+  }
+  return "flex";
+};
+export const BmListBox = styled.div`
+  ${(props) => show(props.isOpen)};
+  flex-direction: column;
+  padding: 0.286rem 0rem;
+  background: ${BmPrimaryWhite};
+  border: 0.071rem solid ${BmGrey400};
+  box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);
+  border-radius: 0.21875rem;
+  z-index: 99999;
+  cursor: pointer;
+`;
+
+BmListBox.propTypes = {
+  isOpen: PropTypes.bool,
+}

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

@@ -0,0 +1,47 @@
+/* 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";
+
+export default {
+  component: BmListBox,
+  title: "components/Lists/ListBox",
+  argTypes: {
+    isOpen: {
+      description:
+        "true/false (optional), Used for handling the display of listbox",
+    },
+  },
+};
+
+export const ListBox = () => {
+  return (
+    <BmListBox>
+      <BmRowLabel trailingIcon={<KeyboardArrowRight />} size="large">
+        <h4>Row Label</h4>
+      </BmRowLabel>
+      <BmRowLabel size="large">
+        <h4>Row Label</h4>
+      </BmRowLabel>
+    </BmListBox>
+  );
+};
+
+export const FunctionalListBox = () => {
+  const [List, showList] = useState(true);
+  return (
+    <>
+      <BmButton onClick={() => showList(!List)}>Click Me!</BmButton>
+      <BmListBox isOpen={List}>
+        <BmRowLabel trailingIcon={<KeyboardArrowRight />} size="large">
+          <h4>Row Label</h4>
+        </BmRowLabel>
+        <BmRowLabel size="large">
+          <h4>Row Label</h4>
+        </BmRowLabel>
+      </BmListBox>
+    </>
+  );
+};

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

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

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

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { BmPrimaryBlack, BmPrimaryBlue } from "../colors";
 import { BmIcons } from "../iconStyles";
+import PropTypes from "prop-types";
 
 export const Container = styled.div`
   display: flex;
@@ -11,19 +12,24 @@ export const Container = styled.div`
   border-bottom: 0.125rem solid ${BmPrimaryBlue};
 `;
 
-export const Title = styled.h3`
-  color: ${BmPrimaryBlack};
-`;
-
-export const Icon = styled(BmIcons)`
-  margin-left: auto;
-`;
-
-export const BmListHeader = ({ children, trailingIcon }) => {
+export const BmListHeader = ({ children, trailingIcon, size, color }) => {
   return (
     <Container>
-      <Title>{children}</Title>
-      {trailingIcon && <Icon icon={trailingIcon} color={`${BmPrimaryBlack}`} />}
+      {children}
+      {trailingIcon && (
+        <BmIcons
+          icon={trailingIcon}
+          color={color || `${BmPrimaryBlack}` }
+          size={size || 'large'}
+        />
+      )}
     </Container>
   );
 };
+
+BmListHeader.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  color: PropTypes.string,
+  size: PropTypes.string,
+};

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

@@ -2,31 +2,34 @@ import React from "react";
 import styled from "styled-components";
 import { BmGrey100, BmPrimaryBlack, BmPrimaryWhite } from "../colors";
 import { BmIcons } from "../iconStyles";
+import PropTypes from "prop-types";
 
 export const Container = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 1rem;
+  justify-content: space-between;
   background: ${BmPrimaryWhite};
   margin: 0rem;
-
   &:hover {
     background: ${BmGrey100};
   }
 `;
 
-export const Title = styled.p`
-  color: ${BmPrimaryBlack};
-`;
-
-export const LeftIcon = styled(BmIcons)`
-  margin-right: 0.5rem;
+export const LeftContainer = styled.div`
+  display: flex;
+  flex-direction: flex-start;
+  align-items: center;
+  > * {
+    margin-right: 0.5rem;
+  }
 `;
 
 export const RightContainer = styled.div`
   margin-left: auto;
   display: flex;
+  flex-direction: flex-end;
   align-items: center;
 `;
 
@@ -38,24 +41,52 @@ export const Label = styled.p`
     margin-right: 0.5rem;
   `}
 `;
-
-export const BmRowLabel = ({ children, trailingIcon, leadingIcon, label, ...rest }) => {
+export const BmRowLabel = ({
+  children,
+  trailingIcon,
+  leadingIcon,
+  label,
+  color,
+  size,
+  ...rest
+}) => {
   return (
-    <Container {...rest}>
-      {leadingIcon && (
-        <LeftIcon icon={leadingIcon} color={`${BmPrimaryBlack}`} />
-      )}
-      <Title>{children}</Title>
+    <Container
+      trailingIcon={trailingIcon}
+      leadingIcon={leadingIcon}
+      label={label}
+      size={size}
+      {...rest}
+    >
+      <LeftContainer>
+        {leadingIcon && (
+          <BmIcons
+            icon={leadingIcon}
+            color={color || `${BmPrimaryBlack}}`}
+            size={size || 'small'}
+          />
+        )}
+        {children}
+      </LeftContainer>
       <RightContainer>
         {label && <Label trailingIcon={trailingIcon}>{label}</Label>}
         {trailingIcon && (
           <BmIcons
             icon={trailingIcon}
-            color={`${BmPrimaryBlack}`}
-            size="small"
+            color={color || `${BmPrimaryBlack}}`}
+            size={size ||  'small'}
           />
         )}
       </RightContainer>
     </Container>
   );
 };
+
+BmRowLabel.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  label: PropTypes.object,
+  leadingIcon: PropTypes.node,
+  color: PropTypes.string,
+  size: PropTypes.string,
+};

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

@@ -0,0 +1,59 @@
+/* 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";
+
+export default {
+  component: BmRowLabel,
+  title: "components/Lists/RowLabels",
+  argType: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the icons",
+      defaultValue: { summary: "small" },
+    },
+    trailingIcon: {
+      description: "Material-UI Icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    leadingIcon: {
+      description: "Material-UI Icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    color: {
+      description: "Color of the Icons",
+    },
+    children: {
+      description: "Row Label text",
+    },
+    label: {
+      description: "Label Text",
+    },
+  },
+};
+
+const MainRowLabel = (args) => <BmRowLabel {...args} />;
+
+export const TextOnly = MainRowLabel.bind({});
+TextOnly.args = {
+  children: <h3>Row Label</h3>,
+};
+
+export const TextLabel = MainRowLabel.bind({});
+TextLabel.args = {
+  children: <h3>Row Label</h3>,
+  label: <h3>Label</h3>,
+};
+
+export const LabelIcons = MainRowLabel.bind({});
+LabelIcons.args = {
+  ...TextLabel.args,
+  trailingIcon: <KeyboardArrowRight />,
+  leadingIcon: <Favorite />,
+  size: "large",
+};
+
+//TODO: add checkbox button example
+//TODO: size not working

package/src/lib/components/{loaders.js → Loader/loader.js}

@@ -1,26 +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 { BmPrimaryBlue } from "./colors";
+import {
+  BmPrimaryBlue,
+  BmSecondaryDarkGreen,
+  BmSecondaryRed,
+  BmPrimaryGold,
+} from "../colors";
 
 const style = {
   colorPrimary: {
-    color: ({ color }) => {
-      if (color) return color;
+    color: ({ type }) => {
+      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;
+  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";
-  } else {
-    defaultSize = size;
   }
   return <CircularProgress action size={defaultSize} {...rest} />;
 });
@@ -30,3 +36,8 @@ export const Loader = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
+BmLoader.propTypes = {
+  size: Proptypes.string,
+  type: Proptypes.string,
+}

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

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmLoader } from "./loader";
+
+export default {
+  component: BmLoader,
+  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" },
+    },
+    type: {
+      options: ["success", "warning", "error"],
+      control: { type: "select" },
+      description: "Type of loader",
+      defaultValue: { summary: "Beem default loader" },
+    },
+  },
+};
+
+const MainLoader = (args) => <BmLoader {...args} />;
+
+export const Loader = MainLoader.bind({});
+Loader.args = {
+  type: "success",
+  size: "small",
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { BmBgGreyBlue } from "../colors";
+
+export const MainWrapper = styled.div`
+  padding: 2.1875rem;
+  background-color: ${BmBgGreyBlue};
+`;