beem-component 1.0.8 → 1.1.2

package/src/lib/components/Tags/tags.js

@@ -0,0 +1,109 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { BmIcons } from "../iconStyles";
+import {
+  BmPrimaryWhite,
+  BmSecondaryDarkGreen,
+  BmSecondaryRed,
+  BmPrimaryBlack,
+  BmGrey100,
+  BmGrey400,
+  BmPrimaryGold,
+} from "../../components/colors";
+
+const Color = ({ variant, color }) => {
+  if (variant === "success" || variant === "warning" || variant === "danger") {
+    return `${BmPrimaryWhite}`;
+  }
+  if (!variant && color) {
+    return color;
+  }
+  return `${BmPrimaryBlack}`;
+};
+
+const BeemTag = styled.button`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.214rem 0.571rem;
+  border-radius: 0.25rem;
+  background: ${({ variant }) => {
+    if (variant === "neutral") return `${BmGrey100}`;
+    if (variant === "success") return `${BmSecondaryDarkGreen}`;
+    if (variant === "warning") return `${BmPrimaryGold}`;
+    if (variant === "danger") return `${BmSecondaryRed}`;
+    if (variant === "light") return `${BmPrimaryWhite}`;
+    if (!variant) return `${BmGrey100}`;
+  }};
+  border: 0.071rem solid
+    ${({ variant }) => {
+      if (variant === "neutral") return `${BmGrey100}`;
+      if (variant === "success") return `${BmSecondaryDarkGreen}`;
+      if (variant === "warning") return `${BmPrimaryGold}`;
+      if (variant === "danger") return `${BmSecondaryRed}`;
+      if (variant === "light") return `${BmGrey400}`;
+      return `${BmGrey100}`;
+    }};
+  > * {
+    color: ${({ variant, color }) => Color({ variant, color })};
+    text-transform: uppercase;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+`;
+
+export const BmTag = (props) => {
+  const {
+    variant,
+    size,
+    disabled,
+    children,
+    leadingIcon,
+    trailingIcon,
+    color,
+    ...rest
+  } = props;
+
+  return (
+    <BeemTag
+      size={size}
+      variant={variant}
+      disabled={disabled}
+      children={children}
+      color={color}
+      {...rest}
+    >
+      {leadingIcon && (
+        <BmIcons
+          disabled={disabled}
+          icon={leadingIcon}
+          variant={variant}
+          color={Color({color, variant})}
+          size={size || 'small'}
+        />
+      )}
+      {children}
+      {trailingIcon && (
+        <BmIcons
+          icon={trailingIcon}
+          disabled={disabled}
+          color={Color({color, variant})}
+          size={size || 'small'}
+        />
+      )}
+    </BeemTag>
+  );
+};
+
+BmTag.propTypes = {
+  children: PropTypes.object,
+  trailingIcon: PropTypes.node,
+  leadingIcon: PropTypes.node,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  variant: PropTypes.string,
+};

package/src/lib/components/Tags/tags.stories.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { Favorite, Home, KeyboardArrowDown } from "@material-ui/icons";
+import React from "react";
+import { BmTag } from "./tags";
+
+export default {
+  component: BmTag,
+  title: "components/Tags",
+  argTypes: {
+    color: {
+      control: { type: "text" },
+      description: "Color of the Icons and Text, will work only if variant is not present",
+    },
+    size: {
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
+      control: { type: "select" },
+      description: "Size of the icons",
+      defaultValue: { summary: "small" },
+    },
+    variant: {
+      options: ["success", "warning", "danger", "light", "neutral", undefined],
+      control: { type: "select" },
+      description: "Type of tag",
+      defaultValue: { summary: "neutral" },
+    },
+  },
+};
+
+const MainTab = (args) => <BmTag {...args} />;
+
+export const Tabs = MainTab.bind({});
+Tabs.args = {
+  children: <p>Tabs</p>,
+  leadingIcon: <Favorite />,
+  trailingIcon: <Favorite />,
+  variant: 'success',
+};

