@zohodesk/components 1.4.15 → 1.4.17

package/es/TextBoxIcon/TextBoxIcon.js

@@ -0,0 +1,203 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import TextBox from "../TextBox/TextBox";
+import { Container, Box } from "../Layout";
+import { Icon } from '@zohodesk/icons';
+import btnStyle from "../semantic/Button/semanticButton.module.css";
+import style from "./TextBoxIcon.module.css";
+/* eslint-disable react/forbid-component-props */
+
+export default class TextBoxIcon extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: false
+    };
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleInputFocusOnClick = this.handleInputFocusOnClick.bind(this);
+  }
+
+  handleRef(ele) {
+    let {
+      inputRef
+    } = this.props;
+    this.inputEle = ele;
+    inputRef && inputRef(ele);
+  }
+
+  handleClear() {
+    let {
+      onClear
+    } = this.props;
+    onClear && onClear();
+    this.inputEle && this.inputEle.focus({
+      preventScroll: true
+    });
+  }
+
+  handleFocus(e) {
+    const {
+      onFocus,
+      needReadOnlyStyle,
+      isReadOnly
+    } = this.props;
+
+    if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
+      this.setState({
+        isActive: true
+      });
+      onFocus && onFocus(e);
+    }
+  }
+
+  handleBlur(e) {
+    const {
+      onBlur
+    } = this.props;
+    this.setState({
+      isActive: false
+    });
+    onBlur && onBlur(e);
+  }
+
+  handleInputFocusOnClick() {
+    this.inputEle && this.inputEle.focus({
+      preventScroll: true
+    });
+  }
+
+  render() {
+    const {
+      type,
+      name,
+      id,
+      maxLength,
+      placeHolder,
+      size,
+      onKeyUp,
+      isReadOnly,
+      isDisabled,
+      children,
+      onKeyDown,
+      onClick,
+      value,
+      iconRotated,
+      needBorder,
+      variant,
+      onClear,
+      onChange,
+      title,
+      dataId,
+      dataSelectorId,
+      needReadOnlyStyle,
+      isClickable,
+      needEffect,
+      onKeyPress,
+      borderColor,
+      onMouseDown,
+      showClearIcon,
+      htmlId,
+      i18nKeys,
+      customClass,
+      iconOnHover,
+      isFocus,
+      onClearMouseDown,
+      isScrollPrevent,
+      customProps,
+      needInputFocusOnWrapperClick,
+      renderRightPlaceholderNode,
+      renderCustomClearComponent
+    } = this.props;
+    const {
+      isActive
+    } = this.state;
+    const {
+      customTBoxWrap = '',
+      customTextBox = '',
+      customTBoxIcon = '',
+      customTBoxLine = ''
+    } = customClass;
+    const {
+      clearText = 'Clear'
+    } = i18nKeys;
+    let {
+      TextBoxProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      isCover: false,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      dataSelectorId: dataSelectorId,
+      "data-title": isDisabled ? title : null,
+      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
+      dataId: dataId,
+      size: size,
+      variant: variant,
+      type: type,
+      value: value,
+      name: name,
+      id: id,
+      htmlId: htmlId,
+      maxLength: maxLength,
+      placeHolder: placeHolder,
+      onKeyUp: onKeyUp,
+      onFocus: this.handleFocus,
+      onKeyDown: onKeyDown,
+      onChange: onChange,
+      onBlur: this.handleBlur,
+      onClick: onClick,
+      isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
+      inputRef: this.handleRef,
+      needReadOnlyStyle: needReadOnlyStyle,
+      isClickable: isClickable,
+      onKeyPress: onKeyPress,
+      onMouseDown: onMouseDown,
+      needBorder: false,
+      isScrollPrevent: isScrollPrevent,
+      customClass: customTextBox,
+      customProps: TextBoxProps
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.iconContainer} ${customTBoxIcon}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
+      clearText,
+      handleClear: this.handleClear
+    }) : /*#__PURE__*/React.createElement(Box, {
+      className: `${btnStyle.buttonReset} ${style.icon}`,
+      onClick: this.handleClear,
+      dataId: `${dataId}_ClearIcon`,
+      "data-title": clearText,
+      tagName: "button"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      "aria-hidden": true,
+      onMouseDown: onClearMouseDown
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-delete",
+      size: "14"
+    }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.icon} ${iconRotated ? style.rotated : ''}`
+    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
+      className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
+    }));
+  }
+
+}
+TextBoxIcon.defaultProps = defaultProps;
+TextBoxIcon.propTypes = propTypes; // if (__DOCS__) {
+//   TextBoxIcon.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -0,0 +1,79 @@
+.varClass {
+  /* textboxicon default variables */
+  --textboxicon_line_height: var(--zd_size1);
+  --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
+
+  /* textboxicon icon default variables */
+  --textboxicon_icon_margin: 0 var(--zd_size5);
+  --textboxicon_icon_cursor: pointer;
+  --textboxicon_icon_color: var(--zdt_textboxicon_default_icon);
+}
+.container {
+  composes: varClass;
+  position: relative;
+}
+.disabled,.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.disabled, .readonly {
+  cursor: not-allowed;
+}
+.icon {
+  composes: offSelection from '../common/common.module.css';
+  margin: var(--textboxicon_icon_margin);
+  cursor: var(--textboxicon_icon_cursor);
+}
+.iconContainer {
+  color: var(--textboxicon_icon_color);
+}
+.effect:hover .iconContainer,
+.effect:focus-within .iconContainer {
+  --textboxicon_icon_color: var(--zdt_textboxicon_hover_icon);
+}
+.rotated {
+  transform: rotateX(180deg);
+}
+.line {
+  position: absolute;
+  bottom: 0 ;
+  /*  Variable:Ignore  */
+  min-height: 1px;
+  transition: var(--zd_transition2);
+  height: var(--textboxicon_line_height);
+  transform: perspective(1px);
+}
+[dir=ltr] .line {
+  left: 0 ;
+  right: 0 ;
+}
+[dir=rtl] .line {
+  right: 0 ;
+  left: 0 ;
+}
+.line, .borderColor_default {
+  background-color: var(--textboxicon_line_color);
+}
+.borderColor_transparent {
+  --textboxicon_line_color: var(--zdt_textboxicon_transparent_line_bg);
+}
+.effect:hover .line {
+  --textboxicon_line_color: var(--zdt_textboxicon_hover_line_bg);
+}
+.effectFocused .line,
+.effectFocused:hover .line {
+  --textboxicon_line_color: var(--zdt_textboxicon_focus_line_bg);
+}
+.borderColor_error,
+.effect:hover .borderColor_error {
+  --textboxicon_line_color: var(--zdt_textboxicon_error_line_bg);
+}
+.iconOnHoverStyle .icon,
+.iconOnHoverReadonly .icon,
+.iconOnHoverReadonly:hover .icon {
+  opacity: 0;
+  visibility: hidden;
+}
+.iconOnHoverStyle:hover .icon {
+  opacity: 1;
+  visibility: visible;
+}

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -0,0 +1,268 @@
+import React from 'react';
+import TextBoxIcon from "../TextBoxIcon";
+import { render } from "@testing-library/react";
+describe('TextBoxIcon component', () => {
+  const type = ['text', 'password', 'number'];
+  const size = ['small', 'xsmall', 'medium', 'xmedium'];
+  const variant = ['primary', 'secondary', 'default'];
+  const borderColor = ['transparent', 'default', 'error'];
+  test('Should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(type)('Should render type  - %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render name', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "TextBoxIconName"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      id: "TextboxIconId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render placeholder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      placeHolder: "TextBoxIconPlaceHolder"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true , needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      isReadOnly: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, null, " ", /*#__PURE__*/React.createElement("div", null, "test"), " "));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render value is string and length greater than 1', () => {
+    const mockOnClear = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      value: "Text",
+      onClear: mockOnClear
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render value is number', () => {
+    const mockOnClear = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      value: 10,
+      onClear: mockOnClear
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render value is string and length less than 1', () => {
+    const mockOnClear = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      value: "0",
+      onClear: mockOnClear
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconRotated is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      iconRotated: true
+    }, " ", /*#__PURE__*/React.createElement("div", null, "test"), " "));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needBorder is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(variant)('Should render Varient - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      title: "TextBoxIconTitle",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needReadOnlyStyle is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      needReadOnlyStyle: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isClickable is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      isClickable: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      isReadOnly: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(borderColor)('Should render borderColor - %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      borderColor: borderColor
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render showClearIcon is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      showClearIcon: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render htmlId ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      htmlId: "textBoxIconhtmlId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconOnHover is true , iconOnHover, isDisabled is true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      iconOnHover: true,
+      isReadOnly: true,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconOnHover is true , iconOnHover, isDisabled is false ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      iconOnHover: true,
+      isReadOnly: false,
+      isDisabled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isFocus is true  ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      isFocus: true,
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      needBorder: true,
+      customClass: {
+        customTBoxWrap: 'customTBoxWrapTextBoxIcon',
+        customTextBox: 'customTextBoxTextBoxIcon',
+        customTBoxIcon: 'customTBoxIconTextBox',
+        customTBoxLine: 'customTBoxLineTextBox'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom Props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      text: "checkboxText",
+      customProps: {
+        TextBoxProps: {
+          'isClickable': 'false'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the i18n value', () => {
+    const mockOnClear = jest.fn();
+    const i18nKeys = {
+      clearText: 'TextBoxIcon Text'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
+      value: "Text",
+      onClear: mockOnClear,
+      i18nKeys: i18nKeys
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});