@zohodesk/components 1.6.27 → 1.6.29

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

@@ -46,7 +46,7 @@
 .container {
   composes: native;
   composes: dotted from '../../common/common.module.css';
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
   font-weight: var(--button_font_weight);
@@ -94,17 +94,17 @@
 }
 
 .mediumBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size42);
   --button_min_width: var(--zd_size42);
   --button_font_size: var(--zd_font_size10);
-  text-align: center;
 }
 
 .smallBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size22);
   --button_min_width: var(--zd_size22);
   --button_font_size: var(--zd_font_size13);
-  text-align: center;
 }
 
 .smallBtnprimary,
@@ -272,10 +272,10 @@
 }
 
 .overlay {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
-  background: inherit;
+  background-color: inherit;
   border-radius: inherit;
 }
 
@@ -290,7 +290,7 @@
 }
 
 .loading {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   width: var(--zd_size20) ;
   height: var(--zd_size20) ;
@@ -311,12 +311,10 @@
 }
 
 .loadingelement {
+  composes: d-inline-block d-relative d-origin-center from global;
   height: inherit ;
   width: inherit ;
-  position: relative;
-  display: inline-block;
   border-radius: 50%;
-  transform-origin: 50%;
 }
 
 [dir=ltr] .loadingelement {

package/lib/Card/Card.module.css

@@ -1,9 +1,9 @@
 .notScroll {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .scroll {
-  /* background: var(--dot_white);
+  /* background-color: var(--dot_white);
   position: relative; */
 }
 

package/lib/CheckBox/CheckBox.module.css

@@ -23,10 +23,9 @@
   --checkbox_cursor: default;
 }
 .cbBox {
-  fill: none;
+  composes: d-fill-none d-stroke-inherit from global;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
-  stroke: inherit;
 }
 .tickPath {
   composes: cbBox;
@@ -50,9 +49,8 @@
 }
 
 .checkbox {
-  position: relative;
+  composes: d-block d-relative from global;
   font-size: 0 ;
-  display: block;
 }
 .tick {
   position: absolute;

package/lib/DateTime/DateTime.module.css

@@ -16,7 +16,7 @@
 .header {
   min-height: var(--zd_size36) ;
   composes: boxPadding;
-  text-align: center;
+  composes: d-text-center from global;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
@@ -27,10 +27,10 @@
 }
 
 .grid {
+  composes: d-text-center from global;
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: 1.3846;
-  text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
@@ -38,21 +38,18 @@
 
 .thArrow,
 .datesStr {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
-.thArrow, .datesStr {
-  cursor: pointer;
-}
-
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow:hover, .datesStr:hover {
-  background: var(--zdt_datetime_datestr_hover_bg);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
 }
 
 .navigation {
@@ -89,8 +86,8 @@
   composes: dotted from '../common/common.module.css';
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
   composes: semibold;
+  composes: d-uppercase from global;
   width: var(--zd_size31) ;
 }
 
@@ -143,8 +140,8 @@
 }
 
 .inActiveDate {
+  composes: d-cursor-no-drop from global;
   color: var(--zdt_datetime_invalid_text);
-  cursor: no-drop;
 }
 
 .inActiveDate:hover {
@@ -167,11 +164,10 @@
 }
 
 .dropDown {
+  composes: d-inline-block d-relative from global;
   width: var(--zd_size60) ;
-  display: inline-block;
   margin-inline: var(--zd_size4) ;
   margin-block:0 ;
-  position: relative;
 }
 
 .footer {
@@ -185,7 +181,7 @@
 }
 
 .space {
-  display: inline-block;
+  composes: d-inline-block from global;
   width: var(--zd_size15) ;
 }
 
@@ -195,7 +191,7 @@
 }
 
 .dateText {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .dateText:hover .downArrow {
@@ -205,18 +201,15 @@
 .text {
   composes: boxPadding;
   font-size: var(--zd_font_size11) ;
-  text-transform: uppercase;
   color: var(--zdt_datetime_text);
   margin-block-start: var(--zd_size14) ;
   composes: semibold;
-  display: block;
+  composes: d-block d-uppercase from global;
 }
 
 .yearContainer {
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
-  width: 100% ;
-  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
@@ -228,11 +221,11 @@
 }
 
 .subContainer {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .dropBox {
-  width: 100% ;
+  composes: d-w-full from global;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/lib/DateTime/DateWidget.module.css

@@ -1,20 +1,22 @@
 /* $Id */
 .container {
-  position: relative;
   composes: offSelection from '../common/common.module.css';
+  composes: d-relative from global;
+}
+.datePickIcon {
+  composes: d-h-full from global;
 }
-.datePickIcon{height:100%  }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
 .enabled {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 .textBox {
-  position: relative;
+  composes: d-relative from global;
 }
 .inputLine {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);

package/lib/DateTime/YearView.module.css

@@ -3,6 +3,7 @@
 }
 
 .month {
+  composes: d-text-center d-cursor-pointer from global;
   width: 30.333%;
   margin-block:0 var(--zd_size1) ;
   margin-inline:0 ;
@@ -10,8 +11,6 @@
   line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
-  text-align: center;
-  cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
@@ -34,9 +33,9 @@
 }
 
 .year {
+  composes: d-cursor-pointer from global;
   padding-block: var(--zd_size7) ;
   padding-inline:0 ;
-  cursor: pointer;
 }
 
 .year:hover .yearText,
@@ -55,7 +54,7 @@
 }
 
 .isActive {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 
 .isActive .yearText {
@@ -77,21 +76,19 @@
 }
 
 .container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
   composes: boxPadding;
+  composes: d-overflow-x-hidden d-overflow-y-auto d-h-full from global;
   background-color: var(--zdt_yearview_default_bg);
 }
 
 .yearContainer {
+  composes: d-overflow-hidden from global;
   height: var(--zd_size135) ;
-  overflow: hidden;
   transition: height var(--zd_transition1);
   padding-block-end: var(--zd_size5) ;
 }
 
 .toggleYear {
+  composes: d-p-0 from global;
   height: 0 ;
-  padding: 0 ;
 }

package/lib/DividerLine/DividerLine.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _cssUtility = require("@dot-system/css-utility");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var DividerLine = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var customId = props.customId,
+      testId = props.testId,
+      orientation = props.orientation,
+      customAttributes = props.customAttributes,
+      a11yAttributes = props.a11yAttributes;
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    props: props
+  }),
+      wrapperClass = _cssJSLogic.wrapperClass;
+
+  var wrapperTagAttrs = customAttributes.wrapper;
+  var wrapperA11yAttrs = a11yAttributes.wrapper;
+  return /*#__PURE__*/_react["default"].createElement("hr", _extends({}, wrapperTagAttrs, {
+    "aria-orientation": orientation
+  }, wrapperA11yAttrs, {
+    ref: ref,
+    className: (0, _cssUtility.cn)(wrapperClass),
+    "data-id": customId,
+    "data-test-id": testId
+  }));
+});
+
+DividerLine.displayName = 'DividerLine';
+DividerLine.defaultProps = _defaultProps["default"];
+DividerLine.propTypes = _propTypes["default"];
+var _default = DividerLine;
+exports["default"] = _default;

package/lib/DividerLine/__tests__/DividerLine.spec.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _DividerLine = _interopRequireDefault(require("../DividerLine"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('DividerLine - Snapshot', function () {
+  afterEach(function () {
+    (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['horizontal', 'vertical'])('Render with orientation as %s', function (orientation) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      orientation: orientation
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['solid', 'dashed', 'dotted'])('Render with lineStyle as %s', function (lineStyle) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      lineStyle: lineStyle
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['default', 'secondary', 'tertiary', 'brand'])('Render with color as %s', function (color) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      color: color
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      customId: "divider-line-customId",
+      testId: "divider-line-testId"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customAttributes', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      customAttributes: {
+        wrapper: {
+          'data-custom-attr': 'true'
+        }
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11yAttributes', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      a11yAttributes: {
+        wrapper: {
+          'aria-label': 'Section divider'
+        }
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      customClass: {
+        wrapper: 'my-divider-line'
+      }
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`DividerLine - Snapshot Render with a11yAttributes 1`] = `
+<DocumentFragment>
+  <hr
+    aria-label="Section divider"
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as brand 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorBrand"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as default 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as secondary 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorSecondary"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as tertiary 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorTertiary"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customAttributes 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+    data-custom-attr="true"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault my-divider-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+    data-id="divider-line-customId"
+    data-test-id="divider-line-testId"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as dashed 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal dashed colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as dotted 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal dotted colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as solid 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with orientation as horizontal 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with orientation as vertical 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="vertical"
+    class="wrapper vertical solid colorDefault"
+  />
+</DocumentFragment>
+`;

package/lib/DividerLine/constants/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORIENTATION = exports.LINE_STYLE_CLASS_MAP = exports.LINE_STYLE = exports.DEFAULT_ORIENTATION = exports.DEFAULT_LINE_STYLE = exports.DEFAULT_COLOR = exports.COLOR_CLASS_MAP = exports.COLOR = void 0;
+
+var _LINE_STYLE_CLASS_MAP, _COLOR_CLASS_MAP;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+exports.ORIENTATION = ORIENTATION;
+var LINE_STYLE = {
+  SOLID: 'solid',
+  DASHED: 'dashed',
+  DOTTED: 'dotted'
+};
+exports.LINE_STYLE = LINE_STYLE;
+var LINE_STYLE_CLASS_MAP = (_LINE_STYLE_CLASS_MAP = {}, _defineProperty(_LINE_STYLE_CLASS_MAP, LINE_STYLE.SOLID, 'solid'), _defineProperty(_LINE_STYLE_CLASS_MAP, LINE_STYLE.DASHED, 'dashed'), _defineProperty(_LINE_STYLE_CLASS_MAP, LINE_STYLE.DOTTED, 'dotted'), _LINE_STYLE_CLASS_MAP);
+exports.LINE_STYLE_CLASS_MAP = LINE_STYLE_CLASS_MAP;
+var COLOR = {
+  DEFAULT: 'default',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  BRAND: 'brand'
+};
+exports.COLOR = COLOR;
+var COLOR_CLASS_MAP = (_COLOR_CLASS_MAP = {}, _defineProperty(_COLOR_CLASS_MAP, COLOR.DEFAULT, 'colorDefault'), _defineProperty(_COLOR_CLASS_MAP, COLOR.SECONDARY, 'colorSecondary'), _defineProperty(_COLOR_CLASS_MAP, COLOR.TERTIARY, 'colorTertiary'), _defineProperty(_COLOR_CLASS_MAP, COLOR.BRAND, 'colorBrand'), _COLOR_CLASS_MAP);
+exports.COLOR_CLASS_MAP = COLOR_CLASS_MAP;
+var DEFAULT_ORIENTATION = ORIENTATION.HORIZONTAL;
+exports.DEFAULT_ORIENTATION = DEFAULT_ORIENTATION;
+var DEFAULT_LINE_STYLE = LINE_STYLE.SOLID;
+exports.DEFAULT_LINE_STYLE = DEFAULT_LINE_STYLE;
+var DEFAULT_COLOR = COLOR.DEFAULT;
+exports.DEFAULT_COLOR = DEFAULT_COLOR;

package/lib/DividerLine/css/DividerLine.module.css

@@ -0,0 +1,52 @@
+.wrapper {
+  flex-shrink: 0;
+  border: none;
+  margin: 0 ;
+}
+
+.horizontal {
+  inline-size: 100% ;
+  block-size: 0 ;
+  border-block-start-width: 1px;
+}
+
+.vertical {
+  inline-size: 0 ;
+  block-size: 100% ;
+  border-inline-start-width: 1px;
+}
+
+.solid {
+  border-block-start-style: solid;
+  border-inline-start-style: solid;
+}
+
+.dashed {
+  border-block-start-style: dashed;
+  border-inline-start-style: dashed;
+}
+
+.dotted {
+  border-block-start-style: dotted;
+  border-inline-start-style: dotted;
+}
+
+.colorDefault {
+  border-block-start-color: var(--zd-border-primary);
+  border-inline-start-color: var(--zd-border-primary);
+}
+
+.colorSecondary {
+  border-block-start-color: var(--zd-border-secondary);
+  border-inline-start-color: var(--zd-border-secondary);
+}
+
+.colorTertiary {
+  border-block-start-color: var(--zd-border-tertiary);
+  border-inline-start-color: var(--zd-border-tertiary);
+}
+
+.colorBrand {
+  border-block-start-color: var(--zd-border-brand);
+  border-inline-start-color: var(--zd-border-brand);
+}

package/lib/DividerLine/css/cssJSLogic.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dividerLine.dividerLine_cva;
+  }
+});
+
+var _dividerLine = require("./dividerLine.cva");