package/src/lib/components/dropdown.js

@@ -13,7 +13,7 @@ const BmDropdownWrapper = styled.div`
   padding: 0.5rem 1.143rem;
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   ${'' /* box-shadow: inset 0.071rem 0rem 0rem #afafaf; */}
 `;
 

package/src/lib/components/dropdownItems.js

@@ -17,7 +17,7 @@ export const BmButtonDropdownItem = styled.div`
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   z-index: 99999;
   position: absolute;
   cursor: pointer;

package/src/lib/components/index.js

@@ -17,7 +17,7 @@ import { BmTab } from "./Tabs/tabs";
 import * as BmColors from "./colors";
 import { BmLoader } from "./Loader/loader";
 import { BmCheckbox } from "./checkbox";
-import { BmTag } from "./tags";
+import { BmTag } from "../components/Tags/tags";
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -38,6 +38,24 @@ import BmContactCard from "./ContactCards/contactCards";
 import BmInfoTab from "./InfoTab/infoTab";
 import BmCounter from "./MessageCounter/messageCounter";
 
+//SuperFluid Components
+import { BmContent } from "./SuperFluid/Content/index";
+import {
+  BmContentFooter,
+  BmContentTitle,
+  BmFooterLeft,
+  BmFooterRight,
+} from "./SuperFluid/ContentTitle.js/index.js";
+import {
+  BmSegmentCard,
+  BmSegmentSelector,
+  BmSegment,
+  BmSegmentCheckBox,
+  BmSegmentCompleteContent,
+  BmSegmentCompleteIcon,
+  BmSegmentCreateContent,
+} from "./SuperFluid/SegmentCard/index";
+
 export {
   BmAccordion,
   BmAvatar,
@@ -57,11 +75,24 @@ export {
   GlobalStyle,
   MainWrapper,
   BmLoader,
+  BmTag,
   // Old components to be refactored
   BmButtonDropDown,
   BmCheckbox,
   BmInput,
-  BmTag,
+  //Old SFL componets to be refactored
+  BmContent,
+  BmContentFooter,
+  BmContentTitle,
+  BmFooterLeft,
+  BmFooterRight,
+  BmSegmentCard,
+  BmSegmentSelector,
+  BmSegment,
+  BmSegmentCheckBox,
+  BmSegmentCompleteContent,
+  BmSegmentCompleteIcon,
+  BmSegmentCreateContent,
   //Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
   BmIcons,

package/src/lib/components/input.js

@@ -14,7 +14,6 @@ import {
   BmSecondaryRed15,
   BmGrey100,
 } from "./colors";
-import { BmSuccessIcon, BmErrorIcon } from "./iconStyles";
 
 const BmInputLabel = styled.div`
   font-family: Open Sans;
@@ -77,7 +76,7 @@ const BmInputWrapper = styled.div`
   flex-direction: center;
   align-items: center;
   height: 2.929rem;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   padding: 0rem;
   background: ${({ state }) => {
     if (state) {

package/src/lib/components/search.js

@@ -31,7 +31,7 @@ const BmSearchWrapper = styled.div`
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   box-sizing: border-box;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   ${"" /* height: 2.929rem; */}
   padding: ${({ dropdown }) => {
     if (dropdown === "yes") {

package/src/lib/components/tags.js

@@ -8,15 +8,15 @@ import {
   BmGrey100,
   BmGrey400,
   BmPrimaryGold,
-} from "./colors";
-import { BmTagIcon } from "./iconStyles";
+} from "../components/colors";
+import { BmTagIcon } from "../components/iconStyles";
 
 const BeemTag = styled.button`
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   height: ${({ size }) => {
     if (size === "small") return "1.286rem";
     if (size === "default") return "1.714rem";
@@ -45,7 +45,7 @@ const BeemTag = styled.button`
       if (variant === "light") return `${BmGrey400}`;
       return `${BmGrey100}`;
     }};
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
 `;
 
 const TagText = styled.p`