@zohodesk/components 1.2.32 → 1.2.34

package/es/TextBoxIcon/props/propTypes.js

@@ -32,7 +32,7 @@ export const propTypes = { ...TextBox_propTypes,
   placeHolder: PropTypes.string,
   showClearIcon: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
-  title: PropTypes.func,
+  title: PropTypes.string,
   type: PropTypes.oneOf(['text', 'password', 'number']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   variant: PropTypes.oneOf(['primary', 'secondary', 'default']),

package/es/Textarea/__tests__/Textarea.spec.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import Textarea from '../Textarea';
+import { render } from "@testing-library/react";
+describe('Textarea component', () => {
+  const size = ['xsmall', 'small', 'xmedium', 'medium', 'large'];
+  const resize = ['horizontal', 'vertical', 'both', 'none'];
+  const variant = ['default', 'primary'];
+  const borderColor = ['transparent', 'default'];
+  test('Should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      size: size,
+      animated: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render placeholder', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextAreaPlaceHolder"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needBorder is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render text', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      text: "TextAreaText"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isDisabled: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(resize)('Should render resize  - %s', resize => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      resize: resize
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render maxLength in number', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      maxLength: "11"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render maxLength in string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      maxLength: "Ten"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render animated is true - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      size: size,
+      animated: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render animated is false - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      size: size,
+      animated: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(variant)('Should render Varient - %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('to render eleRef prop is a function', () => {
+    // Create a mock function
+    const mockEleRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(Textarea, {
+      getRef: mockEleRef
+    }));
+    expect(mockEleRef).toHaveBeenCalled();
+  });
+  test('Should be render isReadOnly is true and needEffect is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isReadOnly: true,
+      needEffect: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isReadOnly: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is false and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isReadOnly: false,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true and needEffect is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isDisabled: true,
+      needEffect: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isDisabled: true,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is false and needEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      isDisabled: false,
+      needEffect: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render autofocus true ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      autoFocus: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needAppearance is false ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      needAppearance: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needReadOnlyStyle is false ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      needReadOnlyStyle: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(borderColor)('Should render borderColor - %s', borderColor => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      borderColor: borderColor
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render htmlId ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      htmlId: "textAreahtmlId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally clearLabel', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      a11y: {
+        ariaLabel: 'TextAreaAriaLabel',
+        ariaLabelledby: 'TexareaAriaLabelledby'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render customClass ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Textarea, {
+      customClass: "textAreaCustomClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -0,0 +1,476 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textarea component Should be render autofocus true  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render customClass  1`] = `
+<DocumentFragment>
+  <textarea
+    class="textAreaCustomClass  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render htmlId  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    id="textAreahtmlId"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize      borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize      borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    disabled=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
+<DocumentFragment>
+  <textarea
+    class=" readonly container small default needBorder noresize      borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    readonly=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
+<DocumentFragment>
+  <textarea
+    class=" readonly container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    readonly=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render maxLength in number 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    maxlength="11"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render maxLength in string 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    maxlength="Ten"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render needAppearance is false  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  basic borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render needBorder is false 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default noBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render placeholder 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+    placeholder="TextAreaPlaceHolder"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render text 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  >
+    TextAreaText
+  </textarea>
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should be render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render Varient - default 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render Varient - primary 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small primary needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is false - large 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container large default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is false - medium 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container medium default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is false - small 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is false - xmedium 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container xmedium default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is false - xsmall 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container xsmall default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is true - large 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container large default needBorder noresize  largeanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is true - medium 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container medium default needBorder noresize  undefined   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is true - small 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize  smallanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is true - xmedium 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container xmedium default needBorder noresize  xmediumanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render animated is true - xsmall 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container xsmall default needBorder noresize  xsmallanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render borderColor - default 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render borderColor - transparent 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_transparent"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render resize  - both 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder resizeboth     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render resize  - horizontal 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder resizeX     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render resize  - none 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render resize  - vertical 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder resizeY     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render size  - large 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container large default needBorder noresize  largeanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render size  - medium 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container medium default needBorder noresize  undefined   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render size  - small 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container small default needBorder noresize  smallanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render size  - xmedium 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container xmedium default needBorder noresize  xmediumanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component Should render size  - xsmall 1`] = `
+<DocumentFragment>
+  <textarea
+    class="  container xsmall default needBorder noresize  xsmallanimated   effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textarea component rendering ally clearLabel 1`] = `
+<DocumentFragment>
+  <textarea
+    aria-label="TextAreaAriaLabel"
+    aria-labelledby="TexareaAriaLabelledby"
+    class="  container small default needBorder noresize     effect borderColor_default"
+    data-id="TextareaComp"
+    data-selector-id="textarea"
+    data-test-id="TextareaComp"
+  />
+</DocumentFragment>
+`;