@zohodesk/components 1.0.0-temp-199.21 → 1.0.0-temp-249

package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -0,0 +1,428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label - Snapshot Render with a11y attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+    role="group"
+  >
+    <label
+      aria-label="Custom label"
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default custom-container"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label custom-label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="label-customId"
+    data-selector-id="label-customId"
+    data-test-id="label-testId"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center shrink container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 lineclamp_2 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with htmlFor 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+      for="input-id"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with i18nKeys 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+      <span
+        aria-hidden="true"
+        class="size14 font_regular requiredCommon flexshrink requiredText"
+      >
+        (Custom Required)
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with isClipped=true 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="dotted size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with isDisabled=true 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container disabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container readonly default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with isRequired=true 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+      <span
+        aria-hidden="true"
+        class="size14 font_regular requiredCommon flexshrink asterisk"
+      >
+        *
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with layout=block 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with layout=inline 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with palette=default 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with palette=secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container secondary"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+      <span
+        aria-hidden="true"
+        class="size14 font_regular requiredCommon flexshrink asterisk"
+      >
+        *
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with requiredType=text 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+      <span
+        aria-hidden="true"
+        class="size14 font_regular requiredCommon flexshrink requiredText"
+      >
+        (Required)
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container required"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+      <span
+        aria-hidden="true"
+        class="size14 font_regular requiredCommon flexshrink asterisk"
+      >
+        *
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with size=medium 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with size=small 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size13 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with tag attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-custom-attr="true"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-custom-attr="true"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with textWeight=regular 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with textWeight=semibold 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_semibold label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;

package/lib/v1/Label/constants/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FONT_SIZE = exports.DISPLAY_MODE = void 0;
+var DISPLAY_MODE = {
+  block: 'flex',
+  inline: 'inline'
+};
+exports.DISPLAY_MODE = DISPLAY_MODE;
+var FONT_SIZE = {
+  small: '13',
+  medium: '14'
+};
+exports.FONT_SIZE = FONT_SIZE;

package/lib/v1/Label/css/Label_v1.module.css

@@ -0,0 +1,34 @@
+.container {
+    --local-label-cursor: pointer;
+    max-width: 100% ;
+}
+.label {
+    /*css:theme-validation:ignore*/
+    color: var(--local-label-text-color);
+    cursor: var(--local-label-cursor);
+}
+.default {
+    --local-label-text-color: var(--zdt_v1_label_text);
+}
+.secondary {
+    --local-label-text-color: var(--zdt_v1_label_secondary_text);
+}
+.required {
+    --local-label-text-color: var(--zdt_v1_label_required_text);
+}
+.disabled:not(.required) {
+    --local-label-text-color: var(--zdt_v1_label_disabled_text);   
+}
+.disabled, .readonly {
+    --local-label-cursor: not-allowed;
+}
+.requiredCommon {
+    color: var(--zdt_v1_label_required_text);
+    cursor: var(--local-label-cursor);
+}
+.requiredText {
+    margin-inline-start: var(--zd_size4) ;
+}
+.asterisk {
+    margin-inline-start: var(--zd_size2) ;
+}

