beem-component 1.0.1 → 1.0.5

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

@@ -0,0 +1,74 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { Delete, Favorite, Person } from "@material-ui/icons";
+import React from "react";
+import { BmPrimaryBlue } from "../colors";
+import { BmPill } from "./pills";
+
+export default {
+  component: BmPill,
+  title: "components/Pills",
+  argTypes: {
+    icon: {
+      description: "Material-UI icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    avatarIcon: {
+      description: "Material-UI icon(optional)",
+      defaultValue: { summary: undefined },
+    },
+    size: {
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      control: { type: "select" },
+      description: "Size of the Icon (Can also be predefined e.g. 10px)",
+      defaultValue: { summary: "xsmall" },
+    },
+    avatarSize: {
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      control: { type: "select" },
+      description: "Size of the AvatarIcon (Can also be predefined e.g. 10px)",
+      defaultValue: { summary: "xsmall" },
+    },
+    label: {
+      description: "Pill label in uppercase",
+      defaultValue: { summary: "undefined" },
+    },
+    color: {
+      description: "Color of Pill ",
+      defaultValue: { summary: "black" },
+    },
+    onDelete: {
+      description: "Handles Deleting Pill",
+      defaultValue: { summary: undefined },
+    },
+    deleteIcon: {
+      description: "Material-UI icon (Used only when OnDelete is present)",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainPill = (args) => <BmPill {...args} />;
+
+export const BasicPill = MainPill.bind({});
+BasicPill.args = {
+  icon: <Favorite />,
+  label: "label",
+  color: undefined,
+  onDelete: undefined,
+  deleteIcon: undefined,
+  avatarIcon: undefined,
+  avatarSize: undefined,
+  size: undefined,
+};
+
+export const CustomPill = MainPill.bind({});
+CustomPill.args = {
+  icon: undefined,
+  label: "label",
+  color: undefined,
+  onDelete: true,
+  deleteIcon: <Delete />,
+  avatarIcon: <Person />,
+  avatarSize: undefined,
+  size: undefined,
+};

package/src/lib/components/{progressbar.js → ProgressBar/progressbar.js}

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { BmGrey100, BmPrimaryBlue } from "./colors";
+import Proptypes from 'prop-types';
+import { BmGrey100, BmPrimaryBlue } from "../colors";
 
 const Container = styled.div`
   height: 0.75rem;
@@ -34,3 +35,9 @@ export const BmProgressBar = (props) => {
     </Container>
   );
 };
+
+
+BmProgressBar.propTypes = {
+  value: Proptypes.string.isRequired,
+  color: Proptypes.string,
+}

package/src/lib/components/ProgressBar/progressbar.stories.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmProgressBar } from "./progressbar";
+import { Home } from "@material-ui/icons";
+
+export default {
+  component: BmProgressBar,
+  title: "components/ProgressBar",
+  argTypes: {
+    value: {
+      control: { type: "text" },
+      description: "Progress value",
+    },
+    color: {
+      control: { type: "text" },
+      description: "Color of the progress bar",
+    },
+  },
+};
+
+const MainProgressBar = (args) => <BmProgressBar {...args} />;
+
+export const ProgressBar = MainProgressBar.bind({});
+ProgressBar.args = {
+  value: "50",
+};

package/src/lib/components/{Link.js → RouteLink/link.js}

@@ -1,16 +1,17 @@
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { BmPrimaryBlack } from "../components/colors";
-import { p } from "../components/text";
+import { BmPrimaryBlue } from "../colors";
+import { p } from "../text";
 
 export const BmRouteLink = styled(Link)`
   ${p}
-  color: ${BmPrimaryBlack};
+  color: ${(props) => (props.color ? props.color : `${BmPrimaryBlue} `)};
   text-decoration: none;
   &:hover,
   &:focus,
   &:active {
-    color: ${BmPrimaryBlack} !important;
+    ${'' /* color: ${(props) =>
+      darken(0.1, props.color ? props.color : `${BmPrimaryBlue} `)} !important; */}
     font-weight: 600;
     &:before {
       font-weight: normal;

package/src/lib/components/RouteLink/link.stories.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BrowserRouter, Switch } from "react-router-dom";
+import { BmRouteLink } from "./link";
+
+export default {
+  component: BmRouteLink,
+  title: "components/RouteLink",
+};
+
+export const SampleLink = () => {
+  return (
+    <>
+      <BrowserRouter>
+        <Switch>
+          <BmRouteLink to="#">Click Me!</BmRouteLink>
+        </Switch>
+      </BrowserRouter>
+    </>
+  );
+};

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

@@ -0,0 +1,84 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { BmGrey400, BmPrimaryBlue, BmPrimaryWhite } from "../colors";
+import { BmIcons } from "../iconStyles";
+
+const BmTabWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.714rem 1.714rem;
+  background: ${BmPrimaryWhite};
+  box-shadow: ${({ state }) => {
+    if (state === "active") {
+      return `inset 0px -3px 0px ${BmPrimaryBlue}`;
+    }
+    if (state === "inactive") {
+      return `inset 0px -3px 0px ${BmGrey400}`;
+    }
+    return "none";
+  }};
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  ${({ color, children, disabled }) =>
+    children && disabled
+      ? `
+    > * {
+     color: ${BmGrey400};
+  }
+  `
+      : `
+    > * {
+     color: ${color};
+  }
+  `}
+`;
+
+export const BmTab = ({
+  leadingIcon,
+  trailingIcon,
+  children,
+  size,
+  color,
+  icon,
+  disabled,
+  ...rest
+}) => {
+  return (
+    <BmTabWrapper
+      leadingIcon={leadingIcon}
+      trailingIcon={trailingIcon}
+      color={color}
+      disabled={disabled}
+      {...rest}
+    >
+      {leadingIcon && (
+        <BmIcons
+          icon={leadingIcon}
+          size={size || 'large'}
+          color={disabled ? `${BmGrey400}` : color}
+        />
+      )}
+      {children}
+      {trailingIcon && (
+        <BmIcons
+          icon={trailingIcon}
+          size={size || 'large'}
+          color={disabled ? `${BmGrey400}` : color}
+        />
+      )}
+    </BmTabWrapper>
+  );
+};
+
+BmTab.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  leadingIcon: PropTypes.node,
+  state: PropTypes.string,
+  color: PropTypes.string,
+  size: PropTypes.string,
+};

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

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { Favorite, KeyboardArrowDown } from "@material-ui/icons";
+import React from "react";
+import { BmTab } from "./tabs";
+
+export default {
+  component: BmTab,
+  title: "components/Tabs",
+  argTypes: {
+    color: {
+      control: { type: "text" },
+      description: "Color of the Icons and Text",
+    },
+    state: {
+      options: ["active", "inactive"],
+      control: { type: "select" },
+      description: "State of the Tabs (optional)",
+    },
+    size: {
+      options: ["small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the icons",
+      defaultValue: { summary: "large" },
+    },
+  },
+};
+
+const MainTab = (args) => <BmTab {...args} />;
+
+export const Tabs = MainTab.bind({});
+Tabs.args = {
+  children: <h3>Tabs</h3>,
+  leadingIcon: <Favorite />,
+  trailingIcon: <KeyboardArrowDown />,
+  disabled: false,
+};

package/src/lib/components/breakpoints.js

@@ -0,0 +1,11 @@
+export const size = {
+  xs: "320px",
+  sm: "768px",
+  lg: "1200px",
+};
+
+export const device = {
+  xs: `(min-width: ${size.xs})`,
+  sm: `(min-width: ${size.sm})`,
+  lg: `(min-width: ${size.lg})`,
+};

package/src/lib/components/colors.js

@@ -37,6 +37,8 @@ export const BmBgLightBlue = "#E1EAFC";
 
 export const BmBgGreyBlue = "#F5F6FA";
 
+export const BmBgGrey45 = "rgba(0, 0, 0, 0.5)";
+
 // Grey Colors
 export const BmGrey600 = "#545454";
 

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 "./buttonIconsOnly";
-import { BmButton } from "./buttons";
+import { BmBtnIcon } from "../components/Buttons/buttonIconsOnly";
+import { BmButton } from "../components/Buttons/buttons";
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,

package/src/lib/components/example.js

@@ -0,0 +1,30 @@
+const btnVariants = {
+  primary: "primary",
+  danger: "danger",
+  tertiary: "tertiary",
+};
+
+// Variant styles
+const variantStyles = {
+  [btnVariants.primary]: {
+    background: "#1890ff",
+  },
+  [btnVariants.danger]: {
+    background: "#f81d22",
+  },
+  [btnVariants.tertiary]: {
+    background: "#fff",
+    color: "#000",
+  },
+};
+
+function BaseButton({ variant, ...props }) {
+  const btnStyle = {
+    color: "#fff",
+    border: "none",
+    padding: "5px 10px",
+    ...variantStyles[variant],
+  };
+
+  return <button {...props} style={btnStyle} />;
+}

package/src/lib/components/iconStyles.js

@@ -1,16 +1,7 @@
 import React from "react";
 
-import {
-  Done,
-  ErrorOutline,
-  Search,
-  KeyboardArrowDown,
-  KeyboardArrowUp,
-} from "@material-ui/icons";
 import { withStyles } from "@material-ui/core/styles";
 import {
-  BmSecondaryDarkGreen,
-  BmSecondaryRed,
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmGrey400,
@@ -30,14 +21,6 @@ const size = (props) => {
   return props.size;
 };
 
-const DropdownIcon = {
-  root: {
-    fill: `${BmSecondaryGrey}`,
-    height: (props) => size(props),
-    width: (props) => size(props),
-  },
-};
-
 // Button Icons
 const ButtonIcon = {
   root: {
@@ -59,6 +42,22 @@ const ButtonIcon = {
         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 `${BmPrimaryBlue}`;
+        if (variant === "tertiary") return `${BmPrimaryBlue}`;
+        return `${BmPrimaryWhite}`;
+      } else {
+        return `${BmGrey400}`;
+      }
+    },
   },
 };
 
@@ -70,58 +69,11 @@ export const BmButtonIcon = withStyles(ButtonIcon)((props) => {
   return null;
 });
 
-const SuccessIcon = {
-  root: {
-    fill: `${BmSecondaryDarkGreen}`,
-    height: (props) => size(props),
-    width: (props) => size(props),
-    margin: "0rem 0.571rem !important",
-  },
-};
-
-export const BmSuccessIcon = withStyles(SuccessIcon)((props) => (
-  <Done action {...props} />
-));
-
-const ErrorIcon = {
-  root: {
-    fill: `${BmSecondaryRed}`,
-    height: (props) => size(props),
-    width: (props) => size(props),
-    margin: "0rem 0.571rem !important",
-  },
-};
-export const BmErrorIcon = withStyles(ErrorIcon)((props) => (
-  <ErrorOutline action {...props} />
-));
-
-// Search Icon for Search Component
-const SearchIcon = {
-  root: {
-    fill: `${BmSecondaryGrey}`,
-    height: (props) => size(props),
-    width: (props) => size(props),
-    // margin: "0rem 0.571rem",
-  },
-};
-
-export const BmSearchIcon = withStyles(SearchIcon)((props) => (
-  <Search action {...props} />
-));
-
-export const BmDropdownIcon = withStyles(DropdownIcon)((props) => (
-  <KeyboardArrowDown action {...props} />
-));
-
-export const BmDropupIcon = withStyles(DropdownIcon)((props) => (
-  <KeyboardArrowUp action {...props} />
-));
-
 // Tags
 const TagIcon = {
   root: {
-    height: "1.143rem !important",
-    width: "1.143rem !important",
+    height: (props) => size(props) || "1.143rem !important",
+    width: (props) => size(props) || "1.143rem !important",
     fill: ({ variant, color }) => {
       if (color) {
         return color;
@@ -130,7 +82,14 @@ const TagIcon = {
         return `${BmPrimaryBlack}`;
       return `${BmPrimaryWhite}`;
     },
-    // margin: "0rem 0.571rem",
+    color: ({ variant, color }) => {
+      if (color) {
+        return color;
+      }
+      if (variant === "neutral" || variant === "light")
+        return `${BmPrimaryBlack}`;
+      return `${BmPrimaryWhite}`;
+    },
   },
 };
 export const BmTagIcon = withStyles(TagIcon)((props) => {
@@ -143,16 +102,19 @@ export const BmTagIcon = withStyles(TagIcon)((props) => {
 
 // Avatar Icons
 const Avatarsize = (props) => {
-  if (props.size === "xsmall") return "0.857rem";
-  if (props.size === "small") return "1.143rem";
-  if (props.size === "medium") return "1.429rem";
-  if (props.size === "large") return "2.286rem";
-  return "2.286rem";
+  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;
 };
 
+
 const AvatarIcon = {
   root: {
     fill: (props) => props.color || `${BmPrimaryWhite}`,
+    color: (props) => props.color || `${BmPrimaryWhite}`,
     height: (props) => Avatarsize(props),
     width: (props) => Avatarsize(props),
   },
@@ -166,17 +128,19 @@ export const BmAvatarIcon = withStyles(AvatarIcon)((props) => {
   return null;
 });
 
+//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="white"
+        fill={props.color || "white"}
       />
     </SvgIcon>
   );
 });
 
+// To be refacotored
 // Emoji Icons
 const EmojiSize = () => {
   // if (props.size === "small") return "1.429rem";
@@ -188,6 +152,7 @@ const EmojiSize = () => {
 const EmojiIcon = {
   root: {
     fill: (props) => props.color || `${BmSecondaryGrey}`,
+    color: (props) => props.color || `${BmSecondaryGrey}`,
     height: (props) => EmojiSize(props),
     width: (props) => EmojiSize(props),
   },
@@ -206,7 +171,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="#575757"
+        fill={props.color || "#575757"}
       />
     </SvgIcon>
   );
@@ -217,13 +182,14 @@ const icon = {
     fill: (props) => props.color || `${BmSecondaryGrey}`,
     height: (props) => size(props),
     width: (props) => size(props),
+    color: (props) => props.color || `${BmSecondaryGrey}`,
   },
 };
 
 export const BmIcons = withStyles(icon)((props) => {
   if (props.icon) {
     const Icon = props.icon.type;
-    return <Icon action {...props} />;
+    return <Icon action {...props} fill={props.color} />;
   }
   return null;
 });
@@ -244,41 +210,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="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="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="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="black"
-      />
-    </SvgIcon>
-  );
-});
-
-export const BmArrowCircleDown = withStyles(icon)((props) => {
-  return (
-    <SvgIcon action {...props}>
-      <path
-        d="M16 5.33329C21.88 5.33329 26.6667 10.12 26.6667 16C26.6667 21.88 21.88 26.6666 16 26.6666C10.12 26.6666 5.33335 21.88 5.33335 16C5.33335 10.12 10.12 5.33329 16 5.33329ZM16 2.66663C8.64002 2.66663 2.66669 8.63996 2.66669 16C2.66669 23.36 8.64002 29.3333 16 29.3333C23.36 29.3333 29.3334 23.36 29.3334 16C29.3334 8.63996 23.36 2.66663 16 2.66663ZM17.3334 16V10.6666H14.6667V16H10.6667L16 21.3333L21.3334 16H17.3334Z"
-        fill={"#AFAFAF" || props.color}
-      />
-    </SvgIcon>
-  );
-});
-
-export const BmArrowCircleUp = withStyles(icon)((props) => {
-  return (
-    <SvgIcon action {...props}>
-      <path
-        d="M9.99997 18C5.58997 18 1.99997 14.41 1.99997 10C1.99997 5.59 5.58997 2 9.99997 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 9.99997 18ZM9.99997 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99997 0C4.47997 0 -3.05176e-05 4.48 -3.05176e-05 10C-3.05176e-05 15.52 4.47997 20 9.99997 20ZM8.99997 10V14H11V10H14L9.99997 6L5.99997 10H8.99997Z"
-        fill={"#AFAFAF" || props.color}
+        fill={props.color || "black"}
       />
     </SvgIcon>
   );
@@ -292,3 +236,4 @@ export const CopyToClipBoard = withStyles(icon)((props) => {
     </SvgIcon>
   );
 });
+