@zohodesk/components 1.0.0-temp-244 → 1.0.0-temp-245

package/es/common/customscroll.module.css

@@ -1,142 +1,142 @@
-.scroll {
-  /*  Variable:Ignore  */
-  --zd-scroll-width: 12px;
-  /*  Variable:Ignore  */
-  --zd-scroll-height: 12px;
-  --zd-scroll-bg: var(--zdt_customscroll_default_bg);
-  --zd-scroll-corner-bg: transparent;
-  --zd-scroll-thump: var(--zdt_customscroll_thump_bg);
-  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
-  --zd-scroll-border: var(--zdt_customscroll_border);
-}
-
-.scroll[data-scroll-palette='dark'],
-.scroll [data-scroll-palette='dark'] {
-  --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
-  --zd-scroll-thump: var(--zdt_customscroll_thump_dark_bg);
-  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
-  --zd-scroll-border: var(--zdt_customscroll_dark_border);
-}
-
-.scroll,
-.scroll * {
-  /* css:theme-validation:ignore */
-  scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
-  scrollbar-width: thin;
-  /* css:theme-validation:ignore */
-  -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
-  /* css:theme-validation:ignore */
-  -ms-scrollbar-face-color: var(--zd-scroll-thump);
-}
-
-.scroll::-webkit-scrollbar,
-.scroll ::-webkit-scrollbar {
-  /* css:theme-validation:ignore */
-}
-
-.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
-  background: var(--zd-scroll-corner-bg);
-}
-
-.scroll::-webkit-scrollbar:hover,
-.scroll ::-webkit-scrollbar:hover {
-  /* css:theme-validation:ignore */
-}
-
-.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
-  background: var(--zd-scroll-bg);
-}
-
-.scroll::-webkit-scrollbar:horizontal,
-.scroll ::-webkit-scrollbar:horizontal {
-  height: var(--zd-scroll-height);
-}
-
-.scroll::-webkit-scrollbar:vertical,
-.scroll ::-webkit-scrollbar:vertical {
-  width: var(--zd-scroll-width);
-}
-
-.scroll::-webkit-scrollbar-button,
-.scroll ::-webkit-scrollbar-button {
-  display: none;
-  width: 0 ;
-  height: 0 ;
-}
-
-[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-}
-
-[dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-}
-
-.scroll::-webkit-scrollbar-track:vertical:hover,
-.scroll ::-webkit-scrollbar-track:vertical:hover {
-  /* css:theme-validation:ignore */
-}
-
-.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
-  border-color: var(--zd-scroll-border);
-}
-
-.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-}
-
-.scroll::-webkit-scrollbar-track:horizontal:hover,
-.scroll ::-webkit-scrollbar-track:horizontal:hover {
-  /* css:theme-validation:ignore */
-}
-
-.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
-  border-color: var(--zd-scroll-border);
-}
-
-.scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
-  background: inherit;
-}
-
-.scroll::-webkit-scrollbar-thumb,
-.scroll ::-webkit-scrollbar-thumb {
-  /* css:theme-validation:ignore */
-  /* display: none; */
-}
-
-.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background: var(--zd-scroll-thump);
-  background-clip: padding-box;
-  border: 3px solid transparent;
-}
-
-.scroll::-webkit-scrollbar-thumb:hover,
-.scroll ::-webkit-scrollbar-thumb:hover {
-  /* css:theme-validation:ignore */
-}
-
-.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
-  background: var(--zd-scroll-thump-hoverbg);
-  background-clip: padding-box;
-  border: 3px solid transparent;
-}
-
-/* .scroll:hover > ::-webkit-scrollbar-thumb,
-.scroll *:hover > ::-webkit-scrollbar-thumb {
-  display: block;
-} */
-.scroll::-webkit-scrollbar-corner,
-.scroll ::-webkit-scrollbar-corner {
-  /* css:theme-validation:ignore */
-}
-.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
-  background: var(--zd-scroll-corner-bg);
-}
-
-.scroll::-webkit-resizer, .scroll ::-webkit-resizer {
-  background: inherit;
+.scroll {
+  /*  Variable:Ignore  */
+  --zd-scroll-width: 12px;
+  /*  Variable:Ignore  */
+  --zd-scroll-height: 12px;
+  --zd-scroll-bg: var(--zdt_customscroll_default_bg);
+  --zd-scroll-corner-bg: transparent;
+  --zd-scroll-thump: var(--zdt_customscroll_thump_bg);
+  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
+  --zd-scroll-border: var(--zdt_customscroll_border);
+}
+
+.scroll[data-scroll-palette='dark'],
+.scroll [data-scroll-palette='dark'] {
+  --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
+  --zd-scroll-thump: var(--zdt_customscroll_thump_dark_bg);
+  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
+  --zd-scroll-border: var(--zdt_customscroll_dark_border);
+}
+
+.scroll,
+.scroll * {
+  /* css:theme-validation:ignore */
+  scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
+  scrollbar-width: thin;
+  /* css:theme-validation:ignore */
+  -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
+  /* css:theme-validation:ignore */
+  -ms-scrollbar-face-color: var(--zd-scroll-thump);
+}
+
+.scroll::-webkit-scrollbar,
+.scroll ::-webkit-scrollbar {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
+  background: var(--zd-scroll-corner-bg);
+}
+
+.scroll::-webkit-scrollbar:hover,
+.scroll ::-webkit-scrollbar:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
+  background: var(--zd-scroll-bg);
+}
+
+.scroll::-webkit-scrollbar:horizontal,
+.scroll ::-webkit-scrollbar:horizontal {
+  height: var(--zd-scroll-height);
+}
+
+.scroll::-webkit-scrollbar:vertical,
+.scroll ::-webkit-scrollbar:vertical {
+  width: var(--zd-scroll-width);
+}
+
+.scroll::-webkit-scrollbar-button,
+.scroll ::-webkit-scrollbar-button {
+  display: none;
+  width: 0 ;
+  height: 0 ;
+}
+
+[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+
+[dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+}
+
+.scroll::-webkit-scrollbar-track:vertical:hover,
+.scroll ::-webkit-scrollbar-track:vertical:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
+  border-color: var(--zd-scroll-border);
+}
+
+.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+.scroll::-webkit-scrollbar-track:horizontal:hover,
+.scroll ::-webkit-scrollbar-track:horizontal:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
+  border-color: var(--zd-scroll-border);
+}
+
+.scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
+  background: inherit;
+}
+
+.scroll::-webkit-scrollbar-thumb,
+.scroll ::-webkit-scrollbar-thumb {
+  /* css:theme-validation:ignore */
+  /* display: none; */
+}
+
+.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: var(--zd-scroll-thump);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+}
+
+.scroll::-webkit-scrollbar-thumb:hover,
+.scroll ::-webkit-scrollbar-thumb:hover {
+  /* css:theme-validation:ignore */
+}
+
+.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
+  background: var(--zd-scroll-thump-hoverbg);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+}
+
+/* .scroll:hover > ::-webkit-scrollbar-thumb,
+.scroll *:hover > ::-webkit-scrollbar-thumb {
+  display: block;
+} */
+.scroll::-webkit-scrollbar-corner,
+.scroll ::-webkit-scrollbar-corner {
+  /* css:theme-validation:ignore */
+}
+.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
+  background: var(--zd-scroll-corner-bg);
+}
+
+.scroll::-webkit-resizer, .scroll ::-webkit-resizer {
+  background: inherit;
 }

