@khanacademy/wonder-blocks-icon-button 3.4.16 → 3.4.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/package.json +5 -5
- package/src/components/__tests__/icon-button.test.js +26 -30
- package/dist/index.js +0 -446
- package/docs.md +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-icon-button
|
|
2
2
|
|
|
3
|
+
## 3.4.18
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- @khanacademy/wonder-blocks-clickable@2.4.3
|
|
8
|
+
- @khanacademy/wonder-blocks-core@4.6.1
|
|
9
|
+
- @khanacademy/wonder-blocks-icon@1.2.34
|
|
10
|
+
|
|
11
|
+
## 3.4.17
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [b561425a]
|
|
16
|
+
- Updated dependencies [a566e232]
|
|
17
|
+
- Updated dependencies [d2b21a6e]
|
|
18
|
+
- @khanacademy/wonder-blocks-core@4.6.0
|
|
19
|
+
- @khanacademy/wonder-blocks-clickable@2.4.2
|
|
20
|
+
- @khanacademy/wonder-blocks-icon@1.2.33
|
|
21
|
+
|
|
3
22
|
## 3.4.16
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-icon-button",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.18",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.18.6",
|
|
19
|
-
"@khanacademy/wonder-blocks-clickable": "^2.4.
|
|
19
|
+
"@khanacademy/wonder-blocks-clickable": "^2.4.3",
|
|
20
20
|
"@khanacademy/wonder-blocks-color": "^1.2.0",
|
|
21
|
-
"@khanacademy/wonder-blocks-core": "^4.
|
|
22
|
-
"@khanacademy/wonder-blocks-icon": "^1.2.
|
|
21
|
+
"@khanacademy/wonder-blocks-core": "^4.6.1",
|
|
22
|
+
"@khanacademy/wonder-blocks-icon": "^1.2.34"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"aphrodite": "^1.2.5",
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
"react-router-dom": "5.3.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"wb-dev-build-settings": "^0.
|
|
31
|
+
"wb-dev-build-settings": "^0.6.0"
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @flow
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import {
|
|
4
|
-
import "
|
|
3
|
+
import {render, screen} from "@testing-library/react";
|
|
4
|
+
import userEvent from "@testing-library/user-event";
|
|
5
5
|
|
|
6
6
|
import {MemoryRouter, Route, Switch} from "react-router-dom";
|
|
7
7
|
import {icons} from "@khanacademy/wonder-blocks-icon";
|
|
@@ -21,15 +21,23 @@ describe("IconButton", () => {
|
|
|
21
21
|
window.location = location;
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
test("render an icon", (
|
|
25
|
-
|
|
24
|
+
test("render an icon", () => {
|
|
25
|
+
// Arrange
|
|
26
|
+
|
|
27
|
+
// Act
|
|
28
|
+
render(
|
|
26
29
|
<IconButton
|
|
27
30
|
icon={icons.search}
|
|
28
31
|
aria-label="search"
|
|
29
|
-
onClick={() =>
|
|
32
|
+
onClick={() => {}}
|
|
33
|
+
testId="icon-button"
|
|
30
34
|
/>,
|
|
31
35
|
);
|
|
32
|
-
|
|
36
|
+
|
|
37
|
+
const icon = screen.getByLabelText("search");
|
|
38
|
+
|
|
39
|
+
// Assert
|
|
40
|
+
expect(icon.innerHTML).toEqual(expect.stringContaining("<svg"));
|
|
33
41
|
});
|
|
34
42
|
|
|
35
43
|
test("throw an error for if light and not primary", () => {
|
|
@@ -47,7 +55,7 @@ describe("IconButton", () => {
|
|
|
47
55
|
|
|
48
56
|
test("client-side navigation", () => {
|
|
49
57
|
// Arrange
|
|
50
|
-
|
|
58
|
+
render(
|
|
51
59
|
<MemoryRouter>
|
|
52
60
|
<div>
|
|
53
61
|
<IconButton
|
|
@@ -66,18 +74,15 @@ describe("IconButton", () => {
|
|
|
66
74
|
);
|
|
67
75
|
|
|
68
76
|
// Act
|
|
69
|
-
|
|
70
|
-
.find(`[data-test-id="icon-button"]`)
|
|
71
|
-
.first();
|
|
72
|
-
buttonWrapper.simulate("click", {button: 0});
|
|
77
|
+
userEvent.click(screen.getByRole("link"));
|
|
73
78
|
|
|
74
79
|
// Assert
|
|
75
|
-
expect(
|
|
80
|
+
expect(screen.getByText("Hello, world!")).toBeInTheDocument();
|
|
76
81
|
});
|
|
77
82
|
|
|
78
83
|
test("client-side navigation with unknown URL fails", () => {
|
|
79
84
|
// Arrange
|
|
80
|
-
|
|
85
|
+
render(
|
|
81
86
|
<MemoryRouter>
|
|
82
87
|
<div>
|
|
83
88
|
<IconButton
|
|
@@ -96,18 +101,15 @@ describe("IconButton", () => {
|
|
|
96
101
|
);
|
|
97
102
|
|
|
98
103
|
// Act
|
|
99
|
-
|
|
100
|
-
.find(`[data-test-id="icon-button"]`)
|
|
101
|
-
.first();
|
|
102
|
-
buttonWrapper.simulate("click", {button: 0});
|
|
104
|
+
userEvent.click(screen.getByRole("link"));
|
|
103
105
|
|
|
104
106
|
// Assert
|
|
105
|
-
expect(
|
|
107
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
106
108
|
});
|
|
107
109
|
|
|
108
110
|
test("client-side navigation with `skipClientNav` set to `true` fails", () => {
|
|
109
111
|
// Arrange
|
|
110
|
-
|
|
112
|
+
render(
|
|
111
113
|
<MemoryRouter>
|
|
112
114
|
<div>
|
|
113
115
|
<IconButton
|
|
@@ -127,17 +129,14 @@ describe("IconButton", () => {
|
|
|
127
129
|
);
|
|
128
130
|
|
|
129
131
|
// Act
|
|
130
|
-
|
|
131
|
-
.find(`[data-test-id="icon-button"]`)
|
|
132
|
-
.first();
|
|
133
|
-
buttonWrapper.simulate("click", {button: 0});
|
|
132
|
+
userEvent.click(screen.getByRole("link"));
|
|
134
133
|
|
|
135
134
|
// Assert
|
|
136
|
-
expect(
|
|
135
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
137
136
|
});
|
|
138
137
|
|
|
139
138
|
test("disallow navigation when href and disabled are both set", () => {
|
|
140
|
-
|
|
139
|
+
render(
|
|
141
140
|
<MemoryRouter>
|
|
142
141
|
<div>
|
|
143
142
|
<IconButton
|
|
@@ -157,12 +156,9 @@ describe("IconButton", () => {
|
|
|
157
156
|
);
|
|
158
157
|
|
|
159
158
|
// Act
|
|
160
|
-
|
|
161
|
-
.find(`[data-test-id="icon-button"]`)
|
|
162
|
-
.first();
|
|
163
|
-
buttonWrapper.simulate("click", {button: 0});
|
|
159
|
+
userEvent.click(screen.getByRole("button"));
|
|
164
160
|
|
|
165
161
|
// Assert
|
|
166
|
-
expect(
|
|
162
|
+
expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
|
|
167
163
|
});
|
|
168
164
|
});
|
package/dist/index.js
DELETED
|
@@ -1,446 +0,0 @@
|
|
|
1
|
-
module.exports =
|
|
2
|
-
/******/ (function(modules) { // webpackBootstrap
|
|
3
|
-
/******/ // The module cache
|
|
4
|
-
/******/ var installedModules = {};
|
|
5
|
-
/******/
|
|
6
|
-
/******/ // The require function
|
|
7
|
-
/******/ function __webpack_require__(moduleId) {
|
|
8
|
-
/******/
|
|
9
|
-
/******/ // Check if module is in cache
|
|
10
|
-
/******/ if(installedModules[moduleId]) {
|
|
11
|
-
/******/ return installedModules[moduleId].exports;
|
|
12
|
-
/******/ }
|
|
13
|
-
/******/ // Create a new module (and put it into the cache)
|
|
14
|
-
/******/ var module = installedModules[moduleId] = {
|
|
15
|
-
/******/ i: moduleId,
|
|
16
|
-
/******/ l: false,
|
|
17
|
-
/******/ exports: {}
|
|
18
|
-
/******/ };
|
|
19
|
-
/******/
|
|
20
|
-
/******/ // Execute the module function
|
|
21
|
-
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
-
/******/
|
|
23
|
-
/******/ // Flag the module as loaded
|
|
24
|
-
/******/ module.l = true;
|
|
25
|
-
/******/
|
|
26
|
-
/******/ // Return the exports of the module
|
|
27
|
-
/******/ return module.exports;
|
|
28
|
-
/******/ }
|
|
29
|
-
/******/
|
|
30
|
-
/******/
|
|
31
|
-
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
-
/******/ __webpack_require__.m = modules;
|
|
33
|
-
/******/
|
|
34
|
-
/******/ // expose the module cache
|
|
35
|
-
/******/ __webpack_require__.c = installedModules;
|
|
36
|
-
/******/
|
|
37
|
-
/******/ // define getter function for harmony exports
|
|
38
|
-
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
-
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
-
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
-
/******/ }
|
|
42
|
-
/******/ };
|
|
43
|
-
/******/
|
|
44
|
-
/******/ // define __esModule on exports
|
|
45
|
-
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
-
/******/ }
|
|
49
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
-
/******/ };
|
|
51
|
-
/******/
|
|
52
|
-
/******/ // create a fake namespace object
|
|
53
|
-
/******/ // mode & 1: value is a module id, require it
|
|
54
|
-
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
-
/******/ // mode & 4: return value when already ns object
|
|
56
|
-
/******/ // mode & 8|1: behave like require
|
|
57
|
-
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
-
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
-
/******/ if(mode & 8) return value;
|
|
60
|
-
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
-
/******/ var ns = Object.create(null);
|
|
62
|
-
/******/ __webpack_require__.r(ns);
|
|
63
|
-
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
-
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
-
/******/ return ns;
|
|
66
|
-
/******/ };
|
|
67
|
-
/******/
|
|
68
|
-
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
-
/******/ __webpack_require__.n = function(module) {
|
|
70
|
-
/******/ var getter = module && module.__esModule ?
|
|
71
|
-
/******/ function getDefault() { return module['default']; } :
|
|
72
|
-
/******/ function getModuleExports() { return module; };
|
|
73
|
-
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
-
/******/ return getter;
|
|
75
|
-
/******/ };
|
|
76
|
-
/******/
|
|
77
|
-
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
-
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
-
/******/
|
|
80
|
-
/******/ // __webpack_public_path__
|
|
81
|
-
/******/ __webpack_require__.p = "";
|
|
82
|
-
/******/
|
|
83
|
-
/******/
|
|
84
|
-
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s = 11);
|
|
86
|
-
/******/ })
|
|
87
|
-
/************************************************************************/
|
|
88
|
-
/******/ ([
|
|
89
|
-
/* 0 */
|
|
90
|
-
/***/ (function(module, exports) {
|
|
91
|
-
|
|
92
|
-
module.exports = require("react");
|
|
93
|
-
|
|
94
|
-
/***/ }),
|
|
95
|
-
/* 1 */
|
|
96
|
-
/***/ (function(module, exports) {
|
|
97
|
-
|
|
98
|
-
module.exports = require("@khanacademy/wonder-blocks-color");
|
|
99
|
-
|
|
100
|
-
/***/ }),
|
|
101
|
-
/* 2 */
|
|
102
|
-
/***/ (function(module, exports) {
|
|
103
|
-
|
|
104
|
-
function _extends() {
|
|
105
|
-
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
106
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
107
|
-
var source = arguments[i];
|
|
108
|
-
for (var key in source) {
|
|
109
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
110
|
-
target[key] = source[key];
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
return target;
|
|
115
|
-
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
116
|
-
return _extends.apply(this, arguments);
|
|
117
|
-
}
|
|
118
|
-
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
119
|
-
|
|
120
|
-
/***/ }),
|
|
121
|
-
/* 3 */
|
|
122
|
-
/***/ (function(module, exports) {
|
|
123
|
-
|
|
124
|
-
module.exports = require("react-router");
|
|
125
|
-
|
|
126
|
-
/***/ }),
|
|
127
|
-
/* 4 */
|
|
128
|
-
/***/ (function(module, exports) {
|
|
129
|
-
|
|
130
|
-
module.exports = require("@khanacademy/wonder-blocks-clickable");
|
|
131
|
-
|
|
132
|
-
/***/ }),
|
|
133
|
-
/* 5 */
|
|
134
|
-
/***/ (function(module, exports) {
|
|
135
|
-
|
|
136
|
-
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
137
|
-
|
|
138
|
-
/***/ }),
|
|
139
|
-
/* 6 */
|
|
140
|
-
/***/ (function(module, exports) {
|
|
141
|
-
|
|
142
|
-
module.exports = require("aphrodite");
|
|
143
|
-
|
|
144
|
-
/***/ }),
|
|
145
|
-
/* 7 */
|
|
146
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
147
|
-
|
|
148
|
-
"use strict";
|
|
149
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButton; });
|
|
150
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
151
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
152
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
153
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
154
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
|
|
155
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
|
|
156
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
|
|
157
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__);
|
|
158
|
-
/* harmony import */ var _icon_button_core_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* An IconButton is a button whose contents are an SVG image.
|
|
167
|
-
*
|
|
168
|
-
* To use, supply an onClick function, a wonder-blocks icon asset (see
|
|
169
|
-
* the Icon section) and an aria-label to describe the button functionality.
|
|
170
|
-
* Optionally specify href (URL), clientSideNav, color
|
|
171
|
-
* (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"),
|
|
172
|
-
* light (whether the IconButton will be rendered on a dark background),
|
|
173
|
-
* disabled , test ID, and custom styling.
|
|
174
|
-
*
|
|
175
|
-
* The size of an IconButton matches the size of icon it wraps which is 24x24
|
|
176
|
-
* pixels. The focus ring which is displayed on hover and focus is much
|
|
177
|
-
* larger but does not affect its size. This matches the behavior of Button.
|
|
178
|
-
*
|
|
179
|
-
* IconButtons require a certain amount of space between them to ensure the
|
|
180
|
-
* focus rings don't overlap. The minimum amount of spacing is 16px, but
|
|
181
|
-
* you should refer to the mocks provided by design. Using a Strut in between
|
|
182
|
-
* IconButtons is the preferred way to for adding this spacing.
|
|
183
|
-
*
|
|
184
|
-
* Many layouts require alignment of visual left (or right) side of an
|
|
185
|
-
* IconButton. This requires a little bit of pixel nudging since each icon
|
|
186
|
-
* as a different amount of internal padding.
|
|
187
|
-
*
|
|
188
|
-
* See the Toolbar documentation for examples of IconButton use that follow
|
|
189
|
-
* the best practices described above.
|
|
190
|
-
*
|
|
191
|
-
* ```js
|
|
192
|
-
* import {icons} from "@khanacademy/wonder-blocks-icon";
|
|
193
|
-
* import IconButton from "@khanacademy/wonder-blocks-icon-button";
|
|
194
|
-
*
|
|
195
|
-
* <IconButton
|
|
196
|
-
* icon={icons.anIcon}
|
|
197
|
-
* aria-label="An Icon"
|
|
198
|
-
* onClick={(e) => console.log("Hello, world!")}
|
|
199
|
-
* />
|
|
200
|
-
* ```
|
|
201
|
-
*/
|
|
202
|
-
class IconButton extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
203
|
-
renderClickableBehavior(router) {
|
|
204
|
-
const {
|
|
205
|
-
onClick,
|
|
206
|
-
href,
|
|
207
|
-
skipClientNav,
|
|
208
|
-
tabIndex,
|
|
209
|
-
target,
|
|
210
|
-
...sharedProps
|
|
211
|
-
} = this.props;
|
|
212
|
-
const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__["getClickableBehavior"])(href, skipClientNav, router);
|
|
213
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
|
|
214
|
-
disabled: sharedProps.disabled,
|
|
215
|
-
href: href,
|
|
216
|
-
onClick: onClick,
|
|
217
|
-
role: "button",
|
|
218
|
-
target: target
|
|
219
|
-
}, (state, { ...childrenProps
|
|
220
|
-
}) => {
|
|
221
|
-
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, {
|
|
222
|
-
skipClientNav: skipClientNav,
|
|
223
|
-
href: href,
|
|
224
|
-
target: target,
|
|
225
|
-
tabIndex: tabIndex
|
|
226
|
-
}));
|
|
227
|
-
});
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
render() {
|
|
231
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
}
|
|
235
|
-
IconButton.defaultProps = {
|
|
236
|
-
color: "default",
|
|
237
|
-
kind: "primary",
|
|
238
|
-
light: false,
|
|
239
|
-
disabled: false
|
|
240
|
-
};
|
|
241
|
-
|
|
242
|
-
/***/ }),
|
|
243
|
-
/* 8 */
|
|
244
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
245
|
-
|
|
246
|
-
"use strict";
|
|
247
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButtonCore; });
|
|
248
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
249
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
250
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
251
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
252
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
253
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
254
|
-
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
|
|
255
|
-
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
|
|
256
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
|
|
257
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
|
|
258
|
-
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
|
|
259
|
-
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
|
|
260
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5);
|
|
261
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
|
|
262
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(4);
|
|
263
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
|
|
264
|
-
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(10);
|
|
265
|
-
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8__);
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("a");
|
|
276
|
-
const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("button");
|
|
277
|
-
const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
|
|
278
|
-
class IconButtonCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
279
|
-
renderInner(router) {
|
|
280
|
-
const {
|
|
281
|
-
skipClientNav,
|
|
282
|
-
color,
|
|
283
|
-
disabled,
|
|
284
|
-
focused,
|
|
285
|
-
hovered,
|
|
286
|
-
href,
|
|
287
|
-
icon,
|
|
288
|
-
kind,
|
|
289
|
-
light,
|
|
290
|
-
pressed,
|
|
291
|
-
style,
|
|
292
|
-
testId,
|
|
293
|
-
waiting: _,
|
|
294
|
-
...restProps
|
|
295
|
-
} = this.props;
|
|
296
|
-
const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__["SemanticColor"].controlDefault;
|
|
297
|
-
|
|
298
|
-
const buttonStyles = _generateStyles(buttonColor, kind, light);
|
|
299
|
-
|
|
300
|
-
const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
|
|
301
|
-
const child = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_8___default.a, {
|
|
302
|
-
size: "medium",
|
|
303
|
-
color: "currentColor",
|
|
304
|
-
icon: icon
|
|
305
|
-
});
|
|
306
|
-
const commonProps = {
|
|
307
|
-
"data-test-id": testId,
|
|
308
|
-
style: [defaultStyle, style],
|
|
309
|
-
...restProps
|
|
310
|
-
};
|
|
311
|
-
|
|
312
|
-
if (href && !disabled) {
|
|
313
|
-
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, {
|
|
314
|
-
to: href
|
|
315
|
-
}), child) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
|
|
316
|
-
href: href
|
|
317
|
-
}), child);
|
|
318
|
-
} else {
|
|
319
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledButton, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
|
|
320
|
-
type: "button"
|
|
321
|
-
}, commonProps, {
|
|
322
|
-
disabled: disabled
|
|
323
|
-
}), child);
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
render() {
|
|
328
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderInner(router));
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
}
|
|
332
|
-
const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
333
|
-
shared: {
|
|
334
|
-
position: "relative",
|
|
335
|
-
display: "inline-flex",
|
|
336
|
-
alignItems: "center",
|
|
337
|
-
justifyContent: "center",
|
|
338
|
-
boxSizing: "border-box",
|
|
339
|
-
height: 40,
|
|
340
|
-
width: 40,
|
|
341
|
-
padding: 0,
|
|
342
|
-
cursor: "pointer",
|
|
343
|
-
border: "none",
|
|
344
|
-
outline: "none",
|
|
345
|
-
textDecoration: "none",
|
|
346
|
-
background: "none",
|
|
347
|
-
margin: -8,
|
|
348
|
-
// This removes the 300ms click delay on mobile browsers by indicating that
|
|
349
|
-
// "double-tap to zoom" shouldn't be used on this element.
|
|
350
|
-
touchAction: "manipulation",
|
|
351
|
-
":focus": {
|
|
352
|
-
// Mobile: Removes a blue highlight style shown when the user clicks a button
|
|
353
|
-
WebkitTapHighlightColor: "rgba(0,0,0,0)"
|
|
354
|
-
}
|
|
355
|
-
},
|
|
356
|
-
disabled: {
|
|
357
|
-
cursor: "default"
|
|
358
|
-
}
|
|
359
|
-
});
|
|
360
|
-
const styles = {};
|
|
361
|
-
|
|
362
|
-
const _generateStyles = (color, kind, light) => {
|
|
363
|
-
const buttonType = color + kind + light.toString();
|
|
364
|
-
|
|
365
|
-
if (styles[buttonType]) {
|
|
366
|
-
return styles[buttonType];
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
if (light && kind !== "primary") {
|
|
370
|
-
throw new Error("Light is only supported for primary IconButtons");
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
const {
|
|
374
|
-
white,
|
|
375
|
-
offBlack32,
|
|
376
|
-
offBlack64,
|
|
377
|
-
offBlack
|
|
378
|
-
} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a;
|
|
379
|
-
const newStyles = {
|
|
380
|
-
default: {},
|
|
381
|
-
focus: {
|
|
382
|
-
color: light ? white : color,
|
|
383
|
-
borderWidth: 2,
|
|
384
|
-
borderColor: light ? white : color,
|
|
385
|
-
borderStyle: "solid",
|
|
386
|
-
borderRadius: 4
|
|
387
|
-
},
|
|
388
|
-
active: {
|
|
389
|
-
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),
|
|
390
|
-
borderWidth: 2,
|
|
391
|
-
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),
|
|
392
|
-
borderStyle: "solid",
|
|
393
|
-
borderRadius: 4
|
|
394
|
-
},
|
|
395
|
-
disabled: {
|
|
396
|
-
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,
|
|
397
|
-
cursor: "default"
|
|
398
|
-
}
|
|
399
|
-
};
|
|
400
|
-
|
|
401
|
-
if (kind === "primary") {
|
|
402
|
-
newStyles["default"] = {
|
|
403
|
-
color: light ? white : color
|
|
404
|
-
};
|
|
405
|
-
} else if (kind === "secondary") {
|
|
406
|
-
newStyles["default"] = {
|
|
407
|
-
color: offBlack
|
|
408
|
-
};
|
|
409
|
-
} else if (kind === "tertiary") {
|
|
410
|
-
newStyles["default"] = {
|
|
411
|
-
color: offBlack64
|
|
412
|
-
};
|
|
413
|
-
} else {
|
|
414
|
-
throw new Error("IconButton kind not recognized");
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
|
|
418
|
-
return styles[buttonType];
|
|
419
|
-
};
|
|
420
|
-
|
|
421
|
-
/***/ }),
|
|
422
|
-
/* 9 */
|
|
423
|
-
/***/ (function(module, exports) {
|
|
424
|
-
|
|
425
|
-
module.exports = require("react-router-dom");
|
|
426
|
-
|
|
427
|
-
/***/ }),
|
|
428
|
-
/* 10 */
|
|
429
|
-
/***/ (function(module, exports) {
|
|
430
|
-
|
|
431
|
-
module.exports = require("@khanacademy/wonder-blocks-icon");
|
|
432
|
-
|
|
433
|
-
/***/ }),
|
|
434
|
-
/* 11 */
|
|
435
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
436
|
-
|
|
437
|
-
"use strict";
|
|
438
|
-
__webpack_require__.r(__webpack_exports__);
|
|
439
|
-
/* harmony import */ var _components_icon_button_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
|
|
440
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_icon_button_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
/***/ })
|
|
446
|
-
/******/ ]);
|