beem-component 1.0.2 → 1.0.6

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,
+};

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: 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,37 @@
+/* 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,
+  state: 'active',
+};

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} />;
+}