@khanacademy/wonder-blocks-cell 2.2.11 → 2.2.13

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 CHANGED
@@ -1,5 +1,26 @@
1
1
  # @khanacademy/wonder-blocks-cell
2
2
 
3
+ ## 2.2.13
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-layout@1.4.14
10
+ - @khanacademy/wonder-blocks-typography@1.1.36
11
+
12
+ ## 2.2.12
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [b561425a]
17
+ - Updated dependencies [a566e232]
18
+ - Updated dependencies [d2b21a6e]
19
+ - @khanacademy/wonder-blocks-core@4.6.0
20
+ - @khanacademy/wonder-blocks-clickable@2.4.2
21
+ - @khanacademy/wonder-blocks-layout@1.4.13
22
+ - @khanacademy/wonder-blocks-typography@1.1.35
23
+
3
24
  ## 2.2.11
4
25
 
5
26
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-cell",
3
- "version": "2.2.11",
3
+ "version": "2.2.13",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -14,19 +14,19 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@babel/runtime": "^7.18.6",
17
- "@khanacademy/wonder-blocks-clickable": "^2.4.1",
17
+ "@khanacademy/wonder-blocks-clickable": "^2.4.3",
18
18
  "@khanacademy/wonder-blocks-color": "^1.2.0",
19
- "@khanacademy/wonder-blocks-core": "^4.5.0",
20
- "@khanacademy/wonder-blocks-layout": "^1.4.12",
19
+ "@khanacademy/wonder-blocks-core": "^4.6.1",
20
+ "@khanacademy/wonder-blocks-layout": "^1.4.14",
21
21
  "@khanacademy/wonder-blocks-spacing": "^3.0.5",
22
- "@khanacademy/wonder-blocks-typography": "^1.1.34"
22
+ "@khanacademy/wonder-blocks-typography": "^1.1.36"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "aphrodite": "^1.2.5",
26
26
  "react": "16.14.0"
27
27
  },
28
28
  "devDependencies": {
29
- "wb-dev-build-settings": "^0.4.0"
29
+ "wb-dev-build-settings": "^0.6.0"
30
30
  },
31
31
  "author": "",
32
32
  "license": "MIT"
