beem-component 1.0.7 → 1.1.1

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,6 +17,7 @@ import { BmTab } from "./Tabs/tabs";
 import * as BmColors from "./colors";
 import { BmLoader } from "./Loader/loader";
 import { BmCheckbox } from "./checkbox";
+import { BmTag } from "../components/Tags/tags";
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -55,11 +56,12 @@ export {
   BmTab,
   GlobalStyle,
   MainWrapper,
+  BmLoader,
   // Old components to be refactored
   BmButtonDropDown,
   BmCheckbox,
   BmInput,
-  BmLoader,
+  BmTag,
   //Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
   BmIcons,

package/src/lib/components/input.js

@@ -77,7 +77,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`