envoc-form 2.0.1-6 → 3.0.0-2

package/src/AddressInput/AddressInput.js

@@ -1,73 +1,73 @@
-import React from 'react';
-import { Col, Row } from 'reactstrap';
-import PropTypes from 'prop-types';
-import FormInput from '../FormInput';
-import FormSection from '../FormSection';
-import validators from '../validators';
-import * as normalizers from '../normalizers';
-import UsStates from './UsStates';
-
-export default class AddressInput extends React.Component {
-  render() {
-    const { name, ...props } = this.props;
-    return (
-      <FormSection name={name} {...props}>
-        <FormInput
-          name="address1"
-          placeholder="Address, Line 1"
-          label="Address 1"
-          autoComplete="address-line1"
-          validate={validators.required}
-        />
-        <FormInput
-          name="address2"
-          placeholder="Address, Line 2"
-          label="Address 2"
-          autoComplete="address-line2"
-        />
-        <FormInput
-          name="city"
-          placeholder="City"
-          label="City"
-          autoComplete="address-level2"
-          validate={validators.required}
-        />
-        <Row>
-          <Col xs={8}>
-            <FormInput
-              name="state"
-              placeholder="State"
-              label="State"
-              type="select"
-              options={UsStates}
-              autoComplete="address-level1"
-              validate={validators.required}
-            />
-          </Col>
-          <Col xs={4}>
-            <FormInput
-              name="zipCode"
-              placeholder="Zip"
-              label="Zip"
-              autoComplete="postal-code"
-              normalize={normalizers.zipCode}
-              validate={[validators.required, validators.zipCode]}
-            />
-          </Col>
-        </Row>
-      </FormSection>
-    );
-  }
-}
-AddressInput.propTypes = {
-  /**
-   * The key that the resulting values should be nested under within the form values.
-   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
-   * this allows us to have two address inputs inside the same form (shipping and billing address)
-   */
-  name: PropTypes.string,
-};
-
-AddressInput.defaultProps = {
-  name: 'address',
-};
+import React from 'react';
+import { Col, Row } from 'reactstrap';
+import PropTypes from 'prop-types';
+import FormInput from '../FormInput';
+import FormSection from '../FormSection';
+import validators from '../validators';
+import * as normalizers from '../normalizers';
+import UsStates from './UsStates';
+
+export default class AddressInput extends React.Component {
+  render() {
+    const { name, ...props } = this.props;
+    return (
+      <FormSection name={name} {...props}>
+        <FormInput
+          name="address1"
+          placeholder="Address, Line 1"
+          label="Address 1"
+          autoComplete="address-line1"
+          validate={validators.required}
+        />
+        <FormInput
+          name="address2"
+          placeholder="Address, Line 2"
+          label="Address 2"
+          autoComplete="address-line2"
+        />
+        <FormInput
+          name="city"
+          placeholder="City"
+          label="City"
+          autoComplete="address-level2"
+          validate={validators.required}
+        />
+        <Row>
+          <Col xs={8}>
+            <FormInput
+              name="state"
+              placeholder="State"
+              label="State"
+              type="select"
+              options={UsStates}
+              autoComplete="address-level1"
+              validate={validators.required}
+            />
+          </Col>
+          <Col xs={4}>
+            <FormInput
+              name="zipCode"
+              placeholder="Zip"
+              label="Zip"
+              autoComplete="postal-code"
+              normalize={normalizers.zipCode}
+              validate={[validators.required, validators.zipCode]}
+            />
+          </Col>
+        </Row>
+      </FormSection>
+    );
+  }
+}
+AddressInput.propTypes = {
+  /**
+   * The key that the resulting values should be nested under within the form values.
+   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
+   * this allows us to have two address inputs inside the same form (shipping and billing address)
+   */
+  name: PropTypes.string,
+};
+
+AddressInput.defaultProps = {
+  name: 'address',
+};

package/src/AddressInput/UsStates.js