package/lib/v1/Label/css/cssJSLogic.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+
+var _commonModule = _interopRequireDefault(require("../../../common/common.module.css"));
+
+var _excluded = ["style"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function cssJSLogic(_ref) {
+  var _compileClassNames, _compileClassNames2, _compileClassNames3;
+
+  var style = _ref.style,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var shouldHighlightRequired = props.shouldHighlightRequired,
+      isRequired = props.isRequired,
+      isDisabled = props.isDisabled,
+      customClass = props.customClass,
+      requiredType = props.requiredType,
+      palette = props.palette,
+      isReadOnly = props.isReadOnly;
+  var customClass_label = customClass.label,
+      customClass_container = customClass.container;
+  var labelClass = (0, _compileClassNames4["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, style.label, true), _defineProperty(_compileClassNames, customClass_label, !!customClass_label), _compileClassNames));
+  var requiredClass = (0, _compileClassNames4["default"])((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.requiredCommon, true), _defineProperty(_compileClassNames2, _commonModule["default"].flexshrink, true), _defineProperty(_compileClassNames2, style.requiredText, requiredType === 'text'), _defineProperty(_compileClassNames2, style.asterisk, requiredType === 'asterisk'), _compileClassNames2));
+  var containerClass = (0, _compileClassNames4["default"])((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, style.container, true), _defineProperty(_compileClassNames3, style.required, isRequired && shouldHighlightRequired), _defineProperty(_compileClassNames3, style.readonly, isReadOnly), _defineProperty(_compileClassNames3, style.disabled, isDisabled), _defineProperty(_compileClassNames3, style[palette], palette && !(isRequired && shouldHighlightRequired) && !isDisabled), _defineProperty(_compileClassNames3, customClass_container, !!customClass_container), _compileClassNames3));
+  return {
+    labelClass: labelClass,
+    requiredClass: requiredClass,
+    containerClass: containerClass
+  };
+}

package/lib/v1/Label/props/defaultProps.js

@@ -3,16 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultProps = void 0;
-var defaultProps = {
-  clipped: false,
-  dataId: 'label',
-  palette: 'default',
+exports["default"] = void 0;
+var _default = {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customClass: {},
+  shouldHighlightRequired: false,
+  isDisabled: false,
+  isClipped: false,
+  isReadOnly: false,
+  requiredType: 'asterisk',
   size: 'medium',
-  text: 'Label',
-  type: 'title',
-  variant: 'default',
-  customClass: '',
-  dataSelectorId: 'label'
+  palette: 'default',
+  textWeight: 'regular',
+  layout: 'inline',
+  i18nKeys: {}
 };
-exports.defaultProps = defaultProps;
+exports["default"] = _default;

package/lib/v1/Label/props/propTypes.js

@@ -3,28 +3,48 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = void 0;
+exports["default"] = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var propTypes = {
-  clipped: _propTypes["default"].bool,
-  dataId: _propTypes["default"].string,
-  dataSelectorId: _propTypes["default"].string,
+var _default = {
   htmlFor: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
-  size: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large']),
   text: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  type: _propTypes["default"].oneOf(['title', 'subtitle']),
-  variant: _propTypes["default"].oneOf(['primary', 'default']),
-  customClass: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    tabIndex: _propTypes["default"].string
+  onClick: _propTypes["default"].func,
+  a11yAttributes: _propTypes["default"].shape({
+    container: _propTypes["default"].object,
+    label: _propTypes["default"].object
+  }),
+  tagAttributes: _propTypes["default"].shape({
+    container: _propTypes["default"].object,
+    label: _propTypes["default"].object
+  }),
+  customProps: _propTypes["default"].shape({
+    container: _propTypes["default"].object,
+    label: _propTypes["default"].object
+  }),
+  customId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    container: _propTypes["default"].string,
+    label: _propTypes["default"].string
+  }),
+  requiredType: _propTypes["default"].oneOf(['asterisk', 'text']),
+  shouldHighlightRequired: _propTypes["default"].bool,
+  isClipped: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['small', 'medium']),
+  palette: _propTypes["default"].oneOf(['default', 'secondary']),
+  renderLeftPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  textWeight: _propTypes["default"].oneOf(['regular', 'semibold']),
+  i18nKeys: _propTypes["default"].shape({
+    requiredText: _propTypes["default"].string
   }),
-  id: _propTypes["default"].string
+  layout: _propTypes["default"].oneOf(['inline', 'block'])
 };
-exports.propTypes = propTypes;
+exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-199.21",
+  "version": "1.0.0-temp-249",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -68,14 +68,14 @@
     "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
     "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert  ",
     "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets",
-    "css:audit": " css-audit --report"
+    "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report "
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/css-audit-tool": "0.0.1",
+    "@zohodesk-private/css-audit-tool": "0.0.2",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
@@ -86,7 +86,7 @@
     "@zohodesk/hooks": "2.0.6",
     "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.6",
+    "@zohodesk/svg": "1.2.7",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
@@ -104,7 +104,7 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.1.6",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/svg": "1.2.6",
+    "@zohodesk/svg": "1.2.7",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -115,4 +115,4 @@
     "@zohodesk/dotkit": "1.0.7",
     "color": "4.2.3"
   }
-}
+}