envoc-form 5.0.3 → 5.0.6

package/src/Input/StringInputGroup.tsx

@@ -1,53 +1,50 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroup, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-export interface StringInputGroupProps
-  extends Omit<
-    InputGroupProps<string | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  type?:
-    | 'color'
-    | 'email'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'url'
-    | 'password'
-    | 'textarea';
-}
-
-function StringInputGroup(
-  { className, ...rest }: StringInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const { input } = rest;
-
-  return (
-    <InputGroup
-      ref={ref}
-      {...rest}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'string-group'
-      )}
-      value={input.value ?? ''}
-      onChange={(e) => {
-        if (!e.target.value) {
-          input.onChange(undefined);
-        } else {
-          input.onChange(e.target.value);
-        }
-      }}
-    />
-  );
-}
-
-/** Standard string input group. */
-const StringInputGroupWithRef = React.forwardRef(
-  StringInputGroup
-) as React.ComponentType<StringInputGroupProps>;
-
-export default StringInputGroupWithRef;
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+
+export interface StringInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {
+  type?:
+    | 'color'
+    | 'email'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'url'
+    | 'password'
+    | 'textarea';
+}
+
+function StringInputGroup(
+  { className, ...rest }: StringInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      {...rest}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'string-group')}
+      value={input.value ?? ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(e.target.value);
+        }
+      }}
+    />
+  );
+}
+
+/** Standard string input group. */
+const StringInputGroupWithRef = React.forwardRef(
+  StringInputGroup
+) as React.ComponentType<StringInputGroupProps>;
+
+export default StringInputGroupWithRef;

package/src/Input/__Tests__/CheckboxInputGroup.test.tsx

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import { CheckboxInputGroup } from 'index';
+
+describe('CheckboxInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field name="isMusicEnjoyer" Component={CheckboxInputGroup} />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field name="isMusicEnjoyer" Component={CheckboxInputGroup} />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/IconInputGroup.test.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import IconInputGroup from '../IconInputGroup';
-
-describe('IconInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="nameWithIcon"
-            Component={IconInputGroup}
-            icon={<span>Pretend this is an icon</span>}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="nameWithIcon"
-            Component={IconInputGroup}
-            icon={<span>Pretend this is an icon</span>}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import IconInputGroup from '../IconInputGroup';
+
+describe('IconInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="nameWithIcon"
+            Component={IconInputGroup}
+            icon={<span>Pretend this is an icon</span>}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="nameWithIcon"
+            Component={IconInputGroup}
+            icon={<span>Pretend this is an icon</span>}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/MoneyInputGroup.test.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import MoneyInputGroup from '../MoneyInputGroup';
-
-describe('MoneyInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="yearlySalaryUSD"
-            Component={MoneyInputGroup}
-            label="Salary"
-            className="something-here"
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="yearlySalaryUSD"
-            Component={MoneyInputGroup}
-            label="Salary"
-            className="something-here"
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import MoneyInputGroup from '../MoneyInputGroup';
+
+describe('MoneyInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="yearlySalaryUSD"
+            Component={MoneyInputGroup}
+            label="Salary"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="yearlySalaryUSD"
+            Component={MoneyInputGroup}
+            label="Salary"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/NumberInputGroup.test.tsx

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

package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import PhoneNumberInputGroup from '../PhoneNumberInputGroup';
-
-describe('PhoneNumberInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="phoneNumber"
-            Component={PhoneNumberInputGroup}
-            label="Phone Number"
-            className="something-here"
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="phoneNumber"
-            Component={PhoneNumberInputGroup}
-            label="Phone Number"
-            className="something-here"
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import PhoneNumberInputGroup from '../PhoneNumberInputGroup';
+
+describe('PhoneNumberInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/StringInputGroup.test.tsx

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

package/src/Input/__Tests__/__snapshots__/CheckboxInputGroup.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-checkbox-group label-on-right envoc-form-group"
+    >
+      <div
+        id="ismusicenjoyer-error-scroll-target"
+        style="display: none;"
+      />
+      <div
+        class="envoc-form-checkbox-group-input"
+      >
+        <input
+          aria-invalid="false"
+          class="envoc-form-checkbox-group"
+          id="isMusicEnjoyer"
+          name="isMusicEnjoyer"
+          type="checkbox"
+        />
+        <label
+          for="isMusicEnjoyer"
+        />
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap

@@ -1,32 +1,32 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-icon-input-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="namewithicon-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="nameWithIcon"
-      />
-      <span>
-        Pretend this is an icon
-      </span>
-      <input
-        aria-invalid="false"
-        class="envoc-form-icon-input-group envoc-form-input-group"
-        id="nameWithIcon"
-        name="nameWithIcon"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-icon-input-group envoc-form-input-group envoc-form-group"
+    >
+      <div
+        id="namewithicon-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="nameWithIcon"
+      />
+      <span>
+        Pretend this is an icon
+      </span>
+      <input
+        aria-invalid="false"
+        class="envoc-form-icon-input-group envoc-form-input-group"
+        id="nameWithIcon"
+        name="nameWithIcon"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap

@@ -1,34 +1,34 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoneyInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="something-here envoc-form-money-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="yearlysalaryusd-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="yearlySalaryUSD"
-      >
-        Salary
-      </label>
-      <input
-        aria-invalid="false"
-        class="something-here envoc-form-money-group envoc-form-input-group"
-        id="yearlySalaryUSD"
-        min="0"
-        name="yearlySalaryUSD"
-        step="0.01"
-        type="number"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MoneyInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="something-here envoc-form-money-group envoc-form-input-group envoc-form-group"
+    >
+      <div
+        id="yearlysalaryusd-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="yearlySalaryUSD"
+      >
+        Salary
+      </label>
+      <input
+        aria-invalid="false"
+        class="something-here envoc-form-money-group envoc-form-input-group"
+        id="yearlySalaryUSD"
+        min="0"
+        name="yearlySalaryUSD"
+        step="0.01"
+        type="number"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;