@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

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

@@ -0,0 +1,457 @@
+// 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 fontWeight=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 fontWeight=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>
+`;
+
+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"
+        data-title=""
+      >
+        (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"
+        data-title=""
+      >
+        *
+      </span>
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with isRequired=true 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>
+    <span
+      aria-hidden="true"
+      class="size14 font_regular requiredCommon flexshrink asterisk"
+      data-title=""
+    >
+      *
+    </span>
+  </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"
+        data-title=""
+      >
+        *
+      </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"
+        data-title=""
+      >
+        (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"
+        data-title=""
+      >
+        *
+      </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>
+`;

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,42 @@
+.container {
+    --local-label-cursor: pointer;
+    max-width: 100% ;
+}
+.label {
+    /*css:theme-validation:ignore*/
+    color: var(--local-label-text-color);
+    cursor: var(--local-label-cursor);
+}
+.required .label {
+     /*css:theme-validation:ignore*/
+    color: var(--local-label-required-text-color);
+}
+.disabled:not(.required) .label {
+     /*css:theme-validation:ignore*/
+    color: var(--local-label-disabled-text-color);
+}
+.default {
+    --local-label-text-color: var(--zdt_v1_label_text);
+}
+.secondary {
+    --local-label-text-color: var(--zdt_v1_label_secondary_text);
+}
+.required {
+    --local-label-required-text-color: var(--zdt_v1_label_required_text);
+}
+.disabled {
+    --local-label-disabled-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,38 @@
+"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"));
+
+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 cssJSLogic(_ref) {
+  var _compileClassNames, _compileClassNames2, _compileClassNames3;
+
+  var style = _ref.style,
+      props = _ref.props;
+  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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customClass: {},
+  shouldHighlightRequired: false,
+  isDisabled: false,
+  isClipped: false,
+  isReadOnly: false,
+  requiredType: 'asterisk',
+  size: 'medium',
+  palette: 'default',
+  fontWeight: 'regular',
+  layout: 'inline',
+  i18nKeys: {}
+};
+exports["default"] = _default;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  htmlFor: _propTypes["default"].string,
+  text: _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]),
+  fontWeight: _propTypes["default"].oneOf(['regular', 'semibold']),
+  i18nKeys: _propTypes["default"].shape({
+    requiredText: _propTypes["default"].string
+  }),
+  layout: _propTypes["default"].oneOf(['inline', 'block'])
+};
+exports["default"] = _default;