@zohodesk/components 1.6.32 → 1.6.34

package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap

@@ -0,0 +1,540 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`YearView Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+    data-id="yearList"
+  >
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1850"
+        data-selector-id="box"
+        data-test-id="year_1850"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1850"
+              tabindex="0"
+            >
+              1850
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1851"
+        data-selector-id="box"
+        data-test-id="year_1851"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1851"
+              tabindex="0"
+            >
+              1851
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1852"
+        data-selector-id="box"
+        data-test-id="year_1852"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1852"
+              tabindex="0"
+            >
+              1852
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`YearView Render with viewedYear matching and isMonthOpen=true 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+    data-id="yearList"
+  >
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year isActive"
+        data-id="yearAtv_1850"
+        data-selector-id="box"
+        data-test-id="yearAtv_1850"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1850"
+              tabindex="0"
+            >
+              1850
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow arrowActive"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-justify-between yearContainer toggleYear"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            aria-label="Jan"
+            class="d-flex-shrink-0 month"
+            data-id="month_Jan"
+            data-selector-id="box"
+            data-test-id="month_Jan"
+          >
+            Jan
+          </div>
+          <div
+            aria-label="Feb"
+            class="d-flex-shrink-0 month"
+            data-id="month_Feb"
+            data-selector-id="box"
+            data-test-id="month_Feb"
+          >
+            Feb
+          </div>
+          <div
+            aria-label="Mar"
+            class="d-flex-shrink-0 month"
+            data-id="month_Mar"
+            data-selector-id="box"
+            data-test-id="month_Mar"
+          >
+            Mar
+          </div>
+          <div
+            aria-label="Apr"
+            class="d-flex-shrink-0 month"
+            data-id="month_Apr"
+            data-selector-id="box"
+            data-test-id="month_Apr"
+          >
+            Apr
+          </div>
+          <div
+            aria-label="May"
+            class="d-flex-shrink-0 month"
+            data-id="month_May"
+            data-selector-id="box"
+            data-test-id="month_May"
+          >
+            May
+          </div>
+          <div
+            aria-label="Jun"
+            class="d-flex-shrink-0 month"
+            data-id="month_Jun"
+            data-selector-id="box"
+            data-test-id="month_Jun"
+          >
+            Jun
+          </div>
+          <div
+            aria-label="Jul"
+            class="d-flex-shrink-0 month"
+            data-id="month_Jul"
+            data-selector-id="box"
+            data-test-id="month_Jul"
+          >
+            Jul
+          </div>
+          <div
+            aria-label="Aug"
+            class="d-flex-shrink-0 month"
+            data-id="month_Aug"
+            data-selector-id="box"
+            data-test-id="month_Aug"
+          >
+            Aug
+          </div>
+          <div
+            aria-label="Sep"
+            class="d-flex-shrink-0 month"
+            data-id="month_Sep"
+            data-selector-id="box"
+            data-test-id="month_Sep"
+          >
+            Sep
+          </div>
+          <div
+            aria-label="Oct"
+            class="d-flex-shrink-0 month"
+            data-id="month_Oct"
+            data-selector-id="box"
+            data-test-id="month_Oct"
+          >
+            Oct
+          </div>
+          <div
+            aria-label="Nov"
+            class="d-flex-shrink-0 month"
+            data-id="month_Nov"
+            data-selector-id="box"
+            data-test-id="month_Nov"
+          >
+            Nov
+          </div>
+          <div
+            aria-label="Dec"
+            class="d-flex-shrink-0 month"
+            data-id="month_Dec"
+            data-selector-id="box"
+            data-test-id="month_Dec"
+          >
+            Dec
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1851"
+        data-selector-id="box"
+        data-test-id="year_1851"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1851"
+              tabindex="0"
+            >
+              1851
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow arrowActive"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1852"
+        data-selector-id="box"
+        data-test-id="year_1852"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1852"
+              tabindex="0"
+            >
+              1852
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow arrowActive"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`YearView Render with viewedYear matching the rendered year 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+    data-id="yearList"
+  >
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year isActive"
+        data-id="yearAtv_1850"
+        data-selector-id="box"
+        data-test-id="yearAtv_1850"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1850"
+              tabindex="0"
+            >
+              1850
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1851"
+        data-selector-id="box"
+        data-test-id="year_1851"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1851"
+              tabindex="0"
+            >
+              1851
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex d-flex-col yearBox"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 year"
+        data-id="year_1852"
+        data-selector-id="box"
+        data-test-id="year_1852"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <h4
+              class="reset yearText"
+              data-title="1852"
+              tabindex="0"
+            >
+              1852
+            </h4>
+          </div>
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-arrow-down-single basic d-inline-block d-align-middle d-font-bold arrow"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size7);"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -198,7 +198,7 @@
 }
 
 .arrowBase {
-    position: absolute;
+    composes: d-absolute d-flex d-items-center d-justify-center from global;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
     clip: rect(var(--zd_size3),
@@ -206,9 +206,6 @@
  var(--zd_size17),
  var(--zd_size8)) ;
     padding: var(--zd_size4) ;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .arrowShape {

package/es/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
+  composes: d-font-semibold from global;
   font-size: inherit ;
-  font-weight: var(--zd-fw-semibold);
   margin: initial ;
 }

package/es/Heading/__tests__/Heading.spec.js

@@ -1,15 +1,59 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import Heading from "../Heading";
 describe('Heading', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup());
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Heading, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const tagNames = ['h2', 'h3', 'span'];
+  test.each(tagNames)('Render with tagName as %s', tagName => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      tagName: tagName
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      title: "Heading Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      className: "custom-heading-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      dataId: "customHeading"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // dataTitle takes precedence over title for the data-title attribute (dataTitle || title)
+
+  test('Render with dataTitle overriding title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      title: "Heading Title",
+      dataTitle: "Custom Data Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   const whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
-  test.each(whiteSpace)('Should render whiteSpace of Heading - %s', whiteSpace => {
+  test.each(whiteSpace)('Render with whiteSpace as %s', whiteSpace => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Heading, {
@@ -17,4 +61,14 @@ describe('Heading', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with a11y', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      a11y: {
+        tabindex: '0'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });