@zohodesk/components 1.2.13 → 1.2.15

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -196,10 +196,7 @@
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
     padding: var(--zd_size4) ;
     display: flex;
     align-items: center;

package/lib/Label/__tests__/Label.spec.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Label = _interopRequireDefault(require("../Label.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Label', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var type = ['title', 'subtitle'];
+  test.each(type)('rendering the type of- %s', function (type) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      type: type
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      palette: palette
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['xsmall', 'small', 'medium', 'large'];
+  test.each(size)('rendering the size of- %s', function (size) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      size: size
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the clipped is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      clipped: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the title', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      title: "labelTitle"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var variant = ['primary', 'default'];
+  test.each(variant)('rendering the variant of- %s', function (variant) {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      variant: variant
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      customClass: "LabelCustomClass"
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Id', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      id: "LabelID"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlFor', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      htmlFor: "LabelHtmlFor"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the onClick prop with asFragment and toMatchSnapshot', function () {
+    // Define an onClick mock function
+    var onClickMock = jest.fn(); // Render the Label component with the onClick prop
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Click Me",
+      onClick: onClickMock
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -0,0 +1,312 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label rendering the Id 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+    id="LabelID"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the clipped is true 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+          dotted cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the customClass 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor LabelCustomClass "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the defult props 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the htmlFor 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+    for="LabelHtmlFor"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           pointer  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Click Me
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium danger font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- dark 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium dark font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- disable 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium disable font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- mandatory 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium mandatory font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium primary font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium secondary font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- large 1`] = `
+<DocumentFragment>
+  <label
+    class="label title large default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- small 1`] = `
+<DocumentFragment>
+  <label
+    class="label title small default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- xsmall 1`] = `
+<DocumentFragment>
+  <label
+    class="label title xsmall default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the title 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+    data-title="labelTitle"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type of- subtitle 1`] = `
+<DocumentFragment>
+  <label
+    class="label subtitle medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type of- title 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the variant of- default 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the variant of- primary 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_primary
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;

package/lib/ListItem/ListItem.module.css

@@ -15,8 +15,7 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    ;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
@@ -48,9 +47,7 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7
-)    var(--zd_size5
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
@@ -63,9 +60,7 @@
   --listitem_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10
-)    var(--zd_size25
-)    ;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
@@ -185,25 +180,19 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
-)    var(--zd_size5
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
-)    var(--zd_size20
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
 [dir=rtl] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10
-)    var(--zd_size25
-)    ;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);