beem-component 1.6.8 → 1.6.9

package/dist/components/Tags/tags.js

@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
 
 var _colors = require("../colors");
 
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "closeButton", "onHide"];
+var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "bgColor", "closeButton", "onHide"];
 
 var _templateObject;
 
@@ -53,7 +53,7 @@ var Color = function Color(_ref) {
   var variant = _ref.variant,
       color = _ref.color;
 
-  if (variant === 'success' || variant === 'warning' || variant === 'danger') {
+  if (variant === 'success' || variant === 'warning' || variant === 'danger' || variant === 'primary') {
     return "".concat(_colors.BmPrimaryWhite);
   }
 
@@ -76,13 +76,16 @@ var BeemTag = _styledComponents.default.button(_templateObject || (_templateObje
 
   return show ? 'flex' : 'none';
 }, function (_ref3) {
-  var variant = _ref3.variant;
+  var variant = _ref3.variant,
+      bgColor = _ref3.bgColor;
+  if (bgColor && !variant) return bgColor;
   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 === 'light') return "".concat(_colors.BmPrimaryWhite);
-  if (!variant) return "".concat(_colors.BmGrey100);
+  if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
+  if (!variant && !bgColor) return "".concat(_colors.BmGrey100);
 }, function (_ref4) {
   var variant = _ref4.variant;
   if (variant === 'neutral') return "".concat(_colors.BmGrey100);
@@ -113,6 +116,7 @@ var BmTag = function BmTag(props) {
       leadingIcon = props.leadingIcon,
       trailingIcon = props.trailingIcon,
       color = props.color,
+      bgColor = props.bgColor,
       closeButton = props.closeButton,
       onHide = props.onHide,
       rest = _objectWithoutProperties(props, _excluded);
@@ -124,7 +128,8 @@ var BmTag = function BmTag(props) {
     children: children,
     color: color,
     closeButton: closeButton,
-    show: toggle
+    show: toggle,
+    bgColor: bgColor
   }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     disabled: disabled,
     icon: leadingIcon,

package/dist/components/Tags/tags.stories.js

@@ -24,6 +24,12 @@ var _default = {
       },
       description: 'Color of the Icons and Text, will work only if variant is not present'
     },
+    bgColor: {
+      control: {
+        type: 'text'
+      },
+      description: 'Background Color of Tags, will work only if variant is not present'
+    },
     closeButton: {
       control: {
         type: 'boolean'
@@ -44,7 +50,7 @@ var _default = {
       }
     },
     variant: {
-      options: ['success', 'warning', 'danger', 'light', 'neutral', undefined],
+      options: ['success', 'warning', 'danger', 'light', 'neutral', 'primary', undefined],
       control: {
         type: 'select'
       },

package/package.json

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

package/src/App.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import { BmButton } from './lib/components';
+import { BmTag } from './lib/components';
 
 const Chat = () => {
-  return <BmButton type="submit">Hello</BmButton>;
+  return (
+    <BmTag bgColor="red" variant="primary" color="white">
+      <p>Hello</p>
+    </BmTag>
+  );
 };
 
 export default Chat;

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

@@ -13,10 +13,16 @@ import {
   BmGrey100,
   BmGrey400,
   BmPrimaryGold,
+  BmPrimaryBlue,
 } from '../colors';
 
 const Color = ({ variant, color }) => {
-  if (variant === 'success' || variant === 'warning' || variant === 'danger') {
+  if (
+    variant === 'success' ||
+    variant === 'warning' ||
+    variant === 'danger' ||
+    variant === 'primary'
+  ) {
     return `${BmPrimaryWhite}`;
   }
   if (!variant && color) {
@@ -38,13 +44,15 @@ const BeemTag = styled.button`
   align-items: center;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
-  background: ${({ variant }) => {
+  background: ${({ variant, bgColor }) => {
+    if (bgColor && !variant) return bgColor;
     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}`;
+    if (variant === 'primary') return `${BmPrimaryBlue}`;
+    if (!variant && !bgColor) return `${BmGrey100}`;
   }};
   border: 0.071rem solid
     ${({ variant }) => {
@@ -76,6 +84,7 @@ export const BmTag = (props) => {
     leadingIcon,
     trailingIcon,
     color,
+    bgColor,
     closeButton,
     onHide,
     ...rest
@@ -90,6 +99,7 @@ export const BmTag = (props) => {
       color={color}
       closeButton={closeButton}
       show={toggle}
+      bgColor={bgColor}
       {...rest}
     >
       {leadingIcon && (

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

@@ -12,6 +12,11 @@ export default {
       description:
         'Color of the Icons and Text, will work only if variant is not present',
     },
+    bgColor: {
+      control: { type: 'text' },
+      description:
+        'Background Color of Tags, will work only if variant is not present',
+    },
     closeButton: {
       control: { type: 'boolean' },
       description: 'Will display (x) - Optional',
@@ -27,7 +32,15 @@ export default {
       defaultValue: { summary: 'small' },
     },
     variant: {
-      options: ['success', 'warning', 'danger', 'light', 'neutral', undefined],
+      options: [
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'neutral',
+        'primary',
+        undefined,
+      ],
       control: { type: 'select' },
       description: 'Type of tag',
       defaultValue: { summary: 'neutral' },