@zohodesk/components 1.0.0-test-252 → 1.1.0

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

@@ -1,334 +1,334 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextBoxIcon component should display size medium - primary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container medium  primary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size medium - secondary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container medium  secondary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size medium 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container medium  default  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size small - primary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container small  primary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size small - secondary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container small  secondary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size small 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container small  default  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Box Icon"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size xmedium - primary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container xmedium  primary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size xmedium - secondary 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container xmedium  secondary  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
-
-exports[`TextBoxIcon component should display size xmedium 1`] = `
-<div
-  className="container effect   flex rowdir"
-  data-id="containerComponent"
-  data-title=""
->
-  <div
-    className="grow basis shrinkOff"
-    data-id="boxComponent"
-  >
-    <input
-      className="    container xmedium  default  effect borderColor_default"
-      data-id="textBoxIcon"
-      maxLength="100"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder="Text Area"
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="iconContainer shrinkOff"
-    data-id="boxComponent"
-  >
-    <div
-      className="flex cover rowdir vCenter"
-      data-id="containerComponent"
-    />
-  </div>
-  <div
-    className="line borderColor_default"
-  />
-</div>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextBoxIcon component should display size medium - primary 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container medium  primary  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size medium - secondary 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container medium  secondary  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size medium 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container medium  default  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size small - primary 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container small  primary  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size small - secondary 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container small  secondary  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size small 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container small  default  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Box Icon"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size xmedium - primary 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container xmedium  primary  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size xmedium - secondary 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container xmedium  secondary  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;
+
+exports[`TextBoxIcon component should display size xmedium 1`] = `
+<div
+  className="container effect   flex rowdir"
+  data-id="containerComponent"
+  data-title=""
+>
+  <div
+    className="grow basis shrinkOff"
+    data-id="boxComponent"
+  >
+    <input
+      className="    container xmedium  default  effect borderColor_default"
+      data-id="textBoxIcon"
+      maxLength="100"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Text Area"
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="iconContainer shrinkOff"
+    data-id="boxComponent"
+  >
+    <div
+      className="flex cover rowdir vCenter"
+      data-id="containerComponent"
+    />
+  </div>
+  <div
+    className="line borderColor_default"
+  />
+</div>
+`;

package/es/TextBoxIcon/props/defaultProps.js

@@ -17,5 +17,6 @@ export const defaultProps = {
   customClass: {},
   iconOnHover: false,
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
 };

package/es/TextBoxIcon/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   htmlId: PropTypes.string,
   i18nKeys: PropTypes.shape({
     clearText: PropTypes.string