package/es/v1/Label/Label.js

@@ -1,40 +1,89 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Label/Label.module.css";
-import colors from "../../Label/LabelColors.module.css";
-export default function Label(props) {
+import React, { useContext, useEffect, useState } from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import { propTypes } from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils'; // component registry
+
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography"; // css
+
+import defaultStyle from "./css/Label_v1.module.css";
+
+const Label = props => {
   const {
-    text,
-    type,
-    palette,
-    size,
-    clipped,
     htmlFor,
-    title,
     onClick,
-    dataId,
-    dataSelectorId,
-    variant,
-    customClass,
-    id,
-    a11y = {}
+    text,
+    customId,
+    testId,
+    customStyle,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isRequired,
+    isDisabled,
+    requiredType,
+    shouldHighlightRequired
   } = props;
   const {
-    tabIndex
-  } = a11y;
-  return /*#__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);
-}
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    labelClass,
+    requiredClass
+  } = cssJSLogic({
+    props: { ...props,
+      requiredType,
+      shouldHighlightRequired,
+      isRequired,
+      isDisabled
+    },
+    style
+  });
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $tagAttributes_container: {
+      'data-selector-id': customId,
+      ...tagAttributes_container
+    },
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    ...customProps_container
+  }, /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $tagAttributes_text: {
+      htmlFor: htmlFor,
+      onClick: onClick,
+      ...tagAttributes_label
+    },
+    $a11yAttributes_text: a11yAttributes_label,
+    ...customProps_label
+  }, text), isRequired && requiredType === 'text' ? /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass
+  }, "(Required)") : '');
+};
+
+export default withComponentRegistrar(Label, {
+  name: 'ZDC_v1_Label'
+});
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;

package/es/v1/Label/css/Label_v1.module.css

@@ -0,0 +1,43 @@
+.label {
+    font-size: var(--zd_font_size14) ;
+    color: var(--zdt_v1_label_text);
+    cursor: pointer;
+}
+
+.dotted {
+    composes: dotted from '../../../common/common.module.css';
+}
+
+.required {
+    color: var(--zdt_v1_label_mandatory_text);
+}
+
+.asterisk:after {
+    content: "*";
+    color: var(--zdt_v1_label_mandatory_text);
+}
+
+[dir=ltr] .asterisk:after {
+    padding-left: var(--zd_size2) ;
+}
+
+[dir=rtl] .asterisk:after {
+    padding-right: var(--zd_size2) ;
+}
+
+.requiredTxt {
+    color: var(--zdt_v1_label_mandatory_text);
+    font-size: var(--zd_font_size14) ;
+}
+
+[dir=ltr] .requiredTxt {
+    margin-left: var(--zd_size5) ;
+}
+
+[dir=rtl] .requiredTxt {
+    margin-right: var(--zd_size5) ;
+}
+
+.disabled {
+    color: var(--zdt_v1_label_disabled_text);
+}

package/es/v1/Label/css/cssJSLogic.js

@@ -0,0 +1,29 @@
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  const {
+    isClipped,
+    requiredType,
+    shouldHighlightRequired,
+    isRequired,
+    isDisabled
+  } = props; // const shouldHighlightMandatory = localStorage?.getItem('mandatoryAppearance') === 'true';
+
+  let labelClass = compileClassNames({
+    [style.label]: true,
+    [style.dotted]: isClipped,
+    [style.asterisk]: isRequired && requiredType === 'asterisk',
+    [style.required]: isRequired && shouldHighlightRequired,
+    [style.disabled]: isDisabled
+  });
+  let requiredClass = compileClassNames({
+    [style.requiredTxt]: true
+  });
+  return {
+    labelClass,
+    requiredClass
+  };
+}

package/es/v1/Label/props/defaultProps.js

@@ -1,11 +1,9 @@
-export const defaultProps = {
-  clipped: false,
-  dataId: 'label',
-  palette: 'default',
-  size: 'medium',
-  text: 'Label',
-  type: 'title',
-  variant: 'default',
-  customClass: '',
-  dataSelectorId: 'label'
+export default {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customStyle: {},
+  shouldHighlightRequired: false,
+  isDisabled: false,
+  isClipped: true
 };

package/es/v1/Label/props/propTypes.js

@@ -1,19 +1,26 @@
 import PropTypes from 'prop-types';
-export const propTypes = {
-  clipped: PropTypes.bool,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
+export default {
   htmlFor: PropTypes.string,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
   text: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['title', 'subtitle']),
-  variant: PropTypes.oneOf(['primary', 'default']),
-  customClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    tabIndex: PropTypes.string
+  onClick: PropTypes.func,
+  a11yAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  tagAttributes: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
+  }),
+  customProps: PropTypes.shape({
+    container: PropTypes.object,
+    label: PropTypes.object
   }),
-  id: PropTypes.string
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  customStyle: PropTypes.object,
+  requiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequired: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool
 };