beem-component 1.6.6 → 1.6.9

package/dist/components/Modals/modal.js

@@ -149,7 +149,7 @@ BmModal.Footer = _styledComponents.default.div(_templateObject7 || (_templateObj
 BmModal.propTypes = {
   size: _propTypes.default.string,
   centered: _propTypes.default.bool,
-  show: _propTypes.default.bool.isRequired,
+  show: _propTypes.default.bool,
   onHide: _propTypes.default.func.isRequired,
   closeButton: _propTypes.default.bool
 };

package/dist/components/ProfileIcon/ProfileIcon.js

@@ -81,16 +81,20 @@ var BmProfileIcon = function BmProfileIcon(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Profile, _extends({
     size: size
   }, rest), content && !img && /*#__PURE__*/_react.default.createElement(Content, null, content), img && !content && /*#__PURE__*/_react.default.createElement(ProfileImg, {
-    src: img
+    src: img,
+    alt: "profileicon"
   }), channel && channel === 'whatsapp' && /*#__PURE__*/_react.default.createElement(Dot, {
     size: size,
-    src: _wa.default
+    src: _wa.default,
+    alt: "icon"
   }), channel && channel === 'facebook' && /*#__PURE__*/_react.default.createElement(Dot, {
     size: size,
-    src: _fb.default
+    src: _fb.default,
+    alt: "icon"
   }), channel && channel === 'instagram' && /*#__PURE__*/_react.default.createElement(Dot, {
     size: size,
-    src: _insta.default
+    src: _insta.default,
+    alt: "icon"
   })));
 };
 

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.6",
+    "version": "1.6.9",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -52,9 +52,10 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.16.0",
-        "@babel/core": "^7.16.0",
+        "@babel/core": "^7.17.8",
+        "@babel/eslint-parser": "^7.18.2",
         "@babel/preset-env": "^7.14.8",
-        "@babel/preset-react": "^7.14.5",
+        "@babel/preset-react": "^7.18.6",
         "@commitlint/cli": "^14.1.0",
         "@commitlint/config-conventional": "^14.1.0",
         "@commitlint/travis-cli": "^14.1.0",

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/Modals/modal.js

@@ -164,7 +164,7 @@ BmModal.Footer = styled.div`
 BmModal.propTypes = {
   size: PropTypes.string,
   centered: PropTypes.bool,
-  show: PropTypes.bool.isRequired,
+  show: PropTypes.bool,
   onHide: PropTypes.func.isRequired,
   closeButton: PropTypes.bool,
 };

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -66,10 +66,16 @@ export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
     <>
       <Profile size={size} {...rest}>
         {content && !img && <Content>{content}</Content>}
-        {img && !content && <ProfileImg src={img} />}
-        {channel && channel === 'whatsapp' && <Dot size={size} src={wa} />}
-        {channel && channel === 'facebook' && <Dot size={size} src={fb} />}
-        {channel && channel === 'instagram' && <Dot size={size} src={insta} />}
+        {img && !content && <ProfileImg src={img} alt="profileicon" />}
+        {channel && channel === 'whatsapp' && (
+          <Dot size={size} src={wa} alt="icon" />
+        )}
+        {channel && channel === 'facebook' && (
+          <Dot size={size} src={fb} alt="icon" />
+        )}
+        {channel && channel === 'instagram' && (
+          <Dot size={size} src={insta} alt="icon" />
+        )}
       </Profile>
     </>
   );

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' },