@khanacademy/wonder-blocks-form 4.9.2 → 4.9.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.9.3
+
+### Patch Changes
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+-   Updated dependencies [02a1b298]
+    -   @khanacademy/wonder-blocks-clickable@4.2.8
+    -   @khanacademy/wonder-blocks-core@7.0.1
+    -   @khanacademy/wonder-blocks-icon@4.1.5
+    -   @khanacademy/wonder-blocks-layout@2.2.1
+    -   @khanacademy/wonder-blocks-tokens@2.0.1
+    -   @khanacademy/wonder-blocks-typography@2.1.16
+
 ## 4.9.2
 
 ### Patch Changes

package/dist/components/checkbox-core.d.ts

@@ -3,8 +3,8 @@ import type { Checked } from "../util/types";
 /**
  * The internal stateless ☑️ Checkbox
  */
-declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     checked: Checked;
     disabled: boolean;

package/dist/components/checkbox.d.ts

@@ -22,8 +22,8 @@ import type { Checked } from "../util/types";
  * <Checkbox checked={checked} onChange={setChecked} />
  * ```
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * Whether this component is checked or indeterminate

package/dist/components/choice-internal.d.ts

@@ -7,8 +7,8 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * and RadioGroup. This design allows for more explicit prop typing. For
  * example, we can make onChange a required prop on Checkbox but not on Choice
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+ */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /** Whether this choice is checked. */
     checked: boolean | null | undefined;

package/dist/components/choice.d.ts

@@ -66,8 +66,8 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * </RadioGroup>
  * ```
  */
-declare const Choice: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const Choice: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /** User-defined. Label for the field. */
     label: React.ReactNode;

package/dist/components/radio-core.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import type { Checked } from "../util/types";
 /**
  * The internal stateless 🔘 Radio button
- */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+ */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     checked: Checked;
     disabled: boolean;

package/dist/components/radio.d.ts

@@ -6,8 +6,8 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  *
  * This component should not really be used by itself because radio buttons are
  * often grouped together. See RadioGroup.
- */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+ */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * Whether this component is checked

package/dist/components/text-area.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
-declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
-    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * The text area value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.9.2",
+  "version": "4.9.3",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.7",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-icon": "^4.1.4",
-    "@khanacademy/wonder-blocks-layout": "^2.2.0",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.8",
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-icon": "^4.1.5",
+    "@khanacademy/wonder-blocks-layout": "^2.2.1",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap

@@ -1,247 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CheckboxCore type:default checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:default checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:default checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="false"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="false"
-    checked=""
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="true"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #1865f2;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    checked=""
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-  <span
-    style="position: absolute; top: 4px; left: 4px; height: 8px; width: 8px; border-radius: 50%; background-color: rgba(33, 36, 44, 0.32);"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;

