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

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

@@ -0,0 +1,204 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import Label from "../Label"; // Hoisted enum values (PropTypes.oneOf enforcement)
+
+const REQUIRED_TYPE_VALUES = ['asterisk', 'text'];
+const SIZE_VALUES = ['small', 'medium'];
+const PALETTE_VALUES = ['default', 'secondary'];
+const TEXT_WEIGHT_VALUES = ['regular', 'semibold'];
+const LAYOUT_VALUES = ['inline', 'block'];
+afterEach(cleanup);
+describe('Label - Snapshot', () => {
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(REQUIRED_TYPE_VALUES)('Render with requiredType=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      requiredType: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(SIZE_VALUES)('Render with size=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      size: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PALETTE_VALUES)('Render with palette=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      palette: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(TEXT_WEIGHT_VALUES)('Render with textWeight=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      textWeight: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(LAYOUT_VALUES)('Render with layout=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      layout: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with shouldHighlightRequired=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      shouldHighlightRequired: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isClipped=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isClipped: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isRequired=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlFor', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      htmlFor: "input-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      requiredType: "text",
+      i18nKeys: {
+        requiredText: 'Custom Required'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      customClass: {
+        container: 'custom-container',
+        label: 'custom-label'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      customProps: {
+        container: {
+          $flag_shrink: true
+        },
+        label: {
+          $ui_lineClamp: '2'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      customId: "label-customId",
+      testId: "label-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      tagAttributes: {
+        container: {
+          'data-custom-attr': 'true'
+        },
+        label: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      a11yAttributes: {
+        container: {
+          role: 'group'
+        },
+        label: {
+          'aria-label': 'Custom label'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/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/es/v1/Label/constants/index.js

@@ -0,0 +1,8 @@
+export const DISPLAY_MODE = {
+  block: 'flex',
+  inline: 'inline'
+};
+export const FONT_SIZE = {
+  small: '13',
+  medium: '14'
+};

package/es/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/es/v1/Label/css/cssJSLogic.js

@@ -0,0 +1,44 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+import commonStyle from "../../../common/common.module.css";
+export default function cssJSLogic(_ref) {
+  let {
+    style,
+    ...props
+  } = _ref;
+  const {
+    shouldHighlightRequired,
+    isRequired,
+    isDisabled,
+    customClass,
+    requiredType,
+    palette,
+    isReadOnly
+  } = props;
+  const {
+    label: customClass_label,
+    container: customClass_container
+  } = customClass;
+  const labelClass = compileClassNames({
+    [style.label]: true,
+    [customClass_label]: !!customClass_label
+  });
+  const requiredClass = compileClassNames({
+    [style.requiredCommon]: true,
+    [commonStyle.flexshrink]: true,
+    [style.requiredText]: requiredType === 'text',
+    [style.asterisk]: requiredType === 'asterisk'
+  });
+  const containerClass = compileClassNames({
+    [style.container]: true,
+    [style.required]: isRequired && shouldHighlightRequired,
+    [style.readonly]: isReadOnly,
+    [style.disabled]: isDisabled,
+    [style[palette]]: palette && !(isRequired && shouldHighlightRequired) && !isDisabled,
+    [customClass_container]: !!customClass_container
+  });
+  return {
+    labelClass,
+    requiredClass,
+    containerClass
+  };
+}