beem-component 1.7.4 → 1.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/ChatComponents/ChatBody/FeedPostComments.js +1 -1
  2. package/dist/components/ChatComponents/ChatBody/chatBody.js +7 -7
  3. package/dist/components/ChatComponents/ChatBody/chatBody.stories.js +3 -0
  4. package/dist/components/Checkbox/checkboxToggler.js +3 -2
  5. package/dist/components/Checkbox/checkboxToggler.stories.js +23 -2
  6. package/package.json +94 -94
  7. package/src/App.js +39 -8
  8. package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js +1 -1
  9. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +11 -10
  10. package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js +1 -0
  11. package/src/lib/components/Checkbox/checkboxToggler.js +13 -4
  12. package/src/lib/components/Checkbox/checkboxToggler.stories.js +16 -0
package/dist/components/ChatComponents/ChatBody/FeedPostComments.js CHANGED
@@ -69,7 +69,7 @@ var MainContent = _styledComponents.default.div(_templateObject2 || (_templateOb
69
69
  if (status === 'story') return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
70
70
  }
71
71
 
72
- return "0.071rem solid ".concat(_colors.BmSecondaryPurple);
72
+ return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
73
73
  }, function (_ref8) {
74
74
  var state = _ref8.state;
75
75
 
package/dist/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -264,12 +264,7 @@ BmChat.Details = function (_ref15) {
264
264
  feedPostComments = _ref15.feedPostComments,
265
265
  rest = _objectWithoutProperties(_ref15, _excluded3);
266
266
 
267
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
268
- message: sessionTimeline.message
269
- }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
270
- time: sessionDetails.time,
271
- message: sessionDetails.message
272
- }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
267
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
273
268
  state: state
274
269
  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
275
270
  state: state,
@@ -302,7 +297,12 @@ BmChat.Details = function (_ref15) {
302
297
  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
303
298
  state: state,
304
299
  session: session
305
- }))));
300
+ }))), sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
301
+ message: sessionTimeline.message
302
+ }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
303
+ time: sessionDetails.time,
304
+ message: sessionDetails.message
305
+ }, rest)));
306
306
  };
307
307
 
308
308
  BmChat.Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 0.5rem 0.5rem;\n > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n"])));
package/dist/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -58,6 +58,9 @@ var ChatBody = function ChatBody() {
58
58
  session: "sms",
59
59
  displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
60
60
  status: "sent",
61
+ sessionTimeline: {
62
+ message: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
63
+ },
61
64
  sessionDetails: {
62
65
  message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
63
66
  time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
package/dist/components/Checkbox/checkboxToggler.js CHANGED
@@ -37,8 +37,9 @@ var BmCheckboxToggle = function BmCheckboxToggle(_ref2) {
37
37
  var checked = _ref2.checked,
38
38
  _onChange = _ref2.onChange,
39
39
  disabled = _ref2.disabled,
40
- label = _ref2.label;
41
- return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, /*#__PURE__*/_react.default.createElement(Label, {
40
+ label = _ref2.label,
41
+ hidden = _ref2.hidden;
42
+ return /*#__PURE__*/_react.default.createElement(CheckBoxWrapper, null, hidden ? null : /*#__PURE__*/_react.default.createElement(Label, {
42
43
  htmlFor: label,
43
44
  disabled: disabled
44
45
  }, label), /*#__PURE__*/_react.default.createElement(CheckBox, {
package/dist/components/Checkbox/checkboxToggler.stories.js CHANGED
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.Sample = exports.DisabledToggler = void 0;
8
+ exports.hiddenToggleLabel = exports.default = exports.Sample = exports.DisabledToggler = void 0;
9
9
 
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
 
@@ -51,6 +51,9 @@ var _default = {
51
51
  },
52
52
  disabled: {
53
53
  description: 'for disabling the checkbox toggler'
54
+ },
55
+ hidden: {
56
+ description: 'for hiding the label'
54
57
  }
55
58
  }
56
59
  };
@@ -89,4 +92,22 @@ var DisabledToggler = function DisabledToggler() {
89
92
  });
90
93
  };
91
94
 
92
- exports.DisabledToggler = DisabledToggler;
95
+ exports.DisabledToggler = DisabledToggler;
96
+
97
+ var hiddenToggleLabel = function hiddenToggleLabel() {
98
+ var _useState5 = (0, _react.useState)(false),
99
+ _useState6 = _slicedToArray(_useState5, 2),
100
+ checked = _useState6[0],
101
+ setChecked = _useState6[1];
102
+
103
+ return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
104
+ hidden: true,
105
+ checked: checked,
106
+ onChange: function onChange() {
107
+ return setChecked(!checked);
108
+ },
109
+ label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label")
110
+ });
111
+ };
112
+
113
+ exports.hiddenToggleLabel = hiddenToggleLabel;
package/package.json CHANGED
@@ -1,95 +1,95 @@
1
1
  {
2
- "name": "beem-component",
3
- "version": "1.7.4",
4
- "private": false,
5
- "main": "dist/components/index.js",
6
- "scripts": {
7
- "build": "react-scripts build",
8
- "build-storybook": "build-storybook",
9
- "clean": "rimraf dist",
10
- "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
11
- "eject": "react-scripts eject",
12
- "start": "PORT=3002 react-scripts start",
13
- "storybook": "start-storybook -p 6006",
14
- "test": "react-scripts test"
15
- },
16
- "browserslist": {
17
- "production": [
18
- ">0.2%",
19
- "not dead",
20
- "not op_mini all"
21
- ],
22
- "development": [
23
- "last 1 chrome version",
24
- "last 1 firefox version",
25
- "last 1 safari version"
26
- ]
27
- },
28
- "eslintConfig": {
29
- "extends": [
30
- "react-app",
31
- "react-app/jest"
32
- ]
33
- },
34
- "dependencies": {
35
- "@emotion/react": "^11.7.1",
36
- "@emotion/styled": "^11.6.0",
37
- "@material-ui/core": "^4.11.4",
38
- "@material-ui/icons": "^4.11.2",
39
- "@mui/icons-material": "^5.2.1",
40
- "@mui/material": "^5.2.3",
41
- "js-file-download": "^0.4.12",
42
- "node-sass": "^6.0.1",
43
- "polished": "^4.1.3",
44
- "prop-types": "^15.8.1",
45
- "react": "^17.0.2",
46
- "react-dom": "^17.0.2",
47
- "react-router-dom": "^5.3.0",
48
- "react-scripts": "^5.0.1",
49
- "save": "^2.4.0",
50
- "styled-components": "^5.3.0",
51
- "web-vitals": "^1.1.2"
52
- },
53
- "devDependencies": {
54
- "@babel/cli": "^7.16.0",
55
- "@babel/core": "^7.17.8",
56
- "@babel/eslint-parser": "^7.18.2",
57
- "@babel/preset-env": "^7.14.8",
58
- "@babel/preset-react": "^7.18.6",
59
- "@commitlint/cli": "^14.1.0",
60
- "@commitlint/config-conventional": "^14.1.0",
61
- "@commitlint/travis-cli": "^14.1.0",
62
- "@storybook/addon-actions": "^6.3.2",
63
- "@storybook/addon-controls": "^6.3.12",
64
- "@storybook/addon-docs": "^6.3.12",
65
- "@storybook/addon-essentials": "^6.3.12",
66
- "@storybook/addon-knobs": "^6.3.1",
67
- "@storybook/addon-links": "^6.3.2",
68
- "@storybook/addons": "^6.4.9",
69
- "@storybook/node-logger": "^6.3.2",
70
- "@storybook/preset-create-react-app": "^3.2.0",
71
- "@storybook/react": "^6.3.2",
72
- "@storybook/theming": "^6.4.9",
73
- "babel-eslint": "^10.1.0",
74
- "babel-loader": "^8.2.3",
75
- "babel-plugin-react-intl": "^5.1.18",
76
- "babel-plugin-styled-components": "^1.13.3",
77
- "babel-preset-react-app": "^10.0.0",
78
- "commitizen": "^4.2.4",
79
- "cross-env": "^7.0.3",
80
- "cz-conventional-changelog": "^3.3.0",
81
- "eslint-config-airbnb": "^18.2.1",
82
- "eslint-config-prettier": "^8.3.0",
83
- "eslint-plugin-import": "^2.25.2",
84
- "eslint-plugin-jest": "^25.2.4",
85
- "eslint-plugin-jsdoc": "^32.2.0",
86
- "eslint-plugin-jsx-a11y": "^6.4.1",
87
- "eslint-plugin-prettier": "^4.2.1",
88
- "eslint-plugin-react": "^7.29.4",
89
- "generate-changelog": "^1.8.0",
90
- "husky": "^7.0.4",
91
- "lint-staged": "^11.2.6",
92
- "prettier": "^2.7.1",
93
- "storybook-addon-jsx": "^7.3.14"
94
- }
95
- }
2
+ "name": "beem-component",
3
+ "version": "1.7.7",
4
+ "private": false,
5
+ "main": "dist/components/index.js",
6
+ "scripts": {
7
+ "build": "react-scripts build",
8
+ "build-storybook": "build-storybook",
9
+ "clean": "rimraf dist",
10
+ "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
11
+ "eject": "react-scripts eject",
12
+ "start": "PORT=3002 react-scripts start",
13
+ "storybook": "start-storybook -p 6006",
14
+ "test": "react-scripts test"
15
+ },
16
+ "browserslist": {
17
+ "production": [
18
+ ">0.2%",
19
+ "not dead",
20
+ "not op_mini all"
21
+ ],
22
+ "development": [
23
+ "last 1 chrome version",
24
+ "last 1 firefox version",
25
+ "last 1 safari version"
26
+ ]
27
+ },
28
+ "eslintConfig": {
29
+ "extends": [
30
+ "react-app",
31
+ "react-app/jest"
32
+ ]
33
+ },
34
+ "dependencies": {
35
+ "@emotion/react": "^11.7.1",
36
+ "@emotion/styled": "^11.6.0",
37
+ "@material-ui/core": "^4.11.4",
38
+ "@material-ui/icons": "^4.11.2",
39
+ "@mui/icons-material": "^5.2.1",
40
+ "@mui/material": "^5.2.3",
41
+ "js-file-download": "^0.4.12",
42
+ "node-sass": "^6.0.1",
43
+ "polished": "^4.1.3",
44
+ "prop-types": "^15.8.1",
45
+ "react": "^17.0.2",
46
+ "react-dom": "^17.0.2",
47
+ "react-router-dom": "^5.3.0",
48
+ "react-scripts": "^5.0.1",
49
+ "save": "^2.4.0",
50
+ "styled-components": "^5.3.0",
51
+ "web-vitals": "^1.1.2"
52
+ },
53
+ "devDependencies": {
54
+ "@babel/cli": "^7.16.0",
55
+ "@babel/core": "^7.17.8",
56
+ "@babel/eslint-parser": "^7.18.2",
57
+ "@babel/preset-env": "^7.14.8",
58
+ "@babel/preset-react": "^7.18.6",
59
+ "@commitlint/cli": "^14.1.0",
60
+ "@commitlint/config-conventional": "^14.1.0",
61
+ "@commitlint/travis-cli": "^14.1.0",
62
+ "@storybook/addon-actions": "^6.3.2",
63
+ "@storybook/addon-controls": "^6.3.12",
64
+ "@storybook/addon-docs": "^6.3.12",
65
+ "@storybook/addon-essentials": "^6.3.12",
66
+ "@storybook/addon-knobs": "^6.3.1",
67
+ "@storybook/addon-links": "^6.3.2",
68
+ "@storybook/addons": "^6.4.9",
69
+ "@storybook/node-logger": "^6.3.2",
70
+ "@storybook/preset-create-react-app": "^3.2.0",
71
+ "@storybook/react": "^6.3.2",
72
+ "@storybook/theming": "^6.4.9",
73
+ "babel-eslint": "^10.1.0",
74
+ "babel-loader": "^8.2.3",
75
+ "babel-plugin-react-intl": "^5.1.18",
76
+ "babel-plugin-styled-components": "^1.13.3",
77
+ "babel-preset-react-app": "^10.0.0",
78
+ "commitizen": "^4.2.4",
79
+ "cross-env": "^7.0.3",
80
+ "cz-conventional-changelog": "^3.3.0",
81
+ "eslint-config-airbnb": "^18.2.1",
82
+ "eslint-config-prettier": "^8.3.0",
83
+ "eslint-plugin-import": "^2.25.2",
84
+ "eslint-plugin-jest": "^25.2.4",
85
+ "eslint-plugin-jsdoc": "^32.2.0",
86
+ "eslint-plugin-jsx-a11y": "^6.4.1",
87
+ "eslint-plugin-prettier": "^4.2.1",
88
+ "eslint-plugin-react": "^7.29.4",
89
+ "generate-changelog": "^1.8.0",
90
+ "husky": "^7.0.4",
91
+ "lint-staged": "^11.2.6",
92
+ "prettier": "^2.7.1",
93
+ "storybook-addon-jsx": "^7.3.14"
94
+ }
95
+ }
package/src/App.js CHANGED
@@ -10,9 +10,13 @@ import {
10
10
  BmIcons,
11
11
  GlobalStyle,
12
12
  BmProfileIcon,
13
+ // BmCheckboxToggle,
13
14
  } from './lib/components';
14
15
 
15
16
  const Chat = () => {
17
+ // const [test, setTest] = useState(false);
18
+ // const [test1, setTest1] = useState(false);
19
+
16
20
  const image =
17
21
  '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';
18
22
  return (
@@ -22,14 +26,15 @@ const Chat = () => {
22
26
  <BmChat>
23
27
  <BmChat.Body>
24
28
  <BmChat.Details
25
- state="outbound"
29
+ state="inbound"
26
30
  session="sms"
27
31
  displayTime={<p>12:00pm</p>}
28
32
  status="sent"
29
- sessionDetails={{
30
- message: <h3>Session Message</h3>,
31
- time: <p>12:00pm</p>,
32
- }}
33
+ sessionTimeline={{ message: <p>12:00pm</p> }}
34
+ // sessionDetails={{
35
+ // message: <h3>Session Message</h3>,
36
+ // time: <p>12:00pm</p>,
37
+ // }}
33
38
  feedPostComments={{
34
39
  header: <p>Comment Reply</p>,
35
40
  body: {
@@ -37,15 +42,16 @@ const Chat = () => {
37
42
  image,
38
43
  },
39
44
  footer: <p>This is a Footer</p>,
40
- state: 'outbound',
45
+ state: 'inbound',
41
46
  status: 'comment',
42
47
  }}
43
48
  />
44
- <BmChat.Details
49
+ {/* <BmChat.Details
45
50
  state="inbound"
46
51
  session="sms"
47
52
  displayTime={<p>12:00pm</p>}
48
53
  status="sent"
54
+ sessionTimeline={{ message: <p>12:00pm</p> }}
49
55
  sessionDetails={{
50
56
  message: <h3>Session Message</h3>,
51
57
  time: <p>12:00pm</p>,
@@ -66,6 +72,7 @@ const Chat = () => {
66
72
  session="sms"
67
73
  displayTime={<p>12:00pm</p>}
68
74
  status="sent"
75
+ sessionTimeline={{ message: <p>12:00pm</p> }}
69
76
  sessionDetails={{
70
77
  message: <h3>Session Message</h3>,
71
78
  time: <p>12:00pm</p>,
@@ -86,6 +93,7 @@ const Chat = () => {
86
93
  session="sms"
87
94
  displayTime={<p>12:00pm</p>}
88
95
  status="sent"
96
+ sessionTimeline={{ message: <p>12:00pm</p> }}
89
97
  sessionDetails={{
90
98
  message: <h3>Session Message</h3>,
91
99
  time: <p>12:00pm</p>,
@@ -106,6 +114,7 @@ const Chat = () => {
106
114
  session="live"
107
115
  displayTime={<p>12:00pm</p>}
108
116
  status="sent"
117
+ sessionTimeline={{ message: <p>12:00pm</p> }}
109
118
  fileName={<p>chat.png</p>}
110
119
  src={image}
111
120
  sessionDetails={{
@@ -117,6 +126,7 @@ const Chat = () => {
117
126
  state="inbound"
118
127
  session="live"
119
128
  displayTime={<p>10:00am</p>}
129
+ sessionTimeline={{ message: <p>12:00pm</p> }}
120
130
  status="failed"
121
131
  fileName={<p>file.csv</p>}
122
132
  file={image}
@@ -124,6 +134,7 @@ const Chat = () => {
124
134
  <BmChat.Details
125
135
  state="outbound"
126
136
  session="bot"
137
+ sessionTimeline={{ message: <p>12:00pm</p> }}
127
138
  displayTime={<p>12:00pm</p>}
128
139
  status="sent"
129
140
  >
@@ -132,6 +143,7 @@ const Chat = () => {
132
143
  <BmChat.Details
133
144
  state="outbound"
134
145
  session="live"
146
+ sessionTimeline={{ message: <p>12:00pm</p> }}
135
147
  displayTime={<p>12:00pm</p>}
136
148
  status="sent"
137
149
  fileName={<p>chat.png</p>}
@@ -143,12 +155,13 @@ const Chat = () => {
143
155
  displayTime={<p>10:00am</p>}
144
156
  status="failed"
145
157
  fileName={<p>file.csv</p>}
158
+ sessionTimeline={{ message: <p>12:00pm</p> }}
146
159
  file={image}
147
160
  link={image}
148
161
  onDownload={() => {
149
162
  alert('hello');
150
163
  }}
151
- />
164
+ /> */}
152
165
  </BmChat.Body>
153
166
  <BmChat.Footer>
154
167
  <div className="chat-footer">
@@ -160,6 +173,24 @@ const Chat = () => {
160
173
  </div>
161
174
  </BmChat.Footer>
162
175
  </BmChat>
176
+
177
+ {/* <BmCheckboxToggle
178
+ key="test"
179
+ checked={test}
180
+ onChange={(check) => {
181
+ console.log(check);
182
+ setTest(check);
183
+ }}
184
+ />
185
+
186
+ <BmCheckboxToggle
187
+ key="test1"
188
+ checked={test1}
189
+ onChange={(check) => {
190
+ console.log(check);
191
+ setTest(check);
192
+ }}
193
+ /> */}
163
194
  </>
164
195
  );
165
196
  };
package/src/lib/components/ChatComponents/ChatBody/FeedPostComments.js CHANGED
@@ -56,7 +56,7 @@ const MainContent = styled.div`
56
56
  if (status === 'comment') return `0.143rem solid ${BmSecondaryGreen}`;
57
57
  if (status === 'story') return `0.143rem solid ${BmSecondaryPurple}`;
58
58
  }
59
- return `0.071rem solid ${BmSecondaryPurple}`;
59
+ return `0.143rem solid ${BmSecondaryPurple}`;
60
60
  }};
61
61
  background-color: ${({ state }) => {
62
62
  if (state) {
package/src/lib/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -265,16 +265,6 @@ BmChat.Details = ({
265
265
  }) => {
266
266
  return (
267
267
  <>
268
- {sessionTimeline && (
269
- <SessionTimeline message={sessionTimeline.message} {...rest} />
270
- )}
271
- {sessionDetails && (
272
- <SessionDetails
273
- time={sessionDetails.time}
274
- message={sessionDetails.message}
275
- {...rest}
276
- />
277
- )}
278
268
  <Details state={state} {...rest}>
279
269
  {/* Adding for mobile */}
280
270
  <MessageState>
@@ -330,6 +320,17 @@ BmChat.Details = ({
330
320
  {state === 'outbound' && session && handleState({ state, session })}
331
321
  </MessageState>
332
322
  </Details>
323
+
324
+ {sessionTimeline && (
325
+ <SessionTimeline message={sessionTimeline.message} {...rest} />
326
+ )}
327
+ {sessionDetails && (
328
+ <SessionDetails
329
+ time={sessionDetails.time}
330
+ message={sessionDetails.message}
331
+ {...rest}
332
+ />
333
+ )}
333
334
  </>
334
335
  );
335
336
  };
package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js CHANGED
@@ -43,6 +43,7 @@ export const ChatBody = () => {
43
43
  session="sms"
44
44
  displayTime={<p>12:00pm</p>}
45
45
  status="sent"
46
+ sessionTimeline={{ message: <p>12:00pm</p> }}
46
47
  sessionDetails={{
47
48
  message: <h3>Session Message</h3>,
48
49
  time: <p>12:00pm</p>,
package/src/lib/components/Checkbox/checkboxToggler.js CHANGED
@@ -63,12 +63,21 @@ const CheckBox = styled.input`
63
63
  }
64
64
  `;
65
65
 
66
- export const BmCheckboxToggle = ({ checked, onChange, disabled, label }) => {
66
+ export const BmCheckboxToggle = ({
67
+ checked,
68
+ onChange,
69
+ disabled,
70
+ label,
71
+ hidden,
72
+ }) => {
67
73
  return (
68
74
  <CheckBoxWrapper>
69
- <Label htmlFor={label} disabled={disabled}>
70
- {label}
71
- </Label>
75
+ {hidden ? null : (
76
+ <Label htmlFor={label} disabled={disabled}>
77
+ {label}
78
+ </Label>
79
+ )}
80
+
72
81
  <CheckBox
73
82
  id={label || 'checkbox'}
74
83
  type="checkbox"
package/src/lib/components/Checkbox/checkboxToggler.stories.js CHANGED
@@ -22,6 +22,9 @@ export default {
22
22
  disabled: {
23
23
  description: 'for disabling the checkbox toggler',
24
24
  },
25
+ hidden: {
26
+ description: 'for hiding the label',
27
+ },
25
28
  },
26
29
  };
27
30
  export const Sample = () => {
@@ -46,3 +49,16 @@ export const DisabledToggler = () => {
46
49
  />
47
50
  );
48
51
  };
52
+
53
+ export const hiddenToggleLabel = () => {
54
+ const [checked, setChecked] = useState(false);
55
+ return (
56
+ <BmCheckboxToggle
57
+ hidden
58
+ checked={checked}
59
+ onChange={() => setChecked(!checked)}
60
+ label={<h4>Field Label</h4>}
61
+ />
62
+ );
63
+ };
64
+