@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

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/defaultProps.js

@@ -0,0 +1,20 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  dataId: 'textBox',
+  needReadOnlyStyle: true,
+  needAppearance: true,
+  isClickable: false,
+  needEffect: true,
+  autoComplete: true,
+  borderColor: 'default',
+  a11y: {},
+  isFocus: false,
+  isScrollPrevent: false,
+  customProps: {},
+  dataSelectorId: 'textBox'
+};

package/es/TextBox/props/propTypes.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autofocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  id: PropTypes.string,
+  inputRef: PropTypes.func,
+  isClickable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  name: PropTypes.string,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  type: PropTypes.oneOf(['text', 'password', 'number']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
+  customClass: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaAutocomplete: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaDescribedby: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaHaspopup: PropTypes.bool,
+    ariaRequired: PropTypes.bool,
+    ariaLabelledby: PropTypes.string,
+    ariaInvalid: PropTypes.bool,
+    ariaOwns: PropTypes.string,
+    ariaActivedescendant: PropTypes.string,
+    ariaReadonly: PropTypes.bool,
+    ariaMultiselectable: PropTypes.bool
+  }),
+  isFocus: PropTypes.bool,
+  isScrollPrevent: PropTypes.bool,
+  customProps: PropTypes.object,
+  dataSelectorId: PropTypes.string,
+  autoComplete: PropTypes.bool
+};