@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

package/src/ActionButton/ActionButton.js

@@ -1,197 +1,197 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/Button/Button';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
-import  CssProvider  from '@zohodesk/components/lib/Provider/CssProvider';
-import style from './ActionButton.module.css';
-
-export class ActionButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleTogglePopup = this.handleTogglePopup.bind(this);
-  }
-
-  handleTogglePopup(e) {
-    let { togglePopup,defaultPosition } = this.props;
-    togglePopup(e,defaultPosition);
-  }
-
-  render() {
-    let {
-      isLoading,
-      onClick,
-      size,
-      dataId,
-      isArrow,
-      text,
-      subText,
-      arrowBoxDataId,
-      arrowBoxSize,
-      palette,
-      onHover,
-      position,
-      className,
-      iconName,
-      iconSize,
-      dataTitle,
-      isDisabled,
-      isPopupOpen,
-      removeClose,
-      children,
-      dropBoxClass,
-      isBoxPaddingNeed,
-      getContainerRef,
-      getTargetRef
-    } = this.props;
-    return (
-      <Container
-        alignBox='row'
-        isCover={false}
-        className={` ${style.container} ${style[palette+'Box']} ${style[size]} ${className} ${
-          isDisabled ? CssProvider('isDisabled') : ''
-        } ${!onClick ? style.wholeDiv : ''} `}
-        onClick={onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined}
-        onMouseEnter={!onClick ? onHover && this.handleTogglePopup : undefined}
-        onMouseLeave={!onClick ? onHover && this.handleTogglePopup : undefined}
-        eleRef={getTargetRef}
-      >
-        {isLoading ? (
-          <Box flexible>
-            <Button
-              status='loading'
-              palette={palette}
-              size='medium'
-              customClass={{
-                customButton: style.btn
-              }}
-            />
-          </Box>
-        ) : (
-          <React.Fragment>
-            <Box
-              flexible
-              onClick={onClick}
-              dataId={dataId}
-              className={`${style.contentBox} ${style[palette+'Btn']} ${style[size+'_btnBox']} ${
-                children ? style.contentBoxBdr : style.contentBoxBdrRds
-              } ${style.clickable} `}
-              data-title={dataTitle}
-            >
-              <Container align='both'>
-                <Box className={style.contentwrapper}>
-                  <Container isCover={false} alignBox='row' align='vertical'>
-                    {iconName ? (
-                      <Icon
-                        name={iconName}
-                        size={iconSize}
-                        iconClass={`${style.iconClr} ${
-                          text ? style.iconMrgn : ''
-                        }`}
-                      />
-                    ) : null}
-                    {text ? (
-                      <Box shrink className={style.txt} data-title={text}>
-                        {text}
-                      </Box>
-                    ) : null}
-                  </Container>
-                </Box>
-                {subText ? (
-                  <Box data-title={subText} className={style.subTxt}>
-                    {subText}
-                  </Box>
-                ) : null}
-              </Container>
-            </Box>
-
-            {children ? (
-              <Box
-                onClick={ onClick ? !onHover && this.handleTogglePopup : undefined}
-                onMouseEnter={ onClick ? onHover && this.handleTogglePopup : undefined}
-                onMouseLeave={ onClick ? onHover && this.handleTogglePopup : undefined}
-                className={`${style[arrowBoxSize+'_arrowBox']} ${style[palette+'Arw']}  ${
-                  style.arrowWrapper
-                } ${isPopupOpen ? style.arrowActive : ''}`}
-                dataId={arrowBoxDataId}
-              >
-                <Container align='both'>
-                  <Icon
-                    name='ZD-down'
-                    size='6'
-                    iconClass={style.arrow}
-                  />
-                </Container>
-                {isPopupOpen ? (
-                  <DropBox
-                    size='small'
-                    isActive={isPopupOpen}
-                    boxPosition={position}
-                    isAnimate
-                    isArrow={isArrow}
-                    customClass={{
-                      customDropBoxWrap: dropBoxClass
-                    }}
-                    isBoxPaddingNeed={isBoxPaddingNeed}
-                    getRef={getContainerRef}
-                  >
-                    {children}
-                  </DropBox>
-                ) : null}
-              </Box>
-            ) : null}
-          </React.Fragment>
-        )}
-      </Container>
-    );
-  }
-}
-
-ActionButton.defaultProps = {
-  size: 'medium',
-  isArrow: false,
-  arrowBoxDataId: 'arrowBox',
-  dataId: 'actionButton',
-  onHover: false,
-  className: '',
-  iconName: '',
-  iconSize: '9',
-  isDisabled: false,
-  dropBoxClass: '',
-  arrowBoxSize: 'medium',
-  isBoxPaddingNeed: true,
-  palette: 'primaryFilled'
-};
-ActionButton.propTypes = {
-  arrowBoxDataId: PropTypes.string,
-  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  dropBoxClass: PropTypes.string,
-  defaultPosition: PropTypes.string,
-  position: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isBoxPaddingNeed: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  onClick: PropTypes.func,
-  onHover: PropTypes.bool,
-  palette: PropTypes.oneOf('primaryFilled', 'primary'),
-  removeClose: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  subText: PropTypes.string,
-  text: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func
-};
-ActionButton.docs = {
-  componentGroup: 'Atom'
-};
-export default Popup(ActionButton);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/Button/Button';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import  CssProvider  from '@zohodesk/components/lib/Provider/CssProvider';
+import style from './ActionButton.module.css';
+
+export class ActionButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+  }
+
+  handleTogglePopup(e) {
+    let { togglePopup,defaultPosition } = this.props;
+    togglePopup(e,defaultPosition);
+  }
+
+  render() {
+    let {
+      isLoading,
+      onClick,
+      size,
+      dataId,
+      isArrow,
+      text,
+      subText,
+      arrowBoxDataId,
+      arrowBoxSize,
+      palette,
+      onHover,
+      position,
+      className,
+      iconName,
+      iconSize,
+      dataTitle,
+      isDisabled,
+      isPopupOpen,
+      removeClose,
+      children,
+      dropBoxClass,
+      isBoxPaddingNeed,
+      getContainerRef,
+      getTargetRef
+    } = this.props;
+    return (
+      <Container
+        alignBox='row'
+        isCover={false}
+        className={` ${style.container} ${style[palette+'Box']} ${style[size]} ${className} ${
+          isDisabled ? CssProvider('isDisabled') : ''
+        } ${!onClick ? style.wholeDiv : ''} `}
+        onClick={onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined}
+        onMouseEnter={!onClick ? onHover && this.handleTogglePopup : undefined}
+        onMouseLeave={!onClick ? onHover && this.handleTogglePopup : undefined}
+        eleRef={getTargetRef}
+      >
+        {isLoading ? (
+          <Box flexible>
+            <Button
+              status='loading'
+              palette={palette}
+              size='medium'
+              customClass={{
+                customButton: style.btn
+              }}
+            />
+          </Box>
+        ) : (
+          <React.Fragment>
+            <Box
+              flexible
+              onClick={onClick}
+              dataId={dataId}
+              className={`${style.contentBox} ${style[palette+'Btn']} ${style[size+'_btnBox']} ${
+                children ? style.contentBoxBdr : style.contentBoxBdrRds
+              } ${style.clickable} `}
+              data-title={dataTitle}
+            >
+              <Container align='both'>
+                <Box className={style.contentwrapper}>
+                  <Container isCover={false} alignBox='row' align='vertical'>
+                    {iconName ? (
+                      <Icon
+                        name={iconName}
+                        size={iconSize}
+                        iconClass={`${style.iconClr} ${
+                          text ? style.iconMrgn : ''
+                        }`}
+                      />
+                    ) : null}
+                    {text ? (
+                      <Box shrink className={style.txt} data-title={text}>
+                        {text}
+                      </Box>
+                    ) : null}
+                  </Container>
+                </Box>
+                {subText ? (
+                  <Box data-title={subText} className={style.subTxt}>
+                    {subText}
+                  </Box>
+                ) : null}
+              </Container>
+            </Box>
+
+            {children ? (
+              <Box
+                onClick={ onClick ? !onHover && this.handleTogglePopup : undefined}
+                onMouseEnter={ onClick ? onHover && this.handleTogglePopup : undefined}
+                onMouseLeave={ onClick ? onHover && this.handleTogglePopup : undefined}
+                className={`${style[arrowBoxSize+'_arrowBox']} ${style[palette+'Arw']}  ${
+                  style.arrowWrapper
+                } ${isPopupOpen ? style.arrowActive : ''}`}
+                dataId={arrowBoxDataId}
+              >
+                <Container align='both'>
+                  <Icon
+                    name='ZD-down'
+                    size='6'
+                    iconClass={style.arrow}
+                  />
+                </Container>
+                {isPopupOpen ? (
+                  <DropBox
+                    size='small'
+                    isActive={isPopupOpen}
+                    boxPosition={position}
+                    isAnimate
+                    isArrow={isArrow}
+                    customClass={{
+                      customDropBoxWrap: dropBoxClass
+                    }}
+                    isBoxPaddingNeed={isBoxPaddingNeed}
+                    getRef={getContainerRef}
+                  >
+                    {children}
+                  </DropBox>
+                ) : null}
+              </Box>
+            ) : null}
+          </React.Fragment>
+        )}
+      </Container>
+    );
+  }
+}
+
+ActionButton.defaultProps = {
+  size: 'medium',
+  isArrow: false,
+  arrowBoxDataId: 'arrowBox',
+  dataId: 'actionButton',
+  onHover: false,
+  className: '',
+  iconName: '',
+  iconSize: '9',
+  isDisabled: false,
+  dropBoxClass: '',
+  arrowBoxSize: 'medium',
+  isBoxPaddingNeed: true,
+  palette: 'primaryFilled'
+};
+ActionButton.propTypes = {
+  arrowBoxDataId: PropTypes.string,
+  arrowBoxSize: PropTypes.oneOf('small', 'medium'),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  dropBoxClass: PropTypes.string,
+  defaultPosition: PropTypes.string,
+  position: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+  onHover: PropTypes.bool,
+  palette: PropTypes.oneOf('primaryFilled', 'primary'),
+  removeClose: PropTypes.func,
+  size: PropTypes.oneOf('small', 'medium', 'large'),
+  subText: PropTypes.string,
+  text: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func
+};
+ActionButton.docs = {
+  componentGroup: 'Atom'
+};
+export default Popup(ActionButton);

