beem-component 1.1.0 → 1.1.4

package/src/ChatHeader.js

@@ -1,14 +1,20 @@
 import React from "react";
-import { BmChatHeader, BmButton} from '../src/lib/components/';
+import { BmChatHeader, BmButton } from "../src/lib/components/";
+import "../src/lib/assets/css/sidebar.css";
 
-export const ChatHeader = ({ info }) => {
+export const ChatHeader = () => {
   return (
     <>
-      <BmChatHeader style={{ border: "1px solid #E2E2E2" }}>
-        <h2>Contact Name</h2>
-        <p>Last seen: 00:00</p>
-        <BmButton size="medium">End Session</BmButton>
-      </BmChatHeader>
+      <div className="chat-header">
+        <BmChatHeader>
+          <h2>Contact Name</h2>
+          <p>Last seen: 00:00</p>
+          <div className="chat-header-buttons">
+            <BmButton size="medium">End Session</BmButton>
+            <BmButton size="medium">End Session</BmButton>
+          </div>
+        </BmChatHeader>
+      </div>
     </>
   );
 };

package/src/SideBar.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { BmTab } from "./lib/components/Tabs/tabs";
-import ForumIcon from '@material-ui/icons/Forum';
-import { BmContactCard, BmAvatar, BmCounter, BmTag } from "./lib/components";
+import { BmTag } from "./lib/components/Tags/tags";
+import ForumIcon from "@material-ui/icons/Forum";
+import { BmContactCard, BmAvatar, BmCounter } from "./lib/components";
 
 const SideBar = () => {
   return (
@@ -29,7 +30,9 @@ const SideBar = () => {
               <BmCounter>10</BmCounter>
             </BmContactCard.SubDetails>
             <BmContactCard.SubDetails>
-              <BmTag variant="success">label</BmTag>
+              <BmTag variant="success">
+                <p>label</p>
+              </BmTag>
               <p>10:00 am</p>
             </BmContactCard.SubDetails>
           </BmContactCard.Details>
@@ -75,4 +78,4 @@ const SideBar = () => {
   );
 };
 
-export default SideBar;
+export default SideBar;

package/src/lib/assets/css/sidebar.css

@@ -77,4 +77,24 @@
     overflow: auto;
     width: 25%;
     border: 1px solid #E2E2E2;
+}
+
+.chat-header-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+
+.chat-header-buttons>*:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
+.chat-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.chat-footer>*:not(:last-child) {
+    margin-right: 0.5rem;
 }

package/src/lib/components/Buttons/buttonIconsOnly.js

@@ -50,7 +50,7 @@ const BeemButtonIcon = styled.button`
       }
     }};
   box-sizing: border-box;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   padding: 0rem;
 `;
 

package/src/lib/components/Buttons/buttons.js

@@ -47,7 +47,7 @@ const BeemButton = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   padding: ${({ size }) => {
     if (size === "large") return "0.625rem 1.5rem";
     if (size === "medium") return "0.4375rem 1rem";

package/src/lib/components/Cards/cards.js

@@ -6,7 +6,7 @@ const BmCard = styled.div`
   flex-direction: column;
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
 `;
 
 BmCard.Header = styled.div`

package/src/lib/components/ChatBody/chatBody.js

@@ -5,11 +5,11 @@ import BmAvatar from "../Avatars/avatars";
 import { BmIcons } from "../iconStyles";
 import {
   BmGrey400,
-  BmGrey50,
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
+  BmGrey200,
 } from "../colors";
 
 const BmChat = styled.div`
@@ -135,14 +135,13 @@ BmChat.Details = ({
 
 BmChat.Footer = styled.div`
   display: flex;
-  flex-direction: row;
-  border-top: 0.071rem solid ${BmGrey400};
-  padding: 0.5rem 0rem;
-  align-items: center;
-  justify-content: center;
-  ${'' /* background: ${BmGrey50}; */}
+  flex-direction: column;
+  ${'' /* border-top: 0.071rem solid ${BmGrey200}; */}
+  padding: 0.5rem 0.5rem;
+  ${'' /* align-items: center; */}
+  ${'' /* justify-content: center; */}
   > *:not(:last-child) {
-    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 `;
 

package/src/lib/components/ChatHeader/chatHeader.js

@@ -5,12 +5,9 @@ export const BmChatHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
   padding: 1rem;
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
-  button {
-    margin-left: auto;
-  }
 `;

package/src/lib/components/Chats/chat.js

@@ -25,7 +25,7 @@ export const BmChatWrapper = styled.div`
     return `${BmPrimaryWhite}`;
   }};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem 0.21875rem 0.21875rem 0rem;
+  border-radius: 0.25rem 0.21875rem 0.21875rem 0rem;
   max-width: 50%;
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
@@ -170,7 +170,7 @@ export const BmFileChat = ({ children, displayTime, type, ...rest }) => {
 export const BmImageWrapper = styled.div`
   background: ${BmGrey100};
   border: 0.071rem solid ${BmGrey400};
-  border-radius: 0.21875rem 0.21875rem 0rem 0.21875rem;
+  border-radius: 0.25rem 0.21875rem 0rem 0.21875rem;
   display: flex;
   flex-direction: column;
   max-width: 50%;

package/src/lib/components/Chats/chatInput.js

@@ -63,7 +63,7 @@ export const BmMessage = styled("div")`
   background: ${BmPrimaryWhite};
   border: 0.071rem solid ${BmGrey400};
   box-sizing: border-box;
-  border-radius: 0.21875rem;
+  border-radius: 0.25rem;
   flex-grow: 1;
   max-width: 75%;
 `;

package/src/lib/components/Lists/listBox.js

@@ -24,7 +24,7 @@ export const BmListBox = 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;
   cursor: pointer;
 `;

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,
@@ -49,6 +67,7 @@ export {
   BmListBox,
   BmListHeader,
   BmRowLabel,
+  // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,
   BmProgressBar,
@@ -57,11 +76,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`