envoc-form 2.0.1-1 → 2.0.1-13

package/src/FormInputArray/__snapshots__/FormInputArray.test.js.snap

@@ -1,40 +1,52 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormInputArray has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="field-array-card card"
-    >
-      <div
-        class="card-header card-action-header d-flex align-items-baseline undefined"
-      >
-        <strong
-          class="mr-auto undefined"
-        >
-          Names
-        </strong>
-        <div
-          class="card-action-header-actions undefined"
-        >
-          <button
-            class="add-array-item btn btn-link"
-            title="Add an additional item"
-            type="button"
-          >
-            <i
-              class="fas fa-plus"
-            />
-             Add New
-          </button>
-        </div>
-      </div>
-      <div
-        class="card-body"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormInputArray has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="field-array-card card"
+    >
+      <div
+        class="card-header card-action-header d-flex align-items-baseline"
+      >
+        <strong
+          class="mr-auto"
+        >
+          Names
+        </strong>
+        <div
+          class="card-action-header-actions"
+        >
+          <button
+            class="add-array-item btn btn-link"
+            title="Add an additional item"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-plus fa-w-14 "
+              data-icon="plus"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+                fill="currentColor"
+              />
+            </svg>
+             Add New
+          </button>
+        </div>
+      </div>
+      <div
+        class="card-body"
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/FormInputArray/form-input-array.scss

@@ -1,8 +1,13 @@
-.remove-array-item {
-  width: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: auto;
-  margin-top: 0;
-}
+.field-array-card {
+  margin-bottom: 1rem;
+
+  .field-array-item {
+    &.removed {
+      display: none;
+    }
+
+    > .remove-array-item {
+      display: flex;
+    }
+  }
+}

package/src/FormInputArray/index.js

@@ -1,2 +1,2 @@
-import FormInputArray from './FormInputArray';
-export default FormInputArray;
+import FormInputArray from './FormInputArray';
+export default FormInputArray;

package/src/FormSection.js

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
-import NestedFormFieldContext from './NestedFormFieldContext';
-
-export default function FormSection({ children, name }) {
-  const parentContext = useContext(NestedFormFieldContext);
-  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
-
-  return (
-    <NestedFormFieldContext.Provider value={effectiveValue}>
-      {children}
-    </NestedFormFieldContext.Provider>
-  );
-}
+import React, { useContext } from 'react';
+import NestedFormFieldContext from './NestedFormFieldContext';
+
+export default function FormSection({ children, name }) {
+  const parentContext = useContext(NestedFormFieldContext);
+  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
+
+  return (
+    <NestedFormFieldContext.Provider value={effectiveValue}>
+      {children}
+    </NestedFormFieldContext.Provider>
+  );
+}

package/src/IconInput.js

@@ -1,31 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupText,
-  Input as BootstrapInput,
-  FormFeedback,
-} from 'reactstrap';
-import useStandardFormInput from './useStandardFormInput';
-
-export default function IconInput({ className, icon, helpText, ...props }) {
-  const [input, meta] = useStandardFormInput(props);
-  return (
-    <InputGroup className={className}>
-      <InputGroupAddon addonType="prepend">
-        <InputGroupText>
-          <i className={icon} />
-        </InputGroupText>
-      </InputGroupAddon>
-      <BootstrapInput invalid={!!meta.error} {...input} />
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormFeedback>{helpText}</FormFeedback>}
-    </InputGroup>
-  );
-}
-
-IconInput.propTypes = {
-  icon: PropTypes.string,
-  className: PropTypes.string,
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  Input as BootstrapInput,
+  FormFeedback,
+} from 'reactstrap';
+import useStandardFormInput from './useStandardFormInput';
+
+export default function IconInput({ className, icon, helpText, ...props }) {
+  const [input, meta] = useStandardFormInput(props);
+  return (
+    <InputGroup className={className}>
+      <InputGroupAddon addonType="prepend">
+        <InputGroupText>
+          <i className={icon} />
+        </InputGroupText>
+      </InputGroupAddon>
+      <BootstrapInput invalid={!!meta.error} {...input} />
+      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
+      {helpText && <FormFeedback>{helpText}</FormFeedback>}
+    </InputGroup>
+  );
+}
+
+IconInput.propTypes = {
+  icon: PropTypes.string,
+  className: PropTypes.string,
+};

package/src/InlineFormInput/InlineFormInput.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import FormInput from '../FormInput';
-
-export default function InlineFormInput(props) {
-  return <FormInput className="inline-form-input col" {...props} />;
-}
+import React from 'react';
+import FormInput from '../FormInput';
+
+export default function InlineFormInput(props) {
+  return <FormInput className="inline-form-input col" {...props} />;
+}

