beem-component 1.0.1 → 1.0.5

package/src/lib/components/Modals/modal copy.js

@@ -0,0 +1,159 @@
+import React, { useEffect, useCallback, useState } from "react";
+import { Clear } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmBgGrey45, BmPrimaryBlack, BmPrimaryWhite } from "../colors";
+import { BmIcons } from "../iconStyles";
+
+const { Provider, Consumer } = React.createContext();
+
+export const Overlay = styled.div`
+ 	position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background-color: ${BmBgGrey45};
+}
+`;
+export const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  margin: auto;
+  background: ${BmPrimaryWhite};
+  width: ${({ size }) => {
+    if (size) {
+      console.log({ size });
+      if (size === "small") return "21.429rem";
+      if (size === "default") return "35.714rem";
+      if (size === "large") return "57.143rem";
+      if (size === "xlarge") return "81.429rem";
+      return size;
+    }
+    return "35.714rem";
+  }};
+  > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+export const ModalWrapper = styled.div`
+  z-index: 9999;
+  overflow-x: auto;
+  overflow-y: auto;
+  outline: 0;
+  position: fixed;
+  height: auto;
+  top: ${({ centered }) => {
+    if (centered) {
+      return "50%";
+    }
+    return "10%";
+  }};
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 1.143rem 0rem;
+`;
+
+export const HeaderText = styled.h2`
+  text-align: center;
+  display: flex;
+  color: ${BmPrimaryBlack};
+  margin-left: auto;
+`;
+
+export const Close = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-left: auto;
+`;
+
+export const BmModal = ({
+  children,
+  show,
+  size,
+  centered,
+  setShowModals,
+  ...rest
+}) => {
+  const [toggle, setToggle] = useState(show);
+  useEffect(() => {
+    setToggle(show);
+  }, [show]);
+  return (
+    <>
+      {toggle && (
+        <>
+          <Overlay />
+          <ModalWrapper showModal={show} centered={centered}>
+            <Provider value={{ toggle, setToggle, size, show }}>
+              <ModalContent size={size} {...rest}>
+                {children}
+              </ModalContent>
+            </Provider>
+          </ModalWrapper>
+        </>
+      )}
+    </>
+  );
+};
+
+const ModalHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+BmModal.Header = ({
+  children,
+  leadingIcon,
+  trailingIcon,
+  size,
+  closeButton,
+  show,
+  ...rest
+}) => {
+  return (
+    <Consumer>
+      {(value) => (
+        <>
+          <ModalHeader {...rest}>
+            {JSON.stringify(value)}
+            {children}
+            {closeButton && (
+              <BmIcons
+                size="xlarge"
+                icon={<Clear />}
+                onClick={() =>
+                  value.setToggle(!value.toggle)
+                }
+                {...rest}
+              />
+            )}
+          </ModalHeader>
+        </>
+      )}
+    </Consumer>
+  );
+};
+
+BmModal.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+BmModal.Footer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default BmModal;

package/src/lib/components/Modals/modal.js

@@ -0,0 +1,152 @@
+import React, { useEffect, useCallback, useState } from "react";
+import PropTypes from "prop-types";
+import { Clear } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmBgGrey45, BmPrimaryWhite } from "../colors";
+import { BmIcons } from "../iconStyles";
+
+const { Provider, Consumer } = React.createContext();
+
+export const Overlay = styled.div`
+ 	position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background-color: ${BmBgGrey45};
+}
+`;
+export const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  margin: auto;
+  background: ${BmPrimaryWhite};
+  width: ${({ size }) => {
+    if (size) {
+      if (size === "small") return "21.429rem";
+      if (size === "default") return "35.714rem";
+      if (size === "large") return "57.143rem";
+      if (size === "xlarge") return "81.429rem";
+      return size;
+    }
+    return "35.714rem";
+  }};
+  > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+export const ModalWrapper = styled.div`
+  z-index: 9999;
+  overflow-x: auto;
+  overflow-y: auto;
+  outline: 0;
+  position: fixed;
+  height: auto;
+  top: ${({ centered }) => {
+    if (centered) {
+      return "50%";
+    }
+    return "10%";
+  }};
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const BmModal = ({
+  children,
+  show,
+  size,
+  onHide,
+  centered,
+  ...rest
+}) => {
+  const [toggle, setToggle] = useState(show);
+  useEffect(() => {
+    setToggle(show);
+  }, [show]);
+
+  const keyPress = useCallback(
+    (e) => {
+      if (e.key === "Escape" && show && onHide !== undefined) {
+        onHide(false);
+      }
+    },
+    [onHide, show],
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", keyPress);
+    return () => document.removeEventListener("keydown", keyPress);
+  }, [keyPress]);
+
+  return (
+    <>
+      {toggle && (
+        <>
+          <Overlay />
+          <ModalWrapper showModal={show} centered={centered} onHide={onHide}>
+            <Provider value={{ toggle, setToggle, size, show, onHide }}>
+              <ModalContent size={size} {...rest}>
+                {children}
+              </ModalContent>
+            </Provider>
+          </ModalWrapper>
+        </>
+      )}
+    </>
+  );
+};
+
+const ModalHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
+  return (
+    <Consumer>
+      {(value) => (
+        <>
+          <ModalHeader {...rest}>
+            {children}
+            {closeButton && (
+              <BmIcons
+                size="xlarge"
+                icon={<Clear />}
+                onClick={() =>
+                  value && value.onHide && value.onHide(!value.show)
+                }
+                {...rest}
+              />
+            )}
+          </ModalHeader>
+        </>
+      )}
+    </Consumer>
+  );
+};
+
+BmModal.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+BmModal.Footer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+BmModal.propTypes = {
+  size: PropTypes.string,
+  centered: PropTypes.bool,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
+  closeButton: PropTypes.bool,
+};
+export default BmModal;

