beem-component 2.0.2 → 2.0.3

package/dist/components/Tags/tags.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@material-ui/icons");
 var _iconStyles = require("../iconStyles");
 var _colors = require("../colors");
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "textColor", "bgColor", "closeButton", "onHide"];
+var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "textColor", "bgColor", "closeButton", "dot", "onHide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,9 +31,10 @@ var Color = function Color(_ref) {
   if (textColor) {
     return textColor;
   }
-  if (variant === 'success' || variant === 'warning' || variant === 'danger' || variant === 'primary') {
-    return "".concat(_colors.BmPrimaryWhite);
-  }
+  if (variant === 'success') return "#17b26a";
+  if (variant === 'warning') return "#f79009";
+  if (variant === 'danger') return "#f04438";
+  if (variant === 'primary') return "".concat(_colors.BmPrimaryWhite);
   if (!variant && color) {
     return color;
   }
@@ -41,7 +42,7 @@ var Color = function Color(_ref) {
 };
 var BeemTag = _styledComponents.default.button.withConfig({
   displayName: "tags__BeemTag"
-})(["", " display:", ";flex-direction:row;justify-content:center;align-items:center;padding:0.25rem 0.5rem;border-radius:0.25rem;background:", ";border:0.071rem solid ", ";> *{color:", ";text-transform:uppercase;}> *:not(:last-child){margin-right:0.5rem;}"], '' /* display: flex; */, function (_ref2) {
+})(["", " display:", ";flex-direction:row;justify-content:center;align-items:center;padding:0.2143rem 0.5714rem;border-radius:0.4286rem;background:", ";border:0.1071rem solid ", ";> *{color:", ";text-transform:capitalize;}> *:not(:last-child){margin-right:0.5rem;}"], '' /* display: flex; */, function (_ref2) {
   var closeButton = _ref2.closeButton,
     show = _ref2.show;
   if (!closeButton) {
@@ -49,24 +50,22 @@ var BeemTag = _styledComponents.default.button.withConfig({
   }
   return show ? 'flex' : 'none';
 }, function (_ref3) {
-  var variant = _ref3.variant,
-    bgColor = _ref3.bgColor;
-  if (bgColor && !variant) return bgColor;
+  var variant = _ref3.variant;
   if (variant === 'neutral') return "".concat(_colors.BmGrey100);
-  if (variant === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
-  if (variant === 'warning') return "".concat(_colors.BmPrimaryGold);
-  if (variant === 'danger') return "".concat(_colors.BmSecondaryRed);
+  if (variant === 'success') return "#dcfac6";
+  if (variant === 'warning') return "#fef0c7";
+  if (variant === 'danger') return "#fee4e2";
   if (variant === 'light') return "".concat(_colors.BmPrimaryWhite);
   if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
-  if (!variant && !bgColor) return "".concat(_colors.BmGrey100);
+  if (!variant) return "white";
 }, function (_ref4) {
   var variant = _ref4.variant;
   if (variant === 'neutral') return "".concat(_colors.BmGrey100);
-  if (variant === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
-  if (variant === 'warning') return "".concat(_colors.BmPrimaryGold);
-  if (variant === 'danger') return "".concat(_colors.BmSecondaryRed);
+  if (variant === 'success') return "#47cd89";
+  if (variant === 'warning') return "#fdb022";
+  if (variant === 'danger') return "#f97066";
   if (variant === 'light') return "".concat(_colors.BmGrey400);
-  return "".concat(_colors.BmGrey100);
+  return "#d0d5dd";
 }, function (_ref5) {
   var variant = _ref5.variant,
     color = _ref5.color,
@@ -77,6 +76,17 @@ var BeemTag = _styledComponents.default.button.withConfig({
     textColor: textColor
   });
 });
+var Dot = _styledComponents.default.div.withConfig({
+  displayName: "tags__Dot"
+})(["width:6px;height:6px;background-color:", ";border-radius:50%;"], function (_ref6) {
+  var bgColor = _ref6.bgColor,
+    variant = _ref6.variant;
+  if (variant === 'success') return "#47cd89";
+  if (variant === 'warning') return "#fdb022";
+  if (variant === 'danger') return "#f97066";
+  if (bgColor) return bgColor;
+  return '#344054';
+});
 var BmTag = function BmTag(props) {
   var _useState = (0, _react.useState)(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -92,6 +102,7 @@ var BmTag = function BmTag(props) {
     textColor = props.textColor,
     bgColor = props.bgColor,
     closeButton = props.closeButton,
+    dot = props.dot,
     onHide = props.onHide,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(BeemTag, _extends({
@@ -113,6 +124,9 @@ var BmTag = function BmTag(props) {
       variant: variant
     }),
     size: size || 'small'
+  }), dot && /*#__PURE__*/_react.default.createElement(Dot, {
+    variant: variant,
+    bgColor: bgColor
   }), children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: trailingIcon,
     disabled: disabled,
@@ -127,7 +141,7 @@ var BmTag = function BmTag(props) {
       color: color,
       variant: variant
     }),
-    size: size || 'small',
+    size: size || 'xsmall',
     style: {
       marginLeft: 'auto'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -2,6 +2,7 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React, { useState } from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
+// import CircleIcon from '@mui/icons-material/Circle';
 
 import {
   BmChat,
@@ -188,7 +189,9 @@ const Chat = () => {
                   <BmCounter>10</BmCounter>
                 </BmContactCard.SubDetails>
                 <BmContactCard.SubDetails>
-                  <BmTag variant="success">{ms.id}</BmTag>
+                  <BmTag dot variant="success">
+                    <p>{ms.id}</p>
+                  </BmTag>
                   <p>10:00 am</p>
                 </BmContactCard.SubDetails>
               </BmContactCard.Details>
@@ -241,6 +244,20 @@ const Chat = () => {
             {/* </BmChatForm> */}
           </BmAccordion.Body>
         </BmAccordion>
+        <BmTag
+          // variant="danger"
+          // textColor="#17b26a"
+          bgColor="#17b26a"
+          // color="black"
+          closeButton
+          dot
+          // size="xsmall"
+        >
+          <p>Pending</p>
+        </BmTag>
+        <BmTag dot closeButton>
+          <p>Bot</p>
+        </BmTag>
       </div>
     </>
   );

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

@@ -7,12 +7,12 @@ import { Clear } from '@material-ui/icons';
 import { BmIcons } from '../iconStyles';
 import {
   BmPrimaryWhite,
-  BmSecondaryDarkGreen,
-  BmSecondaryRed,
+  // BmSecondaryDarkGreen,
+  // BmSecondaryRed,
   BmPrimaryBlack,
   BmGrey100,
   BmGrey400,
-  BmPrimaryGold,
+  // BmPrimaryGold,
   BmPrimaryBlue,
 } from '../colors';
 
@@ -20,14 +20,11 @@ const Color = ({ variant, color, textColor }) => {
   if (textColor) {
     return textColor;
   }
-  if (
-    variant === 'success' ||
-    variant === 'warning' ||
-    variant === 'danger' ||
-    variant === 'primary'
-  ) {
-    return `${BmPrimaryWhite}`;
-  }
+  if (variant === 'success') return `#17b26a`;
+  if (variant === 'warning') return `#f79009`;
+  if (variant === 'danger') return `#f04438`;
+  if (variant === 'primary') return `${BmPrimaryWhite}`;
+
   if (!variant && color) {
     return color;
   }
@@ -45,37 +42,48 @@ const BeemTag = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background: ${({ variant, bgColor }) => {
-    if (bgColor && !variant) return bgColor;
+  padding: 0.2143rem 0.5714rem;
+  border-radius: 0.4286rem;
+  background: ${({ variant }) => {
     if (variant === 'neutral') return `${BmGrey100}`;
-    if (variant === 'success') return `${BmSecondaryDarkGreen}`;
-    if (variant === 'warning') return `${BmPrimaryGold}`;
-    if (variant === 'danger') return `${BmSecondaryRed}`;
+    if (variant === 'success') return `#dcfac6`;
+    if (variant === 'warning') return `#fef0c7`;
+    if (variant === 'danger') return `#fee4e2`;
     if (variant === 'light') return `${BmPrimaryWhite}`;
     if (variant === 'primary') return `${BmPrimaryBlue}`;
-    if (!variant && !bgColor) return `${BmGrey100}`;
+    if (!variant) return `white`;
   }};
-  border: 0.071rem solid
+  border: 0.1071rem solid
     ${({ variant }) => {
       if (variant === 'neutral') return `${BmGrey100}`;
-      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
-      if (variant === 'warning') return `${BmPrimaryGold}`;
-      if (variant === 'danger') return `${BmSecondaryRed}`;
+      if (variant === 'success') return `#47cd89`;
+      if (variant === 'warning') return `#fdb022`;
+      if (variant === 'danger') return `#f97066`;
       if (variant === 'light') return `${BmGrey400}`;
-      return `${BmGrey100}`;
+      return `#d0d5dd`;
     }};
   > * {
     color: ${({ variant, color, textColor }) =>
       Color({ variant, color, textColor })};
-    text-transform: uppercase;
+    text-transform: capitalize;
   }
 
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
 `;
+const Dot = styled.div`
+  width: 6px;
+  height: 6px;
+  background-color: ${({ bgColor, variant }) => {
+    if (variant === 'success') return `#47cd89`;
+    if (variant === 'warning') return `#fdb022`;
+    if (variant === 'danger') return `#f97066`;
+    if (bgColor) return bgColor;
+    return '#344054';
+  }};
+  border-radius: 50%;
+`;
 
 export const BmTag = (props) => {
   const [toggle, setToggle] = useState(true);
@@ -91,6 +99,7 @@ export const BmTag = (props) => {
     textColor,
     bgColor,
     closeButton,
+    dot,
     onHide,
     ...rest
   } = props;
@@ -117,6 +126,7 @@ export const BmTag = (props) => {
           size={size || 'small'}
         />
       )}
+      {dot && <Dot variant={variant} bgColor={bgColor} />}
       {children}
       {trailingIcon && (
         <BmIcons
@@ -130,7 +140,7 @@ export const BmTag = (props) => {
         <BmIcons
           icon={<Clear />}
           color={Color({ color, variant })}
-          size={size || 'small'}
+          size={size || 'xsmall'}
           style={{ marginLeft: 'auto' }}
           onClick={() => onHide && onHide(setToggle(!toggle))}
         />