@khanacademy/wonder-blocks-button 3.0.9 → 3.0.10
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 +13 -0
- package/package.json +7 -7
- package/src/components/__tests__/button.test.js +22 -26
- package/dist/index.js +0 -663
- package/dist/index.js.flow +0 -2
- package/docs.md +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-button
|
|
2
2
|
|
|
3
|
+
## 3.0.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b561425a]
|
|
8
|
+
- Updated dependencies [a566e232]
|
|
9
|
+
- Updated dependencies [d2b21a6e]
|
|
10
|
+
- @khanacademy/wonder-blocks-core@4.6.0
|
|
11
|
+
- @khanacademy/wonder-blocks-clickable@2.4.2
|
|
12
|
+
- @khanacademy/wonder-blocks-icon@1.2.33
|
|
13
|
+
- @khanacademy/wonder-blocks-progress-spinner@1.1.37
|
|
14
|
+
- @khanacademy/wonder-blocks-typography@1.1.35
|
|
15
|
+
|
|
3
16
|
## 3.0.9
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-button",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.10",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -16,13 +16,13 @@
|
|
|
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.2",
|
|
20
20
|
"@khanacademy/wonder-blocks-color": "^1.2.0",
|
|
21
|
-
"@khanacademy/wonder-blocks-core": "^4.
|
|
22
|
-
"@khanacademy/wonder-blocks-icon": "^1.2.
|
|
23
|
-
"@khanacademy/wonder-blocks-progress-spinner": "^1.1.
|
|
21
|
+
"@khanacademy/wonder-blocks-core": "^4.6.0",
|
|
22
|
+
"@khanacademy/wonder-blocks-icon": "^1.2.33",
|
|
23
|
+
"@khanacademy/wonder-blocks-progress-spinner": "^1.1.37",
|
|
24
24
|
"@khanacademy/wonder-blocks-spacing": "^3.0.5",
|
|
25
|
-
"@khanacademy/wonder-blocks-typography": "^1.1.
|
|
25
|
+
"@khanacademy/wonder-blocks-typography": "^1.1.35"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"aphrodite": "^1.2.5",
|
|
@@ -31,6 +31,6 @@
|
|
|
31
31
|
"react-router-dom": "5.3.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"wb-dev-build-settings": "^0.
|
|
34
|
+
"wb-dev-build-settings": "^0.5.0"
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -114,11 +114,10 @@ describe("Button", () => {
|
|
|
114
114
|
);
|
|
115
115
|
|
|
116
116
|
// Act
|
|
117
|
-
|
|
118
|
-
userEvent.click(button);
|
|
117
|
+
userEvent.click(screen.getByRole("button"));
|
|
119
118
|
|
|
120
119
|
// Assert
|
|
121
|
-
waitFor(() => {
|
|
120
|
+
await waitFor(() => {
|
|
122
121
|
expect(screen.getByText("Hello, world!")).toBeInTheDocument();
|
|
123
122
|
});
|
|
124
123
|
});
|
|
@@ -146,11 +145,10 @@ describe("Button", () => {
|
|
|
146
145
|
);
|
|
147
146
|
|
|
148
147
|
// Act
|
|
149
|
-
|
|
150
|
-
userEvent.click(button);
|
|
148
|
+
userEvent.click(screen.getByRole("button"));
|
|
151
149
|
|
|
152
150
|
// Assert
|
|
153
|
-
waitFor(() => {
|
|
151
|
+
await waitFor(() => {
|
|
154
152
|
expect(safeWithNavMock).toHaveBeenCalled();
|
|
155
153
|
});
|
|
156
154
|
});
|
|
@@ -204,16 +202,15 @@ describe("Button", () => {
|
|
|
204
202
|
);
|
|
205
203
|
|
|
206
204
|
// Act
|
|
207
|
-
|
|
208
|
-
userEvent.click(button);
|
|
205
|
+
userEvent.click(screen.getByRole("button"));
|
|
209
206
|
|
|
210
207
|
// Assert
|
|
211
|
-
waitFor(() => {
|
|
208
|
+
await waitFor(() => {
|
|
212
209
|
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
213
210
|
});
|
|
214
211
|
});
|
|
215
212
|
|
|
216
|
-
test("safeWithNav with skipClientNav=true shows spinner",
|
|
213
|
+
test("safeWithNav with skipClientNav=true shows spinner", () => {
|
|
217
214
|
// Arrange
|
|
218
215
|
jest.spyOn(window.location, "assign");
|
|
219
216
|
render(
|
|
@@ -271,12 +268,12 @@ describe("Button", () => {
|
|
|
271
268
|
userEvent.click(button);
|
|
272
269
|
|
|
273
270
|
// Assert
|
|
274
|
-
waitFor(() => {
|
|
271
|
+
await waitFor(() => {
|
|
275
272
|
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
276
273
|
});
|
|
277
274
|
});
|
|
278
275
|
|
|
279
|
-
test("safeWithNav with skipClientNav=true waits for promise rejection",
|
|
276
|
+
test("safeWithNav with skipClientNav=true waits for promise rejection", () => {
|
|
280
277
|
// Arrange
|
|
281
278
|
jest.spyOn(window.location, "assign");
|
|
282
279
|
render(
|
|
@@ -306,7 +303,7 @@ describe("Button", () => {
|
|
|
306
303
|
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
307
304
|
});
|
|
308
305
|
|
|
309
|
-
test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate",
|
|
306
|
+
test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", () => {
|
|
310
307
|
// Arrange
|
|
311
308
|
jest.spyOn(window.location, "assign");
|
|
312
309
|
const safeWithNavMock = jest.fn();
|
|
@@ -363,14 +360,13 @@ describe("Button", () => {
|
|
|
363
360
|
);
|
|
364
361
|
|
|
365
362
|
// Act
|
|
366
|
-
|
|
367
|
-
userEvent.click(button);
|
|
363
|
+
userEvent.click(screen.getByRole("button"));
|
|
368
364
|
|
|
369
365
|
// Assert
|
|
370
|
-
waitFor(() => {
|
|
366
|
+
await waitFor(() => {
|
|
371
367
|
expect(safeWithNavMock).toHaveBeenCalled();
|
|
372
368
|
});
|
|
373
|
-
waitFor(() => {
|
|
369
|
+
await waitFor(() => {
|
|
374
370
|
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
375
371
|
});
|
|
376
372
|
});
|
|
@@ -583,7 +579,7 @@ describe("Button", () => {
|
|
|
583
579
|
expect(screen.getByText("Hello, world!")).toBeInTheDocument();
|
|
584
580
|
});
|
|
585
581
|
|
|
586
|
-
test("beforeNav rejection blocks client-side navigation ",
|
|
582
|
+
test("beforeNav rejection blocks client-side navigation ", () => {
|
|
587
583
|
// Arrange
|
|
588
584
|
render(
|
|
589
585
|
<MemoryRouter>
|
|
@@ -633,12 +629,12 @@ describe("Button", () => {
|
|
|
633
629
|
userEvent.type(button, "{enter}");
|
|
634
630
|
|
|
635
631
|
// Assert
|
|
636
|
-
waitFor(() => {
|
|
632
|
+
await waitFor(() => {
|
|
637
633
|
expect(screen.getByText("Hello, world!")).toBeInTheDocument();
|
|
638
634
|
});
|
|
639
635
|
});
|
|
640
636
|
|
|
641
|
-
test("safeWithNav with skipClientNav=true waits for promise resolution",
|
|
637
|
+
test("safeWithNav with skipClientNav=true waits for promise resolution", () => {
|
|
642
638
|
// Arrange
|
|
643
639
|
jest.spyOn(window.location, "assign");
|
|
644
640
|
render(
|
|
@@ -695,7 +691,7 @@ describe("Button", () => {
|
|
|
695
691
|
userEvent.type(button, "{enter}");
|
|
696
692
|
|
|
697
693
|
// Assert
|
|
698
|
-
waitFor(() => {
|
|
694
|
+
await waitFor(() => {
|
|
699
695
|
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
700
696
|
});
|
|
701
697
|
});
|
|
@@ -728,17 +724,17 @@ describe("Button", () => {
|
|
|
728
724
|
userEvent.type(button, "{enter}");
|
|
729
725
|
|
|
730
726
|
// Assert
|
|
731
|
-
waitFor(() => {
|
|
727
|
+
await waitFor(() => {
|
|
732
728
|
expect(safeWithNavMock).toHaveBeenCalled();
|
|
733
729
|
});
|
|
734
|
-
waitFor(() => {
|
|
730
|
+
await waitFor(() => {
|
|
735
731
|
expect(window.location.assign).toHaveBeenCalledWith("/foo");
|
|
736
732
|
});
|
|
737
733
|
});
|
|
738
734
|
});
|
|
739
735
|
|
|
740
736
|
describe("button focus", () => {
|
|
741
|
-
test("primary button can have focus",
|
|
737
|
+
test("primary button can have focus", () => {
|
|
742
738
|
// Arrange
|
|
743
739
|
render(<Button testId={"button-focus-test"}>Label</Button>);
|
|
744
740
|
|
|
@@ -750,7 +746,7 @@ describe("Button", () => {
|
|
|
750
746
|
expect(button).toHaveFocus();
|
|
751
747
|
});
|
|
752
748
|
|
|
753
|
-
test("primary button can have focus when disabled",
|
|
749
|
+
test("primary button can have focus when disabled", () => {
|
|
754
750
|
// Arrange
|
|
755
751
|
render(
|
|
756
752
|
<Button disabled={true} testId={"button-focus-test"}>
|
|
@@ -766,7 +762,7 @@ describe("Button", () => {
|
|
|
766
762
|
expect(button).toHaveFocus();
|
|
767
763
|
});
|
|
768
764
|
|
|
769
|
-
test("tertiary button can have focus when disabled",
|
|
765
|
+
test("tertiary button can have focus when disabled", () => {
|
|
770
766
|
// Arrange
|
|
771
767
|
render(
|
|
772
768
|
<Button
|
package/dist/index.js
DELETED
|
@@ -1,663 +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 = 14);
|
|
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("@khanacademy/wonder-blocks-spacing");
|
|
125
|
-
|
|
126
|
-
/***/ }),
|
|
127
|
-
/* 4 */
|
|
128
|
-
/***/ (function(module, exports) {
|
|
129
|
-
|
|
130
|
-
module.exports = require("react-router");
|
|
131
|
-
|
|
132
|
-
/***/ }),
|
|
133
|
-
/* 5 */
|
|
134
|
-
/***/ (function(module, exports) {
|
|
135
|
-
|
|
136
|
-
module.exports = require("@khanacademy/wonder-blocks-clickable");
|
|
137
|
-
|
|
138
|
-
/***/ }),
|
|
139
|
-
/* 6 */
|
|
140
|
-
/***/ (function(module, exports) {
|
|
141
|
-
|
|
142
|
-
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
143
|
-
|
|
144
|
-
/***/ }),
|
|
145
|
-
/* 7 */
|
|
146
|
-
/***/ (function(module, exports) {
|
|
147
|
-
|
|
148
|
-
module.exports = require("aphrodite");
|
|
149
|
-
|
|
150
|
-
/***/ }),
|
|
151
|
-
/* 8 */
|
|
152
|
-
/***/ (function(module, exports) {
|
|
153
|
-
|
|
154
|
-
module.exports = require("@khanacademy/wonder-blocks-typography");
|
|
155
|
-
|
|
156
|
-
/***/ }),
|
|
157
|
-
/* 9 */
|
|
158
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
159
|
-
|
|
160
|
-
"use strict";
|
|
161
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Button; });
|
|
162
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
163
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
164
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
165
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
166
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
|
|
167
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_2__);
|
|
168
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
|
|
169
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__);
|
|
170
|
-
/* harmony import */ var _button_core_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
/**
|
|
178
|
-
* Reusable button component.
|
|
179
|
-
*
|
|
180
|
-
* Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
|
|
181
|
-
* `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
|
|
182
|
-
* `ButtonCore` is a stateless component which displays the different states
|
|
183
|
-
* the `Button` can take.
|
|
184
|
-
*
|
|
185
|
-
* ### Usage
|
|
186
|
-
*
|
|
187
|
-
* ```jsx
|
|
188
|
-
* import Button from "@khanacademy/wonder-blocks-button";
|
|
189
|
-
*
|
|
190
|
-
* <Button
|
|
191
|
-
* onClick={(e) => console.log("Hello, world!")}
|
|
192
|
-
* >
|
|
193
|
-
* Hello, world!
|
|
194
|
-
* </Button>
|
|
195
|
-
* ```
|
|
196
|
-
*/
|
|
197
|
-
class Button extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
198
|
-
renderClickableBehavior(router) {
|
|
199
|
-
const {
|
|
200
|
-
href = undefined,
|
|
201
|
-
type = undefined,
|
|
202
|
-
children,
|
|
203
|
-
skipClientNav,
|
|
204
|
-
spinner,
|
|
205
|
-
disabled,
|
|
206
|
-
onClick,
|
|
207
|
-
beforeNav = undefined,
|
|
208
|
-
safeWithNav = undefined,
|
|
209
|
-
tabIndex,
|
|
210
|
-
target,
|
|
211
|
-
rel,
|
|
212
|
-
...sharedButtonCoreProps
|
|
213
|
-
} = this.props;
|
|
214
|
-
const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_3__["getClickableBehavior"])(href, skipClientNav, router);
|
|
215
|
-
|
|
216
|
-
const renderProp = (state, { ...restChildProps
|
|
217
|
-
}) => {
|
|
218
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_button_core_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedButtonCoreProps, state, restChildProps, {
|
|
219
|
-
disabled: disabled,
|
|
220
|
-
spinner: spinner || state.waiting,
|
|
221
|
-
skipClientNav: skipClientNav,
|
|
222
|
-
href: href,
|
|
223
|
-
target: target,
|
|
224
|
-
type: type,
|
|
225
|
-
tabIndex: tabIndex
|
|
226
|
-
}), children);
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
if (beforeNav) {
|
|
230
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
|
|
231
|
-
disabled: spinner || disabled,
|
|
232
|
-
href: href,
|
|
233
|
-
role: "button",
|
|
234
|
-
type: type,
|
|
235
|
-
onClick: onClick,
|
|
236
|
-
beforeNav: beforeNav,
|
|
237
|
-
safeWithNav: safeWithNav,
|
|
238
|
-
rel: rel
|
|
239
|
-
}, renderProp);
|
|
240
|
-
} else {
|
|
241
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
|
|
242
|
-
disabled: spinner || disabled,
|
|
243
|
-
href: href,
|
|
244
|
-
role: "button",
|
|
245
|
-
type: type,
|
|
246
|
-
onClick: onClick,
|
|
247
|
-
safeWithNav: safeWithNav,
|
|
248
|
-
target: target,
|
|
249
|
-
rel: rel
|
|
250
|
-
}, renderProp);
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
render() {
|
|
255
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_2__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
}
|
|
259
|
-
Button.defaultProps = {
|
|
260
|
-
color: "default",
|
|
261
|
-
kind: "primary",
|
|
262
|
-
light: false,
|
|
263
|
-
size: "medium",
|
|
264
|
-
disabled: false,
|
|
265
|
-
spinner: false
|
|
266
|
-
};
|
|
267
|
-
|
|
268
|
-
/***/ }),
|
|
269
|
-
/* 10 */
|
|
270
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
271
|
-
|
|
272
|
-
"use strict";
|
|
273
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ButtonCore; });
|
|
274
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|
275
|
-
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
276
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
277
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
278
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
|
|
279
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
280
|
-
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11);
|
|
281
|
-
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
|
|
282
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
|
|
283
|
-
/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
|
|
284
|
-
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8);
|
|
285
|
-
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
|
|
286
|
-
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
|
|
287
|
-
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__);
|
|
288
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(6);
|
|
289
|
-
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_7__);
|
|
290
|
-
/* harmony import */ var _khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);
|
|
291
|
-
/* harmony import */ var _khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_8__);
|
|
292
|
-
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(13);
|
|
293
|
-
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_9__);
|
|
294
|
-
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(3);
|
|
295
|
-
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10__);
|
|
296
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(5);
|
|
297
|
-
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_11__);
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_7__["addStyle"])("a");
|
|
311
|
-
const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_7__["addStyle"])("button");
|
|
312
|
-
const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_7__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"]);
|
|
313
|
-
class ButtonCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
314
|
-
renderInner(router) {
|
|
315
|
-
const {
|
|
316
|
-
children,
|
|
317
|
-
skipClientNav,
|
|
318
|
-
color,
|
|
319
|
-
disabled: disabledProp,
|
|
320
|
-
focused,
|
|
321
|
-
hovered,
|
|
322
|
-
href = undefined,
|
|
323
|
-
kind,
|
|
324
|
-
light,
|
|
325
|
-
pressed,
|
|
326
|
-
size,
|
|
327
|
-
style,
|
|
328
|
-
testId,
|
|
329
|
-
type = undefined,
|
|
330
|
-
spinner,
|
|
331
|
-
icon,
|
|
332
|
-
id,
|
|
333
|
-
waiting: _,
|
|
334
|
-
...restProps
|
|
335
|
-
} = this.props;
|
|
336
|
-
const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["SemanticColor"].controlDefault;
|
|
337
|
-
const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
|
|
338
|
-
|
|
339
|
-
const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
|
|
340
|
-
|
|
341
|
-
const disabled = spinner || disabledProp;
|
|
342
|
-
const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, // apply focus effect only to default and secondary buttons
|
|
343
|
-
kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
|
|
344
|
-
const commonProps = {
|
|
345
|
-
"data-test-id": testId,
|
|
346
|
-
id: id,
|
|
347
|
-
role: "button",
|
|
348
|
-
style: [defaultStyle, style],
|
|
349
|
-
...restProps
|
|
350
|
-
};
|
|
351
|
-
const Label = size === "small" ? _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelSmall"] : _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelLarge"]; // We have to use `medium` for both md and lg buttons so we can fit the
|
|
352
|
-
// icons in large buttons.
|
|
353
|
-
|
|
354
|
-
const iconSize = size === "small" ? "small" : "medium";
|
|
355
|
-
const label = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](Label, {
|
|
356
|
-
style: [sharedStyles.text, size === "large" && sharedStyles.largeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, // apply focus effect on the label instead
|
|
357
|
-
kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]
|
|
358
|
-
}, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_9___default.a, {
|
|
359
|
-
size: iconSize,
|
|
360
|
-
color: "currentColor",
|
|
361
|
-
icon: icon,
|
|
362
|
-
style: sharedStyles.icon
|
|
363
|
-
}), children);
|
|
364
|
-
const contents = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, label, spinner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_progress_spinner__WEBPACK_IMPORTED_MODULE_8__["CircularSpinner"], {
|
|
365
|
-
style: sharedStyles.spinner,
|
|
366
|
-
size: {
|
|
367
|
-
medium: "small",
|
|
368
|
-
small: "xsmall",
|
|
369
|
-
large: "medium"
|
|
370
|
-
}[size],
|
|
371
|
-
light: kind === "primary",
|
|
372
|
-
testId: `${testId || "button"}-spinner`
|
|
373
|
-
}));
|
|
374
|
-
|
|
375
|
-
if (href && !disabled) {
|
|
376
|
-
return router && !skipClientNav && Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_11__["isClientSideUrl"])(href) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledLink, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
|
|
377
|
-
to: href
|
|
378
|
-
}), contents) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledAnchor, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, commonProps, {
|
|
379
|
-
href: href
|
|
380
|
-
}), contents);
|
|
381
|
-
} else {
|
|
382
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledButton, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
|
|
383
|
-
type: type || "button"
|
|
384
|
-
}, commonProps, {
|
|
385
|
-
"aria-disabled": disabled
|
|
386
|
-
}), contents);
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
render() {
|
|
391
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_4__["__RouterContext"].Consumer, null, router => this.renderInner(router));
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
}
|
|
395
|
-
const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
396
|
-
shared: {
|
|
397
|
-
position: "relative",
|
|
398
|
-
display: "inline-flex",
|
|
399
|
-
alignItems: "center",
|
|
400
|
-
justifyContent: "center",
|
|
401
|
-
height: 40,
|
|
402
|
-
paddingTop: 0,
|
|
403
|
-
paddingBottom: 0,
|
|
404
|
-
paddingLeft: 16,
|
|
405
|
-
paddingRight: 16,
|
|
406
|
-
border: "none",
|
|
407
|
-
borderRadius: 4,
|
|
408
|
-
cursor: "pointer",
|
|
409
|
-
outline: "none",
|
|
410
|
-
textDecoration: "none",
|
|
411
|
-
boxSizing: "border-box",
|
|
412
|
-
// This removes the 300ms click delay on mobile browsers by indicating that
|
|
413
|
-
// "double-tap to zoom" shouldn't be used on this element.
|
|
414
|
-
touchAction: "manipulation",
|
|
415
|
-
userSelect: "none",
|
|
416
|
-
":focus": {
|
|
417
|
-
// Mobile: Removes a blue highlight style shown when the user clicks a button
|
|
418
|
-
WebkitTapHighlightColor: "rgba(0,0,0,0)"
|
|
419
|
-
}
|
|
420
|
-
},
|
|
421
|
-
withIcon: {
|
|
422
|
-
// The left padding for the button with icon should have 4px less padding
|
|
423
|
-
paddingLeft: 12
|
|
424
|
-
},
|
|
425
|
-
disabled: {
|
|
426
|
-
cursor: "auto"
|
|
427
|
-
},
|
|
428
|
-
small: {
|
|
429
|
-
height: 32
|
|
430
|
-
},
|
|
431
|
-
large: {
|
|
432
|
-
borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10___default.a.xxSmall_6,
|
|
433
|
-
height: 56
|
|
434
|
-
},
|
|
435
|
-
text: {
|
|
436
|
-
alignItems: "center",
|
|
437
|
-
fontWeight: "bold",
|
|
438
|
-
whiteSpace: "nowrap",
|
|
439
|
-
overflow: "hidden",
|
|
440
|
-
textOverflow: "ellipsis",
|
|
441
|
-
display: "inline-block",
|
|
442
|
-
// allows the button text to truncate
|
|
443
|
-
pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
|
|
444
|
-
|
|
445
|
-
},
|
|
446
|
-
largeText: {
|
|
447
|
-
fontSize: 18,
|
|
448
|
-
lineHeight: "20px"
|
|
449
|
-
},
|
|
450
|
-
textWithIcon: {
|
|
451
|
-
display: "flex" // allows the text and icon to sit nicely together
|
|
452
|
-
|
|
453
|
-
},
|
|
454
|
-
textWithFocus: {
|
|
455
|
-
position: "relative" // allows the tertiary button border to use the label width
|
|
456
|
-
|
|
457
|
-
},
|
|
458
|
-
hiddenText: {
|
|
459
|
-
visibility: "hidden"
|
|
460
|
-
},
|
|
461
|
-
spinner: {
|
|
462
|
-
position: "absolute"
|
|
463
|
-
},
|
|
464
|
-
icon: {
|
|
465
|
-
paddingRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10___default.a.xSmall_8
|
|
466
|
-
}
|
|
467
|
-
});
|
|
468
|
-
const styles = {};
|
|
469
|
-
|
|
470
|
-
const _generateStyles = (color, kind, light, iconWidth, size) => {
|
|
471
|
-
const buttonType = color + kind + light.toString() + iconWidth.toString() + size;
|
|
472
|
-
|
|
473
|
-
if (styles[buttonType]) {
|
|
474
|
-
return styles[buttonType];
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
const {
|
|
478
|
-
white,
|
|
479
|
-
white50,
|
|
480
|
-
white64,
|
|
481
|
-
offBlack32,
|
|
482
|
-
offBlack50,
|
|
483
|
-
darkBlue
|
|
484
|
-
} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6___default.a;
|
|
485
|
-
const fadedColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["fade"])(color, 0.32), white);
|
|
486
|
-
const activeColor = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_6__["mix"])(offBlack32, color);
|
|
487
|
-
const padding = size === "large" ? _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10___default.a.xLarge_32 : _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_10___default.a.medium_16;
|
|
488
|
-
let newStyles = {};
|
|
489
|
-
|
|
490
|
-
if (kind === "primary") {
|
|
491
|
-
newStyles = {
|
|
492
|
-
default: {
|
|
493
|
-
background: light ? white : color,
|
|
494
|
-
color: light ? color : white,
|
|
495
|
-
paddingLeft: padding,
|
|
496
|
-
paddingRight: padding
|
|
497
|
-
},
|
|
498
|
-
focus: {
|
|
499
|
-
// This assumes a background of white for the regular button and
|
|
500
|
-
// a background of darkBlue for the light version. The inner
|
|
501
|
-
// box shadow/ring is also small enough for a slight variation
|
|
502
|
-
// in the background color not to matter too much.
|
|
503
|
-
boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? white : color}`
|
|
504
|
-
},
|
|
505
|
-
active: {
|
|
506
|
-
boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? fadedColor : activeColor}`,
|
|
507
|
-
background: light ? fadedColor : activeColor,
|
|
508
|
-
color: light ? activeColor : fadedColor
|
|
509
|
-
},
|
|
510
|
-
disabled: {
|
|
511
|
-
background: light ? fadedColor : offBlack32,
|
|
512
|
-
color: light ? color : white64,
|
|
513
|
-
cursor: "default",
|
|
514
|
-
":focus": {
|
|
515
|
-
boxShadow: `0 0 0 1px ${light ? offBlack32 : white}, 0 0 0 3px ${light ? fadedColor : offBlack32}`
|
|
516
|
-
}
|
|
517
|
-
}
|
|
518
|
-
};
|
|
519
|
-
} else if (kind === "secondary") {
|
|
520
|
-
newStyles = {
|
|
521
|
-
default: {
|
|
522
|
-
background: "none",
|
|
523
|
-
color: light ? white : color,
|
|
524
|
-
borderColor: light ? white50 : offBlack50,
|
|
525
|
-
borderStyle: "solid",
|
|
526
|
-
borderWidth: 1,
|
|
527
|
-
paddingLeft: iconWidth ? padding - 4 : padding,
|
|
528
|
-
paddingRight: padding
|
|
529
|
-
},
|
|
530
|
-
focus: {
|
|
531
|
-
background: light ? "transparent" : white,
|
|
532
|
-
borderColor: light ? white : color,
|
|
533
|
-
borderWidth: 2,
|
|
534
|
-
// The left padding for the button with icon should have 4px
|
|
535
|
-
// less padding
|
|
536
|
-
paddingLeft: iconWidth ? padding - 5 : padding - 1,
|
|
537
|
-
paddingRight: padding - 1
|
|
538
|
-
},
|
|
539
|
-
active: {
|
|
540
|
-
background: light ? activeColor : fadedColor,
|
|
541
|
-
color: light ? fadedColor : activeColor,
|
|
542
|
-
borderColor: light ? fadedColor : activeColor,
|
|
543
|
-
borderWidth: 2,
|
|
544
|
-
// We need to reduce padding to offset the difference
|
|
545
|
-
// caused by the border becoming thicker on focus.
|
|
546
|
-
// The left padding for the button with icon should have 4px
|
|
547
|
-
// less padding
|
|
548
|
-
paddingLeft: iconWidth ? padding - 5 : padding - 1,
|
|
549
|
-
paddingRight: padding - 1
|
|
550
|
-
},
|
|
551
|
-
disabled: {
|
|
552
|
-
color: light ? white50 : offBlack32,
|
|
553
|
-
borderColor: light ? fadedColor : offBlack32,
|
|
554
|
-
cursor: "default",
|
|
555
|
-
":focus": {
|
|
556
|
-
borderColor: light ? white50 : offBlack32,
|
|
557
|
-
borderWidth: 2,
|
|
558
|
-
// We need to reduce padding to offset the difference
|
|
559
|
-
// caused by the border becoming thicker on focus.
|
|
560
|
-
// The left padding for the button with icon should have 4px
|
|
561
|
-
// less padding
|
|
562
|
-
paddingLeft: iconWidth ? padding - 5 : padding - 1,
|
|
563
|
-
paddingRight: padding - 1
|
|
564
|
-
}
|
|
565
|
-
}
|
|
566
|
-
};
|
|
567
|
-
} else if (kind === "tertiary") {
|
|
568
|
-
newStyles = {
|
|
569
|
-
default: {
|
|
570
|
-
background: "none",
|
|
571
|
-
color: light ? white : color,
|
|
572
|
-
paddingLeft: 0,
|
|
573
|
-
paddingRight: 0
|
|
574
|
-
},
|
|
575
|
-
focus: {
|
|
576
|
-
":after": {
|
|
577
|
-
content: "''",
|
|
578
|
-
position: "absolute",
|
|
579
|
-
height: 2,
|
|
580
|
-
width: `calc(100% - ${iconWidth}px)`,
|
|
581
|
-
right: 0,
|
|
582
|
-
bottom: 0,
|
|
583
|
-
background: light ? white : color,
|
|
584
|
-
borderRadius: 2
|
|
585
|
-
}
|
|
586
|
-
},
|
|
587
|
-
active: {
|
|
588
|
-
color: light ? fadedColor : activeColor,
|
|
589
|
-
":after": {
|
|
590
|
-
content: "''",
|
|
591
|
-
position: "absolute",
|
|
592
|
-
height: 2,
|
|
593
|
-
width: `calc(100% - ${iconWidth}px)`,
|
|
594
|
-
right: 0,
|
|
595
|
-
bottom: -1,
|
|
596
|
-
background: light ? fadedColor : activeColor,
|
|
597
|
-
borderRadius: 2
|
|
598
|
-
}
|
|
599
|
-
},
|
|
600
|
-
disabled: {
|
|
601
|
-
color: light ? fadedColor : offBlack32,
|
|
602
|
-
cursor: "default",
|
|
603
|
-
":focus": {
|
|
604
|
-
":after": {
|
|
605
|
-
content: "''",
|
|
606
|
-
position: "absolute",
|
|
607
|
-
height: 2,
|
|
608
|
-
width: `calc(100% - ${iconWidth}px)`,
|
|
609
|
-
right: 0,
|
|
610
|
-
|
|
611
|
-
/**
|
|
612
|
-
* For tertiary buttons, underline is applied to the
|
|
613
|
-
* internal `span` element, So we need to calculate the
|
|
614
|
-
* offset to center the line in the button (right after
|
|
615
|
-
* the span).
|
|
616
|
-
*/
|
|
617
|
-
bottom: `calc(50% - 11px)`,
|
|
618
|
-
background: light ? white : offBlack32,
|
|
619
|
-
borderRadius: 2
|
|
620
|
-
}
|
|
621
|
-
}
|
|
622
|
-
}
|
|
623
|
-
};
|
|
624
|
-
} else {
|
|
625
|
-
throw new Error("Button kind not recognized");
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
styles[buttonType] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
|
|
629
|
-
return styles[buttonType];
|
|
630
|
-
};
|
|
631
|
-
|
|
632
|
-
/***/ }),
|
|
633
|
-
/* 11 */
|
|
634
|
-
/***/ (function(module, exports) {
|
|
635
|
-
|
|
636
|
-
module.exports = require("react-router-dom");
|
|
637
|
-
|
|
638
|
-
/***/ }),
|
|
639
|
-
/* 12 */
|
|
640
|
-
/***/ (function(module, exports) {
|
|
641
|
-
|
|
642
|
-
module.exports = require("@khanacademy/wonder-blocks-progress-spinner");
|
|
643
|
-
|
|
644
|
-
/***/ }),
|
|
645
|
-
/* 13 */
|
|
646
|
-
/***/ (function(module, exports) {
|
|
647
|
-
|
|
648
|
-
module.exports = require("@khanacademy/wonder-blocks-icon");
|
|
649
|
-
|
|
650
|
-
/***/ }),
|
|
651
|
-
/* 14 */
|
|
652
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
653
|
-
|
|
654
|
-
"use strict";
|
|
655
|
-
__webpack_require__.r(__webpack_exports__);
|
|
656
|
-
/* harmony import */ var _components_button_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
|
|
657
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _components_button_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
/***/ })
|
|
663
|
-
/******/ ]);
|
package/dist/index.js.flow
DELETED
package/docs.md
DELETED