beem-component 1.2.7 → 1.3.0

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

@@ -1,17 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import Proptypes from "prop-types";
-import { Error, Info, Warning } from "@material-ui/icons";
+import { Clear, Error, Info, Warning } from "@material-ui/icons";
 import styled from "styled-components";
 import {
   BmGrey400,
   BmPrimaryBlue,
   BmSecondaryRed,
   BmPrimaryGold,
+  BmSecondaryGrey,
 } from "../colors";
 import { BmIcons } from "../iconStyles";
 
 export const NoteBarWrapper = styled.div`
-  display: flex;
+  display: ${({ closeButton, isOpen }) => {
+    if (!closeButton) {
+      return "flex";
+    }
+    return isOpen ? "flex" : "none";
+  }};
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 1rem;
@@ -22,9 +28,17 @@ export const NoteBarWrapper = styled.div`
   }
 `;
 
-export const BmNoteBar = ({ type, children, color, size, ...rest }) => {
+export const BmNoteBar = ({
+  type,
+  children,
+  color,
+  size,
+  closeButton,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
   return (
-    <NoteBarWrapper {...rest}>
+    <NoteBarWrapper closeButton={closeButton} isOpen={isOpen} {...rest}>
       {type === "info" && (
         <BmIcons
           icon={<Info />}
@@ -47,6 +61,15 @@ export const BmNoteBar = ({ type, children, color, size, ...rest }) => {
         />
       )}
       {children}
+      {closeButton && (
+        <BmIcons
+          icon={<Clear />}
+          color={color ? color : `${BmSecondaryGrey}`}
+          size={size ? size : "small"}
+          style={{ marginLeft: "auto" }}
+          onClick={() => setIsOpen(false)}
+        />
+      )}
     </NoteBarWrapper>
   );
 };
@@ -56,4 +79,5 @@ BmNoteBar.propTypes = {
   color: Proptypes.string,
   size: Proptypes.string,
   type: Proptypes.string,
+  closeButton: Proptypes.bool,
 };

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

@@ -26,6 +26,9 @@ export default {
       description: "Color of the icon ",
       defaultValue: { summary: undefined },
     },
+    closeButton: {
+      description: "If present will allow to close the notebar, default size of the icon is small",
+    },
   },
 };
 
@@ -38,3 +41,12 @@ NoteBar.args = {
   children: <p>NoteBar</p>,
   color: undefined,
 };
+
+export const NoteBarWithCloseButton = MainNoteBar.bind({});
+NoteBarWithCloseButton.args = {
+  type: "warning",
+  size: "large",
+  children: <p>NoteBar</p>,
+  color: undefined,
+  closeButton: true,
+};

package/src/lib/components/ProgressRing/progressRing.js

@@ -0,0 +1,145 @@
+import React, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import {
+  BmGrey100,
+  BmPrimaryBlue,
+  BmSecondaryDarkGreen,
+  BmPrimaryGold,
+  BmSecondaryRed,
+} from "../colors";
+
+const small = 1.429;
+const medium = 1.714;
+const large = 2.286;
+
+let center;
+let radius;
+let circumference;
+let strokeWidth = 5;
+let initialSize;
+
+const measurement = (size) => {
+  let initialSize = size || large * 14;
+  if (size === "small") {
+    initialSize = small * 14;
+  }
+  if (size === "medium") {
+    initialSize = medium * 14;
+  }
+  if (size === "large") {
+    initialSize = large * 14;
+  }
+  center = initialSize / 2;
+  radius = initialSize / 2 - strokeWidth / 2;
+  circumference = 2 * Math.PI * radius;
+  return { center, radius, circumference, initialSize };
+};
+const ProgressRingWrapper = styled.svg`
+  display: flex;
+  width: ${({ size }) => {
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "2.286rem";
+    if (!size) return "2.286rem";
+    return `${size}px`;
+  }};
+  height: ${({ size }) => {
+    if (size === "small") return "1.429rem";
+    if (size === "medium") return "1.714rem";
+    if (size === "large") return "2.286rem";
+    if (!size) return "2.286rem";
+    return `${size}px`;
+  }};
+`;
+
+const ProgressRingCircle1 = styled.circle`
+  fill: none;
+`;
+
+const ProgressRingCircle2 = styled.circle`
+  fill: none;
+  stroke: ${({ variant, progress }) => {
+    if (progress) {
+      if (variant === "primary") return `${BmPrimaryBlue}`;
+      if (variant === "success") return `${BmSecondaryDarkGreen}`;
+      if (variant === "warning") return `${BmPrimaryGold}`;
+      if (variant === "danger") return `${BmSecondaryRed}`;
+      if (!variant) return `${BmPrimaryBlue}`;
+    }
+    if (!progress) return `${BmGrey100}`;
+  }};
+`;
+
+const Text = styled.text`
+  font-size: ${() => {
+    if (initialSize >= 50 && initialSize < 100) {
+      return "1rem";
+    }
+    if (initialSize >= 100) {
+      return "2rem";
+    }
+    return "0.5rem";
+  }};
+  text-anchor: middle;
+  fill: black;
+`;
+
+const BmProgressRing = (props) => {
+  const [offset, setOffset] = useState(0);
+  const circleRef = useRef(null);
+  const { size, progress, variant, children } = props;
+
+  console.log({ children });
+  const initialMeasure = measurement(size);
+
+  circumference = initialMeasure.circumference;
+  radius = initialMeasure.radius;
+  center = initialMeasure.center;
+  initialSize = initialMeasure.initialSize;
+
+  useEffect(() => {
+    const progressOffset = ((100 - progress) / 100) * circumference;
+    setOffset(progressOffset);
+
+    circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out";
+  }, [setOffset, progress, offset]);
+
+  return (
+    <>
+      <ProgressRingWrapper size={size}>
+        <ProgressRingCircle1
+          stroke={`${BmGrey100}`}
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+
+        <Text x={`${center}`} y={`${center}`} size={size}>
+          {progress}
+        </Text>
+        <ProgressRingCircle2
+          progress={progress}
+          ref={circleRef}
+          variant={variant}
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          data-testid="progress-bar-bar"
+        />
+      </ProgressRingWrapper>
+    </>
+  );
+};
+
+BmProgressRing.propTypes = {
+  size: PropTypes.number.isRequired,
+  progress: PropTypes.number.isRequired,
+  variant: PropTypes.string,
+};
+
+export default BmProgressRing;

package/src/lib/components/ProgressRing/progressRing.stories.js

@@ -0,0 +1,41 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import BmProgressRing from "./progressRing";
+
+export default {
+  component: BmProgressRing,
+  title: "components/ProgressRing",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the Progress Ring (Can also be predefined e.g. 50)",
+      defaultValue: { summary: "large" },
+    },
+    progress: {
+      description: "Progress Indicator",
+    },
+    variant: {
+      options: ["primary", "success", "warning", "danger"],
+      control: { type: "select" },
+      description: "Color of the Progress Ring",
+      defaultValue: { summary: "xsmall" },
+    },
+  },
+};
+
+const MainProgressRing = (args) => <BmProgressRing {...args} />;
+
+export const BasicProgressRing = MainProgressRing.bind({});
+BasicProgressRing.args = {
+ progress: 30,
+ variant: "success",
+ size: "xlarge"
+};
+
+export const CustomProgressRing = MainProgressRing.bind({});
+CustomProgressRing.args = {
+  progress: 50,
+  variant: "primary",
+  size: "40"
+ };

package/src/lib/components/Tabs/tabs.js

@@ -9,15 +9,12 @@ const BmTabWrapper = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 0.714rem 1.714rem;
+  padding: 1rem;
   background: ${BmPrimaryWhite};
-  box-shadow: ${({ state }) => {
-    if (state === "active") {
+  box-shadow: ${({ state, disabled }) => {
+    if (state === "active" && !disabled) {
       return `inset 0px -3px 0px ${BmPrimaryBlue}`;
     }
-    if (state === "inactive") {
-      return `inset 0px -3px 0px ${BmGrey400}`;
-    }
     return "none";
   }};
   > *:not(:last-child) {
@@ -35,6 +32,15 @@ const BmTabWrapper = styled.div`
      color: ${color};
   }
   `}
+
+  &:hover {
+    box-shadow: ${({ disabled }) => {
+      if (!disabled) {
+        return `inset 0px -3px 0px ${BmGrey400}`;
+      }
+      return "none";
+    }};
+  }
 `;
 
 export const BmTab = ({
@@ -58,7 +64,7 @@ export const BmTab = ({
       {leadingIcon && (
         <BmIcons
           icon={leadingIcon}
-          size={size || 'large'}
+          size={size || "large"}
           color={disabled ? `${BmGrey400}` : color}
         />
       )}
@@ -66,7 +72,7 @@ export const BmTab = ({
       {trailingIcon && (
         <BmIcons
           icon={trailingIcon}
-          size={size || 'large'}
+          size={size || "large"}
           color={disabled ? `${BmGrey400}` : color}
         />
       )}
@@ -81,4 +87,5 @@ BmTab.propTypes = {
   state: PropTypes.string,
   color: PropTypes.string,
   size: PropTypes.string,
-};
+  disabled: PropTypes.bool,
+};

package/src/lib/components/Tabs/tabs.stories.js

@@ -12,7 +12,7 @@ export default {
       description: "Color of the Icons and Text",
     },
     state: {
-      options: ["active", "inactive"],
+      options: ["active"],
       control: { type: "select" },
       description: "State of the Tabs (optional)",
     },
@@ -22,16 +22,28 @@ export default {
       description: "Size of the icons",
       defaultValue: { summary: "large" },
     },
+    disabled: {
+      description:
+        "Disabled tab",
+    },
   },
 };
 
 const MainTab = (args) => <BmTab {...args} />;
 
-export const Tabs = MainTab.bind({});
-Tabs.args = {
+export const BasicTab = MainTab.bind({});
+BasicTab.args = {
   children: <h3>Tabs</h3>,
   leadingIcon: <Favorite />,
   trailingIcon: <KeyboardArrowDown />,
   disabled: false,
   state: 'active',
 };
+
+export const DisabledTab = MainTab.bind({});
+DisabledTab.args = {
+  children: <h3>Disabled Tabs</h3>,
+  leadingIcon: <Favorite />,
+  trailingIcon: <KeyboardArrowDown />,
+  disabled: true,
+};

package/src/lib/components/index.js

@@ -18,6 +18,9 @@ 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 {
   BmTagIcon,
   BmAvatarIcon,
@@ -72,6 +75,8 @@ export {
   BmListBox,
   BmListHeader,
   BmRowLabel,
+  BmBanner,
+  BmProgressRing,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,