@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/errorstate/WillBack/WillBack.js

@@ -2,37 +2,117 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import WillBeRightBack from '@zohodesk/svg/lib/svg/WillBeRightBack';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import commonStyle from '../EmptyStates.module.css';
 import style from './WillBack.module.css';
 export default class WillBack extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
+  }
+
+  responsiveFunc({ mediaQueryOR }) {
+    return {
+      tablet: mediaQueryOR([{ minWidth: 481, maxWidth: 768 }]),
+      uptoMobile: mediaQueryOR([{ maxWidth: 480 }])
+    };
+  }
+
   render() {
+    let { dataId, customClass } = this.props;
     return (
-      <Container className={`${commonStyle.container}`}>
-        <Box className={commonStyle.top}>
-          <div className={`${commonStyle.header} ${style.header} `}>
-            <div className={style.title}>We'll be right back !</div>
-          </div>
-        </Box>
-        <Box className={style.imageContainer}>
-          <WillBeRightBack isFluid />
-        </Box>
-        <Box className={commonStyle.footer}>
-          <div className={commonStyle.btmText}>
-            Our Service is temporarity unavailable. We are currently working to
-            restore it.
-          </div>
-          <div className={`${commonStyle.btmText} ${style.bottomSpace} `}>
-            Please try again later or report this issue
-          </div>
-          <div className={commonStyle.btmText}>
-            2013, Zoho Corp, All rights reserved.
-          </div>
-        </Box>
-      </Container>
+      <ResponsiveReceiver query={this.responsiveFunc}>
+        {({ tablet, uptoMobile }) => (
+          <Container
+            className={`${
+              uptoMobile || tablet
+                ? commonStyle.tabletContainer
+                : commonStyle.container
+            } ${customClass}`}
+            dataId={dataId}
+            scroll='vertical'
+          >
+            <Box className={commonStyle.top}>
+              <div
+                className={
+                  uptoMobile || tablet
+                    ? ''
+                    : `${commonStyle.header} ${style.header} `
+                }
+              >
+                <div
+                  className={
+                    uptoMobile
+                      ? style.mobileTitle
+                      : tablet
+                      ? style.tabletTitle
+                      : style.title
+                  }
+                >
+                  We'll be right back !
+                </div>
+              </div>
+            </Box>
+            <Box
+              className={
+                uptoMobile
+                  ? style.mobileImageContainer
+                  : tablet
+                  ? style.tabletImageContainer
+                  : style.imageContainer
+              }
+            >
+              <WillBeRightBack isFluid dataId={`${dataId}_svg`} />
+            </Box>
+            <Box
+              className={`${
+                uptoMobile || tablet ? '' : commonStyle.footerWidth
+              } ${commonStyle.footer}`}
+            >
+              <div
+                className={
+                  uptoMobile || tablet
+                    ? commonStyle.tabletBtmText
+                    : commonStyle.btmText
+                }
+              >
+                Our Service is temporarity unavailable. We are currently working
+                to restore it.
+              </div>
+              <div
+                className={`${
+                  uptoMobile || tablet
+                    ? commonStyle.tabletBtmText
+                    : commonStyle.btmText
+                } ${style.bottomSpace} `}
+              >
+                Please try again later or report this issue
+              </div>
+              <div
+                className={
+                  uptoMobile || tablet
+                    ? commonStyle.tabletBtmText
+                    : commonStyle.btmText
+                }
+              >
+                2013, Zoho Corp, All rights reserved.
+              </div>
+            </Box>
+          </Container>
+        )}
+      </ResponsiveReceiver>
     );
   }
 }
 
