@zohodesk/components 1.6.31 → 1.6.34

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

@@ -1,12 +1,354 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Accordion rendering the defult props 1`] = `
+exports[`Accordion Render after selecting another item 1`] = `
+<body>
+  <div>
+    <div
+      class=""
+      data-id="Accordion"
+      data-selector-id="accordion"
+      data-test-id="Accordion"
+    >
+      <div
+        class=""
+        data-id="AccordionItem"
+        data-selector-id="accordionItem"
+        data-test-id="AccordionItem"
+      >
+        <div
+          class=""
+        >
+          <div>
+            Header 1
+          </div>
+        </div>
+      </div>
+      <div
+        class=""
+        data-id="AccordionItem"
+        data-selector-id="accordionItem"
+        data-test-id="AccordionItem"
+      >
+        <div
+          class=""
+        >
+          <div>
+            Header 2
+          </div>
+        </div>
+        <div>
+          Content 2
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Accordion Render with a11y role, ariaExpanded and ariaHaspopup 1`] = `
+<DocumentFragment>
+  <div
+    aria-expanded="true"
+    aria-haspopup="true"
+    class=""
+    data-id="Accordion"
+    data-selector-id="accordion"
+    data-test-id="Accordion"
+    role="tablist"
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Accordion Render with className 1`] = `
+<DocumentFragment>
+  <div
+    class="accordion-class"
+    data-id="Accordion"
+    data-selector-id="accordion"
+    data-test-id="Accordion"
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Accordion Render with dataId and dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="accordion-custom-id"
+    data-selector-id="accordion-custom-selector-id"
+    data-test-id="accordion-custom-id"
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Accordion Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="Accordion"
+    data-selector-id="accordion"
+    data-test-id="Accordion"
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Accordion Render with disableInternalState=true ignoring click 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="Accordion"
+    data-selector-id="accordion"
+    data-test-id="Accordion"
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Accordion Render with height 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="Accordion"
+    data-selector-id="accordion"
+    data-test-id="Accordion"
+    style="height: 200px;"
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Accordion Render with unMount=false keeping inactive content mounted 1`] = `
 <DocumentFragment>
   <div
     class=""
     data-id="Accordion"
     data-selector-id="accordion"
     data-test-id="Accordion"
-  />
+  >
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 1
+        </div>
+      </div>
+      <div>
+        Content 1
+      </div>
+    </div>
+    <div
+      class=""
+      data-id="AccordionItem"
+      data-selector-id="accordionItem"
+      data-test-id="AccordionItem"
+    >
+      <div
+        class=""
+      >
+        <div>
+          Header 2
+        </div>
+      </div>
+      <div>
+        Content 2
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;

package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,22 +1,174 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`AccordionItem rendering the defult props 1`] = `
+exports[`AccordionItem Render with a11y role 1`] = `
 <DocumentFragment>
   <div
     class=""
     data-id="AccordionItem"
     data-selector-id="accordionItem"
     data-test-id="AccordionItem"
+    role="tab"
   >
     <div
       class=""
     >
       <div>
-         Accordin list 
+        Header
       </div>
     </div>
     <div>
-       Accordin list2 
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with className 1`] = `
+<DocumentFragment>
+  <div
+    class="accordion-item-class"
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with dataId and dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="accordion-item-custom-id"
+    data-selector-id="accordion-item-custom-selector-id"
+    data-test-id="accordion-item-custom-id"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with equalityCheck override on mismatched selection 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with innerClass 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class="accordion-item-inner-class"
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with unMountItem=false overriding unMount=true 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with unMountItem=true and mismatched selection 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/lib/Animation/__tests__/Animation.spec.js

@@ -9,13 +9,39 @@ var _Animation = _interopRequireDefault(require("../Animation"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('Animation', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Animation["default"], {
-      isActive: true,
-      name: "zoomIn"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, " Test Animation"))),
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Animation["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Animation Content"))),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with isActive=true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Animation["default"], {
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Animation Content"))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unmountOnExit=false and isActive=false', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Animation["default"], {
+      unmountOnExit: false
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Animation Content"))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var names = ['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none'];
+  test.each(names)('Render with name as %s', function (name) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Animation["default"], {
+      isActive: true,
+      name: name
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Animation Content"))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,11 +1,101 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Animation rendering the defult props 1`] = `
+exports[`Animation Render with default props 1`] = `<DocumentFragment />`;
+
+exports[`Animation Render with isActive=true 1`] = `
+<DocumentFragment>
+  <div
+    class="fadeInEnter fadeInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as default 1`] = `
+<DocumentFragment>
+  <div
+    class="defaultEnter defaultEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as fadeIn 1`] = `
+<DocumentFragment>
+  <div
+    class="fadeInEnter fadeInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as none 1`] = `
+<DocumentFragment>
+  <div
+    class="noneEnter noneEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as scaleIn 1`] = `
+<DocumentFragment>
+  <div
+    class="scaleInEnter scaleInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as skewIn 1`] = `
+<DocumentFragment>
+  <div
+    class="skewInEnter skewInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as slideDown 1`] = `
+<DocumentFragment>
+  <div
+    class="slideDownEnter slideDownEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as slideLeft 1`] = `
+<DocumentFragment>
+  <div
+    class="slideLeftEnter slideLeftEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as zoomIn 1`] = `
 <DocumentFragment>
   <div
     class="zoomInEnter zoomInEnterActive"
   >
-     Test Animation
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with unmountOnExit=false and isActive=false 1`] = `
+<DocumentFragment>
+  <div>
+    Animation Content
   </div>
 </DocumentFragment>
 `;

package/lib/Button/css/Button.module.css

@@ -544,7 +544,7 @@
   }
 }
 .successstate {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   left: 50% ;
   transform: translate(-50%, -50%);
@@ -554,8 +554,8 @@
 }
 
 .tickElement {
+  composes: d-relative d-border-solid from global;
   height: var(--zd_size15) ;
-  position: relative;
   top: calc( var(--zd_size2) * -1 ) ;
   width: var(--zd_size6) ;
   transform: scaleX(-1) rotate(135deg);
@@ -563,7 +563,6 @@
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
   border-width: 2px 2px 0 0;
-  border-style: solid;
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }