@khanacademy/wonder-blocks-cell 1.0.0

package/dist/index.js

@@ -0,0 +1,577 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 12);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-spacing");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CellMeasurements; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getHorizontalRuleStyles; });
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+const CellMeasurements = {
+  cellMinHeight: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxLarge_48,
+
+  /**
+   * The cell wrapper's gap.
+   */
+  cellPadding: {
+    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xSmall_8,
+    paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
+  },
+
+  /**
+   * The extra vertical spacing added to the title/content wrapper.
+   */
+  contentVerticalSpacing: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxSmall_4,
+
+  /**
+   * The horizontal spacing between the left and right accessory.
+   */
+  accessoryHorizontalSpacing: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
+};
+/**
+ * Gets the horizontalRule style based on the variant.
+ * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal
+ * rule.
+ * @returns A styled horizontal rule.
+ */
+
+const getHorizontalRuleStyles = horizontalRule => {
+  switch (horizontalRule) {
+    case "inset":
+      return [styles.horizontalRule, styles.horizontalRuleInset];
+
+    case "full-width":
+      return styles.horizontalRule;
+
+    case "none":
+      return {};
+  }
+};
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
+  horizontalRule: {
+    position: "relative",
+    ":after": {
+      width: "100%",
+      content: "''",
+      position: "absolute",
+      // align to the bottom of the cell
+      bottom: 0,
+      // align border to the right of the cell
+      right: 0,
+      height: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.xxxxSmall_2,
+      boxShadow: `inset 0px -1px 0px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default.a.offBlack8}`
+    }
+  },
+  horizontalRuleInset: {
+    ":after": {
+      // Inset doesn't include the left padding of the cell.
+      width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`
+    }
+  }
+});
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-layout");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _common_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
+
+
+
+
+
+
+
+
+
+/**
+ * Left Accessories can be defined using WB components such as Icon, IconButton,
+ * or it can even be used for a custom node/component if needed.
+ */
+const LeftAccessory = ({
+  leftAccessory,
+  leftAccessoryStyle,
+  disabled
+}) => {
+  if (!leftAccessory) {
+    return null;
+  }
+
+  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"], {
+    style: [styles.accessory, disabled && styles.accessoryDisabled, { ...leftAccessoryStyle
+    }]
+  }, leftAccessory), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_5__["Strut"], {
+    size: _common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].accessoryHorizontalSpacing
+  }));
+};
+
+/**
+ * Right Accessories can be defined using WB components such as Icon,
+ * IconButton, or it can even be used for a custom node/component if needed.
+ */
+const RightAccessory = ({
+  rightAccessory,
+  rightAccessoryStyle,
+  active,
+  disabled
+}) => {
+  if (!rightAccessory) {
+    return null;
+  }
+
+  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"], {
+    size: _common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].accessoryHorizontalSpacing
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+    style: [styles.accessory, styles.accessoryRight, disabled && styles.accessoryDisabled, { ...rightAccessoryStyle
+    }, active && styles.accessoryActive]
+  }, rightAccessory));
+};
+
+/**
+ * CellCore is the base cell wrapper. It's used as the skeleton/layout that is
+ * used by BasicCell and DetailCell (and any other variants).
+ *
+ * Both variants share how they render their accessories, and the main
+ * responsibility of this component is to render the contents that are passed in
+ * (using the `children` prop).
+ */
+const CellCore = props => {
+  const {
+    active,
+    children,
+    disabled,
+    horizontalRule = "inset",
+    leftAccessory = undefined,
+    leftAccessoryStyle = undefined,
+    onClick,
+    rightAccessory = undefined,
+    rightAccessoryStyle = undefined,
+    style,
+    testId,
+    "aria-label": ariaLabel
+  } = props;
+
+  const renderCell = eventState => {
+    const horizontalRuleStyles = Object(_common_js__WEBPACK_IMPORTED_MODULE_7__[/* getHorizontalRuleStyles */ "b"])(horizontalRule);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: [styles.wrapper, // focused applied to the main wrapper to make the border
+      // outline part of the wrapper
+      (eventState == null ? void 0 : eventState.focused) && styles.focused, // custom styles
+      style],
+      "aria-current": active ? "true" : undefined
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: [styles.innerWrapper, horizontalRuleStyles, disabled && styles.disabled, active && styles.active, // other states applied to the inner wrapper to blend
+      // the background color properly
+      !disabled && (eventState == null ? void 0 : eventState.hovered) && styles.hovered, // active + hovered
+      active && (eventState == null ? void 0 : eventState.hovered) && styles.activeHovered, !disabled && (eventState == null ? void 0 : eventState.pressed) && styles.pressed, // active + pressed
+      !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles.activePressed]
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](LeftAccessory, {
+      leftAccessory: leftAccessory,
+      leftAccessoryStyle: leftAccessoryStyle,
+      disabled: disabled
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
+      style: styles.content,
+      testId: testId
+    }, children), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](RightAccessory, {
+      rightAccessory: rightAccessory,
+      rightAccessoryStyle: rightAccessoryStyle,
+      active: active,
+      disabled: disabled
+    })));
+  }; // Pressable cell.
+
+
+  if (onClick) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default.a, {
+      disabled: disabled,
+      onClick: onClick,
+      hideDefaultFocusRing: true,
+      "aria-label": ariaLabel ? ariaLabel : undefined
+    }, eventState => renderCell(eventState));
+  } // No click event attached, so just render the cell as-is.
+
+
+  return renderCell();
+};
+
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  wrapper: {
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.white,
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack,
+    minHeight: _common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].cellMinHeight,
+    textAlign: "left"
+  },
+  innerWrapper: {
+    padding: `${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].cellPadding.paddingVertical}px ${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].cellPadding.paddingHorizontal}px`,
+    flexDirection: "row",
+    flex: 1
+  },
+  content: {
+    alignSelf: "center",
+    overflowWrap: "break-word",
+    padding: `${_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].contentVerticalSpacing}px 0`
+  },
+  accessory: {
+    // Use content width by default.
+    minWidth: "auto",
+    // Horizontal alignment of the accessory.
+    alignItems: "center",
+    // Vertical alignment.
+    alignSelf: "center"
+  },
+  accessoryRight: {
+    // The right accessory will have this color by default. Unless the
+    // accessory element overrides that color internally.
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64,
+    // Align the right accessory to the right side of the cell, so we can
+    // prevent the accessory from shifting left, if the content is too
+    // short.
+    marginLeft: "auto"
+  },
+
+  /**
+   * States
+   */
+  hovered: {
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack8
+  },
+  // Handling the focus ring internally because clickable doesn't support
+  // rounded focus ring.
+  focused: {
+    borderRadius: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxSmall_4,
+    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}`,
+    // The focus ring is not visible when there are stacked cells.
+    // Using outlineOffset to display the focus ring inside the cell.
+    outlineOffset: -_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default.a.xxxxSmall_2,
+    // To hide the internal corners of the cell.
+    overflow: "hidden"
+  },
+  pressed: {
+    background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack16
+  },
+  active: {
+    background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.08),
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue
+  },
+  activeHovered: {
+    background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.16)
+  },
+  activePressed: {
+    background: Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue, 0.24)
+  },
+  disabled: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack32
+  },
+  accessoryActive: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.blue
+  },
+  accessoryDisabled: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack,
+    opacity: 0.32
+  }
+});
+/* harmony default export */ __webpack_exports__["a"] = (CellCore);
+
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _internal_cell_core_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
+
+
+
+
+/**
+ * BasicCell is the simplest form of the Cell. It is a compacted-height Cell
+ * with limited subviews and accessories, to be used for simple lists, like
+ * dropdown option items, navigation items, settings dialogs, etc.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {BasicCell} from "@khanacademy/wonder-blocks-cell";
+ *
+ * <BasicCell
+ *  title="Basic cell"
+ *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ * />
+ * ```
+ */
+function BasicCell(props) {
+  const {
+    title,
+    ...coreProps
+  } = props;
+  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);
+}
+
+/* harmony default export */ __webpack_exports__["a"] = (BasicCell);
+
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
+/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
+/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
+/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _internal_cell_core_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
+
+
+
+
+
+
+
+
+const Subtitle = ({
+  subtitle,
+  disabled
+}) => {
+  if (!subtitle) {
+    return null;
+  }
+
+  if (typeof subtitle === "string") {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelSmall"], {
+      style: !disabled && styles.subtitle
+    }, subtitle);
+  }
+
+  return subtitle;
+};
+
+/**
+ * This is a variant of BasicCell that allows adding subtitles, before and after
+ * the cell title.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {DetailCell} from "@khanacademy/wonder-blocks-cell";
+ *
+ * <DetailCell
+ *  leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
+ *  subtitle1="Subtitle 1"
+ *  title="Detail cell"
+ *  subtitle1="Subtitle 2"
+ *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ * />
+ * ```
+ */
+function DetailCell(props) {
+  const {
+    title,
+    subtitle1,
+    subtitle2,
+    ...coreProps
+  } = props;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_internal_cell_core_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], coreProps, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Subtitle, {
+    subtitle: subtitle1,
+    disabled: coreProps.disabled
+  }), subtitle1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
+    size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxxSmall_2
+  }), typeof title === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelLarge"], null, title) : title, subtitle2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
+    size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxxSmall_2
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Subtitle, {
+    subtitle: subtitle2,
+    disabled: coreProps.disabled
+  }));
+}
+
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+  subtitle: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
+  }
+});
+/* harmony default export */ __webpack_exports__["a"] = (DetailCell);
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
+/***/ }),
+/* 12 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _components_basic_cell_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BasicCell", function() { return _components_basic_cell_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
+
+/* harmony import */ var _components_detail_cell_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DetailCell", function() { return _components_detail_cell_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
+
+
+
+
+
+/***/ })
+/******/ ]);

package/dist/index.js.flow

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

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@khanacademy/wonder-blocks-cell",
+  "version": "1.0.0",
+  "design": "v1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
+  "source": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.2.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
+  },
+  "peerDependencies": {
+    "aphrodite": "^1.2.5",
+    "react": "16.14.0"
+  },
+  "devDependencies": {
+    "wb-dev-build-settings": "^0.2.0"
+  },
+  "author": "",
+  "license": "MIT"
+}