+WillBack.propTypes = {
+  customClass: PropTypes.string,
+  dataId: PropTypes.string
+};
+WillBack.defaultProps = {
+  dataId: 'willBack',
+  customClass: ''
+};
 if (__DOCS__) {
   WillBack.docs = {
     componentGroup: 'errorStates'

package/src/errorstate/WillBack/WillBack.module.css

@@ -1,21 +1,36 @@
-/* .heading {
-  font-size: var(--zd_size30);
-  color: var(--zd_text_primary);
-  text-shadow: 0 4px 7px var(--zd_shadow_graytrans6);
-} */
+.title,
+.tabletTitle,
+.mobileTitle {
+  color: var(--zdt_willback_title_text);
+  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+}
 .title {
-  font-size: var(--zd_size50);
-  color: var(--zd_text_dark20);
-  font-family: var(--zd_bold);
+  font-size: var(--zd_font_size50);
+}
+.tabletTitle {
+  font-size: var(--zd_font_size24);
+}
+.mobileTitle {
+  font-size: var(--zd_font_size22);
 }
 .header {
   min-width: var(--zd_size450);
 }
-.imageContainer {
-  height: var(--zd_size450);
+.imageContainer,
+.tabletImageContainer,
+.mobileImageContainer {
   margin-top: calc(var(--zd_size70) * -1);
   margin-bottom: var(--zd_size30);
 }
+.imageContainer {
+  height: var(--zd_size450);
+}
+.mobileImageContainer {
+  height: var(--zd_size300);
+}
+.tabletImageContainer {
+  height: var(--zd_size350);
+}
 .bottomSpace {
   margin-bottom: var(--zd_size20);
 }

package/src/form/fields/CheckBoxField/CheckBoxField.js

@@ -0,0 +1,220 @@
+/**** Libraries ****/
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+/**** Components ****/
+import Label from '@zohodesk/components/lib/Label/Label';
+import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+
+/**** Icons ****/
+import Icon from '@zohodesk/icons/lib/Icon';
+/**** CSS ****/
+import style from '../Fields.module.css';
+
+export default class CheckBoxField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
+  }
+
+  handleChange(value) {
+    let { id, onChange } = this.props;
+    onChange && onChange(id, value);
+  }
+
+  handleGetRef(el) {
+    let { getRef, id } = this.props;
+    getRef && getRef(el, id);
+  }
+
+  handleLabelClick() {
+    let { checked } = this.props;
+    this.handleChange(!checked);
+  }
+
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      validationMessage,
+      validationPalette,
+      isReadOnly,
+      checked,
+      errorType,
+      isDisabled,
+      title,
+      dataId,
+      validationRuleMessage,
+      validationRulePalette,
+      infoText,
+      fieldSize,
+      labelPalette,
+      labelCustomClass,
+      direction,
+      lineClamp,
+      isLocked,
+      lockedInfoText,
+      customProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      CheckBoxProps = {},
+      ValidationMessageProps1 = {},
+      ValidationMessageProps2 = {}
+    } = customProps;
+    let removeEvent = isDisabled || isReadOnly;
+    let isDirectCol = direction === 'column';
+    let labelElement = (
+      <div className={style.labelContainer}>
+        <Label
+          text={labelName}
+          id={id}
+          size={fieldSize === 'small' ? 'small' : 'medium'}
+          palette={
+            isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
+          }
+          infoText={infoText}
+          customClass={`${!isDirectCol ? style.checkboxText : ''} ${
+            !isDirectCol ? style[`lineClamp_${lineClamp}`] : ''
+          } ${
+            isReadOnly || isDisabled
+              ? style.cbTextReadonly
+              : style.cbTextPointer
+          } ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`}
+          title={labelName}
+          onClick={!removeEvent ? this.handleLabelClick : null}
+          variant={isDirectCol ? 'default' : 'primary'}
+          dataId={
+            isDisabled
+              ? `${dataId}_label_disabled`
+              : isMandatory
+              ? `${dataId}_label_mandatory`
+              : `${dataId}_label`
+          }
+          {...LabelProps}
+        />
+        {infoText ? (
+          <Icon
+            name='ZD-GN-info'
+            iconClass={style.infoIcon}
+            title={infoText}
+            size='15'
+          />
+        ) : null}
+        {isLocked ? (
+          <Icon
+            name='ZD-GN-lock'
+            size='13'
+            iconClass={style.lockIcon}
+            title={lockedInfoText}
+          />
+        ) : null}
+      </div>
+    );
+    return (
+      <div
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        data-title={isDisabled ? title : ''}
+      >
+        {isDirectCol && labelElement}
+        <div
+          className={`${
+            isDirectCol ? style.fieldContainer : style.checkboxFieldContainer
+          } ${
+            isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''
+          }`}
+        >
+          <Container alignBox='row' isCover={false} align='top'>
+            <Box className={isDirectCol ? style.checkbox : style.checkboxRow}>
+              <CheckBox
+                id={id}
+                onChange={this.handleChange}
+                disabled={removeEvent}
+                checked={checked}
+                getRef={this.handleGetRef}
+                dataId={dataId}
+                {...CheckBoxProps}
+              />
+            </Box>
+            {!isDirectCol && <Box flexible>{labelElement}</Box>}
+          </Container>
+          {validationMessage && (
+            <ValidationMessage
+              text={validationMessage}
+              palette={validationPalette}
+              type={errorType}
+              dataId={`${dataId}_ValidationMessage`}
+              {...ValidationMessageProps1}
+            />
+          )}
+          {validationRuleMessage && (
+            <ValidationMessage
+              text={validationRuleMessage}
+              palette={validationRulePalette}
+              type={errorType}
+              dataId={`${dataId}_ValidationRuleMessage`}
+              {...ValidationMessageProps2}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+CheckBoxField.propTypes = {
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  direction: PropTypes.oneOf(['row', 'column']),
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getRef: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  infoText: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isMandatory: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelCustomClass: PropTypes.string,
+  labelName: PropTypes.string,
+  labelPalette: PropTypes.string,
+  lineClamp: PropTypes.oneOf(['one', 'two']),
+  onChange: PropTypes.func,
+  title: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  validationRuleMessage: PropTypes.string,
+  validationRulePalette: PropTypes.string,
+  lockedInfoText: PropTypes.string,
+  isLocked: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    CheckBoxProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  })
+};
+
+CheckBoxField.defaultProps = {
+  isMandatory: false,
+  errorType: 'primary',
+  isDisabled: false,
+  isReadOnly: false,
+  fieldSize: 'medium',
+  labelPalette: 'default',
+  labelCustomClass: '',
+  direction: 'row',
+  lineClamp: '',
+  customProps: {}
+};
+
+if (__DOCS__) {
+  CheckBoxField.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/src/form/fields/CheckBoxField/docs/CheckBoxField__default.docs.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CheckBoxField from '../CheckBoxField';
+export default class CheckBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <CheckBoxField
+          labelName='CheckBox'
+          id='checkbox'
+          validationMessage='Invalid Input'
+        />
+        <CheckBoxField
+          labelName='CheckBox'
+          id='checkbox'
+          validationMessage='Invalid Input'
+          isDisabled title='Invalid Permission'
+        />
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  CheckBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/src/form/fields/CurrencyField/CurrencyField.js

@@ -0,0 +1,267 @@
+/**** Libraries ****/
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+/**** Components ****/
+import Label from '@zohodesk/components/lib/Label/Label';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+/**** Icons ****/
+import Icon from '@zohodesk/icons/lib/Icon';
+/**** CSS ****/
+import style from '../Fields.module.css';
+import { formatCurrency } from '../../../utils/General';
+
+export default class CurrencyField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: false
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
+    this.getNextId = getUniqueId(this);
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  handleChange(value) {
+    let { id, onChange } = this.props;
+    onChange && onChange(id, value);
+  }
+
+  handleGetRef(el) {
+    let { getRef, id } = this.props;
+    this.textBox = el;
+    getRef && getRef(el, id);
+  }
+
+  onFocus() {
+    let { onFocus } = this.props;
+    this.setState({ isActive: true });
+    onFocus && onFocus();
+  }
+  onBlur() {
+    let { onBlur } = this.props;
+    this.setState({ isActive: false });
+    onBlur && onBlur();
+  }
+
+  render() {
+    let {
+      labelName,
+      id,
+      textBoxSize,
+      textBoxVariant,
+      textBoxType,
+      isMandatory,
+      validationMessage,
+      validationPalette,
+      maxLength,
+      isReadOnly,
+      value,
+      errorType,
+      isDisabled,
+      title,
+      onBlur,
+      dataId,
+      validationRuleMessage,
+      validationRulePalette,
+      onKeyDown,
+      placeHolder,
+      infoText,
+      borderColor,
+      fieldSize,
+      labelPalette,
+      labelCustomClass,
+      htmlId,
+      lockedInfoText,
+      isLocked,
+      needReadOnlyStyle,
+      isClickable,
+      userCurrencyType,
+      customProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      TextBoxProps = {},
+      ValidationMessageProps1 = {},
+      ValidationMessageProps2 = {}
+    } = customProps;
+    let { isActive } = this.state;
+    let formatValue = value;
+    if (!isActive && value != 0) {
+      formatValue = formatCurrency(value, userCurrencyType);
+    } else {
+      formatValue = value;
+    }
+
+    let uniqueId = htmlId ? htmlId : this.getNextId();
+
+    return (
+      <div
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        data-title={isDisabled ? title : ''}
+      >
+        {labelName && (
+          <div className={style.labelContainer}>
+            <Label
+              text={labelName}
+              size={fieldSize === 'small' ? 'small' : 'medium'}
+              palette={
+                isMandatory
+                  ? 'mandatory'
+                  : isDisabled
+                  ? 'primary'
+                  : labelPalette
+              }
+              customClass={`${labelCustomClass} ${
+                isMandatory ? style.labelMandatory : ''
+              }`}
+              htmlFor={uniqueId}
+              dataId={
+                isDisabled
+                  ? `${dataId}_label_disabled`
+                  : isMandatory
+                  ? `${dataId}_label_mandatory`
+                  : `${dataId}_label`
+              }
+              {...LabelProps}
+            />
+            {infoText ? (
+              <Icon
+                name='ZD-GN-info'
+                iconClass={style.infoIcon}
+                title={infoText}
+                size='15'
+              />
+            ) : null}
+            {isLocked ? (
+              <Icon
+                name='ZD-GN-lock'
+                size='13'
+                iconClass={style.lockIcon}
+                title={lockedInfoText}
+              />
+            ) : null}
+          </div>
+        )}
+
+        <div
+          className={`${style.fieldContainer} ${
+            labelName ? style[`fieldMargin_${fieldSize}`] : ''
+          }`}
+        >
+          <TextBox
+            htmlId={uniqueId}
+            id={id}
+            type={textBoxType}
+            variant={textBoxVariant}
+            size={fieldSize === 'medium' ? textBoxSize : 'xsmall'}
+            maxLength={maxLength}
+            isReadOnly={isReadOnly}
+            inputRef={this.handleGetRef}
+            value={formatValue}
+            onChange={this.handleChange}
+            dataId={dataId}
+            onBlur={this.onBlur}
+            onFocus={this.onFocus}
+            onKeyDown={onKeyDown}
+            placeHolder={placeHolder}
+            borderColor={borderColor}
+            isDisabled={isDisabled}
+            needEffect={isReadOnly || isDisabled ? false : true}
+            isClickable={isClickable}
+            needReadOnlyStyle={needReadOnlyStyle}
+            {...TextBoxProps}
+          />
+          {validationMessage && (
+            <ValidationMessage
+              text={validationMessage}
+              palette={validationPalette}
+              type={errorType}
+              dataId={`${dataId}_ValidationMessage`}
+              htmlFor={uniqueId}
+              {...ValidationMessageProps1}
+            />
+          )}
+          {validationRuleMessage && (
+            <ValidationMessage
+              text={validationRuleMessage}
+              palette={validationRulePalette}
+              type={errorType}
+              htmlFor={uniqueId}
+              dataId={`${dataId}_ValidationRuleMessage`}
+              {...ValidationMessageProps2}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+CurrencyField.propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  infoText: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isMandatory: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelCustomClass: PropTypes.string,
+  labelName: PropTypes.string.isRequired,
+  labelPalette: PropTypes.string,
+  maxLength: PropTypes.number,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  textBoxSize: PropTypes.string,
+  textBoxType: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  title: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  validationRuleMessage: PropTypes.string,
+  validationRulePalette: PropTypes.string,
+  value: PropTypes.string,
+  lockedInfoText: PropTypes.string,
+  isLocked: PropTypes.bool,
+  isClickable: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    TextBoxProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  })
+};
+
+CurrencyField.defaultProps = {
+  errorType: 'primary',
+  isMandatory: false,
+  textBoxSize: 'xmedium',
+  textBoxType: 'text',
+  textBoxVariant: 'primary',
+  borderColor: 'default',
+  isDisabled: false,
+  isReadOnly: false,
+  fieldSize: 'medium',
+  labelPalette: 'default',
+  labelCustomClass: '',
+  isClickable: false,
+  needReadOnlyStyle: true,
+  customProps: {}
+};
+
+if (__DOCS__) {
+  CurrencyField.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}