@zohodesk/components 1.0.0-temp-199.18 → 1.0.0-temp-246

package/es/CheckBox/props/propTypes.js

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
+import { propTypes as TypographyPropTypes } from "../../Typography/props/propTypes";
 export const propTypes = {
   active: PropTypes.bool,
   activeStyle: PropTypes.oneOf(['tick', 'minus']),
   checked: PropTypes.bool,
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,
+  secondaryText: PropTypes.string,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,
@@ -36,7 +38,8 @@ export const propTypes = {
   }),
   customProps: PropTypes.shape({
     CheckBoxProps: PropTypes.object,
-    LabelProps: PropTypes.object
+    LabelProps: PropTypes.object,
+    secondaryTextProps: PropTypes.exact(TypographyPropTypes)
   }),
   renderRightPlaceholderNode: PropTypes.node
 };

package/es/ColorSelect/ColorSingleSelect.js

@@ -24,7 +24,6 @@ function ColorSingleSelect(props) {
     customClass,
     customProps,
     borderColor,
-    children,
     dataId,
     renderRightPlaceholderNode,
     placeholder,

package/es/ColorSelect/__tests__/ColorMultiSelect.spec.js

@@ -4,15 +4,27 @@ import ColorMultiSelect from "../ColorMultiSelect";
 const options = [{
   id: 1,
   text: 'Red',
-  colorCode: '#ff6e6e'
+  colorConfig: {
+    text: 'black',
+    background: '#ff6e6e',
+    border: 'black'
+  }
 }, {
   id: 2,
   text: 'Green',
-  colorCode: '#77d779'
+  colorConfig: {
+    text: 'black',
+    background: '#77d779',
+    border: 'black'
+  }
 }, {
   id: 3,
   text: 'Blue',
-  colorCode: '#649cff'
+  colorConfig: {
+    text: 'black',
+    background: '#649cff',
+    border: 'black'
+  }
 }];
 describe('ColorMultiSelect', () => {
   test('rendering the defult props', () => {

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

@@ -4,15 +4,27 @@ import ColorSingleSelect from "../ColorSingleSelect";
 const options = [{
   id: 1,
   text: 'Red',
-  colorCode: '#ff6e6e'
+  colorConfig: {
+    text: 'black',
+    background: '#ff6e6e',
+    border: 'black'
+  }
 }, {
   id: 2,
   text: 'Green',
-  colorCode: '#77d779'
+  colorConfig: {
+    text: 'black',
+    background: '#77d779',
+    border: 'black'
+  }
 }, {
   id: 3,
   text: 'Blue',
-  colorCode: '#649cff'
+  colorConfig: {
+    text: 'black',
+    background: '#649cff',
+    border: 'black'
+  }
 }];
 describe('ColorSingleSelect', () => {
   test('rendering the defult props', () => {

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

@@ -110,7 +110,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           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;"
+          style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
           tabindex="0"
         >
           <div
@@ -161,7 +161,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           data-selector-id="tag"
           data-test-id="tag_Tag"
           data-title="Green"
-          style="--tag_bg_color: rgba(119, 215, 121, 0.2); --tag_text_color: #77d779; --tag_border_color: #77d779;"
+          style="--tag_bg_color: #77d779; --tag_text_color: black; --tag_border_color: black;"
           tabindex="0"
         >
           <div

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

@@ -43,7 +43,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
               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;"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
               tabindex="0"
             >
               <div
@@ -57,7 +57,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -131,7 +131,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -194,7 +194,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -259,7 +259,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -323,7 +323,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
               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;"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
               tabindex="0"
             >
               <div
@@ -337,7 +337,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"
@@ -400,7 +400,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="arrowIcon   inflex coldir both"
+            class="arrowIcon      inflex coldir both"
             data-id="undefined_downIcon"
             data-selector-id="container"
             data-test-id="undefined_downIcon"

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import style from "./ColorIndicator.module.css";
 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 {
-    colorCode,
+    colorConfig,
     shape,
     customClass,
     customId,
@@ -13,11 +14,14 @@ function ColorIndicator(props) {
     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: colorCode
+      backgroundColor: background
     },
     "data-id": customId,
     "data-test-id": testId

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

@@ -16,13 +16,26 @@ describe('ColorIndicator', () => {
       testId: "test-id"
     }));
     expect(asFragment()).toMatchSnapshot();
-  });
-  const colors = ['#ff0000', '#00ff00', '#0000ff'];
-  test.each(colors)('rendering the color of- %s', color => {
+  }); // 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, {
-      colorCode: color
+      colorConfig: color
     }));
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ColorIndicator rendering the color of- #0000ff 1`] = `
+exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
 <DocumentFragment>
   <div
     class="varClass indicator circle "
@@ -11,7 +11,7 @@ exports[`ColorIndicator rendering the color of- #0000ff 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ColorIndicator rendering the color of- #00ff00 1`] = `
+exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
     class="varClass indicator circle "
@@ -22,7 +22,7 @@ exports[`ColorIndicator rendering the color of- #00ff00 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ColorIndicator rendering the color of- #ff0000 1`] = `
+exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
 <DocumentFragment>
   <div
     class="varClass indicator circle "

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

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

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

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

package/es/ColorSelect/_shared/helpers/renderHelpers.js

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

package/es/ColorSelect/props/propTypes.js

@@ -6,6 +6,7 @@ export const propTypes = {
 };
 export const ColorSingleSelect_propTypes = { ...Select_propTypes,
   ...propTypes,
+  placeholder: PropTypes.string,
   customClass: PropTypes.shape({
     selectClass: PropTypes.string
   }),

package/es/Label/Label.js

@@ -4,6 +4,8 @@
 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 {
@@ -20,14 +22,20 @@ export default class Label extends React.Component {
       dataId,
       dataSelectorId,
       variant,
+      customProps,
       customClass,
       id,
+      renderRightPlaceholderNode,
       a11y = {}
     } = this.props;
+    const {
+      containerProps,
+      rightPlaceholderNodeProps
+    } = customProps;
     const {
       tabIndex
     } = a11y;
-    return /*#__PURE__*/React.createElement("label", {
+    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,
@@ -39,6 +47,16 @@ export default class Label extends React.Component {
       id: id,
       tabIndex: tabIndex
     }, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(renderRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_direction: "row",
+      $ui_alignItems: "center",
+      ...containerProps
+    }, labelElement, /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      ...rightPlaceholderNodeProps
+    }, renderNode(renderRightPlaceholderNode))) : /*#__PURE__*/React.createElement(React.Fragment, null, labelElement));
   }
 
 }

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

@@ -96,4 +96,62 @@ describe('Label', () => {
     }));
     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();
+  });
 });

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

