@zohodesk/components 1.5.2 → 1.5.4-temp-1

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/DropBox/DropBoxElement/DropBoxElement.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
-import { positionMapping } from "../DropBoxPositionMapping.js";
+import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/es/DropBox/utils/isMobilePopover.js

@@ -1,17 +1,6 @@
 import { getLibraryConfig } from "../../Provider/Config";
+import { isMobilePopover as isMobile } from '@zohodesk/dotkit/es/utils/device.js';
 export default function isMobilePopover(needResponsive) {
-  //   let { needResponsive } = props;
-  let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
-  return isModel ? true : false;
+  const mobileWidth = getLibraryConfig('mobileWidth');
+  return isMobile(needResponsive, mobileWidth);
 }

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 alignItems_center"
+    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="flex row alignItems_center"
+      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/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -35,7 +35,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -136,7 +136,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -237,7 +237,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -337,7 +337,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -437,7 +437,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -537,7 +537,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -637,7 +637,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
           tabindex="-1"
         >
           <div
-            class="boxContainer medium  filled  shrinkOff"
+            class="boxContainer  medium  filled  shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -36,7 +36,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -136,7 +136,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -236,7 +236,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -335,7 +335,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -434,7 +434,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -533,7 +533,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -632,7 +632,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
         >
           <div
             class="radio  
-            hoverprimary medium filled centerPathprimary   shrinkOff"
+            hoverprimary medium filled centerPathprimary    shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"