package/src/__tests__/custom-snapshot.test.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import CheckboxCore from "../components/checkbox-core";
-import RadioCore from "../components/radio-core";
-
-const states = ["default", "error", "disabled"];
-const checkedStates = [false, true, null];
-
-describe("CheckboxCore", () => {
-    states.forEach((state: any) => {
-        checkedStates.forEach((checked: any) => {
-            test(`type:${state} checked:${String(checked)}`, () => {
-                const disabled = state === "disabled";
-                const {container} = render(
-                    <CheckboxCore
-                        checked={checked}
-                        disabled={disabled}
-                        error={state === "error"}
-                        onClick={() => {}}
-                    />,
-                );
-
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-});
-
-describe("RadioCore", () => {
-    states.forEach((state: any) => {
-        checkedStates.forEach((checked: any) => {
-            test(`type:${state} checked:${String(checked)}`, () => {
-                const disabled = state === "disabled";
-                const {container} = render(
-                    <RadioCore
-                        checked={checked}
-                        disabled={disabled}
-                        error={state === "error"}
-                        onClick={() => {}}
-                    />,
-                );
-
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-});

package/src/components/__tests__/checkbox-group.test.tsx

@@ -1,162 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import CheckboxGroup from "../checkbox-group";
-import Choice from "../choice";
-
-describe("CheckboxGroup", () => {
-    describe("behavior", () => {
-        const TestComponent = ({errorMessage}: {errorMessage?: string}) => {
-            const [selectedValues, setSelectedValue] = React.useState([
-                "a",
-                "b",
-            ]);
-            const handleChange = (selectedValues: any) => {
-                setSelectedValue(selectedValues);
-            };
-            return (
-                <CheckboxGroup
-                    label="Test"
-                    description="test description"
-                    groupName="test"
-                    onChange={handleChange}
-                    selectedValues={selectedValues}
-                    errorMessage={errorMessage}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    <Choice label="b" value="b" aria-labelledby="test-b" />
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                </CheckboxGroup>
-            );
-        };
-
-        it("has the correct items checked", async () => {
-            // Arrange, Act
-            render(<TestComponent />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Assert
-            // a starts off checked
-            expect(checkboxes[0]).toBeChecked();
-            expect(checkboxes[1]).toBeChecked();
-            expect(checkboxes[2]).not.toBeChecked();
-        });
-
-        it("clicking a selected choice deselects it", async () => {
-            // Arrange
-            render(<TestComponent />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Act
-            await userEvent.click(checkboxes[0]);
-
-            // Assert
-            expect(checkboxes[0]).not.toBeChecked();
-            expect(checkboxes[1]).toBeChecked();
-            expect(checkboxes[2]).not.toBeChecked();
-        });
-
-        it("should set aria-invalid on choices when there's an error message", async () => {
-            // Arrange, Act
-            render(<TestComponent errorMessage="there's an error" />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Assert
-            expect(checkboxes[0]).toHaveAttribute("aria-invalid", "true");
-            expect(checkboxes[1]).toHaveAttribute("aria-invalid", "true");
-            expect(checkboxes[2]).toHaveAttribute("aria-invalid", "true");
-        });
-
-        it("checks that aria attributes have been added correctly", async () => {
-            // Arrange, Act
-            render(<TestComponent />);
-
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            // Assert
-            expect(checkboxes[0]).toHaveAttribute("aria-labelledby", "test-a");
-            expect(checkboxes[1]).toHaveAttribute("aria-labelledby", "test-b");
-            expect(checkboxes[2]).toHaveAttribute("aria-labelledby", "test-c");
-        });
-    });
-
-    describe("flexible props", () => {
-        it("should render with a React.Node label", async () => {
-            // Arrange, Act
-            render(
-                <CheckboxGroup
-                    label={
-                        <span>
-                            label with <strong>strong</strong> text
-                        </span>
-                    }
-                    groupName="test"
-                    onChange={() => {}}
-                    selectedValues={[]}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    <Choice label="b" value="b" aria-labelledby="test-b" />
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                </CheckboxGroup>,
-            );
-
-            // Assert
-            expect(await screen.findByText("strong")).toBeInTheDocument();
-        });
-
-        it("should render with a React.Node description", async () => {
-            // Arrange, Act
-            render(
-                <CheckboxGroup
-                    label="label"
-                    description={
-                        <span>
-                            description with <strong>strong</strong> text
-                        </span>
-                    }
-                    groupName="test"
-                    onChange={() => {}}
-                    selectedValues={[]}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    <Choice label="b" value="b" aria-labelledby="test-b" />
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                </CheckboxGroup>,
-            );
-
-            // Assert
-            expect(await screen.findByText("strong")).toBeInTheDocument();
-        });
-
-        it("should filter out false-y children when rendering", async () => {
-            // Arrange, Act
-            render(
-                <CheckboxGroup
-                    label="label"
-                    description="description"
-                    groupName="test"
-                    onChange={() => {}}
-                    selectedValues={[]}
-                >
-                    <Choice label="a" value="a" aria-labelledby="test-a" />
-                    {/* eslint-disable-next-line no-constant-condition */}
-                    {false ? (
-                        <Choice label="b" value="b" aria-labelledby="test-b" />
-                    ) : null}
-                    <Choice label="c" value="c" aria-labelledby="test-c" />
-                    {undefined}
-                    {null}
-                </CheckboxGroup>,
-            );
-
-            // Assert
-            const checkboxes = screen.getAllByRole("checkbox");
-
-            expect(checkboxes).toHaveLength(2);
-        });
-    });
-});