package/src/InlineFormInput/InlineFormInput.test.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FormTestBase } from '../__Tests__';
-import InlineFormInput from './InlineFormInput';
-
-describe('MoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <InlineFormInput name="test" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <InlineFormInput name="test" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FormTestBase } from '../__Tests__';
+import InlineFormInput from './InlineFormInput';
+
+describe('MoneyInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        <InlineFormInput name="test" />
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <InlineFormInput name="test" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/InlineFormInput/__snapshots__/InlineFormInput.test.js.snap

@@ -1,26 +1,26 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="inline-form-input col form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        class="inline-form-input col form-control"
-        id="test"
-        name="test"
-        type="text"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MoneyInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="inline-form-input col form-group"
+    >
+      <div
+        id="test-error-scroll-target"
+        style="display: none;"
+      />
+      <input
+        aria-invalid="false"
+        class="inline-form-input col form-control"
+        id="test"
+        name="test"
+        type="text"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/InlineFormInput/index.js

@@ -1,3 +1,3 @@
-import InlineFormInput from './InlineFormInput';
-
-export default InlineFormInput;
+import InlineFormInput from './InlineFormInput';
+
+export default InlineFormInput;

package/src/InlineFormInput/inline-form-input.scss

@@ -1,3 +1,3 @@
-.inline-form-input.form-group {
-  display: inline-block;
-}
+.inline-form-input.form-group {
+  display: inline-block;
+}

package/src/MoneyInput/InlineMoneyInput.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import InlineFormInput from '../InlineFormInput';
-import moneyInputProps from './moneyInputProps';
-
-export default function InlineMoneyInput(props) {
-  return <InlineFormInput {...moneyInputProps} {...props} />;
-}
+import React from 'react';
+import InlineFormInput from '../InlineFormInput';
+import moneyInputProps from './moneyInputProps';
+
+export default function InlineMoneyInput(props) {
+  return <InlineFormInput {...moneyInputProps} {...props} />;
+}

package/src/MoneyInput/MoneyInput.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import FormInput from '../FormInput';
-import moneyInputProps from './moneyInputProps';
-
-export default function MoneyInput(props) {
-  return <FormInput {...moneyInputProps} {...props} />;
-}
+import React from 'react';
+import FormInput from '../FormInput';
+import moneyInputProps from './moneyInputProps';
+
+export default function MoneyInput(props) {
+  return <FormInput {...moneyInputProps} {...props} />;
+}

package/src/MoneyInput/MoneyInputs.test.js

@@ -1,43 +1,43 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FormTestBase } from '../__Tests__';
-import MoneyInput from './MoneyInput';
-import InlineMoneyInput from './InlineMoneyInput';
-
-describe('MoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <MoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <MoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('InlineMoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <InlineMoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <InlineMoneyInput name="moneytest" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FormTestBase } from '../__Tests__';
+import MoneyInput from './MoneyInput';
+import InlineMoneyInput from './InlineMoneyInput';
+
+describe('MoneyInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        <MoneyInput name="moneytest" />
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <MoneyInput name="moneytest" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('InlineMoneyInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        <InlineMoneyInput name="moneytest" />
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <InlineMoneyInput name="moneytest" />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/MoneyInput/__snapshots__/MoneyInputs.test.js.snap

@@ -1,81 +1,81 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InlineMoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="money-input form-group"
-    >
-      <div
-        id="moneytest-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="input-group"
-      >
-        <div
-          class="input-group-prepend"
-        >
-          <span
-            class="input-group-text"
-          >
-            $
-          </span>
-        </div>
-        <input
-          aria-invalid="false"
-          class="money-input form-control"
-          id="moneytest"
-          min="0"
-          name="moneytest"
-          step="0.01"
-          type="number"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="money-input form-group"
-    >
-      <div
-        id="moneytest-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="input-group"
-      >
-        <div
-          class="input-group-prepend"
-        >
-          <span
-            class="input-group-text"
-          >
-            $
-          </span>
-        </div>
-        <input
-          aria-invalid="false"
-          class="money-input form-control"
-          id="moneytest"
-          min="0"
-          name="moneytest"
-          step="0.01"
-          type="number"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InlineMoneyInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="money-input form-group"
+    >
+      <div
+        id="moneytest-error-scroll-target"
+        style="display: none;"
+      />
+      <div
+        class="input-group"
+      >
+        <div
+          class="input-group-prepend"
+        >
+          <span
+            class="input-group-text"
+          >
+            $
+          </span>
+        </div>
+        <input
+          aria-invalid="false"
+          class="money-input form-control"
+          id="moneytest"
+          min="0"
+          name="moneytest"
+          step="0.01"
+          type="number"
+          value=""
+        />
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;
+
+exports[`MoneyInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="money-input form-group"
+    >
+      <div
+        id="moneytest-error-scroll-target"
+        style="display: none;"
+      />
+      <div
+        class="input-group"
+      >
+        <div
+          class="input-group-prepend"
+        >
+          <span
+            class="input-group-text"
+          >
+            $
+          </span>
+        </div>
+        <input
+          aria-invalid="false"
+          class="money-input form-control"
+          id="moneytest"
+          min="0"
+          name="moneytest"
+          step="0.01"
+          type="number"
+          value=""
+        />
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/MoneyInput/index.js

@@ -1,4 +1,4 @@
-import MoneyInput from './MoneyInput';
-import InlineMoneyInput from './InlineMoneyInput';
-
-export { MoneyInput, InlineMoneyInput };
+import MoneyInput from './MoneyInput';
+import InlineMoneyInput from './InlineMoneyInput';
+
+export { MoneyInput, InlineMoneyInput };

package/src/MoneyInput/money-input.scss

@@ -1,3 +1,3 @@
-input.money-input {
-  text-align: right;
-}
+input.money-input {
+  text-align: right;
+}