@zohodesk/components 1.6.31 → 1.6.34

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.6.34
+
+- **CheckBox** - Fixed the CSS Utility class ordering to resolve the position property conflict between the disabled and tick classes.
+- text-decoration and font weight based css utility adopted
+
+## 1.6.33
+
+- **Button**, **DropBox** — Adopted `@dot-system/css-utility` classes for shared layout declarations.
+
+## 1.6.32
+
+- Fixed the issue where the placeholder text color was not being applied.
+
 ## 1.6.31
 
 - `@dot-system/css-utility` classes adopted 

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -1,6 +1,6 @@
 [data-mode='light'] {
 	/* list common */
-	--dot_inputPlaceholder: var(--zdt_cta_grey_40_text);
+	--dot_inputPlaceholder: hsla(231, calc(var(--zd-saturation, 1) * 22.22%), calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--dot_inputDisable: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--dot_inputLine: var(--zdt_cta_grey_35_border);
 	--dot_inputLineHover: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/es/Accordion/__tests__/Accordion.spec.js

@@ -1,11 +1,125 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import Accordion from "../Accordion";
+import AccordionItem from "../AccordionItem"; // Velocity components require a real animation runtime; mocked for deterministic, synchronous output
+
+jest.mock("../../VelocityAnimation/VelocityAnimation/VelocityAnimation", () => {
+  const React = require('react');
+
+  return function MockVelocityAnimation({
+    children
+  }) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+});
+jest.mock("../../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup", () => {
+  const React = require('react');
+
+  return function MockVelocityAnimationGroup({
+    isActive,
+    children,
+    component: Comp
+  }) {
+    if (!isActive) {
+      return null;
+    }
+
+    if (Comp) {
+      return /*#__PURE__*/React.createElement(Comp, null, children);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+}); // React.Children.map does not unwrap Fragments, so return an array so cloneElement reaches each AccordionItem
+
+const renderAccordionItems = () => [/*#__PURE__*/React.createElement(AccordionItem, {
+  key: "item1",
+  id: "item1"
+}, /*#__PURE__*/React.createElement("div", null, "Header 1"), /*#__PURE__*/React.createElement("div", null, "Content 1")), /*#__PURE__*/React.createElement(AccordionItem, {
+  key: "item2",
+  id: "item2"
+}, /*#__PURE__*/React.createElement("div", null, "Header 2"), /*#__PURE__*/React.createElement("div", null, "Content 2"))];
+
 describe('Accordion', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup());
+  test('Render with default props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Accordion, null));
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1"
+    }, renderAccordionItems()));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with className', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1",
+      className: "accordion-class"
+    }, renderAccordionItems()));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with height', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1",
+      height: "200px"
+    }, renderAccordionItems()));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1",
+      dataId: "accordion-custom-id",
+      dataSelectorId: "accordion-custom-selector-id"
+    }, renderAccordionItems()));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaExpanded and ariaHaspopup', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1",
+      a11y: {
+        role: 'tablist',
+        ariaExpanded: true,
+        ariaHaspopup: true
+      }
+    }, renderAccordionItems()));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unMount=false keeping inactive content mounted', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1",
+      unMount: false
+    }, renderAccordionItems()));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disableInternalState=true ignoring click', () => {
+    // disableInternalState prevents setState; click on item2 leaves item1 still selected
+    const {
+      asFragment,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1",
+      disableInternalState: true
+    }, renderAccordionItems()));
+    fireEvent.click(getByText('Header 2'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render after selecting another item', () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Accordion, {
+      selectedItem: "item1"
+    }, renderAccordionItems()));
+    fireEvent.click(getByText('Header 2'));
+    expect(baseElement).toMatchSnapshot();
+  });
 });

package/es/Accordion/__tests__/AccordionItem.spec.js

@@ -1,16 +1,128 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import AccordionItem from "../AccordionItem";
+import { render, cleanup } from '@testing-library/react';
+import AccordionItem from "../AccordionItem"; // Velocity components require a real animation runtime; mocked for deterministic, synchronous output
+
+jest.mock("../../VelocityAnimation/VelocityAnimation/VelocityAnimation", () => {
+  const React = require('react');
+
+  return function MockVelocityAnimation({
+    children
+  }) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+});
+jest.mock("../../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup", () => {
+  const React = require('react');
+
+  return function MockVelocityAnimationGroup({
+    isActive,
+    children,
+    component: Comp
+  }) {
+    if (!isActive) {
+      return null;
+    }
+
+    if (Comp) {
+      return /*#__PURE__*/React.createElement(Comp, null, children);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+});
 describe('AccordionItem', () => {
-  test('rendering the defult props', () => {
-    const mockOnClick = jest.fn();
+  afterEach(() => cleanup()); // selectMenu is bound unconditionally in render, so every case must supply it to avoid a crash
+
+  test('Render with default props', () => {
     const mockSelectMenu = jest.fn();
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(AccordionItem, {
-      onRemove: mockOnClick,
       selectMenu: mockSelectMenu
-    }, /*#__PURE__*/React.createElement("div", null, " Accordin list "), /*#__PURE__*/React.createElement("div", null, " Accordin list2 ")));
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', () => {
+    const mockSelectMenu = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      className: "accordion-item-class"
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with innerClass', () => {
+    const mockSelectMenu = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      innerClass: "accordion-item-inner-class"
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', () => {
+    const mockSelectMenu = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      dataId: "accordion-item-custom-id",
+      dataSelectorId: "accordion-item-custom-selector-id"
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role', () => {
+    const mockSelectMenu = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      a11y: {
+        role: 'tab'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unMountItem=true and mismatched selection', () => {
+    const mockSelectMenu = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      id: "item1",
+      selectedItem: "item2",
+      unMountItem: true
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unMountItem=false overriding unMount=true', () => {
+    // unMountItem=false takes priority over unMount=true; VelocityAnimation is used so content stays mounted even when inactive
+    const mockSelectMenu = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      id: "item1",
+      selectedItem: "item2",
+      unMountItem: false,
+      unMount: true
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with equalityCheck override on mismatched selection', () => {
+    const mockSelectMenu = jest.fn();
+    const mockEqualityCheck = jest.fn(() => true);
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
+      selectMenu: mockSelectMenu,
+      id: "item1",
+      selectedItem: "item2",
+      unMountItem: true,
+      equalityCheck: mockEqualityCheck
+    }, /*#__PURE__*/React.createElement("div", null, "Header"), /*#__PURE__*/React.createElement("div", null, "Content")));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/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>
 `;