@zohodesk/dot 1.5.2 → 1.5.4

package/es/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -1,5 +1,187 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CheckBoxField rendering the custom children 1`] = `
+<DocumentFragment>
+  <div
+    class="container "
+    data-selector-id="checkBoxField"
+  >
+    <div
+      class="checkboxFieldContainer "
+    >
+      <div
+        class="flex rowdir top"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="checkboxRow shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            aria-checked="false"
+            class="container pointer primary 
+          inflex rowdir vCenter"
+            data-id="checkBox"
+            data-selector-id="container"
+            data-test-id="checkBox"
+            role="checkbox"
+            tabindex="0"
+          >
+            <div
+              class="boxContainer medium  filled shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <input
+                type="hidden"
+              />
+              <label
+                class="checkbox pointer medium "
+              >
+                <svg
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    class="cbBox"
+                    height="38"
+                    rx="4"
+                    width="38"
+                    x="1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    y="1"
+                  />
+                </svg>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="fieldContainer"
+            data-test-id="containerComponent"
+          >
+            <label
+              class="label title medium default font_primary
+           pointer checkboxText undefined cbTextPointer   "
+              data-id="undefined_label"
+              data-selector-id="label"
+              data-test-id="undefined_label"
+            >
+              Label
+            </label>
+          </div>
+        </div>
+      </div>
+      custom children
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CheckBoxField rendering the custom label children via renderLabelProps 1`] = `
+<DocumentFragment>
+  <div
+    class="container "
+    data-selector-id="checkBoxField"
+  >
+    <div
+      class="checkboxFieldContainer "
+    >
+      <div
+        class="flex rowdir top"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="checkboxRow shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            aria-checked="false"
+            class="container pointer primary 
+          inflex rowdir vCenter"
+            data-id="checkBox"
+            data-selector-id="container"
+            data-test-id="checkBox"
+            role="checkbox"
+            tabindex="0"
+          >
+            <div
+              class="boxContainer medium  filled shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <input
+                type="hidden"
+              />
+              <label
+                class="checkbox pointer medium "
+              >
+                <svg
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    class="cbBox"
+                    height="38"
+                    rx="4"
+                    width="38"
+                    x="1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    y="1"
+                  />
+                </svg>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="fieldContainer"
+            data-test-id="containerComponent"
+          >
+            <label
+              class="label title medium default font_primary
+           pointer checkboxText undefined cbTextPointer   "
+              data-id="undefined_label"
+              data-selector-id="label"
+              data-test-id="undefined_label"
+            >
+              Label
+            </label>
+            {}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CheckBoxField rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/es/form/fields/CheckBoxField/props/propTypes.js

@@ -24,5 +24,6 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
+  children: PropTypes.node,
   ...FieldCommonPropTypes
 };

package/es/list/Subject/Subject.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Link from '../../Link/Link';
-import { whiteSpaceClassMapping } from '../../../../components/src/utils/cssUtils';
+import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
 import style from './Subject.module.css';
 export default class Subject extends Component {
   constructor(props) {
@@ -35,14 +35,14 @@ export default class Subject extends Component {
       href: href,
       urlData: urlData,
       onClick: onClick,
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[`whiteSpace_${whiteSpace}`]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
+      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
       dataId: dataId,
       title: text,
       target: target,
       "data-title-wrap": whiteSpace,
       ...LinkProps
     }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[`whiteSpace_${whiteSpace}`]} ${className} ${style[`font_${fontWeight}`]}`,
+      className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
       "data-title": text,
       "data-id": dataId,
       "data-test-id": dataId,

package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_pre  font_regular"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Subject rendering the defult props 1`] = `
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_breakSpaces  font_regular"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_normal  font_regular"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_nowrap  font_regular"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_pre  font_regular"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_preLine  font_regular"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_preWrap  font_regular"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>

package/es/v1/form/fields/CheckBoxField/CheckBoxField.js

@@ -41,7 +41,8 @@ function CheckBoxField(props) {
     renderLabelProps,
     getRef,
     getContainerRef,
-    onChange
+    onChange,
+    children
   } = props;
   const {
     LabelProps = {},
@@ -105,7 +106,7 @@ function CheckBoxField(props) {
     ...CheckBoxProps
   })), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
+  }, labelElement)), children, validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
     text: validationMessage,
     palette: validationPalette,
     type: errorType,

package/es/v1/form/fields/CheckBoxField/props/propTypes.js

@@ -24,5 +24,6 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
+  children: PropTypes.node,
   ...FieldCommonPropTypes
 };

package/es/v1/list/Subject/Subject.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Link from '../../Link/Link';
-import { whiteSpaceClassMapping } from '../../../../../components/src/utils/cssUtils';
+import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
 import style from '../../../list/Subject/Subject.module.css';
 
 const Subject = props => {
@@ -31,14 +31,14 @@ const Subject = props => {
     href: href,
     urlData: urlData,
     onClick: onClick,
-    className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[`whiteSpace_${whiteSpace}`]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
     dataId: dataId,
     title: text,
     target: target,
     "data-title-wrap": whiteSpace,
     ...LinkProps
   }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
-    className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[`whiteSpace_${whiteSpace}`]} ${className} ${style[`font_${fontWeight}`]}`,
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
     "data-title": text,
     "data-id": dataId,
     "data-test-id": dataId,

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -120,7 +120,8 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
           isLocked = _this$props3.isLocked,
           lockedInfoText = _this$props3.lockedInfoText,
           customProps = _this$props3.customProps,
-          renderLabelProps = _this$props3.renderLabelProps;
+          renderLabelProps = _this$props3.renderLabelProps,
+          children = _this$props3.children;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$CheckBox = customProps.CheckBoxProps,
@@ -172,7 +173,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         getContainerRef: getContainerRef
       }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, labelElement)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+      }, labelElement)), children, validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,
         type: errorType,

package/lib/form/fields/CheckBoxField/__tests__/CheckBoxField.spec.js

@@ -15,4 +15,22 @@ describe('CheckBoxField', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the custom children', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBoxField["default"], null, "custom children")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the custom label children via renderLabelProps', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CheckBoxField["default"], {
+      renderLabelProps: {
+        end: function end() {
+          return '{}';
+        }
+      }
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -1,5 +1,187 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CheckBoxField rendering the custom children 1`] = `
+<DocumentFragment>
+  <div
+    class="container "
+    data-selector-id="checkBoxField"
+  >
+    <div
+      class="checkboxFieldContainer "
+    >
+      <div
+        class="flex rowdir top"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="checkboxRow shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            aria-checked="false"
+            class="container pointer primary 
+          inflex rowdir vCenter"
+            data-id="checkBox"
+            data-selector-id="container"
+            data-test-id="checkBox"
+            role="checkbox"
+            tabindex="0"
+          >
+            <div
+              class="boxContainer medium  filled shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <input
+                type="hidden"
+              />
+              <label
+                class="checkbox pointer medium "
+              >
+                <svg
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    class="cbBox"
+                    height="38"
+                    rx="4"
+                    width="38"
+                    x="1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    y="1"
+                  />
+                </svg>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="fieldContainer"
+            data-test-id="containerComponent"
+          >
+            <label
+              class="label title medium default font_primary
+           pointer checkboxText undefined cbTextPointer   "
+              data-id="undefined_label"
+              data-selector-id="label"
+              data-test-id="undefined_label"
+            >
+              Label
+            </label>
+          </div>
+        </div>
+      </div>
+      custom children
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CheckBoxField rendering the custom label children via renderLabelProps 1`] = `
+<DocumentFragment>
+  <div
+    class="container "
+    data-selector-id="checkBoxField"
+  >
+    <div
+      class="checkboxFieldContainer "
+    >
+      <div
+        class="flex rowdir top"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="checkboxRow shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            aria-checked="false"
+            class="container pointer primary 
+          inflex rowdir vCenter"
+            data-id="checkBox"
+            data-selector-id="container"
+            data-test-id="checkBox"
+            role="checkbox"
+            tabindex="0"
+          >
+            <div
+              class="boxContainer medium  filled shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <input
+                type="hidden"
+              />
+              <label
+                class="checkbox pointer medium "
+              >
+                <svg
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    class="cbBox"
+                    height="38"
+                    rx="4"
+                    width="38"
+                    x="1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    y="1"
+                  />
+                </svg>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="fieldContainer"
+            data-test-id="containerComponent"
+          >
+            <label
+              class="label title medium default font_primary
+           pointer checkboxText undefined cbTextPointer   "
+              data-id="undefined_label"
+              data-selector-id="label"
+              data-test-id="undefined_label"
+            >
+              Label
+            </label>
+            {}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CheckBoxField rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/lib/form/fields/CheckBoxField/props/propTypes.js

@@ -40,7 +40,8 @@ var propTypes = _objectSpread({
     CheckBoxProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
-  })
+  }),
+  children: _propTypes["default"].node
 }, _FieldCommonPropTypes.FieldCommonPropTypes);
 
 exports.propTypes = propTypes;

package/lib/list/Subject/Subject.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
-var _cssUtils = require("../../../../components/src/utils/cssUtils");
+var _cssUtils = require("@zohodesk/components/es/utils/cssUtils");
 
 var _SubjectModule = _interopRequireDefault(require("./Subject.module.css"));
 
@@ -85,13 +85,13 @@ var Subject = /*#__PURE__*/function (_Component) {
         href: href,
         urlData: urlData,
         onClick: onClick,
-        className: "".concat(_SubjectModule["default"].subject, " ").concat(isDotted ? _SubjectModule["default"].dotted : '', " ").concat(_cssUtils.whiteSpaceClassMapping["whiteSpace_".concat(whiteSpace)], " ").concat(className, " ").concat(_SubjectModule["default"]["font_".concat(fontWeight)], " ").concat(_SubjectModule["default"].cursorPointer),
+        className: "".concat(_SubjectModule["default"].subject, " ").concat(isDotted ? _SubjectModule["default"].dotted : '', " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace], " ").concat(className, " ").concat(_SubjectModule["default"]["font_".concat(fontWeight)], " ").concat(_SubjectModule["default"].cursorPointer),
         dataId: dataId,
         title: text,
         target: target,
         "data-title-wrap": whiteSpace
       }, LinkProps), children ? children : text) : /*#__PURE__*/_react["default"].createElement("span", _extends({
-        className: "".concat(_SubjectModule["default"].subject, " ").concat(isDotted ? _SubjectModule["default"].dotted : '', " ").concat(_cssUtils.whiteSpaceClassMapping["whiteSpace_".concat(whiteSpace)], " ").concat(className, " ").concat(_SubjectModule["default"]["font_".concat(fontWeight)]),
+        className: "".concat(_SubjectModule["default"].subject, " ").concat(isDotted ? _SubjectModule["default"].dotted : '', " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace], " ").concat(className, " ").concat(_SubjectModule["default"]["font_".concat(fontWeight)]),
         "data-title": text,
         "data-id": dataId,
         "data-test-id": dataId,

package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_pre  font_regular"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Subject rendering the defult props 1`] = `
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_breakSpaces  font_regular"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_normal  font_regular"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_nowrap  font_regular"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_pre  font_regular"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_preLine  font_regular"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
   <span
-    class="subject dotted undefined  font_regular"
+    class="subject dotted whiteSpace_preWrap  font_regular"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>