@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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

@@ -0,0 +1,178 @@
+// 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=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="6"
+          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: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="6"
+          >
+            Red
+          </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=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="9"
+          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="9"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="3"
+          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="3"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="12"
+          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: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="12"
+          >
+            Red
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <span>
+          custom selected value
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ColorSelect/common/ColorIndicator/ColorIndicator.js

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

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

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

package/es/ColorSelect/common/ColorIndicator/__tests__/ColorSingleSelect.spec.js

@@ -0,0 +1,60 @@
+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();
+  });
+  test('rendering with custom attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with different color codes', () => {
+    const colors = ['#ff0000', '#00ff00', '#0000ff'];
+    colors.forEach(color => {
+      const {
+        asFragment
+      } = render( /*#__PURE__*/React.createElement(ColorIndicator, {
+        colorCode: color
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('rendering with different shapes', () => {
+    const shapes = ['circle', 'square'];
+    shapes.forEach(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();
+  });
+});

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

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with custom attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-custom-attribute="true"
+    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 different color codes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(255, 0, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different color codes 2`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 255, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different color codes 3`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 0, 255);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different shapes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different shapes 2`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator square "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;

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

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

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

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

package/es/ColorSelect/common/ColoredTag/ColoredTag.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { propTypes } from "./props/propTypes";
+import Tag from "../../../Tag/Tag";
+import { DUMMY_OBJECT } from "../../../utils/Common.js";
+
+function ColoredTag(props) {
+  const {
+    colorConfig,
+    customAttributes,
+    isActive,
+    ...rest
+  } = props;
+  const {
+    textColor,
+    backgroundColor,
+    borderColor
+  } = colorConfig || DUMMY_OBJECT;
+  const style = {
+    '--tag_bg_color': backgroundColor,
+    '--tag_text_color': textColor,
+    '--tag_border_color': borderColor
+  };
+  const composedAttributes = { ...customAttributes,
+    style: style
+  };
+  return /*#__PURE__*/React.createElement(Tag, { ...rest,
+    active: isActive,
+    customAttributes: composedAttributes
+  });
+}
+
+ColoredTag.propTypes = propTypes;
+export default ColoredTag;

package/es/ColorSelect/common/ColoredTag/__tests__/ColoredTag.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColoredTag from "../ColoredTag";
+describe('ColoredTag', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with isActive true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with colorConfig', () => {
+    const colorConfig = {
+      backgroundColor: 'lightsteelblue',
+      textColor: 'dodgerblue',
+      borderColor: 'dodgerblue'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      colorConfig: colorConfig
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColoredTag, {
+      text: 'Colored Tag'
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ColorSelect/common/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredTag rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="1"
+    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="1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with colorConfig 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="3"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    style="--tag_bg_color: lightsteelblue; --tag_text_color: dodgerblue; --tag_border_color: dodgerblue;"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="3"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with customAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="4"
+    class="container effect    medium lgRadius default   "
+    data-custom-attribute="true"
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="4"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with isActive true 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="2"
+    class="container effect selected activedefault   medium lgRadius default   "
+    data-id="tag_TagSelected"
+    data-selector-id="tag"
+    data-test-id="tag_TagSelected"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="2"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with text 1`] = `
+<DocumentFragment>
+  <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="Colored Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="5"
+    >
+      Colored Tag
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/ColorSelect/common/ColoredTag/props/propTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { propTypes as tagPropTypes } from "../../../../Tag/props/propTypes";
+export const propTypes = { ...tagPropTypes,
+  colorConfig: PropTypes.shape({
+    textColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    borderColor: PropTypes.string
+  })
+};

package/es/ColorSelect/common/helpers.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Color from 'color';
+import ColoredTag from "./ColoredTag/ColoredTag";
+import ColorIndicator from "./ColorIndicator/ColorIndicator";
+export function renderColoredTag(data) {
+  const {
+    option,
+    ...otherData
+  } = data;
+  const {
+    colorCode,
+    value,
+    id
+  } = option;
+  const getBgColorValue = colorCode ? Color(colorCode).alpha(0.2).toString() : '';
+  const colorConfig = {
+    backgroundColor: getBgColorValue,
+    textColor: colorCode,
+    borderColor: colorCode
+  };
+  return /*#__PURE__*/React.createElement(ColoredTag, {
+    text: value,
+    id: id,
+    ...otherData,
+    colorConfig: colorConfig
+  });
+}
+export function renderColorIndicator(data) {
+  const {
+    colorCode
+  } = data;
+  return /*#__PURE__*/React.createElement(ColorIndicator, {
+    colorCode: colorCode
+  });
+}

package/es/ColorSelect/props/defaultProps.js

@@ -0,0 +1,13 @@
+import { MultiSelect_defaultProps } from "../../MultiSelect/props/defaultProps";
+import { Select_defaultProps } from "../../Select/props/defaultProps";
+export const ColorSingleSelect_defaultProps = {
+  className: '',
+  options: [],
+  customProps: {},
+  ...Select_defaultProps
+};
+export const ColorMultiSelect_defaultProps = {
+  options: [],
+  customProps: {},
+  ...MultiSelect_defaultProps
+};

package/es/ColorSelect/props/propTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import { Select_propTypes } from "../../Select/props/propTypes";
+import { MultiSelect_propTypes } from "../../MultiSelect/props/propTypes";
+export const propTypes = {
+  renderCustomColorIndicator: PropTypes.element
+};
+export const ColorSingleSelect_propTypes = {
+  customClass: PropTypes.string,
+  ...propTypes,
+  ...Select_propTypes
+};
+export const ColorMultiSelect_propTypes = { ...propTypes,
+  ...MultiSelect_propTypes
+};