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

package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropDown rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      <div>
+        test 1
+      </div>
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOn scrolly"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div>
+              test 2
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropDownHeading rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="light "
+    data-id="DropDownHeading"
+    data-selector-id="dropdownHeading"
+    data-test-id="DropDownHeading"
+  />
+</DocumentFragment>
+`;

package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropDownItem rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="list   "
+    data-id="dropDwnItemContainer"
+    data-test-id="dropDwnItemContainer"
+  />
+</DocumentFragment>
+`;

package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropDownSearch rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="search mediumSearch "
+    data-id="DropDownSearch"
+    data-test-id="DropDownSearch"
+  >
+    <input
+      class="  container medium  default border effect  borderColor_default  "
+      data-id="textBox"
+      data-selector-id="textBox"
+      data-test-id="textBox"
+      type="text"
+      value=""
+    />
+  </div>
+</DocumentFragment>
+`;

package/es/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropDownSeparator rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="separator "
+  />
+</DocumentFragment>
+`;

package/es/DropDown/index.js

@@ -0,0 +1,7 @@
+export { default as DropDown } from "./DropDown";
+export { DropDownTarget } from "./DropDown";
+export { DropDownItemContainer } from "./DropDown";
+export { default as DropDownHeading } from "./DropDownHeading";
+export { default as DropDownItem } from "./DropDownItem";
+export { default as DropDownSearch } from "./DropDownSearch";
+export { default as DropDownSeparator } from "./DropDownSeparator";

package/es/DropDown/props/defaultProps.js

@@ -0,0 +1,21 @@
+export const DropDownItemContainer_defaultProps = {
+  dataId: 'drpdwnItemContainer'
+};
+export const DropDownHeading_defaultProps = {
+  customClass: '',
+  children: null,
+  palette: 'light',
+  a11y: {},
+  dataId: 'DropDownHeading',
+  dataSelectorId: 'dropdownHeading'
+};
+export const DropDownItem_defaultProps = {
+  active: false,
+  dataId: 'dropDwnItemContainer'
+};
+export const DropDownSearch_defaultProps = {
+  size: 'medium',
+  textBoxSize: 'medium',
+  customClass: {},
+  dataId: 'DropDownSearch'
+};

package/es/DropDown/props/propTypes.js

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import { PopOver_propTypes } from "./../../PopOver/props/propTypes";
+export const DropDown_propTypes = { ...PopOver_propTypes
+};
+export const DropDownTarget_propTypes = {
+  children: PropTypes.node
+};
+export const DropDownContainer_propTypes = {
+  children: PropTypes.node
+};
+export const DropDownItemContainer_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  onScroll: PropTypes.func
+};
+export const DropDownHeading_propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  palette: PropTypes.oneOf(['light', 'dark']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string
+  }),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
+};
+export const DropDownItem_propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  hightlight: PropTypes.bool,
+  id: PropTypes.string,
+  index: PropTypes.number,
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  value: PropTypes.string,
+  customClass: PropTypes.string
+};
+export const DropDownSearch_propTypes = {
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  maxLength: PropTypes.string,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  placeHolder: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.string,
+  value: PropTypes.string,
+  customClass: PropTypes.shape({
+    searchClass: PropTypes.string,
+    customTextBox: PropTypes.string
+  }),
+  dataId: PropTypes.string
+};
+export const DropDownSeparator_propTypes = {
+  customClass: PropTypes.string
+};

package/es/Heading/Heading.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { whiteSpaceClassMapping } from "../utils/cssUtils";
+import style from "./Heading.module.css";
+export default class Heading extends React.Component {
+  render() {
+    let {
+      tagName,
+      className,
+      onClick,
+      onDoubleClick,
+      title,
+      dataTitle,
+      dataId,
+      a11y,
+      whiteSpace
+    } = this.props;
+    return /*#__PURE__*/React.createElement(tagName, {
+      className: `${style.reset} ${whiteSpace ? whiteSpaceClassMapping[whiteSpace] : ''} ${className}`,
+      onClick,
+      onDoubleClick,
+      'data-title': dataTitle || title,
+      'data-id': dataId,
+      'data-test-id': dataId,
+      'data-title-wrap': whiteSpace,
+      ...a11y
+    }, title);
+  }
+
+}
+Heading.propTypes = propTypes;
+Heading.defaultProps = defaultProps; // if (__DOCS__) {
+//   Heading.docs = {
+//     folderName: 'Style Guide',
+//     componentGroup: 'Accessibility'
+//   };
+// }

package/es/Heading/Heading.module.css

@@ -0,0 +1,5 @@
+.reset {
+  font-size: inherit ;
+  font-weight: var(--zd-fw-semibold);
+  margin: initial ;
+}

