@khanacademy/wonder-blocks-icon-button 3.4.15 → 3.4.17

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 3.4.17
+
+### Patch Changes
+
+-   Updated dependencies [b561425a]
+-   Updated dependencies [a566e232]
+-   Updated dependencies [d2b21a6e]
+    -   @khanacademy/wonder-blocks-core@4.6.0
+    -   @khanacademy/wonder-blocks-clickable@2.4.2
+    -   @khanacademy/wonder-blocks-icon@1.2.33
+
+## 3.4.16
+
+### Patch Changes
+
+-   Updated dependencies [4c682709]
+    -   @khanacademy/wonder-blocks-clickable@2.4.1
+
 ## 3.4.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "3.4.15",
+  "version": "3.4.17",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.0",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.2",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.5.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.32"
+    "@khanacademy/wonder-blocks-core": "^4.6.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.33"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -28,6 +28,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.4.0"
+    "wb-dev-build-settings": "^0.5.0"
   }
 }

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

@@ -7,7 +7,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:false disa
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -76,7 +75,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:false focu
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -149,7 +147,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:false hove
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -222,7 +219,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:false pres
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -295,7 +291,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:true disab
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -364,7 +359,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:true focus
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -437,7 +431,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:true hover
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -510,7 +503,6 @@ exports[`IconButtonCore kind:primary color:default size:default light:true press
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -583,7 +575,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:false disabl
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -652,7 +643,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:false focuse
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -725,7 +715,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:false hovere
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -798,7 +787,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:false presse
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -871,7 +859,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:true disable
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -940,7 +927,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:true focused
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1013,7 +999,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:true hovered
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1086,7 +1071,6 @@ exports[`IconButtonCore kind:primary color:default size:small light:true pressed
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1159,7 +1143,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1228,7 +1211,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1301,7 +1283,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1374,7 +1355,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1447,7 +1427,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true d
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1516,7 +1495,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true f
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1589,7 +1567,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true h
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1662,7 +1639,6 @@ exports[`IconButtonCore kind:primary color:destructive size:default light:true p
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1735,7 +1711,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false di
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1804,7 +1779,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false fo
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1877,7 +1851,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false ho
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -1950,7 +1923,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:false pr
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2023,7 +1995,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true dis
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2092,7 +2063,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true foc
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2165,7 +2135,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true hov
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2238,7 +2207,6 @@ exports[`IconButtonCore kind:primary color:destructive size:small light:true pre
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2311,7 +2279,6 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false di
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2380,7 +2347,6 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false fo
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2453,7 +2419,6 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false ho
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2526,7 +2491,6 @@ exports[`IconButtonCore kind:secondary color:default size:default light:false pr
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2599,7 +2563,6 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false disa
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2668,7 +2631,6 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false focu
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2741,7 +2703,6 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false hove
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2814,7 +2775,6 @@ exports[`IconButtonCore kind:secondary color:default size:small light:false pres
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2887,7 +2847,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -2956,7 +2915,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3029,7 +2987,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3102,7 +3059,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:default light:fals
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3175,7 +3131,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3244,7 +3199,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3317,7 +3271,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3390,7 +3343,6 @@ exports[`IconButtonCore kind:secondary color:destructive size:small light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3463,7 +3415,6 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false dis
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3532,7 +3483,6 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false foc
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3605,7 +3555,6 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false hov
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3678,7 +3627,6 @@ exports[`IconButtonCore kind:tertiary color:default size:default light:false pre
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3751,7 +3699,6 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false disab
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3820,7 +3767,6 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false focus
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3893,7 +3839,6 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false hover
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -3966,7 +3911,6 @@ exports[`IconButtonCore kind:tertiary color:default size:small light:false press
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4039,7 +3983,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4108,7 +4051,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4181,7 +4123,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4254,7 +4195,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:default light:false
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4327,7 +4267,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false d
   disabled={true}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4396,7 +4335,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false f
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4469,7 +4407,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false h
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}
@@ -4542,7 +4479,6 @@ exports[`IconButtonCore kind:tertiary color:destructive size:small light:false p
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
-  onDragStart={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onKeyUp={[Function]}

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

@@ -12,7 +12,6 @@ const defaultHandlers = {
     onMouseLeave: () => void 0,
     onMouseDown: () => void 0,
     onMouseUp: () => void 0,
-    onDragStart: () => void 0,
     onTouchStart: () => void 0,
     onTouchEnd: () => void 0,
     onTouchCancel: () => void 0,

package/src/components/__tests__/icon-button.test.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {icons} from "@khanacademy/wonder-blocks-icon";
@@ -21,15 +21,23 @@ describe("IconButton", () => {
         window.location = location;
     });
 
-    test("render an icon", (done) => {
-        const wrapper = mount(
+    test("render an icon", () => {
+        // Arrange
+
+        // Act
+        render(
             <IconButton
                 icon={icons.search}
                 aria-label="search"
-                onClick={() => done()}
+                onClick={() => {}}
+                testId="icon-button"
             />,
         );
-        wrapper.simulate("click");
+
+        const icon = screen.getByLabelText("search");
+
+        // Assert
+        expect(icon.innerHTML).toEqual(expect.stringContaining("<svg"));
     });
 
     test("throw an error for if light and not primary", () => {
@@ -47,7 +55,7 @@ describe("IconButton", () => {
 
     test("client-side navigation", () => {
         // Arrange
-        const wrapper = mount(
+        render(
             <MemoryRouter>
                 <div>
                     <IconButton
@@ -66,18 +74,15 @@ describe("IconButton", () => {
         );
 
         // Act
-        const buttonWrapper = wrapper
-            .find(`[data-test-id="icon-button"]`)
-            .first();
-        buttonWrapper.simulate("click", {button: 0});
+        userEvent.click(screen.getByRole("link"));
 
         // Assert
-        expect(wrapper.find("#foo").exists()).toBe(true);
+        expect(screen.getByText("Hello, world!")).toBeInTheDocument();
     });
 
     test("client-side navigation with unknown URL fails", () => {
         // Arrange
-        const wrapper = mount(
+        render(
             <MemoryRouter>
                 <div>
                     <IconButton
@@ -96,18 +101,15 @@ describe("IconButton", () => {
         );
 
         // Act
-        const buttonWrapper = wrapper
-            .find(`[data-test-id="icon-button"]`)
-            .first();
-        buttonWrapper.simulate("click", {button: 0});
+        userEvent.click(screen.getByRole("link"));
 
         // Assert
-        expect(wrapper.find("#foo").exists()).toBe(false);
+        expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
     });
 
     test("client-side navigation with `skipClientNav` set to `true` fails", () => {
         // Arrange
-        const wrapper = mount(
+        render(
             <MemoryRouter>
                 <div>
                     <IconButton
@@ -127,17 +129,14 @@ describe("IconButton", () => {
         );
 
         // Act
-        const buttonWrapper = wrapper
-            .find(`[data-test-id="icon-button"]`)
-            .first();
-        buttonWrapper.simulate("click", {button: 0});
+        userEvent.click(screen.getByRole("link"));
 
         // Assert
-        expect(wrapper.find("#foo").exists()).toBe(false);
+        expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
     });
 
     test("disallow navigation when href and disabled are both set", () => {
-        const wrapper = mount(
+        render(
             <MemoryRouter>
                 <div>
                     <IconButton
@@ -157,12 +156,9 @@ describe("IconButton", () => {
         );
 
         // Act
-        const buttonWrapper = wrapper
-            .find(`[data-test-id="icon-button"]`)
-            .first();
-        buttonWrapper.simulate("click", {button: 0});
+        userEvent.click(screen.getByRole("button"));
 
         // Assert
-        expect(wrapper.find("#foo").exists()).toBe(false);
+        expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
     });
 });

package/dist/index.js

@@ -1,449 +0,0 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-color");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-clickable");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("aphrodite");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButton; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _icon_button_core_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
-
-
-
-
-
-
-/**
- * An IconButton is a button whose contents are an SVG image.
- *
- * To use, supply an onClick function, a wonder-blocks icon asset (see
- * the Icon section) and an aria-label to describe the button functionality.
- * Optionally specify href (URL), clientSideNav, color
- * (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"),
- * light (whether the IconButton will be rendered on a dark background),
- * disabled , test ID, and custom styling.
- *
- * The size of an IconButton matches the size of icon it wraps which is 24x24
- * pixels.  The focus ring which is displayed on hover and focus is much
- * larger but does not affect its size.  This matches the behavior of Button.
- *
- * IconButtons require a certain amount of space between them to ensure the
- * focus rings don't overlap.  The minimum amount of spacing is 16px, but
- * you should refer to the mocks provided by design.  Using a Strut in between
- * IconButtons is the preferred way to for adding this spacing.
- *
- * Many layouts require alignment of visual left (or right) side of an
- * IconButton.  This requires a little bit of pixel nudging since each icon
- * as a different amount of internal padding.
- *
- * See the Toolbar documentation for examples of IconButton use that follow
- * the best practices described above.
- *
- * ```js
- * import {icons} from "@khanacademy/wonder-blocks-icon";
- * import IconButton from "@khanacademy/wonder-blocks-icon-button";
- *
- * <IconButton
- *     icon={icons.anIcon}
- *     aria-label="An Icon"
- *     onClick={(e) => console.log("Hello, world!")}
- * />
- * ```
- */
-class IconButton extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  renderClickableBehavior(router) {
-    const {
-      onClick,
-      href,
-      skipClientNav,
-      tabIndex,
-      target,
-      ...sharedProps
-    } = this.props;
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__["getClickableBehavior"])(href, skipClientNav, router);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
-      disabled: sharedProps.disabled,
-      href: href,
-      onClick: onClick,
-      role: "button",
-      target: target
-    }, (state, { ...childrenProps
-    }) => {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_icon_button_core_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, state, childrenProps, {
-        skipClientNav: skipClientNav,
-        href: href,
-        target: target,
-        tabIndex: tabIndex
-      }));
-    });
-  }
-
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
-IconButton.defaultProps = {
-  color: "default",
-  kind: "primary",
-  light: false,
-  disabled: false
-};
-
-/***/ }),
-/* 8 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButtonCore; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__);
-
-
-
-
-
-
-
-
-
-const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("a");
-const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("button");
-const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
-class IconButtonCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  renderInner(router) {
-    const {
-      skipClientNav,
-      color,
-      disabled,
-      focused,
-      hovered,
-      href,
-      icon,
-      kind,
-      light,
-      pressed,
-      style,
-      testId,
-      waiting: _,
-      ...restProps
-    } = this.props;
-    const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDefault;
-
-    const buttonStyles = _generateStyles(buttonColor, kind, light);
-
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
-    const child = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default.a, {
-      size: "medium",
-      color: "currentColor",
-      icon: icon
-    });
-    const commonProps = {
-      "data-test-id": testId,
-      style: [defaultStyle, style],
-      ...restProps
-    };
-
-    if (href && !disabled) {
-      return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledLink, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
-        to: href
-      }), child) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
-        href: href
-      }), child);
-    } else {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledButton, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-        type: "button"
-      }, commonProps, {
-        disabled: disabled
-      }), child);
-    }
-  }
-
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderInner(router));
-  }
-
-}
-const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
-  shared: {
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxSizing: "border-box",
-    height: 40,
-    width: 40,
-    padding: 0,
-    cursor: "pointer",
-    border: "none",
-    outline: "none",
-    textDecoration: "none",
-    background: "none",
-    margin: -8,
-    // This removes the 300ms click delay on mobile browsers by indicating that
-    // "double-tap to zoom" shouldn't be used on this element.
-    touchAction: "manipulation",
-    ":focus": {
-      // Mobile: Removes a blue highlight style shown when the user clicks a button
-      WebkitTapHighlightColor: "rgba(0,0,0,0)"
-    }
-  },
-  disabled: {
-    cursor: "default"
-  }
-});
-const styles = {};
-
-const _generateStyles = (color, kind, light) => {
-  const buttonType = color + kind + light.toString();
-
-  if (styles[buttonType]) {
-    return styles[buttonType];
-  }
-
-  if (light && kind !== "primary") {
-    throw new Error("Light is only supported for primary IconButtons");
-  }
-
-  const {
-    white,
-    offBlack32,
-    offBlack64,
-    offBlack
-  } = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
-  const newStyles = {
-    default: {},
-    focus: {
-      color: light ? white : color,
-      borderWidth: 2,
-      borderColor: light ? white : color,
-      borderStyle: "solid",
-      borderRadius: 4
-    },
-    active: {
-      color: light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(color, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, color),
-      borderWidth: 2,
-      borderColor: light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(color, 0.32), white) : Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(offBlack32, color),
-      borderStyle: "solid",
-      borderRadius: 4
-    },
-    disabled: {
-      color: light ? Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["fade"])(white, 0.32), color) : offBlack32,
-      cursor: "default"
-    }
-  };
-
-  if (kind === "primary") {
-    newStyles["default"] = {
-      color: light ? white : color
-    };
-  } else if (kind === "secondary") {
-    newStyles["default"] = {
-      color: offBlack
-    };
-  } else if (kind === "tertiary") {
-    newStyles["default"] = {
-      color: offBlack64
-    };
-  } else {
-    throw new Error("IconButton kind not recognized");
-  }
-
-  styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
-  return styles[buttonType];
-};
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-router-dom");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-icon");
-
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _components_icon_button_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_icon_button_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
-
-
-
-
-/***/ })
-/******/ ]);

package/dist/index.js.flow

@@ -1,2 +0,0 @@
-// @flow
-export * from "../src/index.js";

package/docs.md

@@ -1,5 +0,0 @@
-Documentation for `@khanacademy/wonder-blocks-icon-button` is now in Storybook.
-
-Visit the [Storybook
-IconButton](https://khan.github.io/wonder-blocks/?path=/docs/iconbutton) docs on
-GitHub Pages.