envoc-form 5.0.2 → 5.0.5

package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap

@@ -1,182 +1,182 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddressInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.address1-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.address1"
-      >
-        Address 1
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.address1"
-        name="normalAddressInput.address1"
-        placeholder="Address, Line 1"
-        value=""
-      />
-    </div>
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="normaladdressinput.address2-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.address2"
-      >
-        Address 2
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.address2"
-        name="normalAddressInput.address2"
-        placeholder="Address, Line 2"
-        value=""
-      />
-    </div>
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.city-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.city"
-      >
-        City
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.city"
-        name="normalAddressInput.city"
-        placeholder="City"
-        value=""
-      />
-    </div>
-    <div
-      class="envoc-form-select-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.state-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.state"
-      >
-        State
-      </label>
-      <div
-        class="envoc-form-select-group css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-3-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control css-13cymwt-control"
-        >
-          <div
-            class="react-select__value-container css-16674sh-Component"
-          >
-            <div
-              class="react-select__placeholder css-1jqq78o-placeholder"
-              id="react-select-3-placeholder"
-            >
-              State
-            </div>
-            <div
-              class="react-select__input-container css-d9r47t-Component"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-3-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="react-select__input"
-                id="normalAddressInput.state"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="react-select__indicators css-ny0e4k-Component"
-          >
-            <span
-              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                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>
-      </div>
-    </div>
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.zipcode-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.zipCode"
-      >
-        Zip
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.zipCode"
-        name="normalAddressInput.zipCode"
-        placeholder="Zip"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddressInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
+    >
+      <div
+        id="normaladdressinput.address1-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.address1"
+      >
+        Address 1
+      </label>
+      <input
+        aria-invalid="false"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.address1"
+        name="normalAddressInput.address1"
+        placeholder="Address, Line 1"
+        value=""
+      />
+    </div>
+    <div
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
+    >
+      <div
+        id="normaladdressinput.address2-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.address2"
+      >
+        Address 2
+      </label>
+      <input
+        aria-invalid="false"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.address2"
+        name="normalAddressInput.address2"
+        placeholder="Address, Line 2"
+        value=""
+      />
+    </div>
+    <div
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
+    >
+      <div
+        id="normaladdressinput.city-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.city"
+      >
+        City
+      </label>
+      <input
+        aria-invalid="false"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.city"
+        name="normalAddressInput.city"
+        placeholder="City"
+        value=""
+      />
+    </div>
+    <div
+      class="envoc-form-select-group envoc-form-group envoc-form-required"
+    >
+      <div
+        id="normaladdressinput.state-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.state"
+      >
+        State
+      </label>
+      <div
+        class="envoc-form-select-group css-b62m3t-container"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-3-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class="react-select__control css-13cymwt-control"
+        >
+          <div
+            class="react-select__value-container css-16674sh-Component"
+          >
+            <div
+              class="react-select__placeholder css-1jqq78o-placeholder"
+              id="react-select-3-placeholder"
+            >
+              State
+            </div>
+            <div
+              class="react-select__input-container css-d9r47t-Component"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-describedby="react-select-3-placeholder"
+                aria-expanded="false"
+                aria-haspopup="true"
+                autocapitalize="none"
+                autocomplete="off"
+                autocorrect="off"
+                class="react-select__input"
+                id="normalAddressInput.state"
+                role="combobox"
+                spellcheck="false"
+                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="react-select__indicators css-ny0e4k-Component"
+          >
+            <span
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-tj5bde-Svg"
+                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>
+      </div>
+    </div>
+    <div
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
+    >
+      <div
+        id="normaladdressinput.zipcode-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.zipCode"
+      >
+        Zip
+      </label>
+      <input
+        aria-invalid="false"
+        class="envoc-form-string-group envoc-form-input-group"
+        id="normalAddressInput.zipCode"
+        name="normalAddressInput.zipCode"
+        placeholder="Zip"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { useAxiosRequestProps } from 'envoc-request';
-import ConfirmBaseForm from './ConfirmBaseForm';
-
-describe('ConfirmBaseForm', () => {
-  it('Renders without error', () => {
-    render(<ConfirmBaseForm request={confirmBaseFormRequest} />);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <ConfirmBaseForm request={confirmBaseFormRequest} />
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
-
-const confirmBaseFormRequest = {
-  method: 'get',
-  url: `/boop`,
-  onComplete: () => {},
-  onError: () => {},
-} as useAxiosRequestProps;
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useAxiosRequestProps } from 'envoc-request';
+import ConfirmBaseForm from './ConfirmBaseForm';
+
+describe('ConfirmBaseForm', () => {
+  it('Renders without error', () => {
+    render(<ConfirmBaseForm request={confirmBaseFormRequest} />);
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <ConfirmBaseForm request={confirmBaseFormRequest} />
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+const confirmBaseFormRequest = {
+  method: 'get',
+  url: `/boop`,
+  onComplete: () => {},
+  onError: () => {},
+} as useAxiosRequestProps;

package/src/ConfirmBaseForm/ConfirmBaseForm.tsx

@@ -1,74 +1,74 @@
-import React, { MouseEventHandler } from 'react';
-import classNames from 'classnames';
-import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
-import { FormDefaults } from '../FormDefaults';
-
-// TODO: change the style prop type to Tailwind type (does this exist before Tailwind 3.1 ???), or
-// should this just be type 'string'
-export interface ConfirmBaseFormProps {
-  /** Function to run when cancel button is clicked. */
-  handleCancel?: MouseEventHandler<HTMLButtonElement>;
-  /** Axios request upon confirmation */
-  request: useAxiosRequestProps;
-  style?: React.CSSProperties;
-  /** `<h3/>` title text on top of the form. */
-  title?: string;
-  /** Custom confirm button text.
-   * @defaultValue `Confirm`
-   */
-  confirmButtonText?: string;
-  /** CSS class for the buttons. */
-  confirmButtonClass?: string;
-  /** Any components to be rendered in between the title and the buttons. */
-  children?: React.ReactNode;
-}
-
-// TODO: ask about how we should use 'children'
-/**
- * Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
- * Commonly used for confirming delete and archive.
- *
- * See `<ConfirmDeleteForm/>` if the confirmation is specifically for deletion.
- */
-export default function ConfirmBaseForm({
-  handleCancel,
-  request,
-  style,
-  title,
-  confirmButtonText,
-  confirmButtonClass,
-  children,
-  ...props
-}: ConfirmBaseFormProps) {
-  const webRequest = useAxiosRequest(
-    Object.assign({}, request, { autoExecute: false })
-  );
-  const onCancel = handleCancel ?? goBack;
-
-  return (
-    <div style={{ textAlign: 'center', ...style }} {...props}>
-      <h3>{title}</h3>
-      {children}
-      <button
-        className={classNames(
-          confirmButtonClass ??
-            FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'
-        )}
-        type="button"
-        onClick={webRequest.submitRequest}>
-        {confirmButtonText ?? 'Confirm'}
-      </button>
-      <button
-        className={classNames(
-          FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'
-        )}
-        type="button"
-        onClick={onCancel}>
-        Cancel
-      </button>
-    </div>
-  );
-  function goBack() {
-    window.history.back();
-  }
-}
+import React, { MouseEventHandler } from 'react';
+import classNames from 'classnames';
+import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
+import { FormDefaults } from '../FormDefaults';
+
+// TODO: change the style prop type to Tailwind type (does this exist before Tailwind 3.1 ???), or
+// should this just be type 'string'
+export interface ConfirmBaseFormProps {
+  /** Function to run when cancel button is clicked. */
+  handleCancel?: MouseEventHandler<HTMLButtonElement>;
+  /** Axios request upon confirmation */
+  request: useAxiosRequestProps;
+  style?: React.CSSProperties;
+  /** `<h3/>` title text on top of the form. */
+  title?: string;
+  /** Custom confirm button text.
+   * @defaultValue `Confirm`
+   */
+  confirmButtonText?: string;
+  /** CSS class for the buttons. */
+  confirmButtonClass?: string;
+  /** Any components to be rendered in between the title and the buttons. */
+  children?: React.ReactNode;
+}
+
+// TODO: ask about how we should use 'children'
+/**
+ * Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
+ * Commonly used for confirming delete and archive.
+ *
+ * See `<ConfirmDeleteForm/>` if the confirmation is specifically for deletion.
+ */
+export default function ConfirmBaseForm({
+  handleCancel,
+  request,
+  style,
+  title,
+  confirmButtonText,
+  confirmButtonClass,
+  children,
+  ...props
+}: ConfirmBaseFormProps) {
+  const webRequest = useAxiosRequest(
+    Object.assign({}, request, { autoExecute: false })
+  );
+  const onCancel = handleCancel ?? goBack;
+
+  return (
+    <div style={{ textAlign: 'center', ...style }} {...props}>
+      <h3>{title}</h3>
+      {children}
+      <button
+        className={classNames(
+          confirmButtonClass ??
+            FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'
+        )}
+        type="button"
+        onClick={webRequest.submitRequest}>
+        {confirmButtonText ?? 'Confirm'}
+      </button>
+      <button
+        className={classNames(
+          FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'
+        )}
+        type="button"
+        onClick={onCancel}>
+        Cancel
+      </button>
+    </div>
+  );
+  function goBack() {
+    window.history.back();
+  }
+}

package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap

@@ -1,23 +1,23 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmBaseForm has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    style="text-align: center;"
-  >
-    <h3 />
-    <button
-      class="envoc-form-confirm-base-form-confirm-button"
-      type="button"
-    >
-      Confirm
-    </button>
-    <button
-      class="envoc-form-confirm-base-form-cancel-button"
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmBaseForm has matching snapshot 1`] = `
+<DocumentFragment>
+  <div
+    style="text-align: center;"
+  >
+    <h3 />
+    <button
+      class="envoc-form-confirm-base-form-confirm-button"
+      type="button"
+    >
+      Confirm
+    </button>
+    <button
+      class="envoc-form-confirm-base-form-cancel-button"
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { HashRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
-
-import ConfirmDeleteForm from './ConfirmDeleteForm';
-
-describe('ConfirmDeleteForm', () => {
-  it('Renders without error', () => {
-    render(
-      <HashRouter>
-        <ConfirmDeleteForm form="foo" />
-      </HashRouter>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <HashRouter>
-        <ConfirmDeleteForm form="foo" />
-      </HashRouter>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { HashRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+import ConfirmDeleteForm from './ConfirmDeleteForm';
+
+describe('ConfirmDeleteForm', () => {
+  it('Renders without error', () => {
+    render(
+      <HashRouter>
+        <ConfirmDeleteForm form="foo" />
+      </HashRouter>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <HashRouter>
+        <ConfirmDeleteForm form="foo" />
+      </HashRouter>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});