package/es/Heading/__tests__/Heading.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Heading from "../Heading";
+describe('Heading', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
+  test.each(whiteSpace)('Should render whiteSpace of Heading - %s', whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      whiteSpace: whiteSpace
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_breakSpaces "
+    data-title-wrap="break-spaces"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_normal "
+    data-title-wrap="normal"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_nowrap "
+    data-title-wrap="nowrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_pre "
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preLine "
+    data-title-wrap="pre-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preWrap "
+    data-title-wrap="pre-wrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading rendering the defult props 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset  "
+  />
+</DocumentFragment>
+`;

package/es/Heading/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  tagName: 'h1',
+  a11y: {},
+  className: ''
+};

package/es/Heading/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  a11y: PropTypes.object,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
+};

package/es/Label/Label.js

@@ -0,0 +1,69 @@
+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); }
+
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: [
+  'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
+]}] */
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import { renderNode, isRenderable } from '@zohodesk/utils';
+import style from "./Label.module.css";
+import colors from "./LabelColors.module.css";
+export default class Label extends React.Component {
+  render() {
+    let {
+      text,
+      type,
+      palette,
+      size,
+      clipped,
+      htmlFor,
+      title,
+      onClick,
+      dataId,
+      dataSelectorId,
+      variant,
+      customProps,
+      customClass,
+      id,
+      renderRightPlaceholderNode,
+      a11y = {}
+    } = this.props;
+    const {
+      containerProps,
+      rightPlaceholderNodeProps
+    } = customProps;
+    const {
+      tabIndex
+    } = a11y;
+    const labelElement = /*#__PURE__*/React.createElement("label", {
+      className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
+      htmlFor: htmlFor,
+      "data-title": title,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-selector-id": dataSelectorId,
+      onClick: onClick,
+      id: id,
+      tabIndex: tabIndex
+    }, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(renderRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Flex, _extends({
+      $ui_displayMode: "flex",
+      $ui_direction: "row",
+      $ui_alignItems: "center"
+    }, containerProps), labelElement, /*#__PURE__*/React.createElement(Flex, _extends({
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center"
+    }, rightPlaceholderNodeProps), renderNode(renderRightPlaceholderNode))) : /*#__PURE__*/React.createElement(React.Fragment, null, labelElement));
+  }
+
+}
+Label.defaultProps = defaultProps;
+Label.propTypes = propTypes; // if (__DOCS__) {
+//   Label.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Label/Label.module.css

@@ -0,0 +1,57 @@
+.varClass {
+  /* label default variables */
+  --label_font_size: 14px;
+  --label_text_color: var(--zdt_label_default_text);
+  --label_font_weight: var(--zd-fw-normal);
+  --label_cursor: default;
+  --label_line_height: 1.286;
+}
+/* css:lineheight-validation:ignore */
+.label {
+  composes: varClass;
+  vertical-align: middle;
+  line-height: var(--label_line_height);
+  font-size: var(--label_font_size);
+  color: var(--label_text_color);
+  font-weight: var(--label_font_weight);
+  cursor: var(--label_cursor);
+}
+.xsmall {
+  --label_font_size: 12px;
+  --label_line_height: 1.5;
+}
+.small {
+  --label_font_size: 13px;
+  --label_line_height: 1.385;
+}
+.medium {
+  --label_font_size: 14px;
+  --label_line_height: 1.286;
+}
+.large {
+  --label_font_size: 26px;
+  --label_line_height: 0.6923;
+  composes: semibold from '../common/common.module.css';
+}
+.pointer {
+  --label_cursor: pointer;
+}
+.cursor {
+  --label_cursor: default;
+}
+.title {
+  display: block;
+}
+.subtitle {
+  display: inline-block;
+}
+.font_default {
+  --label_font_weight: var(--zd-fw-normal);
+}
+.font_primary {
+  --label_font_weight: var(--zd-fw-semibold);
+  composes: ftsmooth from '../common/common.module.css';
+}
+.dotted {
+  composes: dotted from '../common/common.module.css';
+}

package/es/Label/LabelColors.module.css

@@ -0,0 +1,21 @@
+.default {
+  --label_text_color: var(--zdt_label_default_text);
+}
+.primary {
+  --label_text_color: var(--zdt_label_primary_text);
+}
+.secondary {
+  --label_text_color: var(--zdt_label_secondary_text);
+}
+.danger {
+  --label_text_color: var(--zdt_label_danger_text);
+}
+.mandatory {
+  --label_text_color: var(--zdt_label_mandatory_text);
+}
+.disable {
+  --label_text_color: var(--zdt_label_disable_text);
+}
+.dark {
+  --label_text_color: var(--zdt_label_dark_text);
+}

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Label from "../Label.js";
+describe('Label', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const type = ['title', 'subtitle'];
+  test.each(type)('rendering the type of- %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['xsmall', 'small', 'medium', 'large'];
+  test.each(size)('rendering the size of- %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the clipped is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      clipped: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      title: "labelTitle"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const variant = ['primary', 'default'];
+  test.each(variant)('rendering the variant of- %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      customClass: "LabelCustomClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      id: "LabelID"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlFor', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      htmlFor: "LabelHtmlFor"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the onClick prop with asFragment and toMatchSnapshot', () => {
+    // Define an onClick mock function
+    const onClickMock = jest.fn(); // Render the Label component with the onClick prop
+
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Click Me",
+      onClick: onClickMock
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with renderRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "New Feature",
+      id: "label_new",
+      renderRightPlaceholderNode: /*#__PURE__*/React.createElement("span", {
+        style: {
+          background: '#27ae60',
+          color: 'white',
+          padding: '2px 6px',
+          borderRadius: '3px',
+          fontSize: '10px',
+          fontWeight: 'bold'
+        }
+      }, "NEW")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customProps - containerProps & rightPlaceholderNodeProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Premium Feature",
+      id: "label_premium",
+      size: "large",
+      palette: "danger",
+      renderRightPlaceholderNode: /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontSize: '10px',
+          background: '#f39c12',
+          color: 'white',
+          padding: '1px 4px',
+          borderRadius: '2px'
+        }
+      }, "PRO"),
+      customProps: {
+        containerProps: {
+          $ui_alignItems: 'center',
+          $tagAttributes_container: {
+            style: {
+              gap: '6px'
+            }
+          }
+        },
+        rightPlaceholderNodeProps: {
+          $ui_displayMode: 'flex',
+          $ui_alignItems: 'center',
+          $tagAttributes_container: {
+            style: {
+              gap: '6px'
+            }
+          }
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});