@khanacademy/wonder-blocks-accordion 1.3.7 → 1.3.9

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 1.3.9
+
+### Patch Changes
+
+-   Updated dependencies [6999fd39]
+    -   @khanacademy/wonder-blocks-tokens@2.1.0
+    -   @khanacademy/wonder-blocks-clickable@4.2.9
+
+## 1.3.8
+
+### 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-tokens@2.0.1
+    -   @khanacademy/wonder-blocks-typography@2.1.16
+
 ## 1.3.7
 
 ### Patch Changes

package/dist/components/accordion-section.d.ts

@@ -45,8 +45,8 @@ export type TagType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  * </AccordionSection>
  * ```
  */
-declare const AccordionSection: 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 AccordionSection: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * The unique identifier for the accordion section.

package/dist/components/accordion.d.ts

@@ -31,8 +31,8 @@ export type AccordionCornerKindType = "square" | "rounded" | "rounded-per-sectio
  * </Accordion>
  * ```
  */
-declare const Accordion: 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 Accordion: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
 }> & {
     /**
      * The unique identifier for the accordion.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-accordion",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "design": "v1",
   "description": "Accordion components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,11 +16,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "^4.2.7",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-icon": "^4.1.4",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.9",
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-icon": "^4.1.5",
+    "@khanacademy/wonder-blocks-tokens": "^2.1.0",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",

package/src/components/__tests__/accordion-section-header.test.tsx

@@ -1,211 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import AccordionSectionHeader from "../accordion-section-header";
-
-describe("AccordionSectionHeader", () => {
-    test("renders with string header, h2 by default", () => {
-        // Arrange
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-            />,
-        );
-
-        // Act
-        const header = screen.getByRole("heading", {level: 2, name: "Title"});
-
-        // Assert
-        expect(header).toBeVisible();
-    });
-
-    test("renders with the specified tag", () => {
-        // Arrange
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-                tag="h3"
-            />,
-        );
-
-        // Act
-        const header = screen.getByRole("heading", {level: 3, name: "Title"});
-
-        // Assert
-        expect(header).toBeVisible();
-    });
-
-    test("renders with react element header", () => {
-        // Arrange
-
-        // Act
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header={<div>Section content</div>}
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-            />,
-        );
-
-        // Assert
-        expect(screen.getByText("Section content")).toBeVisible();
-    });
-
-    test("clicking on the header calls onClick", () => {
-        // Arrange
-        const onClickSpy = jest.fn();
-
-        // Act
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                onClick={onClickSpy}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-            />,
-        );
-        screen.getByText("Title").click();
-
-        // Assert
-        expect(onClickSpy).toHaveBeenCalledTimes(1);
-    });
-
-    test("includes transition styles when animated is true", () => {
-        // Arrange
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={true}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-            />,
-        );
-
-        // Act
-        const header = screen.getByRole("button");
-
-        // Assert
-        expect(header).toHaveStyle({
-            transition: "border-radius 300ms",
-        });
-    });
-
-    test("does not include transition styles when animated is false", () => {
-        // Arrange
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-            />,
-        );
-
-        // Act
-        const header = screen.getByRole("button");
-
-        // Assert
-        expect(header).not.toHaveStyle({
-            transition: "border-radius 300ms",
-        });
-    });
-
-    test("shows icon when collapsible is true", () => {
-        // Arrange
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                collapsible={true}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-                testId="accordion-section-header"
-            />,
-        );
-
-        // Act
-        const icon = screen.queryByTestId(
-            "accordion-section-header-caret-icon",
-        );
-
-        // Assert
-        expect(icon).toBeInTheDocument();
-    });
-
-    test("does not show icon when collapsible is false", () => {
-        // Arrange
-        render(
-            <AccordionSectionHeader
-                id="accordion-section-header"
-                header="Title"
-                caretPosition="end"
-                cornerKind="square"
-                expanded={false}
-                animated={false}
-                collapsible={false}
-                onClick={() => {}}
-                sectionContentUniqueId="section-content-unique-id"
-                isFirstSection={false}
-                isLastSection={false}
-                testId="accordion-section-header"
-            />,
-        );
-
-        // Act
-        const icon = screen.queryByTestId(
-            "accordion-section-header-caret-icon",
-        );
-
-        // Assert
-        expect(icon).not.toBeInTheDocument();
-    });
-});

package/src/components/__tests__/accordion-section.test.tsx

@@ -1,361 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-
-import AccordionSection from "../accordion-section";
-
-describe("AccordionSection", () => {
-    test("renders without open panel when expanded is false", () => {
-        // Arrange
-
-        // Act
-        render(
-            <AccordionSection header="Title">Section content</AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Assert
-        expect(screen.getByText("Title")).toBeVisible();
-        expect(screen.queryByText("Section content")).not.toBeVisible();
-    });
-
-    test("renders with open panel when expanded is true", () => {
-        // Arrange
-
-        // Act
-        render(
-            <AccordionSection header="Title" expanded={true}>
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Assert
-        expect(screen.getByText("Title")).toBeVisible();
-        expect(screen.queryByText("Section content")).toBeVisible();
-    });
-
-    test("renders children when child is a react element", () => {
-        // Arrange
-
-        // Act
-        render(
-            <AccordionSection header="Title" expanded={true}>
-                <div>Section content</div>
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Assert
-        expect(screen.getByText("Title")).toBeVisible();
-        expect(screen.queryByText("Section content")).toBeVisible();
-    });
-
-    test("calls onToggle when clicked (controlled)", () => {
-        // Arrange
-        const onToggleSpy = jest.fn();
-
-        render(
-            <AccordionSection
-                header="Title"
-                expanded={false}
-                onToggle={onToggleSpy}
-            >
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        const button = screen.getByRole("button", {name: "Title"});
-
-        // Act
-        button.click();
-
-        // Assert
-        expect(onToggleSpy).toHaveBeenCalledTimes(1);
-    });
-
-    test("calls onToggle when clicked (uncontrolled: no expanded, includes onToggle)", () => {
-        // Arrange
-        const onToggleSpy = jest.fn();
-
-        render(
-            <AccordionSection header="Title" onToggle={onToggleSpy}>
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        const button = screen.getByRole("button", {name: "Title"});
-
-        // Act
-        button.click();
-
-        // Assert
-        expect(onToggleSpy).toHaveBeenCalledTimes(1);
-    });
-
-    test("shows/hides panel when clicked (uncontrolled: includes expanded, no onToggle)", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title" expanded={true}>
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        // Make sure the section is open at first
-        expect(screen.getByText("Section content")).toBeVisible();
-
-        const button = screen.getByRole("button", {name: "Title"});
-        button.click();
-
-        // Assert
-        // Make sure the section has closed after clicking
-        expect(screen.queryByText("Section content")).not.toBeVisible();
-        // Repeat clicking to confirm behavior
-        button.click();
-        expect(screen.getByText("Section content")).toBeVisible();
-    });
-
-    test("shows/hides panel when clicked (uncontrolled: no expanded, no onToggle)", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title">Section content</AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        // Make sure the section is closed at first
-        expect(screen.queryByText("Section content")).not.toBeVisible();
-
-        const button = screen.getByRole("button", {name: "Title"});
-        button.click();
-
-        // Assert
-        // Make sure the section has opened after clicking
-        expect(screen.getByText("Section content")).toBeVisible();
-        // Repeat clicking to confirm behavior
-        button.click();
-        expect(screen.queryByText("Section content")).not.toBeVisible();
-    });
-
-    test("is h2 by default", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title">Section content</AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const header = screen.getByRole("heading", {level: 2});
-
-        // Assert
-        expect(header).toBeVisible();
-    });
-
-    test("uses provided tag", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title" tag="h3">
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const header = screen.getByRole("heading", {level: 3});
-
-        // Assert
-        expect(header).toBeVisible();
-    });
-
-    test("uses the header's testId as button's data-testid", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title" testId="accordion-section">
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const button = screen.getByRole("button", {name: "Title"});
-
-        // Assert
-        expect(button).toHaveAttribute(
-            "data-testid",
-            "accordion-section-header",
-        );
-    });
-
-    test("wrapper style when cornerKind is square", () => {
-        // Arrange
-        render(
-            <AccordionSection
-                header="Title"
-                cornerKind="square"
-                testId="accordion-section-test-id"
-            >
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const wrapper = screen.getByTestId("accordion-section-test-id");
-
-        // Assert
-        expect(wrapper).toHaveStyle({"border-radius": 0});
-    });
-
-    test("wrapper style when cornerKind is rounded", () => {
-        // Arrange
-        render(
-            <AccordionSection
-                header="Title"
-                cornerKind="rounded"
-                testId="accordion-section-test-id"
-            >
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const wrapper = screen.getByTestId("accordion-section-test-id");
-
-        // Assert
-        expect(wrapper).toHaveStyle({
-            borderStartStartRadius: "12px",
-            borderStartEndRadius: "12px",
-            borderEndStartRadius: "12px",
-            borderEndEndRadius: "12px",
-        });
-    });
-
-    test("wrapper style when cornerKind is rounded-per-section", () => {
-        // Arrange
-        render(
-            <AccordionSection
-                header="Title"
-                cornerKind="rounded-per-section"
-                testId="accordion-section-test-id"
-            >
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const wrapper = screen.getByTestId("accordion-section-test-id");
-
-        // Assert
-        expect(wrapper).toHaveStyle({
-            "border-radius": "12px",
-        });
-    });
-
-    test("aria-disabled is false by default", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title">Section content</AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const button = screen.getByRole("button", {name: "Title"});
-
-        // Assert
-        expect(button).toHaveAttribute("aria-disabled", "false");
-    });
-
-    test("sets aria-disabled to true when collapsible prop is false", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title" collapsible={false}>
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const button = screen.getByRole("button", {name: "Title"});
-
-        // Assert
-        expect(button).toHaveAttribute("aria-disabled", "true");
-    });
-
-    test("does not allow clicking when collapsible prop is false", () => {
-        // Arrange
-        render(
-            <AccordionSection header="Title" collapsible={false}>
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const button = screen.getByRole("button", {name: "Title"});
-        button.click();
-
-        // Assert
-        // Confirm the content is still visible even though the
-        // header button was clicked.
-        expect(screen.queryByText("Section content")).toBeVisible();
-    });
-
-    test("includes transition when animated is true", () => {
-        // Arrange
-        render(
-            <AccordionSection
-                header="Title"
-                animated={true}
-                testId="accordion-section"
-            >
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const wrapper = screen.getByTestId("accordion-section");
-        const header = screen.getByTestId("accordion-section-header");
-
-        // Assert
-        expect(wrapper).toHaveStyle({
-            transition: "grid-template-rows 300ms",
-        });
-        expect(header).toHaveStyle({
-            transition: "border-radius 300ms",
-        });
-    });
-
-    test("does not include transition when animated is false", () => {
-        // Arrange
-        render(
-            <AccordionSection
-                header="Title"
-                animated={false}
-                testId="accordion-section"
-            >
-                Section content
-            </AccordionSection>,
-            {wrapper: RenderStateRoot},
-        );
-
-        // Act
-        const wrapper = screen.getByTestId("accordion-section");
-        const header = screen.getByTestId("accordion-section-header");
-
-        // Assert
-        expect(wrapper).not.toHaveStyle({
-            transition: "grid-template-rows 300ms",
-        });
-        expect(header).not.toHaveStyle({
-            transition: "border-radius 300ms",
-        });
-    });
-});