package/src/lib/components/Modals/modals.stories.js

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React, { useState } from "react";
+import BmModal from "./modal";
+import { BmButton } from "../Buttons/buttons";
+
+export default {
+  component: BmModal,
+  title: "components/Modals",
+  argType: {
+    size: {
+      options: ["small", "default", "large", "xlarge"],
+      control: { type: "select" },
+      description: "Size of the Modal (Optional)",
+      defaultValue: { summary: "default" },
+    },
+    closeButton: {
+      description:
+        "Placed on BmModal.Header component. Displays the close button (X)",
+    },
+    centered: {
+      description: "Centers the modal",
+    },
+    show: {
+      control: { type: "boolean" },
+      description: "Handling the opening and closing of the modal",
+    },
+    onHide: {
+      description: "Handling the closing of the modal",
+    },
+  },
+};
+
+export const SampleModal = () => {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)} centered>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.Body>
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+    </>
+  );
+};
+export const ExampleModal = () => {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal
+        size="small"
+        show={showModal}
+        onHide={() => setShowModal(false)}
+        centered
+      >
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.Body>
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <BmButton size="small">Send</BmButton>
+          <BmButton size="small" variant="secondary">
+            View
+          </BmButton>
+        </BmModal.Footer>
+      </BmModal>
+    </>
+  );
+};

package/src/lib/components/{infoNote.js → NoteBar.js/noteBar.js}

@@ -1,60 +1,59 @@
 import React from "react";
+import Proptypes from "prop-types";
 import { Error, Info, Warning } from "@material-ui/icons";
 import styled from "styled-components";
 import {
   BmGrey400,
-  BmPrimaryWhite,
   BmPrimaryBlue,
-  BmSecondaryGrey,
   BmSecondaryRed,
   BmPrimaryGold,
-} from "./colors";
-import { BmIcons } from "./iconStyles";
+} from "../colors";
+import { BmIcons } from "../iconStyles";
 
-export const InfoNoteWrapper = styled.div`
+export const NoteBarWrapper = styled.div`
   display: flex;
-  flex-direction: flex-start;
+  flex-direction: row;
   align-items: center;
   padding: 0.5rem 1rem;
