@zohodesk/components 1.6.31 → 1.6.34

package/es/Typography/css/Typography.module.css

@@ -25,20 +25,20 @@
 }
 
 .font_regular {
-  font-weight: var(--zd-fw-normal);
+  composes: d-font-normal from global;
 }
 
 .font_light {
-  font-weight: var(--zd-fw-light);
+  composes: d-font-light from global;
 }
 
 .font_semibold {
-  font-weight: var(--zd-fw-semibold);
+  composes: d-font-semibold from global;
   composes: ftsmooth from '../../common/common.module.css';
 }
 
 .font_bold {
-  font-weight: var(--zd-fw-bold);
+  composes: d-font-bold from global;
   composes: ftsmooth from '../../common/common.module.css';
 }
 
@@ -55,15 +55,15 @@
 }
 
 .decoration_underline {
-  text-decoration: underline;
+  composes: d-underline from global;
 }
 
 .decoration_strike {
-  text-decoration: line-through;
+  composes: d-line-through from global;
 }
 
 .decoration_overline {
-  text-decoration: overline;
+  composes: d-overline from global;
 }
 
 .textalign_left {
@@ -98,6 +98,7 @@
   composes: d-capitalize from global;
 }
 
+/* stylelint-disable-next-line @zohodesk/use-common-class -- display:-webkit-box is required for -webkit-line-clamp, not d-flex */
 .dotted_clamp {
   composes: d-overflow-hidden from global;
   display: -webkit-box;

package/es/common/common.module.css

@@ -248,20 +248,20 @@
 
 /*font-weight*/
 .regular {
-  font-weight: var(--zd-fw-normal);
+  composes: d-font-normal from global;
 }
 
 .light {
-  font-weight: var(--zd-fw-light);
+  composes: d-font-light from global;
 }
 
 .semibold {
-  font-weight: var(--zd-fw-semibold);
+  composes: d-font-semibold from global;
   composes: ftsmooth;
 }
 
 .bold {
-  font-weight: var(--zd-fw-bold);
+  composes: d-font-bold from global;
   composes: ftsmooth;
 }
 

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

@@ -6,13 +6,133 @@ var _react2 = require("@testing-library/react");
 
 var _Accordion = _interopRequireDefault(require("../Accordion"));
 
+var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// Velocity components require a real animation runtime; mocked for deterministic, synchronous output
+jest.mock("../../VelocityAnimation/VelocityAnimation/VelocityAnimation", function () {
+  var React = require('react');
+
+  return function MockVelocityAnimation(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+});
+jest.mock("../../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup", function () {
+  var React = require('react');
+
+  return function MockVelocityAnimationGroup(_ref2) {
+    var isActive = _ref2.isActive,
+        children = _ref2.children,
+        Comp = _ref2.component;
+
+    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
+
+var renderAccordionItems = function renderAccordionItems() {
+  return [/*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+    key: "item1",
+    id: "item1"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, "Header 1"), /*#__PURE__*/_react["default"].createElement("div", null, "Content 1")), /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+    key: "item2",
+    id: "item2"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, "Header 2"), /*#__PURE__*/_react["default"].createElement("div", null, "Content 2"))];
+};
+
 describe('Accordion', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], null)),
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1"
+    }, renderAccordionItems())),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with className', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1",
+      className: "accordion-class"
+    }, renderAccordionItems())),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with height', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1",
+      height: "200px"
+    }, renderAccordionItems())),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1",
+      dataId: "accordion-custom-id",
+      dataSelectorId: "accordion-custom-selector-id"
+    }, renderAccordionItems())),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role, ariaExpanded and ariaHaspopup', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1",
+      a11y: {
+        role: 'tablist',
+        ariaExpanded: true,
+        ariaHaspopup: true
+      }
+    }, renderAccordionItems())),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unMount=false keeping inactive content mounted', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1",
+      unMount: false
+    }, renderAccordionItems())),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with disableInternalState=true ignoring click', function () {
+    // disableInternalState prevents setState; click on item2 leaves item1 still selected
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1",
+      disableInternalState: true
+    }, renderAccordionItems())),
+        asFragment = _render7.asFragment,
+        getByText = _render7.getByText;
+
+    _react2.fireEvent.click(getByText('Header 2'));
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render after selecting another item', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+      selectedItem: "item1"
+    }, renderAccordionItems())),
+        baseElement = _render8.baseElement,
+        getByText = _render8.getByText;
+
+    _react2.fireEvent.click(getByText('Header 2'));
+
+    expect(baseElement).toMatchSnapshot();
+  });
 });

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

@@ -8,17 +8,139 @@ var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// Velocity components require a real animation runtime; mocked for deterministic, synchronous output
+jest.mock("../../VelocityAnimation/VelocityAnimation/VelocityAnimation", function () {
+  var React = require('react');
+
+  return function MockVelocityAnimation(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+});
+jest.mock("../../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup", function () {
+  var React = require('react');
+
+  return function MockVelocityAnimationGroup(_ref2) {
+    var isActive = _ref2.isActive,
+        children = _ref2.children,
+        Comp = _ref2.component;
+
+    if (!isActive) {
+      return null;
+    }
+
+    if (Comp) {
+      return /*#__PURE__*/React.createElement(Comp, null, children);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+});
 describe('AccordionItem', function () {
-  test('rendering the defult props', function () {
-    var mockOnClick = jest.fn();
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // selectMenu is bound unconditionally in render, so every case must supply it to avoid a crash
+
+  test('Render with default props', function () {
     var mockSelectMenu = jest.fn();
 
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
-      onRemove: mockOnClick,
       selectMenu: mockSelectMenu
-    }, /*#__PURE__*/_react["default"].createElement("div", null, " Accordin list "), /*#__PURE__*/_react["default"].createElement("div", null, " Accordin list2 "))),
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with className', function () {
+    var mockSelectMenu = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      className: "accordion-item-class"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with innerClass', function () {
+    var mockSelectMenu = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      innerClass: "accordion-item-inner-class"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and dataSelectorId', function () {
+    var mockSelectMenu = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      dataId: "accordion-item-custom-id",
+      dataSelectorId: "accordion-item-custom-selector-id"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y role', function () {
+    var mockSelectMenu = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      a11y: {
+        role: 'tab'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unMountItem=true and mismatched selection', function () {
+    var mockSelectMenu = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      id: "item1",
+      selectedItem: "item2",
+      unMountItem: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unMountItem=false overriding unMount=true', function () {
+    // unMountItem=false takes priority over unMount=true; VelocityAnimation is used so content stays mounted even when inactive
+    var mockSelectMenu = jest.fn();
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      id: "item1",
+      selectedItem: "item2",
+      unMountItem: false,
+      unMount: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with equalityCheck override on mismatched selection', function () {
+    var mockSelectMenu = jest.fn();
+    var mockEqualityCheck = jest.fn(function () {
+      return true;
+    });
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionItem["default"], {
+      selectMenu: mockSelectMenu,
+      id: "item1",
+      selectedItem: "item2",
+      unMountItem: true,
+      equalityCheck: mockEqualityCheck
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Header"), /*#__PURE__*/_react["default"].createElement("div", null, "Content"))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });