@zohodesk/components 1.6.0 → 1.6.2

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

@@ -0,0 +1,221 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Label = _interopRequireDefault(require("../Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// Hoisted enum values (PropTypes.oneOf enforcement)
+var REQUIRED_TYPE_VALUES = ['asterisk', 'text'];
+var SIZE_VALUES = ['small', 'medium'];
+var PALETTE_VALUES = ['default', 'secondary'];
+var TEXT_WEIGHT_VALUES = ['regular', 'semibold'];
+var LAYOUT_VALUES = ['inline', 'block'];
+afterEach(_react2.cleanup);
+describe('Label - Snapshot', function () {
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text"
+    })),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(REQUIRED_TYPE_VALUES)('Render with requiredType=%s', function (value) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      requiredType: value
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(SIZE_VALUES)('Render with size=%s', function (value) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      size: value
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PALETTE_VALUES)('Render with palette=%s', function (value) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      palette: value
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(TEXT_WEIGHT_VALUES)('Render with fontWeight=%s', function (value) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      fontWeight: value
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(LAYOUT_VALUES)('Render with layout=%s', function (value) {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      layout: value
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with shouldHighlightRequired=true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      shouldHighlightRequired: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isClipped=true', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isClipped: true
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isRequired=true', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isRequired=true isClipped=true', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      isClipped: true
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled=true', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isDisabled: true
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly=true', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isReadOnly: true
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlFor', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      htmlFor: "input-id"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      requiredType: "text",
+      i18nKeys: {
+        requiredText: 'Custom Required'
+      }
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      customClass: {
+        container: 'custom-container',
+        label: 'custom-label'
+      }
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      customProps: {
+        container: {
+          $flag_shrink: true
+        },
+        label: {
+          $ui_lineClamp: '2'
+        }
+      }
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      customId: "label-customId",
+      testId: "label-testId"
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      tagAttributes: {
+        container: {
+          'data-custom-attr': 'true'
+        },
+        label: {
+          'data-custom-attr': 'true'
+        }
+      }
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      a11yAttributes: {
+        container: {
+          role: 'group'
+        },
+        label: {
+          'aria-label': 'Custom label'
+        }
+      }
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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;