@@ -1,53 +1,53 @@
-const states = [
-  { label: 'Alabama', value: 'AL' },
-  { label: 'Alaska', value: 'AK' },
-  { label: 'Arizona', value: 'AZ' },
-  { label: 'Arkansas', value: 'AR' },
-  { label: 'California', value: 'CA' },
-  { label: 'Colorado', value: 'CO' },
-  { label: 'Connecticut', value: 'CT' },
-  { label: 'Delaware', value: 'DE' },
-  { label: 'Florida', value: 'FL' },
-  { label: 'Georgia', value: 'GA' },
-  { label: 'Hawaii', value: 'HI' },
-  { label: 'Idaho', value: 'ID' },
-  { label: 'Illinois', value: 'IL' },
-  { label: 'Indiana', value: 'IN' },
-  { label: 'Iowa', value: 'IA' },
-  { label: 'Kansas', value: 'KS' },
-  { label: 'Kentucky', value: 'KY' },
-  { label: 'Louisiana', value: 'LA' },
-  { label: 'Maine', value: 'ME' },
-  { label: 'Maryland', value: 'MD' },
-  { label: 'Massachusetts', value: 'MA' },
-  { label: 'Michigan', value: 'MI' },
-  { label: 'Minnesota', value: 'MN' },
-  { label: 'Mississippi', value: 'MS' },
-  { label: 'Missouri', value: 'MO' },
-  { label: 'Montana', value: 'MT' },
-  { label: 'Nebraska', value: 'NE' },
-  { label: 'Nevada', value: 'NV' },
-  { label: 'New Hampshire', value: 'NH' },
-  { label: 'New Jersey', value: 'NJ' },
-  { label: 'New Mexico', value: 'NM' },
-  { label: 'New York', value: 'NY' },
-  { label: 'North Carolina', value: 'NC' },
-  { label: 'North Dakota', value: 'ND' },
-  { label: 'Ohio', value: 'OH' },
-  { label: 'Oklahoma', value: 'OK' },
-  { label: 'Oregon', value: 'OR' },
-  { label: 'Pennsylvania', value: 'PA' },
-  { label: 'Rhode Island', value: 'RI' },
-  { label: 'South Carolina', value: 'SC' },
-  { label: 'South Dakota', value: 'SD' },
-  { label: 'Tennessee', value: 'TN' },
-  { label: 'Texas', value: 'TX' },
-  { label: 'Utah', value: 'UT' },
-  { label: 'Vermont', value: 'VT' },
-  { label: 'Virginia', value: 'VA' },
-  { label: 'Washington', value: 'WA' },
-  { label: 'West Virginia', value: 'WV' },
-  { label: 'Wisconsin', value: 'WI' },
-  { label: 'Wyoming', value: 'WY' },
-];
-export default states;
+const states = [
+  { label: 'Alabama', value: 'AL' },
+  { label: 'Alaska', value: 'AK' },
+  { label: 'Arizona', value: 'AZ' },
+  { label: 'Arkansas', value: 'AR' },
+  { label: 'California', value: 'CA' },
+  { label: 'Colorado', value: 'CO' },
+  { label: 'Connecticut', value: 'CT' },
+  { label: 'Delaware', value: 'DE' },
+  { label: 'Florida', value: 'FL' },
+  { label: 'Georgia', value: 'GA' },
+  { label: 'Hawaii', value: 'HI' },
+  { label: 'Idaho', value: 'ID' },
+  { label: 'Illinois', value: 'IL' },
+  { label: 'Indiana', value: 'IN' },
+  { label: 'Iowa', value: 'IA' },
+  { label: 'Kansas', value: 'KS' },
+  { label: 'Kentucky', value: 'KY' },
+  { label: 'Louisiana', value: 'LA' },
+  { label: 'Maine', value: 'ME' },
+  { label: 'Maryland', value: 'MD' },
+  { label: 'Massachusetts', value: 'MA' },
+  { label: 'Michigan', value: 'MI' },
+  { label: 'Minnesota', value: 'MN' },
+  { label: 'Mississippi', value: 'MS' },
+  { label: 'Missouri', value: 'MO' },
+  { label: 'Montana', value: 'MT' },
+  { label: 'Nebraska', value: 'NE' },
+  { label: 'Nevada', value: 'NV' },
+  { label: 'New Hampshire', value: 'NH' },
+  { label: 'New Jersey', value: 'NJ' },
+  { label: 'New Mexico', value: 'NM' },
+  { label: 'New York', value: 'NY' },
+  { label: 'North Carolina', value: 'NC' },
+  { label: 'North Dakota', value: 'ND' },
+  { label: 'Ohio', value: 'OH' },
+  { label: 'Oklahoma', value: 'OK' },
+  { label: 'Oregon', value: 'OR' },
+  { label: 'Pennsylvania', value: 'PA' },
+  { label: 'Rhode Island', value: 'RI' },
+  { label: 'South Carolina', value: 'SC' },
+  { label: 'South Dakota', value: 'SD' },
+  { label: 'Tennessee', value: 'TN' },
+  { label: 'Texas', value: 'TX' },
+  { label: 'Utah', value: 'UT' },
+  { label: 'Vermont', value: 'VT' },
+  { label: 'Virginia', value: 'VA' },
+  { label: 'Washington', value: 'WA' },
+  { label: 'West Virginia', value: 'WV' },
+  { label: 'Wisconsin', value: 'WI' },
+  { label: 'Wyoming', value: 'WY' },
+];
+export default states;

package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap

@@ -1,207 +1,207 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddressInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <label
-        class=""
-        for="address.address1"
-      >
-        Address 1
-      </label>
-      <div
-        id="address.address1-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        autocomplete="address-line1"
-        class="form-control"
-        id="address.address1"
-        label="Address 1"
-        name="address.address1"
-        placeholder="Address, Line 1"
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      class="form-group"
-    >
-      <label
-        class=""
-        for="address.address2"
-      >
-        Address 2
-      </label>
-      <div
-        id="address.address2-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        autocomplete="address-line2"
-        class="form-control"
-        id="address.address2"
-        label="Address 2"
-        name="address.address2"
-        placeholder="Address, Line 2"
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      class="form-group"
-    >
-      <label
-        class=""
-        for="address.city"
-      >
-        City
-      </label>
-      <div
-        id="address.city-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        autocomplete="address-level2"
-        class="form-control"
-        id="address.city"
-        label="City"
-        name="address.city"
-        placeholder="City"
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      class="row"
-    >
-      <div
-        class="col-8"
-      >
-        <div
-          class="form-group"
-        >
-          <label
-            class=""
-            for="address.state"
-          >
-            State
-          </label>
-          <div
-            id="address.state-error-scroll-target"
-            style="display: none;"
-          />
-          <div
-            class="react-select-input css-2b097c-container"
-            id="address.state"
-          >
-            <div
-              class=" css-150ye8w-control"
-            >
-              <div
-                class=" css-lbak6p-Component"
-              >
-                <div
-                  class=" css-1osw1h9-placeholder"
-                >
-                  State
-                </div>
-                <div
-                  class="css-lp83hw-Component"
-                >
-                  <div
-                    class=""
-                    style="display: inline-block;"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      autocapitalize="none"
-                      autocomplete="off"
-                      autocorrect="off"
-                      id="react-select-3-input"
-                      spellcheck="false"
-                      style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                      tabindex="0"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                class=" css-ny0e4k-Component"
-              >
-                <span
-                  class=" css-1sl80az-indicatorSeparator"
-                />
-                <div
-                  aria-hidden="true"
-                  class=" css-augegj-indicatorContainer"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="css-7ezgaa-Component"
-                    focusable="false"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    width="20"
-                  >
-                    <path
-                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <input
-              name="address.state"
-              type="hidden"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="col-4"
-      >
-        <div
-          class="form-group"
-        >
-          <label
-            class=""
-            for="address.zipCode"
-          >
-            Zip
-          </label>
-          <div
-            id="address.zipcode-error-scroll-target"
-            style="display: none;"
-          />
-          <input
-            aria-invalid="false"
-            autocomplete="postal-code"
-            class="form-control"
-            id="address.zipCode"
-            label="Zip"
-            name="address.zipCode"
-            placeholder="Zip"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddressInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="form-group"
+    >
+      <label
+        class=""
+        for="address.address1"
+      >
+        Address 1
+      </label>
+      <div
+        id="address.address1-error-scroll-target"
+        style="display: none;"
+      />
+      <input
+        aria-invalid="false"
+        autocomplete="address-line1"
+        class="form-control"
+        id="address.address1"
+        label="Address 1"
+        name="address.address1"
+        placeholder="Address, Line 1"
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      class="form-group"
+    >
+      <label
+        class=""
+        for="address.address2"
+      >
+        Address 2
+      </label>
+      <div
+        id="address.address2-error-scroll-target"
+        style="display: none;"
+      />
+      <input
+        aria-invalid="false"
+        autocomplete="address-line2"
+        class="form-control"
+        id="address.address2"
+        label="Address 2"
+        name="address.address2"
+        placeholder="Address, Line 2"
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      class="form-group"
+    >
+      <label
+        class=""
+        for="address.city"
+      >
+        City
+      </label>
+      <div
+        id="address.city-error-scroll-target"
+        style="display: none;"
+      />
+      <input
+        aria-invalid="false"
+        autocomplete="address-level2"
+        class="form-control"
+        id="address.city"
+        label="City"
+        name="address.city"
+        placeholder="City"
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      class="row"
+    >
+      <div
+        class="col-8"
+      >
+        <div
+          class="form-group"
+        >
+          <label
+            class=""
+            for="address.state"
+          >
+            State
+          </label>
+          <div
+            id="address.state-error-scroll-target"
+            style="display: none;"
+          />
+          <div
+            class="react-select-input css-2b097c-container"
+            id="address.state"
+          >
+            <div
+              class=" css-150ye8w-control"
+            >
+              <div
+                class=" css-lbak6p-Component"
+              >
+                <div
+                  class=" css-1osw1h9-placeholder"
+                >
+                  State
+                </div>
+                <div
+                  class="css-lp83hw-Component"
+                >
+                  <div
+                    class=""
+                    style="display: inline-block;"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
+                      id="react-select-3-input"
+                      spellcheck="false"
+                      style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class=" css-ny0e4k-Component"
+              >
+                <span
+                  class=" css-1sl80az-indicatorSeparator"
+                />
+                <div
+                  aria-hidden="true"
+                  class=" css-augegj-indicatorContainer"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="css-7ezgaa-Component"
+                    focusable="false"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    width="20"
+                  >
+                    <path
+                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <input
+              name="address.state"
+              type="hidden"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="col-4"
+      >
+        <div
+          class="form-group"
+        >
+          <label
+            class=""
+            for="address.zipCode"
+          >
+            Zip
+          </label>
+          <div
+            id="address.zipcode-error-scroll-target"
+            style="display: none;"
+          />
+          <input
+            aria-invalid="false"
+            autocomplete="postal-code"
+            class="form-control"
+            id="address.zipCode"
+            label="Zip"
+            name="address.zipCode"
+            placeholder="Zip"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;