@zohodesk/components 1.2.13 → 1.2.14

package/lib/Ribbon/Ribbon.module.css

@@ -217,8 +217,7 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6
-)    ;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
 [dir=rtl] .flag {

package/lib/Ribbon/__tests__/Ribbon.spec.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Ribbon = _interopRequireDefault(require("../Ribbon.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(_Ribbon["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['default', 'danger', 'primary', 'secondary', 'info', 'dark'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
+      palette: palette
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var type = ['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag'];
+  test.each(type)('rendering the type - %s', function (type) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
+      type: type
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering children ', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, " Ribbon 1 "))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['small', 'medium', 'large', 'xlarge'];
+  test.each(size)('rendering the size - %s', function (size) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
+      size: size
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Ribbon["default"], {
+      customClass: "ribbonCustomClass"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,374 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label rendering children  1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="children"
+    >
+      <span>
+         Ribbon 1 
+      </span>
+    </span>
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the customClass 1`] = `
+<DocumentFragment>
+  <span
+    class="basic ribbonCustomClass palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the defult props 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_danger default_danger large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- dark 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_dark default_dark large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- info 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_info default_info large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_primary default_primary large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_secondary default_secondary large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - large 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - medium 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default medium default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - small 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default small default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - xlarge 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default xlarge default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - box 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  plain_default 
+                 box_default  large box"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - default 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - flag 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default  large flag"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - plain 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  plain_default 
+                   large plain"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - ribbon 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default  large ribbon"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - stamp 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  plain_default 
+                  stamp_default large stamp"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - sticker 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default  large sticker"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="after"
+    />
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+    <span
+      class="before"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - tag 1`] = `
+<DocumentFragment>
+  <span
+    class="basic   large tag"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;

package/lib/RippleEffect/__tests__/RippleEffect.spec.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _RippleEffect = _interopRequireDefault(require("../RippleEffect.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('RippleEffect', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isDisabled is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      isDisabled: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var palette = ['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'];
+  test.each(palette)('rendering the palette of- %s', function (palette) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      palette: palette
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var hoverTypes = ['default', 'border', 'bg', 'test'];
+  test.each(hoverTypes)('rendering hoverType of- %s', function (hoverType) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      hoverType: hoverType
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isNeedEffect is false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      isNeedEffect: false
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needBorder is false', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      needBorder: false
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isCopyTextEnabled is false', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
+      isCopyTextEnabled: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "RippleEffect"))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RippleEffect rendering hoverType of- bg 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border bgHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- border 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border borderHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- default 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- test 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border   hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover active hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect notAllowed"
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover   disabled"
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isNeedEffect is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering needBorder is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default  defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect danger border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- green 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect green border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primary border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryDark border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryFilled border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryLight 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryLight border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;