@@ -310,3 +310,69 @@ exports[`Label rendering the variant of- primary 1`] = `
   </label>
 </DocumentFragment>
 `;
+
+exports[`Label rendering with customProps - containerProps & rightPlaceholderNodeProps 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row alignItems_center"
+    data-id="flex"
+    data-test-id="flex"
+    style="gap: 6px;"
+  >
+    <label
+      class="label title large danger font_default
+           cursor  "
+      data-id="label"
+      data-selector-id="label"
+      data-test-id="label"
+      id="label_premium"
+    >
+      Premium Feature
+    </label>
+    <div
+      class="flex row alignItems_center"
+      data-id="flex"
+      data-test-id="flex"
+      style="gap: 6px;"
+    >
+      <span
+        style="font-size: 10px; background: rgb(243, 156, 18); color: white; padding: 1px 4px; border-radius: 2px;"
+      >
+        PRO
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label rendering with renderRightPlaceholderNode 1`] = `
+<DocumentFragment>
+  <div
+    class="flex row"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="label title medium default font_default
+           cursor  "
+      data-id="label"
+      data-selector-id="label"
+      data-test-id="label"
+      id="label_new"
+    >
+      New Feature
+    </label>
+    <div
+      class=""
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span
+        style="background: rgb(39, 174, 96); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold;"
+      >
+        NEW
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Label/props/defaultProps.js

@@ -6,6 +6,7 @@ export const defaultProps = {
   text: 'Label',
   type: 'title',
   variant: 'default',
+  customProps: {},
   customClass: '',
   dataSelectorId: 'label'
 };

package/es/Label/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import FlexPropTypes from '@zohodesk/layout/es/Flex/props/propTypes';
 export const propTypes = {
   clipped: PropTypes.bool,
   dataId: PropTypes.string,
@@ -11,9 +12,14 @@ export const propTypes = {
   title: PropTypes.string,
   type: PropTypes.oneOf(['title', 'subtitle']),
   variant: PropTypes.oneOf(['primary', 'default']),
+  customProps: PropTypes.shape({
+    containerProps: PropTypes.exact(FlexPropTypes),
+    rightPlaceholderNodeProps: PropTypes.exact(FlexPropTypes)
+  }),
   customClass: PropTypes.string,
   a11y: PropTypes.shape({
     tabIndex: PropTypes.string
   }),
-  id: PropTypes.string
+  id: PropTypes.string,
+  renderRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,12 +889,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit,
-      customProps
+      limit
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1063,7 +1059,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
+        })), /*#__PURE__*/React.createElement(Suggestions, {
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
       isVirtualizerEnabled,
-      limit,
-      customProps
+      limit
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,23 +193,18 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction,
-      customClass
+      setVirtualizerContainerRefFunction
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/props/defaultProps.js

@@ -38,7 +38,6 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -170,6 +169,5 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };