@zohodesk/components 1.4.21 → 1.4.23

package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -0,0 +1,422 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorSingleSelect Should render the default selected value 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="3"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="3"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              aria-labelledby="5"
+              class="container effect    medium lgRadius default   "
+              data-id="tag_Tag"
+              data-selector-id="tag"
+              data-test-id="tag_Tag"
+              data-title="Red"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
+              tabindex="0"
+            >
+              <div
+                aria-hidden="true"
+                class="text mediumtext"
+                id="5"
+              >
+                Red
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect Should render the selected value 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="6"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="6"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              aria-labelledby="8"
+              class="container effect    medium lgRadius default   "
+              data-id="tag_Tag"
+              data-selector-id="tag"
+              data-test-id="tag_Tag"
+              tabindex="0"
+            >
+              <div
+                aria-hidden="true"
+                class="text mediumtext"
+                id="8"
+              />
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="1"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="1"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="dotted size14 placeholder"
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="9"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="9"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="dotted size14 placeholder"
+            >
+              placeholder Text
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="11"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="11"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              aria-labelledby="13"
+              class="container effect    medium lgRadius default   "
+              data-id="tag_Tag"
+              data-selector-id="tag"
+              data-test-id="tag_Tag"
+              data-title="Red"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
+              tabindex="0"
+            >
+              <div
+                aria-hidden="true"
+                class="text mediumtext"
+                id="13"
+              >
+                Red
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="14"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="14"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <span>
+              custom selected value
+            </span>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { DUMMY_OBJECT } from "../../../utils/Common";
+import style from "./ColorIndicator.module.css";
+
+function ColorIndicator(props) {
+  const {
+    colorConfig,
+    shape,
+    customClass,
+    customId,
+    testId,
+    tagAttributes,
+    a11yAttributes
+  } = props;
+  const {
+    background
+  } = colorConfig || DUMMY_OBJECT;
+  return /*#__PURE__*/React.createElement("div", { ...tagAttributes,
+    ...a11yAttributes,
+    className: `${style.varClass} ${style.indicator} ${style[shape]} ${customClass}`,
+    style: {
+      backgroundColor: background
+    },
+    "data-id": customId,
+    "data-test-id": testId
+  });
+}
+
+ColorIndicator.propTypes = propTypes;
+ColorIndicator.defaultProps = defaultProps;
+export default ColorIndicator;

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -0,0 +1,19 @@
+.varClass {
+    --local-colorIndicator-height: var(--zd_size10);
+    --local-colorIndicator-width: var(--zd_size10);
+    --local-colorIndicator-border-radius: 10px;
+}
+
+.circle {
+    --local-colorIndicator-border-radius: 10px;
+}
+
+.square {
+    --local-colorIndicator-border-radius: 2px;
+}
+
+.indicator {
+    height: var(--local-colorIndicator-height);
+    width: var(--local-colorIndicator-width);
+    border-radius: var(--local-colorIndicator-border-radius);
+}

package/es/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColorIndicator from "../ColorIndicator";
+describe('ColorIndicator', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with custom id and test id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      customId: "custom-id",
+      testId: "test-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // const colors = ['#ff0000', '#00ff00', '#0000ff'];
+
+  const colorConfigurations = [{
+    background: '#ff0000',
+    text: '#000000',
+    border: '#ffffff'
+  }, {
+    background: '#00ff00',
+    text: '#000000',
+    border: '#ffffff'
+  }, {
+    background: '#0000ff',
+    text: '#ffffff',
+    border: '#000000'
+  }];
+  test.each(colorConfigurations)('rendering the color of- %s', color => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      colorConfig: color
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const shapes = ['circle', 'square'];
+  test.each(shapes)('rendering the shape of- %s', shape => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      shape: shape
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      customClass: "color-indicator-test-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with a11yAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      a11yAttributes: {
+        'aria-label': "color_indicator_aria-label"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with tagAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      tagAttributes: {
+        title: "color_indicator_tagAttributes"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 0, 255);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 255, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(255, 0, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the shape of- circle 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the shape of- square 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator square "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with a11yAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="color_indicator_aria-label"
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with custom class 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle color-indicator-test-class"
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with custom id and test id 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id="custom-id"
+    data-test-id="test-id"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with tagAttributes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    title="color_indicator_tagAttributes"
+  />
+</DocumentFragment>
+`;

package/es/ColorSelect/_shared/ColorIndicator/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  shape: 'circle',
+  customId: '',
+  testId: '',
+  customClass: '',
+  tagAttributes: {},
+  a11yAttributes: {}
+};

package/es/ColorSelect/_shared/ColorIndicator/props/propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  colorConfig: PropTypes.object,
+  shape: PropTypes.oneOf(['circle', 'square']),
+  customClass: PropTypes.string,
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  tagAttributes: PropTypes.object,
+  a11yAttributes: PropTypes.object
+};