@zohodesk/components 1.2.32 → 1.2.34

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

@@ -0,0 +1,615 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Textbox component Should be render autoComplete false  1`] = `
+<DocumentFragment>
+  <input
+    autocomplete="off"
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render autoComplete true  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render autofocus false  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render autofocus true  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render customClass  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  TextBoxCustomClass"
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render htmlId  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    id="textBoxhtmlId"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render id 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    id="TextboxId"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isClickable is ture  1`] = `
+<DocumentFragment>
+  <input
+    class=" pointer container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isDisabled is false and needEffect is false 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isDisabled is true and needEffect is false 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border   borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    disabled=""
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isDisabled is true and needEffect is true 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    disabled=""
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isFocus is true  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect focus borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isReadOnly is false and needEffect is false 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isReadOnly is true and needEffect is false 1`] = `
+<DocumentFragment>
+  <input
+    class="readonly  container medium  default border   borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    readonly=""
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isReadOnly is true and needEffect is true 1`] = `
+<DocumentFragment>
+  <input
+    class="readonly  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    readonly=""
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render isScrollPrevent is true  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default inputDotted "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render maxLength in number 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    maxlength="11"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render maxLength in string 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    maxlength="Ten"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render name 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    name="TextboxName"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render needAppearance is false  1`] = `
+<DocumentFragment>
+  <input
+    class="  basic borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render needBorder is false   1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default  effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render needReadOnlyStyle is false   1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render needReadOnlyStyle is false and isReadOnly true  1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    readonly=""
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render needReadOnlyStyle is true and isReadOnly true   1`] = `
+<DocumentFragment>
+  <input
+    class="readonly  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    readonly=""
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render placeholder 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    placeholder="TextBoxPlaceHolder"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render value in number 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value="20"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render value in string 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value="Tewnty"
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should be render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render Varient - default 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render Varient - light 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  light border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render Varient - primary 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  primary border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render Varient - secondary 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  secondary border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render borderColor - default 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render borderColor - transparent 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_transparent  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render size  - medium 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render size  - small 1`] = `
+<DocumentFragment>
+  <input
+    class="  container small  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render size  - xmedium 1`] = `
+<DocumentFragment>
+  <input
+    class="  container xmedium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render size  - xsmall 1`] = `
+<DocumentFragment>
+  <input
+    class="  container xsmall  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render type  - number 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="number"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render type  - password 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="password"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component Should render type  - text 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is false 1`] = `
+<DocumentFragment>
+  <input
+    aria-activedescendant="textBoxAriaActivedescendant"
+    aria-autocomplete="textboxAriaAutocomplete"
+    aria-controls="textboxAriaControls"
+    aria-describedby="textboxAriaDescribedby"
+    aria-expanded="false"
+    aria-haspopup="false"
+    aria-invalid="false"
+    aria-label="textboxAriaLabel"
+    aria-labelledby="textboxAriaLabelledby"
+    aria-multiselectable="false"
+    aria-owns="textboxAriaOwns"
+    aria-readonly="false"
+    aria-required="false"
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    role="TextboxRole"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is true 1`] = `
+<DocumentFragment>
+  <input
+    aria-activedescendant="textBoxAriaActivedescendant"
+    aria-autocomplete="textboxAriaAutocomplete"
+    aria-controls="textboxAriaControls"
+    aria-describedby="textboxAriaDescribedby"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-invalid="true"
+    aria-label="textboxAriaLabel"
+    aria-labelledby="textboxAriaLabelledby"
+    aria-multiselectable="true"
+    aria-owns="textboxAriaOwns"
+    aria-readonly="true"
+    aria-required="true"
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    role="TextboxRole"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Textbox component rendering the Custom Props 1`] = `
+<DocumentFragment>
+  <input
+    class="  container medium  default border effect  borderColor_default  "
+    data-id="textBox"
+    data-selector-id="textBox"
+    data-test-id="textBox"
+    textbox-props="true"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;

package/es/TextBox/props/propTypes.js

@@ -3,7 +3,6 @@ export const propTypes = {
   autofocus: PropTypes.bool,
   borderColor: PropTypes.oneOf(['transparent', 'default']),
   dataId: PropTypes.string,
-  htmlId: PropTypes.string,
   id: PropTypes.string,
   inputRef: PropTypes.func,
   isClickable: PropTypes.bool,
@@ -28,7 +27,6 @@ export const propTypes = {
   type: PropTypes.oneOf(['text', 'password', 'number']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
-  htmlId: PropTypes.string,
   customClass: PropTypes.string,
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
@@ -38,7 +36,6 @@ export const propTypes = {
     ariaDescribedby: PropTypes.string,
     ariaExpanded: PropTypes.bool,
     ariaLabel: PropTypes.string,
-    autoComplete: PropTypes.bool,
     ariaHaspopup: PropTypes.bool,
     ariaRequired: PropTypes.bool,
     ariaLabelledby: PropTypes.string,