package/dist/index.js DELETED
@@ -1,621 +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 = 13);
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
- module.exports = require("@khanacademy/wonder-blocks-spacing");
105
-
106
- /***/ }),
107
- /* 3 */
108
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
109
-
110
- "use strict";
111
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CellMeasurements; });
112
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getHorizontalRuleStyles; });
113
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
114
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
115
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
116
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__);
117
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
118
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__);
119
-
120
-
121
-
122
- const CellMeasurements = {
123
- cellMinHeight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxLarge_48,
124
-
125
- /**
126
- * The cell wrapper's gap.
127
- */
128
- cellPadding: {
129
- paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.small_12,
130
- paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
131
- },
132
-
133
- /**
134
- * The DetailCell wrapper's gap.
135
- */
136
- detailCellPadding: {
137
- paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16,
138
- paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
139
- },
140
-
141
- /**
142
- * The horizontal spacing between the left and right accessory.
143
- */
144
- accessoryHorizontalSpacing: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
145
- };
146
- /**
147
- * Gets the horizontalRule style based on the variant.
148
- * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal
149
- * rule.
150
- * @returns A styled horizontal rule.
151
- */
152
-
153
- const getHorizontalRuleStyles = horizontalRule => {
154
- switch (horizontalRule) {
155
- case "inset":
156
- return [styles.horizontalRule, styles.horizontalRuleInset];
157
-
158
- case "full-width":
159
- return styles.horizontalRule;
160
-
161
- case "none":
162
- return {};
163
- }
164
- };
165
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
166
- horizontalRule: {
167
- position: "relative",
168
- ":after": {
169
- width: "100%",
170
- content: "''",
171
- position: "absolute",
172
- // align to the bottom of the cell
173
- bottom: 0,
174
- // align border to the right of the cell
175
- right: 0,
176
- height: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxxSmall_2,
177
- boxShadow: `inset 0px -1px 0px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default.a.offBlack8}`
178
- }
179
- },
180
- horizontalRuleInset: {
181
- ":after": {
182
- // Inset doesn't include the left padding of the cell.
183
- width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`
184
- }
185
- }
186
- });
187
-
188
- /***/ }),
189
- /* 4 */
190
- /***/ (function(module, exports) {
191
-
192
- module.exports = require("aphrodite");
193
-
194
- /***/ }),
195
- /* 5 */
196
- /***/ (function(module, exports) {
197
-
198
- module.exports = require("@khanacademy/wonder-blocks-layout");
199
-
200
- /***/ }),
201
- /* 6 */
202
- /***/ (function(module, exports) {
203
-
204
- module.exports = require("@khanacademy/wonder-blocks-core");
205
-
206
- /***/ }),
207
- /* 7 */
208
- /***/ (function(module, exports) {
209
-
210
- module.exports = require("@khanacademy/wonder-blocks-typography");
211
-
212
- /***/ }),
213
- /* 8 */
214
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
215
-
216
- "use strict";
217
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
218
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
219
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
220
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
221
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
222
- /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
223
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
224
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
225
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
226
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
227
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
228
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__);
229
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
230
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
231
- /* harmony import */ var _common_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
- /**
242
- * Left Accessories can be defined using WB components such as Icon, IconButton,
243
- * or it can even be used for a custom node/component if needed.
244
- */
245
- const LeftAccessory = ({
246
- leftAccessory,
247
- leftAccessoryStyle,
248
- disabled
249
- }) => {
250
- if (!leftAccessory) {
251
- return null;
252
- }
253
-
254
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
255
- style: [styles.accessory, disabled && styles.accessoryDisabled, { ...leftAccessoryStyle
256
- }]
257
- }, leftAccessory), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__["Strut"], {
258
- size: _common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].accessoryHorizontalSpacing
259
- }));
260
- };
261
-
262
- /**
263
- * Right Accessories can be defined using WB components such as Icon,
264
- * IconButton, or it can even be used for a custom node/component if needed.
265
- */
266
- const RightAccessory = ({
267
- rightAccessory,
268
- rightAccessoryStyle,
269
- active,
270
- disabled
271
- }) => {
272
- if (!rightAccessory) {
273
- return null;
274
- }
275
-
276
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__["Strut"], {
277
- size: _common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].accessoryHorizontalSpacing
278
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
279
- style: [styles.accessory, styles.accessoryRight, disabled && styles.accessoryDisabled, { ...rightAccessoryStyle
280
- }, active && styles.accessoryActive]
281
- }, rightAccessory));
282
- };
283
-
284
- /**
285
- * CellCore is the base cell wrapper. It's used as the skeleton/layout that is
286
- * used by CompactCell and DetailCell (and any other variants).
287
- *
288
- * Both variants share how they render their accessories, and the main
289
- * responsibility of this component is to render the contents that are passed in
290
- * (using the `children` prop).
291
- */
292
- const CellCore = props => {
293
- const {
294
- active,
295
- children,
296
- disabled,
297
- href,
298
- horizontalRule = "inset",
299
- leftAccessory = undefined,
300
- leftAccessoryStyle = undefined,
301
- onClick,
302
- rightAccessory = undefined,
303
- rightAccessoryStyle = undefined,
304
- style,
305
- testId,
306
- "aria-label": ariaLabel,
307
- innerStyle,
308
- target
309
- } = props;
310
-
311
- const renderCell = eventState => {
312
- const horizontalRuleStyles = Object(_common_js__WEBPACK_IMPORTED_MODULE_7__[/* getHorizontalRuleStyles */ "b"])(horizontalRule);
313
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
314
- style: [styles.wrapper, // focused applied to the main wrapper to make the border
315
- // outline part of the wrapper
316
- (eventState == null ? void 0 : eventState.focused) && styles.focused],
317
- "aria-current": active ? "true" : undefined
318
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
319
- style: [styles.innerWrapper, innerStyle, // custom styles
320
- style, horizontalRuleStyles, disabled && styles.disabled, active && styles.active, // other states applied to the inner wrapper to blend
321
- // the background color properly
322
- !disabled && (eventState == null ? void 0 : eventState.hovered) && styles.hovered, // active + hovered
323
- active && (eventState == null ? void 0 : eventState.hovered) && styles.activeHovered, !disabled && (eventState == null ? void 0 : eventState.pressed) && styles.pressed, // active + pressed
324
- !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles.activePressed]
325
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](LeftAccessory, {
326
- leftAccessory: leftAccessory,
327
- leftAccessoryStyle: leftAccessoryStyle,
328
- disabled: disabled
329
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
330
- style: styles.content,
331
- testId: testId
332
- }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](RightAccessory, {
333
- rightAccessory: rightAccessory,
334
- rightAccessoryStyle: rightAccessoryStyle,
335
- active: active,
336
- disabled: disabled
337
- })));
338
- }; // Pressable cell.
339
-
340
-
341
- if (onClick || href) {
342
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default.a, {
343
- disabled: disabled,
344
- onClick: onClick,
345
- href: href,
346
- hideDefaultFocusRing: true,
347
- "aria-label": ariaLabel ? ariaLabel : undefined,
348
- target: target
349
- }, eventState => renderCell(eventState));
350
- } // No click event attached, so just render the cell as-is.
351
-
352
-
353
- return renderCell();
354
- };
355
-
356
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
357
- wrapper: {
358
- background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.white,
359
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack,
360
- minHeight: _common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].cellMinHeight,
361
- textAlign: "left"
362
- },
363
- innerWrapper: {
364
- padding: `${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].cellPadding.paddingVertical}px ${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].cellPadding.paddingHorizontal}px`,
365
- flexDirection: "row",
366
- flex: 1
367
- },
368
- content: {
369
- alignSelf: "center",
370
- // Expand the content to fill the available space.
371
- flex: 1,
372
- overflowWrap: "break-word"
373
- },
374
- accessory: {
375
- // Use content width by default.
376
- minWidth: "auto",
377
- // Horizontal alignment of the accessory.
378
- alignItems: "center",
379
- // Vertical alignment.
380
- alignSelf: "center"
381
- },
382
- accessoryRight: {
383
- // The right accessory will have this color by default. Unless the
384
- // accessory element overrides that color internally.
385
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64
386
- },
387
-
388
- /**
389
- * States
390
- */
391
- hovered: {
392
- background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack8
393
- },
394
- // Handling the focus ring internally because clickable doesn't support
395
- // rounded focus ring.
396
- focused: {
397
- borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxSmall_4,
398
- outline: `solid ${_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxxSmall_2}px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue}`,
399
- // The focus ring is not visible when there are stacked cells.
400
- // Using outlineOffset to display the focus ring inside the cell.
401
- outlineOffset: -_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxxSmall_2,
402
- // To hide the internal corners of the cell.
403
- overflow: "hidden"
404
- },
405
- pressed: {
406
- background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack16
407
- },
408
- active: {
409
- background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.08),
410
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue
411
- },
412
- activeHovered: {
413
- background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.16)
414
- },
415
- activePressed: {
416
- background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.24)
417
- },
418
- disabled: {
419
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack32,
420
- ":hover": {
421
- cursor: "not-allowed"
422
- }
423
- },
424
- accessoryActive: {
425
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue
426
- },
427
- accessoryDisabled: {
428
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack,
429
- opacity: 0.32
430
- }
431
- });
432
- /* harmony default export */ __webpack_exports__["a"] = (CellCore);
433
-
434
- /***/ }),
435
- /* 9 */
436
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
437
-
438
- "use strict";
439
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
440
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
441
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
442
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1__);
443
- /* harmony import */ var _internal_cell_core_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
444
-
445
-
446
-
447
-
448
- /**
449
- * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
450
- * with limited subviews and accessories. Typically they represent additional
451
- * info or selection lists. It has a minimum height of 48px and a non-bold
452
- * title. It does not have subtitles or a progress bar, and in general it has
453
- * less vertical space around text and accessories.
454
- *
455
- * ### Usage
456
- *
457
- * ```jsx
458
- * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
459
- *
460
- * <CompactCell
461
- * title="Compact cell"
462
- * rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
463
- * />
464
- * ```
465
- */
466
- function CompactCell(props) {
467
- const {
468
- title,
469
- ...coreProps
470
- } = props;
471
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_internal_cell_core_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], coreProps, typeof title === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1__["LabelMedium"], null, title) : title);
472
- }
473
-
474
- /* harmony default export */ __webpack_exports__["a"] = (CompactCell);
475
-
476
- /***/ }),
477
- /* 10 */
478
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
479
-
480
- "use strict";
481
- /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
482
- /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
483
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
484
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
485
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
486
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
487
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
488
- /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
489
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
490
- /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__);
491
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
492
- /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
493
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
494
- /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__);
495
- /* harmony import */ var _internal_cell_core_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
496
- /* harmony import */ var _internal_common_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(3);
497
-
498
-
499
-
500
-
501
-
502
-
503
-
504
-
505
-
506
-
507
- const Subtitle = ({
508
- subtitle,
509
- disabled
510
- }) => {
511
- if (!subtitle) {
512
- return null;
513
- }
514
-
515
- if (typeof subtitle === "string") {
516
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
517
- style: !disabled && styles.subtitle
518
- }, subtitle);
519
- }
520
-
521
- return subtitle;
522
- };
523
-
524
- /**
525
- * This is a variant of CompactCell that allows adding subtitles, before and
526
- * after the cell title. They typically represent an item that can be
527
- * clicked/tapped to view more complex details. They vary in height depending on
528
- * the presence or absence of subtitles, and they allow for a wide range of
529
- * functionality depending on which accessories are active.
530
- *
531
- * ### Usage
532
- *
533
- * ```jsx
534
- * import {DetailCell} from "@khanacademy/wonder-blocks-cell";
535
- *
536
- * <DetailCell
537
- * leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
538
- * subtitle1="Subtitle 1"
539
- * title="Detail cell"
540
- * subtitle1="Subtitle 2"
541
- * rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
542
- * />
543
- * ```
544
- */
545
- function DetailCell(props) {
546
- const {
547
- title,
548
- subtitle1,
549
- subtitle2,
550
- ...coreProps
551
- } = props;
552
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_internal_cell_core_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, coreProps, {
553
- innerStyle: styles.innerWrapper
554
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](Subtitle, {
555
- subtitle: subtitle1,
556
- disabled: coreProps.disabled
557
- }), subtitle1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
558
- size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxxSmall_2
559
- }), typeof title === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], null, title) : title, subtitle2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
560
- size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxxSmall_2
561
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](Subtitle, {
562
- subtitle: subtitle2,
563
- disabled: coreProps.disabled
564
- }));
565
- }
566
-
567
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
568
- subtitle: {
569
- color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
570
- },
571
- // This is to override the default padding of the CellCore innerWrapper.
572
- innerWrapper: {
573
- padding: `${_internal_common_js__WEBPACK_IMPORTED_MODULE_8__[/* CellMeasurements */ "a"].detailCellPadding.paddingVertical}px ${_internal_common_js__WEBPACK_IMPORTED_MODULE_8__[/* CellMeasurements */ "a"].detailCellPadding.paddingHorizontal}px`
574
- }
575
- });
576
- /* harmony default export */ __webpack_exports__["a"] = (DetailCell);
577
-
578
- /***/ }),
579
- /* 11 */
580
- /***/ (function(module, exports) {
581
-
582
- module.exports = require("@khanacademy/wonder-blocks-clickable");
583
-
584
- /***/ }),
585
- /* 12 */
586
- /***/ (function(module, exports) {
587
-
588
- function _extends() {
589
- module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
590
- for (var i = 1; i < arguments.length; i++) {
591
- var source = arguments[i];
592
- for (var key in source) {
593
- if (Object.prototype.hasOwnProperty.call(source, key)) {
594
- target[key] = source[key];
595
- }
596
- }
597
- }
598
- return target;
599
- }, module.exports.__esModule = true, module.exports["default"] = module.exports;
600
- return _extends.apply(this, arguments);
601
- }
602
- module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
603
-
604
- /***/ }),
605
- /* 13 */
606
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
607
-
608
- "use strict";
609
- __webpack_require__.r(__webpack_exports__);
610
- /* harmony import */ var _components_compact_cell_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
611
- /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CompactCell", function() { return _components_compact_cell_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
612
-
613
- /* harmony import */ var _components_detail_cell_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
614
- /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DetailCell", function() { return _components_detail_cell_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
615
-
616
-
617
-
618
-
619
-
620
- /***/ })
621
- /******/ ]);