beem-component 1.7.5 → 1.7.6

package/dist/components/Checkbox/checkboxToggler.js

@@ -37,8 +37,9 @@ var BmCheckboxToggle = function BmCheckboxToggle(_ref2) {
   var checked = _ref2.checked,
       _onChange = _ref2.onChange,
       disabled = _ref2.disabled,
-      label = _ref2.label;
-  return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, /*#__PURE__*/_react.default.createElement(Label, {
+      label = _ref2.label,
+      hidden = _ref2.hidden;
+  return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, hidden ? null : /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: label,
     disabled: disabled
   }, label), /*#__PURE__*/_react.default.createElement(CheckBox, {

package/dist/components/Checkbox/checkboxToggler.stories.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Sample = exports.DisabledToggler = void 0;
+exports.hiddenToggleLabel = exports.default = exports.Sample = exports.DisabledToggler = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -51,6 +51,9 @@ var _default = {
     },
     disabled: {
       description: 'for disabling the checkbox toggler'
+    },
+    hidden: {
+      description: 'for hiding the label'
     }
   }
 };
@@ -89,4 +92,22 @@ var DisabledToggler = function DisabledToggler() {
   });
 };
 
-exports.DisabledToggler = DisabledToggler;
+exports.DisabledToggler = DisabledToggler;
+
+var hiddenToggleLabel = function hiddenToggleLabel() {
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      checked = _useState6[0],
+      setChecked = _useState6[1];
+
+  return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
+    hidden: true,
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(!checked);
+    },
+    label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label")
+  });
+};
+
+exports.hiddenToggleLabel = hiddenToggleLabel;

package/package.json

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

package/src/App.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
 import SendIcon from '@mui/icons-material/Send';
 import QuickreplyIcon from '@mui/icons-material/Quickreply';
+import { BmCheckboxToggle } from './lib/components';
 import {
   BmChat,
   BmInput,
@@ -13,6 +14,9 @@ import {
 } from './lib/components';
 
 const Chat = () => {
+  const [test, setTest] = useState(false);
+  const [test1, setTest1] = useState(false);
+
   const image =
     'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
   return (
@@ -160,6 +164,24 @@ const Chat = () => {
           </div>
         </BmChat.Footer>
       </BmChat>
+
+      <BmCheckboxToggle
+        key="test"
+        checked={test}
+        onChange={(check) => {
+          console.log(check);
+          setTest(check)
+        }}
+      />
+
+      <BmCheckboxToggle
+        key="test1"
+        checked={test1}
+        onChange={(check) => {
+          console.log(check);
+          setTest(check)
+        }}
+      />
     </>
   );
 };

package/src/lib/components/Checkbox/checkboxToggler.js

@@ -63,12 +63,21 @@ const CheckBox = styled.input`
   }
 `;
 
-export const BmCheckboxToggle = ({ checked, onChange, disabled, label }) => {
+export const BmCheckboxToggle = ({
+  checked,
+  onChange,
+  disabled,
+  label,
+  hidden,
+}) => {
   return (
     <CheckBoxWrapper>
-      <Label htmlFor={label} disabled={disabled}>
-        {label}
-      </Label>
+      {hidden ? null : (
+        <Label htmlFor={label} disabled={disabled}>
+          {label}
+        </Label>
+      )}
+
       <CheckBox
         id={label || 'checkbox'}
         type="checkbox"

package/src/lib/components/Checkbox/checkboxToggler.stories.js

@@ -22,6 +22,9 @@ export default {
     disabled: {
       description: 'for disabling the checkbox toggler',
     },
+    hidden: {
+      description: 'for hiding the label',
+    },
   },
 };
 export const Sample = () => {
@@ -46,3 +49,16 @@ export const DisabledToggler = () => {
     />
   );
 };
+
+export const hiddenToggleLabel = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <BmCheckboxToggle
+      hidden
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label={<h4>Field Label</h4>}
+    />
+  );
+};
+