@zohodesk/components 1.4.21 → 1.4.22

package/es/TextBoxIcon/props/propTypes.js

@@ -40,8 +40,7 @@ export const propTypes = { ...TextBox_propTypes,
   customClass: PropTypes.shape({
     customTBoxWrap: PropTypes.string,
     customTextBox: PropTypes.string,
-    customTBoxIcon: PropTypes.string,
-    customTBoxLine: PropTypes.string
+    customTBoxIcon: PropTypes.string
   }),
   iconOnHover: PropTypes.bool,
   isFocus: PropTypes.bool,

package/es/shared/ArrowIcon/ArrowIcon.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Container } from "../../Layout";
+import Icon from '@zohodesk/icons/es/Icon';
+import { renderNode, isRenderable } from '@zohodesk/utils';
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes";
+import style from "./ArrowIcon.module.css";
+
+const ArrowIcon = props => {
+  const {
+    dataId,
+    isRotated,
+    isActive,
+    customClass,
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    iconSize,
+    isDisabled,
+    isReadOnly,
+    renderCustomToggleIndicator
+  } = props;
+  const {
+    iconClass = '',
+    containerClass = ''
+  } = customClass;
+  return isRenderable(renderCustomToggleIndicator) ? renderNode(renderCustomToggleIndicator, {
+    isRotated,
+    isActive,
+    isReadOnly,
+    isDisabled
+  }) : /*#__PURE__*/React.createElement(Container, {
+    isInline: true,
+    isCover: false,
+    align: "both",
+    "aria-hidden": true,
+    ...tagAttributes,
+    ...a11yAttributes,
+    ...customProps,
+    dataId: `${dataId}_downIcon`,
+    className: `${style.arrowIcon} ${isRotated ? style.rotated : ''} ${isActive ? style.active : ''} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readonly : ''} ${containerClass}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: iconSize,
+    iconClass: iconClass
+  }));
+};
+
+ArrowIcon.defaultProps = defaultProps;
+ArrowIcon.propTypes = propTypes;
+export default ArrowIcon;

package/es/shared/ArrowIcon/ArrowIcon.module.css

@@ -0,0 +1,43 @@
+.varClass {
+    --local-arrowIcon-color: var(--zdt_arrowicon_default_icon);
+}
+
+.arrowIcon {
+  composes: varClass;
+  color: var(--local-arrowIcon-color);
+  transition: transform var(--zd_transition3);
+  margin: 0 var(--zd_size5) ;
+}
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.transparentContainer .rotated,
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+[dir=ltr] .rotated {
+    transform: rotateZ(-180deg);
+}
+
+[dir=rtl] .rotated {
+  transform: rotateZ(180deg);
+}
+
+.rotated,
+.active,
+.arrowContainer:hover .arrowIcon,
+.transparentContainer:hover .arrowIcon {
+  --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
+}
+
+.disabled {
+  composes: disabled from '../../common/common.module.css';
+}
+
+.readonly {
+  composes: curdefault from '../../common/common.module.css';
+}

package/es/shared/ArrowIcon/__tests__/ArrowIcon.spec.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ArrowIcon from "../ArrowIcon";
+describe('ArrowIcon', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      dataId: "ArrowIcon-test-dataId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isRotated is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isRotated: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      customClass: {
+        iconClass: 'arrowIcon_iconClass',
+        containerClass: 'arrowIcon_containerClass'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with a11yAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      a11yAttributes: {
+        'data-a11y-focus': true
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with tagAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      tagAttributes: {
+        title: 'hello here is title'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with customProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      customProps: {
+        testId: 'hereIsTestId'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with renderCustomToggleIndicator', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ArrowIcon, {
+      renderCustomToggleIndicator: /*#__PURE__*/React.createElement("div", null, "Indicator")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrowIcon Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon  active    inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon   disabled   inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon    readonly  inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isRotated is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon rotated     inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-a11y-focus="true"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with customProps 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="hereIsTestId"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="ArrowIcon-test-dataId_downIcon"
+    data-selector-id="container"
+    data-test-id="ArrowIcon-test-dataId_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with renderCustomToggleIndicator 1`] = `
+<DocumentFragment>
+  <div>
+    Indicator
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render with tagAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+    title="hello here is title"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon      inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;

package/es/shared/ArrowIcon/props/defaultProps.js

@@ -0,0 +1,11 @@
+export default {
+  isRotated: false,
+  isDisabled: false,
+  isReadOnly: false,
+  iconSize: '7',
+  isActive: false,
+  customClass: {},
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {}
+};

package/es/shared/ArrowIcon/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export default {
+  dataId: PropTypes.string,
+  isRotated: PropTypes.bool,
+  customClass: PropTypes.shape({
+    iconClass: PropTypes.string,
+    containerClass: PropTypes.string
+  }),
+  customProps: PropTypes.object,
+  tagAttributes: PropTypes.object,
+  a11yAttributes: PropTypes.object,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isActive: PropTypes.bool,
+  iconSize: PropTypes.string
+};

package/es/shared/InputFieldLine/InputFieldLine.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
+import Container from "../../Layout/Container";
+import style from "./InputFieldLine.module.css";
+
+function InputFieldLine(props) {
+  const {
+    isDisabled,
+    isReadOnly,
+    hasPadding,
+    hasEffect,
+    title,
+    isActive,
+    size,
+    border,
+    borderColor,
+    dataId,
+    onClick,
+    customProps,
+    customClass,
+    children,
+    onKeyDown,
+    a11yAttributes,
+    tagAttributes
+  } = props;
+  const borderClass = style[`border_${border}`] || '';
+  const borderColorClass = style[`borderColor_${borderColor}`] || '';
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    ...tagAttributes,
+    ...a11yAttributes,
+    ...customProps,
+    "data-title": title,
+    dataId: dataId,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    className: `${style.varClass} ${style.customContainer} ${hasPadding ? style[size] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
+  }, children);
+}
+
+InputFieldLine.propTypes = propTypes;
+InputFieldLine.defaultProps = defaultProps;
+export default InputFieldLine;

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -0,0 +1,88 @@
+.varClass {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+    --local_inputFieldLine_border_width: 1px;
+    --local_padding: var(--zd_size0);
+    --local_cursor: pointer;
+}
+
+.customContainer {
+    composes: oflowy from '../../common/common.module.css';
+    cursor: var(--local_cursor);
+    border-color: var(--local_inputFieldLine_border_color);
+}
+
+.disabled,.readonly {
+    --local_cursor: not-allowed;
+}
+
+.borderColor_default {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_default_border);
+}
+
+.borderColor_transparent {
+    --local_inputFieldLine_border_color: var(--dot_mirror);
+}
+
+.borderColor_dark {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_border);
+}
+
+.borderColor_error,
+.effect.borderColor_error:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_error_border);
+}
+
+.effect.borderColor_transparent:hover,
+.effect.borderColor_default:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_hover_border);
+}
+
+.active.borderColor_dark,
+.active.borderColor_dark:hover,
+.effect.borderColor_dark:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_dark_active_border);
+}
+
+.active.borderColor_error,
+.active.borderColor_error:hover,
+.active.borderColor_default,
+.active.borderColor_default:hover,
+.active.borderColor_transparent,
+.active.borderColor_transparent:hover {
+    --local_inputFieldLine_border_color: var(--zdt_inputField_focus_border);
+}
+
+.hasBorder {
+    transition: border var(--zd_transition2) linear 0s;
+    border-style: solid;
+}
+
+.xmedium {
+    min-height: var(--zd_size30) ;
+    --local_padding: var(--zd_size3);
+}
+
+.small {
+    max-height: var(--zd_size200) ;
+    --local_padding: var(--zd_size3);
+}
+
+.medium {
+    max-height: var(--zd_size350) ;
+    --local_padding: var(--zd_size8);
+}
+
+.large {
+    max-height: var(--zd_size400) ;
+    --local_padding: var(--zd_size8);
+}
+
+.border_bottom {
+    border-width:  0 0 var(--local_inputFieldLine_border_width) 0;
+    padding-bottom: var(--local_padding);
+}
+
+.border_all {
+    border-width: var(--local_inputFieldLine_border_width);
+    padding: var(--local_padding);
+}

package/es/shared/InputFieldLine/__tests__/InputFieldLine.spec.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import InputFieldLine from "../InputFieldLine";
+describe('InputFieldLine', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      title: "InputFieldLine Test Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasPadding is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasPadding: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['medium', 'xmedium'];
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      hasPadding: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const border = ['bottom', 'all', 'none'];
+  test.each(border)('Should render border - %s', border => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      border: border
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const borderColor = ['default', 'dark', 'error', 'transparent'];
+  test.each(borderColor)('Should render borderColor - %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      borderColor: borderColor
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customProps', () => {
+    const customProps = {
+      'data-test': 'inputFieldLine-test'
+    };
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      customProps: customProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      customClass: "inputFieldLine-custom-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(InputFieldLine, {
+      dataId: "inputFieldLine-test-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});