@khanacademy/wonder-blocks-banner 1.2.2 → 1.2.4

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/package.json +8 -8
  3. package/dist/index.js +0 -457
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @khanacademy/wonder-blocks-banner
2
2
 
3
+ ## 1.2.4
4
+
5
+ ### Patch Changes
6
+
7
+ - @khanacademy/wonder-blocks-button@3.0.11
8
+ - @khanacademy/wonder-blocks-core@4.6.1
9
+ - @khanacademy/wonder-blocks-icon@1.2.34
10
+ - @khanacademy/wonder-blocks-icon-button@3.4.18
11
+ - @khanacademy/wonder-blocks-link@3.8.16
12
+ - @khanacademy/wonder-blocks-typography@1.1.36
13
+
14
+ ## 1.2.3
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies [b561425a]
19
+ - Updated dependencies [a566e232]
20
+ - Updated dependencies [d2b21a6e]
21
+ - @khanacademy/wonder-blocks-core@4.6.0
22
+ - @khanacademy/wonder-blocks-button@3.0.10
23
+ - @khanacademy/wonder-blocks-icon@1.2.33
24
+ - @khanacademy/wonder-blocks-icon-button@3.4.17
25
+ - @khanacademy/wonder-blocks-link@3.8.15
26
+ - @khanacademy/wonder-blocks-typography@1.1.35
27
+
3
28
  ## 1.2.2
4
29
 
5
30
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-banner",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "design": "v1",
5
5
  "description": "Banner components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -16,20 +16,20 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
- "@khanacademy/wonder-blocks-button": "^3.0.9",
19
+ "@khanacademy/wonder-blocks-button": "^3.0.11",
20
20
  "@khanacademy/wonder-blocks-color": "^1.2.0",
21
- "@khanacademy/wonder-blocks-core": "^4.5.0",
22
- "@khanacademy/wonder-blocks-icon": "^1.2.32",
23
- "@khanacademy/wonder-blocks-icon-button": "^3.4.16",
24
- "@khanacademy/wonder-blocks-link": "^3.8.14",
21
+ "@khanacademy/wonder-blocks-core": "^4.6.1",
22
+ "@khanacademy/wonder-blocks-icon": "^1.2.34",
23
+ "@khanacademy/wonder-blocks-icon-button": "^3.4.18",
24
+ "@khanacademy/wonder-blocks-link": "^3.8.16",
25
25
  "@khanacademy/wonder-blocks-spacing": "^3.0.5",
26
- "@khanacademy/wonder-blocks-typography": "^1.1.34"
26
+ "@khanacademy/wonder-blocks-typography": "^1.1.36"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "aphrodite": "^1.2.5",
30
30
  "react": "16.14.0"
31
31
  },
32
32
  "devDependencies": {
33
- "wb-dev-build-settings": "^0.4.0"
33
+ "wb-dev-build-settings": "^0.6.0"
34
34
  }
35
35
  }
package/dist/index.js DELETED
@@ -1,457 +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 = 12);
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-spacing");
99
-
100
- /***/ }),
101
- /* 2 */
102
- /***/ (function(module, exports) {
103
-
104
- module.exports = require("@khanacademy/wonder-blocks-core");
105
-
106
- /***/ }),
107
- /* 3 */
108
- /***/ (function(module, exports) {
109
-
110
- module.exports = require("@khanacademy/wonder-blocks-color");
111
-
112
- /***/ }),
113
- /* 4 */
114
- /***/ (function(module, exports) {
115
-
116
- module.exports = require("@khanacademy/wonder-blocks-icon");
117
-
118
- /***/ }),
119
- /* 5 */
120
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
121
-
122
- "use strict";
123
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
124
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
125
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
126
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
127
- /* harmony import */ var _khanacademy_wonder_blocks_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
128
- /* harmony import */ var _khanacademy_wonder_blocks_button__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_button__WEBPACK_IMPORTED_MODULE_2__);
129
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
130
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
131
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
132
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
133
- /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
134
- /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
135
- /* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
136
- /* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_6__);
137
- /* harmony import */ var _khanacademy_wonder_blocks_link__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
138
- /* harmony import */ var _khanacademy_wonder_blocks_link__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_link__WEBPACK_IMPORTED_MODULE_7__);
139
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
140
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__);
141
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10);
142
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__);
143
- /* harmony import */ var _banner_icons_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(11);
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
- const valuesForKind = kind => {
157
- switch (kind) {
158
- case "success":
159
- return {
160
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.green,
161
- role: "status"
162
- };
163
-
164
- case "warning":
165
- return {
166
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.gold,
167
- role: "alert",
168
- ariaLive: "polite"
169
- };
170
-
171
- case "critical":
172
- return {
173
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red,
174
- role: "alert"
175
- };
176
-
177
- default:
178
- return {
179
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.blue,
180
- role: "status"
181
- };
182
- }
183
- };
184
- /**
185
- * Banner. A banner displays a prominent message and related optional actions.
186
- * It can be used as a way of informing the user of important changes.
187
- * Typically, it is displayed toward the top of the screen.
188
- *
189
- * There are two possible layouts for banners - floating and full-width.
190
- * The `floating` layout is intended to be used when there is whitespace
191
- * around the banner. The `full-width` layout is intended to be used when
192
- * the banner needs to be flush with surrounding elements.
193
- *
194
- * ### Usage
195
- * ```jsx
196
- * import Banner from "@khanacademy/wonder-blocks-banner";
197
- *
198
- * <Banner
199
- * text="Here is some example text."
200
- * kind="success"
201
- * layout="floating"
202
- * actions={[
203
- * {title: "Button 1", onClick: () => {}},
204
- * {title: "Button 2", onClick: () => {}},
205
- * ]}
206
- * onDismiss={() => {console.log("Has been dismissed.")}}
207
- * />
208
- * ```
209
- */
210
-
211
-
212
- const Banner = props => {
213
- const {
214
- actions,
215
- // Suppressing lint on the next line because it's saying `aria-label`
216
- // is missing in props validation when it's not.
217
- // eslint-disable-next-line react/prop-types
218
- "aria-label": ariaLabel,
219
- dismissAriaLabel,
220
- onDismiss,
221
- kind,
222
- layout,
223
- text,
224
- testId
225
- } = props;
226
-
227
- const renderActions = () => {
228
- return actions == null ? void 0 : actions.filter(Boolean).map((action, i) => {
229
- if (action.type === "custom") {
230
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
231
- style: styles.action,
232
- key: `custom-action-${i}`
233
- }, action.node);
234
- }
235
-
236
- const handleClick = action.onClick;
237
-
238
- if (action.href) {
239
- var _action$ariaLabel;
240
-
241
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
242
- style: styles.action,
243
- key: action.title
244
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_link__WEBPACK_IMPORTED_MODULE_7___default.a, {
245
- kind: "primary",
246
- href: action.href,
247
- onClick: handleClick,
248
- "aria-label": (_action$ariaLabel = action.ariaLabel) != null ? _action$ariaLabel : action.title,
249
- style: styles.link
250
- }, action.title));
251
- } else {
252
- var _action$ariaLabel2;
253
-
254
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
255
- style: styles.action,
256
- key: action.title
257
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_button__WEBPACK_IMPORTED_MODULE_2___default.a, {
258
- kind: "tertiary",
259
- size: "small",
260
- "aria-label": (_action$ariaLabel2 = action.ariaLabel) != null ? _action$ariaLabel2 : action.title,
261
- onClick: handleClick
262
- }, action.title));
263
- }
264
- });
265
- };
266
-
267
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
268
- style: [styles.containerOuter, layout === "floating" && styles.floatingBorder, {
269
- borderInlineStartColor: valuesForKind(kind).color
270
- }],
271
- role: valuesForKind(kind).role,
272
- "aria-label": ariaLabel,
273
- "aria-live": valuesForKind(kind).ariaLive,
274
- testId: testId
275
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
276
- style: [styles.backgroundColor, {
277
- backgroundColor: valuesForKind(kind).color
278
- }]
279
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
280
- style: styles.containerInner
281
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default.a, {
282
- icon: _banner_icons_js__WEBPACK_IMPORTED_MODULE_10__[kind],
283
- size: "medium",
284
- style: styles.icon,
285
- "aria-label": kind,
286
- testId: "banner-kind-icon"
287
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
288
- style: styles.labelAndButtonsContainer
289
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
290
- style: styles.labelContainer
291
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__["LabelSmall"], null, text)), actions && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
292
- style: styles.actionsContainer
293
- }, renderActions())), onDismiss ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
294
- style: styles.dismissContainer
295
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_6___default.a, {
296
- icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__["icons"].dismiss,
297
- kind: "tertiary",
298
- onClick: onDismiss,
299
- style: styles.dismiss,
300
- "aria-label": dismissAriaLabel
301
- })) : null));
302
- };
303
-
304
- const defaultProps = {
305
- kind: "info",
306
- dismissAriaLabel: "Dismiss banner."
307
- };
308
- Banner.defaultProps = defaultProps;
309
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
310
- backgroundColor: {
311
- position: "absolute",
312
- top: 0,
313
- bottom: 0,
314
- left: 0,
315
- right: 0,
316
- opacity: 0.08
317
- },
318
- containerOuter: {
319
- borderInlineStartWidth: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xxSmall_6,
320
- width: "100%",
321
- // Because of the background color's opacity value,
322
- // the base color needs to be hard-coded as white for the
323
- // intended pastel background color to show up correctly
324
- // on dark backgrounds.
325
- backgroundColor: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white
326
- },
327
- containerInner: {
328
- flexDirection: "row",
329
- padding: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8
330
- },
331
- icon: {
332
- marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
333
- marginBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
334
- // The total distance from the icon to the edge is 16px. The
335
- // vertical identifier is already 6px, and the padding on inner
336
- // conatiner is 8px. So that leaves 2px.
337
- marginInlineStart: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xxxxSmall_2,
338
- marginInlineEnd: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
339
- alignSelf: "flex-start",
340
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
341
- },
342
- labelAndButtonsContainer: {
343
- flex: 1,
344
- flexDirection: "row",
345
- alignItems: "center",
346
- alignContent: "center",
347
- flexWrap: "wrap",
348
- justifyContent: "space-between"
349
- },
350
- labelContainer: {
351
- flexShrink: 1,
352
- margin: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
353
- textAlign: "start"
354
- },
355
- actionsContainer: {
356
- flexDirection: "row",
357
- justifyContent: "flex-start",
358
- marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
359
- marginBottom: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8
360
- },
361
- action: {
362
- marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
363
- marginRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
364
- justifyContent: "center",
365
- // Set the height to remove the padding from buttons
366
- height: 18
367
- },
368
- link: {
369
- fontSize: 14
370
- },
371
- dismiss: {
372
- flexShrink: 1
373
- },
374
- dismissContainer: {
375
- height: 40,
376
- width: 40,
377
- justifyContent: "center",
378
- alignItems: "center",
379
- marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8,
380
- marginRight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default.a.xSmall_8
381
- },
382
- floatingBorder: {
383
- borderRadius: 4,
384
- // Stop the square corners of the inner container from
385
- // flowing out of the rounded corners of the outer container.
386
- overflow: "hidden"
387
- }
388
- });
389
- /* harmony default export */ __webpack_exports__["a"] = (Banner);
390
-
391
- /***/ }),
392
- /* 6 */
393
- /***/ (function(module, exports) {
394
-
395
- module.exports = require("aphrodite");
396
-
397
- /***/ }),
398
- /* 7 */
399
- /***/ (function(module, exports) {
400
-
401
- module.exports = require("@khanacademy/wonder-blocks-button");
402
-
403
- /***/ }),
404
- /* 8 */
405
- /***/ (function(module, exports) {
406
-
407
- module.exports = require("@khanacademy/wonder-blocks-icon-button");
408
-
409
- /***/ }),
410
- /* 9 */
411
- /***/ (function(module, exports) {
412
-
413
- module.exports = require("@khanacademy/wonder-blocks-link");
414
-
415
- /***/ }),
416
- /* 10 */
417
- /***/ (function(module, exports) {
418
-
419
- module.exports = require("@khanacademy/wonder-blocks-typography");
420
-
421
- /***/ }),
422
- /* 11 */
423
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
424
-
425
- "use strict";
426
- __webpack_require__.r(__webpack_exports__);
427
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "info", function() { return info; });
428
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "success", function() { return success; });
429
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "warning", function() { return warning; });
430
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "critical", function() { return critical; });
431
- // TODO(WB-1409): Use Phosphor icons instead of custom svgs. Also, use
432
- // Wonder Blocks Icon instead of img in the render function.
433
- const info = {
434
- medium: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM10.25 11.25C10.25 10.6977 10.6977 10.25 11.25 10.25H12C12.5523 10.25 13 10.6977 13 11.25V15.5315C13.4313 15.6425 13.75 16.034 13.75 16.5C13.75 17.0523 13.3023 17.5 12.75 17.5H12C11.4477 17.5 11 17.0523 11 16.5V12.2185C10.5687 12.1075 10.25 11.716 10.25 11.25ZM12.9375 7.875C12.9375 8.49632 12.4338 9 11.8125 9C11.1912 9 10.6875 8.49632 10.6875 7.875C10.6875 7.25368 11.1912 6.75 11.8125 6.75C12.4338 6.75 12.9375 7.25368 12.9375 7.875Z"
435
- };
436
- const success = {
437
- medium: "M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM9.75 10.125C9.75 10.7463 9.24632 11.25 8.625 11.25C8.00368 11.25 7.5 10.7463 7.5 10.125C7.5 9.50368 8.00368 9 8.625 9C9.24632 9 9.75 9.50368 9.75 10.125ZM15.375 11.25C15.9963 11.25 16.5 10.7463 16.5 10.125C16.5 9.50368 15.9963 9 15.375 9C14.7537 9 14.25 9.50368 14.25 10.125C14.25 10.7463 14.7537 11.25 15.375 11.25ZM8.96488 13.7479C8.68763 13.2703 8.07567 13.1078 7.59801 13.3851C7.12036 13.6623 6.9579 14.2743 7.23515 14.7519C7.71955 15.5865 8.41464 16.2791 9.25086 16.7606C10.0871 17.2421 11.0351 17.4956 12 17.4956C12.965 17.4956 13.913 17.2421 14.7492 16.7606C15.5854 16.2791 16.2805 15.5865 16.7649 14.7519C17.0421 14.2743 16.8797 13.6623 16.402 13.3851C15.9244 13.1078 15.3124 13.2703 15.0352 13.7479C14.7266 14.2795 14.2838 14.7207 13.7512 15.0274C13.2185 15.3341 12.6147 15.4956 12 15.4956C11.3854 15.4956 10.7815 15.3341 10.2489 15.0274C9.7162 14.7207 9.27344 14.2795 8.96488 13.7479Z"
438
- };
439
- const warning = {
440
- medium: "M10.7505 2.33557C11.1301 2.11544 11.5612 1.99951 12 1.99951C12.4388 1.99951 12.8698 2.11544 13.2494 2.33557C13.6282 2.55524 13.9424 2.87089 14.1603 3.25068L14.1616 3.25305L22.4097 17.4997C22.6288 17.8791 22.7443 18.3094 22.7447 18.7475C22.7451 19.1856 22.6303 19.6161 22.412 19.9959C22.1936 20.3757 21.8792 20.6915 21.5004 20.9115C21.1216 21.1316 20.6916 21.2482 20.2535 21.2497L20.25 21.2497H3.74997L3.74645 21.2497C3.30835 21.2482 2.87835 21.1316 2.49953 20.9115C2.12071 20.6915 1.80636 20.3757 1.58798 19.9959C1.36961 19.6161 1.25486 19.1856 1.25525 18.7475C1.25564 18.3094 1.37114 17.8791 1.5902 17.4997L9.83829 3.25305L9.83965 3.25068C10.0576 2.87089 10.3717 2.55524 10.7505 2.33557ZM10.7062 3.74975L11.5716 4.25079L3.32224 18.4998C3.27857 18.5755 3.25533 18.6618 3.25525 18.7493C3.25517 18.8369 3.27812 18.923 3.3218 18.999C3.36547 19.075 3.42834 19.1381 3.50411 19.1821C3.57952 19.2259 3.66508 19.2492 3.75228 19.2497H20.2477C20.3349 19.2492 20.4204 19.2259 20.4958 19.1821C20.5716 19.1381 20.6345 19.075 20.6781 18.999C20.7218 18.923 20.7448 18.8369 20.7447 18.7493C20.7446 18.6619 20.7216 18.576 20.678 18.5003L12.4258 4.24645C12.3828 4.17143 12.3209 4.10907 12.2461 4.06571C12.1713 4.02235 12.0864 3.99951 12 3.99951C11.9135 3.99951 11.8286 4.02235 11.7538 4.06571C11.6791 4.10907 11.6171 4.17142 11.5741 4.24645L10.7062 3.74975ZM12 8.75C12.5523 8.75 13 9.19772 13 9.75V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V9.75C11 9.19772 11.4477 8.75 12 8.75ZM13.125 16.875C13.125 17.4963 12.6213 18 12 18C11.3787 18 10.875 17.4963 10.875 16.875C10.875 16.2537 11.3787 15.75 12 15.75C12.6213 15.75 13.125 16.2537 13.125 16.875Z"
441
- };
442
- const critical = {
443
- medium: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 6.5C12.5523 6.5 13 6.94772 13 7.5V12.75C13 13.3023 12.5523 13.75 12 13.75C11.4477 13.75 11 13.3023 11 12.75V7.5C11 6.94772 11.4477 6.5 12 6.5ZM13.125 16.125C13.125 16.7463 12.6213 17.25 12 17.25C11.3787 17.25 10.875 16.7463 10.875 16.125C10.875 15.5037 11.3787 15 12 15C12.6213 15 13.125 15.5037 13.125 16.125Z"
444
- };
445
-
446
- /***/ }),
447
- /* 12 */
448
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
449
-
450
- "use strict";
451
- __webpack_require__.r(__webpack_exports__);
452
- /* harmony import */ var _components_banner_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
453
-
454
- /* harmony default export */ __webpack_exports__["default"] = (_components_banner_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
455
-
456
- /***/ })
457
- /******/ ]);