envoc-form 5.0.3 → 5.0.5

package/src/Select/StringSelectGroup.tsx

@@ -1,16 +1,16 @@
-import SelectGroup from './SelectGroup';
-import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
-
-export interface MultiStringSelectGroupProps
-  extends SelectGroupPropsHelper<string[]> {}
-/** A `<SelectGroup/>` dropdown with values as strings. Multiple options can be selected at a time. */
-export function MultiStringSelectGroup(props: MultiStringSelectGroupProps) {
-  return <SelectGroup multiple={true} {...props} />;
-}
-
-export interface SingleStringSelectGroupProps
-  extends SelectGroupPropsHelper<string> {}
-/** A `<SelectGroup/>` dropdown with the value as a string. Only one option can be selected at a time. */
-export function SingleStringSelectGroup(props: SingleStringSelectGroupProps) {
-  return <SelectGroup multiple={false} {...props} />;
-}
+import SelectGroup from './SelectGroup';
+import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
+
+export interface MultiStringSelectGroupProps
+  extends SelectGroupPropsHelper<string[]> {}
+/** A `<SelectGroup/>` dropdown with values as strings. Multiple options can be selected at a time. */
+export function MultiStringSelectGroup(props: MultiStringSelectGroupProps) {
+  return <SelectGroup multiple={true} {...props} />;
+}
+
+export interface SingleStringSelectGroupProps
+  extends SelectGroupPropsHelper<string> {}
+/** A `<SelectGroup/>` dropdown with the value as a string. Only one option can be selected at a time. */
+export function SingleStringSelectGroup(props: SingleStringSelectGroupProps) {
+  return <SelectGroup multiple={false} {...props} />;
+}

package/src/Select/__tests__/BooleanSelectGroup.test.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import { BooleanSelectGroup } from '../BooleanSelectGroup';
-
-describe('BooleanSelectGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="allowLogin"
-            Component={BooleanSelectGroup}
-            label="Allow Login"
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="allowLogin"
-            Component={BooleanSelectGroup}
-            label="Allow Login"
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import { BooleanSelectGroup } from '../BooleanSelectGroup';
+
+describe('BooleanSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="allowLogin"
+            Component={BooleanSelectGroup}
+            label="Allow Login"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="allowLogin"
+            Component={BooleanSelectGroup}
+            label="Allow Login"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Select/__tests__/NumberSelectGroup.test.tsx

@@ -1,87 +1,87 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import {
-  MultiNumberSelectGroup,
-  SingleNumberSelectGroup,
-} from '../NumberSelectGroup';
-
-describe('SingleNumberSelectGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteNumber"
-            Component={SingleNumberSelectGroup}
-            label="Favorite Number"
-            options={[
-              { label: 'I like one', value: 1 },
-              { label: 'Occasionally two', value: 2 },
-              { label: 'Forever three', value: 3 },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteNumber"
-            Component={SingleNumberSelectGroup}
-            label="Favorite Number"
-            options={[
-              { label: 'I like one', value: 1 },
-              { label: 'Occasionally two', value: 2 },
-              { label: 'Forever three', value: 3 },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('MultiNumberSelectGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="userRoles"
-            Component={MultiNumberSelectGroup}
-            label="Favorite Number"
-            options={[
-              { label: 'Tyrannosaurus Rex', value: 1 },
-              { label: 'Stegosaurus', value: 2 },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="userRoles"
-            Component={MultiNumberSelectGroup}
-            label="Favorite Number"
-            options={[
-              { label: 'Tyrannosaurus Rex', value: 1 },
-              { label: 'Stegosaurus', value: 2 },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import {
+  MultiNumberSelectGroup,
+  SingleNumberSelectGroup,
+} from '../NumberSelectGroup';
+
+describe('SingleNumberSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteNumber"
+            Component={SingleNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'I like one', value: 1 },
+              { label: 'Occasionally two', value: 2 },
+              { label: 'Forever three', value: 3 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteNumber"
+            Component={SingleNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'I like one', value: 1 },
+              { label: 'Occasionally two', value: 2 },
+              { label: 'Forever three', value: 3 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('MultiNumberSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="userRoles"
+            Component={MultiNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'Tyrannosaurus Rex', value: 1 },
+              { label: 'Stegosaurus', value: 2 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="userRoles"
+            Component={MultiNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'Tyrannosaurus Rex', value: 1 },
+              { label: 'Stegosaurus', value: 2 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Select/__tests__/StringSelectGroup.test.tsx

@@ -1,89 +1,89 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import {
-  MultiStringSelectGroup,
-  SingleStringSelectGroup,
-} from '../StringSelectGroup';
-
-describe('SingleStringSelectGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteColor"
-            Component={SingleStringSelectGroup}
-            label="Favorite Color"
-            options={[
-              { label: 'Blue', value: 'Blue' },
-              { label: 'Green', value: 'Green' },
-              { label: 'Red', value: 'Red' },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteColor"
-            Component={SingleStringSelectGroup}
-            label="Favorite Color"
-            options={[
-              { label: 'Blue', value: 'Blue' },
-              { label: 'Green', value: 'Green' },
-              { label: 'Red', value: 'Red' },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('MultiStringSelectGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteColors"
-            Component={MultiStringSelectGroup}
-            label="Favorite Color"
-            options={[
-              { label: 'Blue', value: 'Blue' },
-              { label: 'Green', value: 'Green' },
-              { label: 'Red', value: 'Red' },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteColors"
-            Component={MultiStringSelectGroup}
-            label="Favorite Color"
-            options={[
-              { label: 'Blue', value: 'Blue' },
-              { label: 'Green', value: 'Green' },
-              { label: 'Red', value: 'Red' },
-            ]}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import {
+  MultiStringSelectGroup,
+  SingleStringSelectGroup,
+} from '../StringSelectGroup';
+
+describe('SingleStringSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColor"
+            Component={SingleStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColor"
+            Component={SingleStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('MultiStringSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColors"
+            Component={MultiStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColors"
+            Component={MultiStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap

@@ -1,98 +1,98 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BooleanSelectGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-select-group envoc-form-group"
-    >
-      <div
-        id="allowlogin-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="allowLogin"
-      >
-        Allow Login
-      </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"
-            >
-              Select...
-            </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="allowLogin"
-                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>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BooleanSelectGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-select-group envoc-form-group"
+    >
+      <div
+        id="allowlogin-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="allowLogin"
+      >
+        Allow Login
+      </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"
+            >
+              Select...
+            </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="allowLogin"
+                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>
+  </form>
+</DocumentFragment>
+`;