-  background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   border-radius: 0.25rem;
-  width: 100%;
-
-  p {
-    color: ${(props) => (props.color ? props.color : `${BmSecondaryGrey}`)};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
   }
 `;
 
-export const BmLeftIcon = styled(BmIcons)`
-  margin-right: 0.5rem;
-`;
-
-export const BmInfoNote = ({ type, children, color, size, ...rest }) => {
+export const BmNoteBar = ({ type, children, color, size, ...rest }) => {
   return (
-    <InfoNoteWrapper {...rest}>
+    <NoteBarWrapper {...rest}>
       {type === "info" && (
-        <BmLeftIcon
+        <BmIcons
           icon={<Info />}
           color={color ? color : `${BmPrimaryBlue}`}
-          size={size ? size : "1.429rem"}
+          size={size ? size : "large"}
         />
       )}
       {type === "error" && (
-        <BmLeftIcon
+        <BmIcons
           icon={<Error />}
           color={color ? color : `${BmSecondaryRed}`}
-          size={size ? size : "1.429rem"}
+          size={size ? size : "large"}
         />
       )}
       {type === "warning" && (
-        <BmLeftIcon
+        <BmIcons
           icon={<Warning />}
           color={color ? color : `${BmPrimaryGold}`}
-          size={size ? size : "1.429rem"}
+          size={size ? size : "large"}
         />
       )}
-      <p>{children}</p>
-    </InfoNoteWrapper>
+      {children}
+    </NoteBarWrapper>
   );
 };
+
+BmNoteBar.propTypes = {
+  children: Proptypes.object,
+  color: Proptypes.string,
+  size: Proptypes.string,
+  type: Proptypes.string,
+};

package/src/lib/components/NoteBar.js/noteBar.stories.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmNoteBar } from "./noteBar";
+
+export default {
+  component: BmNoteBar,
+  title: "components/NoteBar",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the icons",
+      defaultValue: { summary: "large" },
+    },
+    children: {
+      description: "Note Description ",
+      defaultValue: { summary: undefined },
+    },
+    type: {
+      options: ["info", "warning", "error"],
+      control: { type: "select" },
+      description: "Type of note",
+      defaultValue: { summary: undefined },
+    },
+    color: {
+      description: "Color of the icon ",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainNoteBar = (args) => <BmNoteBar {...args} />;
+
+export const NoteBar = MainNoteBar.bind({});
+NoteBar.args = {
+  type: "warning",
+  size: "large",
+  children: <p>NoteBar</p>,
+  color: undefined,
+};

package/src/lib/components/PerformanceIndicator/performaceIndicator.stories.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmPerformanceIndicator } from "./performanceIndicator";
+
+export default {
+  component: BmPerformanceIndicator,
+  title: "components/PerformanceIndicator",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large", "xlarge"],
+      control: { type: "select" },
+      description: "Size of the Indicator (Can also be predefined e.g. 10px)",
+      defaultValue: { summary: "xlarge" },
+    },
+    type: {
+      options: ["upwards", "downwards"],
+      control: { type: "select" },
+      description: "Type of Indicator",
+      defaultValue: { summary: undefined },
+    },
+    children: {
+      description: "Performance Indicator Value (h2)",
+      defaultValue: { summary: undefined },
+    },
+    color: {
+      description: "Color of Performance Indicator",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainPI = (args) => <BmPerformanceIndicator {...args} />;
+
+export const PerformanceIndicator = MainPI.bind({});
+PerformanceIndicator.args = {
+  type: "upwards",
+  size: "xlarge",
+  children: "100%",
+  color: undefined,
+};

package/src/lib/components/PerformanceIndicator/performanceIndicator.js

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import Proptypes from "prop-types";
+import { BmGrey400 } from "../colors";
+import { BmIcons } from "../iconStyles";
+import ArrowCircleUpIcon from "@mui/icons-material/ArrowCircleUp";
+import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
+
+export const BmPIWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  h2 {
+    color: ${({ color }) => {
+      if (color) return color;
+      return `${BmGrey400}`;
+    }};
+  }
+`;
+
+export const BmPerformanceIndicator = ({
+  type,
+  children,
+  size,
+  color,
+  ...rest
+}) => {
+  return (
+    <BmPIWrapper color={color} {...rest}>
+      {type === "upwards" && (
+        <BmIcons
+          icon={<ArrowCircleUpIcon />}
+          size={size || "xlarge"}
+          color={color || `${BmGrey400}`}
+        />
+      )}
+      {type === "downwards" && (
+        <BmIcons
+          icon={<ArrowCircleDownIcon />}
+          size={size || "xlarge"}
+          color={color || `${BmGrey400}`}
+        />
+      )}
+      <h2>{children}</h2>
+    </BmPIWrapper>
+  );
+};
+
+BmPerformanceIndicator.propTypes = {
+  children: Proptypes.string,
+  color: Proptypes.string,
+  size: Proptypes.string,
+  type: Proptypes.string,
+};

package/src/lib/components/Pills/pills.js

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import Proptypes from "prop-types";
+// eslint-disable-next-line no-unused-vars
+import { Clear, KeyboardArrowDown } from "@material-ui/icons";
+import styled from "styled-components";
+import { BmAvatar } from "../Avatars/avatars";
+import { BmGrey100 } from "../colors";
+import { BmIcons } from "../iconStyles";
+import { p } from "../text";
+
+export const BmPillWrapper = styled.div`
+  display: ${({ clicked }) => {
+    if (clicked) {
+      return "flex";
+    }
+    return "none";
+  }};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.214rem 0.571rem;
+  background: ${BmGrey100};
+  border-radius: 0.25rem;
+  ${({ label, color }) =>
+    label &&
+    `
+    ${p}
+    text-transform: uppercase;
+    color: ${color};
+  `}
+  > * {
+    margin-right: 0.25rem;
+  }
+`;
+
+export const BmPill = ({
+  type,
+  icon,
+  avatarIcon,
+  size,
+  avatarSize,
+  color,
+  label,
+  onDelete,
+  deleteIcon,
+  ...rest
+}) => {
+  const [clicked, setClicked] = useState(true);
+  return (
+    <>
+      <BmPillWrapper
+        label={label}
+        onDelete={onDelete}
+        onClick={() => (onDelete ? setClicked(false) : setClicked(true))}
+        color={color}
+        clicked={clicked}
+        {...rest}
+      >
+        {icon && <BmIcons size={size || "xsmall"} icon={icon} color={color} />}
+        {avatarIcon && (
+          <BmAvatar
+            user={avatarIcon}
+            size={avatarSize || "xsmall"}
+            type="circle"
+            color={color}
+          />
+        )}
+        {label}
+        {onDelete && (
+          <BmIcons
+            style={{ margin: "0rem 0rem 0rem 1rem" }}
+            size={size || "xsmall"}
+            icon={deleteIcon ? deleteIcon : <Clear />}
+            color={color || "black"}
+          />
+        )}
+      </BmPillWrapper>
+    </>
+  );
+};
+
+BmPill.propTypes = {
+  icon: Proptypes.object,
+  avatarIcon: Proptypes.object,
+  size: Proptypes.string,
+  avatarSize: Proptypes.string,
+  color: Proptypes.string,
+  label: Proptypes.string,
+  onDelete: Proptypes.object,
+  deleteIcon: Proptypes.object,
+};