package/src/ActionButton/ActionButton.module.css

@@ -1,120 +1,120 @@
-.varClass {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
-  --buttonBorder: var(--zdt_actionButton_primary_border);
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
-}
-.container {
-  composes: varClass;
-}
-.container:hover {
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
-}
-.primaryFilledBox {
-  --buttonText: var(--zdt_actionButton_primaryFilled_text);
-}
-.primaryFilledBtn, .primaryFilledArw {
-  background-color: var(--buttonBg);
-}
-.primaryBox {
-  --buttonText: var(--zdt_actionButton_primary_text);
-}
-.primaryBtn, .primaryArw {
-  border: 1px solid var(--buttonBorder);
-}
-.primaryBtn {
-  border-right: none;
-}
-.contentBox,
-.arrowWrapper {
-  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
-}
-.clickable {
-  cursor: pointer;
-}
-.contentBoxBdr {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-.contentBoxBdrRds {
-  border-radius: var(--zd_size4);
-}
-.small {
-  height: var(--zd_size28);
-}
-.medium,
-.large {
-  height: var(--zd_size30);
-}
-.medium {
-  min-width: var(--zd_size115);
-}
-.large {
-  min-width: var(--zd_size135);
-}
-.small_btnBox {
-  padding: 0 var(--zd_size8);
-}
-.medium_btnBox,
-.large_btnBox {
-  padding: 0 var(--zd_size10);
-}
-.txt {
-  font-size: var(--zd_font_size13);
-  font-family: var(--zd_semibold);
-  text-transform: capitalize;
-}
-.subTxt {
-  font-size: var(--zd_font_size10);
-}
-.contentwrapper,
-.txt,
-.subTxt {
-  max-width: 100%;
-}
-.txt,
-.subTxt {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--buttonText);
-}
-.arrowWrapper {
-  position: relative;
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-  cursor: pointer;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-}
-.primaryFilledArw {
-    border-left: 1px solid var(--buttonSeparatorBorder);
-}
-.small_arrowBox {
-  width: var(--zd_size20);
-}
-.medium_arrowBox {
-  width: var(--zd_size26);
-}
-.primaryFilledArw:hover,
-.primaryFilledArw.arrowActive,
-.clickable.primaryFilledBtn:hover,
-.wholeDiv.primaryFilledBox:hover {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
-}
-.primaryArw:hover,
-.primaryArw.arrowActive,
-.clickable.primaryBtn:hover,
-.wholeDiv.primaryBox:hover {
-  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
-  --buttonText: var(--zdt_actionButton_primary_hover_text);
-}
-.btn {
-  height: 100%;
-  width: 100%;
-}
-.popupWrapper {
-  padding: var(--zd_size10) 0;
-  margin: var(--zd_size5) 0;
-}
-.arrow,
-.iconClr {
-  color: var(--buttonText);
-}
-.iconMrgn {
-  margin-right: var(--zd_size6);
-}
+.varClass {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
+  --buttonBorder: var(--zdt_actionButton_primary_border);
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
+}
+.container {
+  composes: varClass;
+}
+.container:hover {
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
+}
+.primaryFilledBox {
+  --buttonText: var(--zdt_actionButton_primaryFilled_text);
+}
+.primaryFilledBtn, .primaryFilledArw {
+  background-color: var(--buttonBg);
+}
+.primaryBox {
+  --buttonText: var(--zdt_actionButton_primary_text);
+}
+.primaryBtn, .primaryArw {
+  border: 1px solid var(--buttonBorder);
+}
+.primaryBtn {
+  border-right: none;
+}
+.contentBox,
+.arrowWrapper {
+  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
+}
+.clickable {
+  cursor: pointer;
+}
+.contentBoxBdr {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+.contentBoxBdrRds {
+  border-radius: var(--zd_size4);
+}
+.small {
+  height: var(--zd_size28);
+}
+.medium,
+.large {
+  height: var(--zd_size30);
+}
+.medium {
+  min-width: var(--zd_size115);
+}
+.large {
+  min-width: var(--zd_size135);
+}
+.small_btnBox {
+  padding: 0 var(--zd_size8);
+}
+.medium_btnBox,
+.large_btnBox {
+  padding: 0 var(--zd_size10);
+}
+.txt {
+  font-size: var(--zd_font_size13);
+  font-family: var(--zd_semibold);
+  text-transform: capitalize;
+}
+.subTxt {
+  font-size: var(--zd_font_size10);
+}
+.contentwrapper,
+.txt,
+.subTxt {
+  max-width: 100%;
+}
+.txt,
+.subTxt {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--buttonText);
+}
+.arrowWrapper {
+  position: relative;
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+  cursor: pointer;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+}
+.primaryFilledArw {
+    border-left: 1px solid var(--buttonSeparatorBorder);
+}
+.small_arrowBox {
+  width: var(--zd_size20);
+}
+.medium_arrowBox {
+  width: var(--zd_size26);
+}
+.primaryFilledArw:hover,
+.primaryFilledArw.arrowActive,
+.clickable.primaryFilledBtn:hover,
+.wholeDiv.primaryFilledBox:hover {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
+}
+.primaryArw:hover,
+.primaryArw.arrowActive,
+.clickable.primaryBtn:hover,
+.wholeDiv.primaryBox:hover {
+  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
+  --buttonText: var(--zdt_actionButton_primary_hover_text);
+}
+.btn {
+  height: 100%;
+  width: 100%;
+}
+.popupWrapper {
+  padding: var(--zd_size10) 0;
+  margin: var(--zd_size5) 0;
+}
+.arrow,
+.iconClr {
+  color: var(--buttonText);
+}
+.iconMrgn {
+  margin-right: var(--zd_size6);
+}