@khanacademy/wonder-blocks-cell 1.0.2 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.0.0
+
+### Major Changes
+
+-   655daa88: Renamed `BasicCell` to `CompactCell` for better clarification of this variant
+
+### Patch Changes
+
+-   2630d750: DetailCell: Style tweaks (changing title from bold to regular, changing vertical padding to 16px)
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { LabelMedium, LabelLarge, LabelSmall } from '@khanacademy/wonder-blocks-typography';
+import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import _extends from '@babel/runtime/helpers/extends';
 import { StyleSheet } from 'aphrodite';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
@@ -20,6 +20,14 @@ const CellMeasurements = {
     paddingHorizontal: Spacing.medium_16
   },
 
+  /**
+   * The DetailCell wrapper's gap.
+   */
+  detailCellPadding: {
+    paddingVertical: Spacing.small_12,
+    paddingHorizontal: Spacing.medium_16
+  },
+
   /**
    * The extra vertical spacing added to the title/content wrapper.
    */
@@ -115,7 +123,7 @@ const 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).
+ * used by CompactCell 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
@@ -134,7 +142,8 @@ const CellCore = props => {
     rightAccessoryStyle = undefined,
     style,
     testId,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    innerStyle
   } = props;
 
   const renderCell = eventState => {
@@ -142,11 +151,11 @@ const CellCore = props => {
     return /*#__PURE__*/React.createElement(View, {
       style: [styles$1.wrapper, // focused applied to the main wrapper to make the border
       // outline part of the wrapper
-      (eventState == null ? void 0 : eventState.focused) && styles$1.focused, // custom styles
-      style],
+      (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
       "aria-current": active ? "true" : undefined
     }, /*#__PURE__*/React.createElement(View, {
-      style: [styles$1.innerWrapper, horizontalRuleStyles, disabled && styles$1.disabled, active && styles$1.active, // other states applied to the inner wrapper to blend
+      style: [styles$1.innerWrapper, innerStyle, // custom styles
+      style, horizontalRuleStyles, disabled && styles$1.disabled, active && styles$1.active, // other states applied to the inner wrapper to blend
       // the background color properly
       !disabled && (eventState == null ? void 0 : eventState.hovered) && styles$1.hovered, // active + hovered
       active && (eventState == null ? void 0 : eventState.hovered) && styles$1.activeHovered, !disabled && (eventState == null ? void 0 : eventState.pressed) && styles$1.pressed, // active + pressed
@@ -260,22 +269,24 @@ const styles$1 = StyleSheet.create({
 const _excluded$1 = ["title"];
 
 /**
- * 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.
+ * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
+ * with limited subviews and accessories. Typically they represent additional
+ * info or selection lists. It has a minimum height of 48px and a non-bold
+ * title. It does not have subtitles or a progress bar, and in general it has
+ * less vertical space around text and accessories.
  *
  * ### Usage
  *
  * ```jsx
- * import {BasicCell} from "@khanacademy/wonder-blocks-cell";
+ * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
  *
- * <BasicCell
- *  title="Basic cell"
+ * <CompactCell
+ *  title="Compact cell"
  *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
  * />
  * ```
  */
-function BasicCell(props) {
+function CompactCell(props) {
   const {
     title
   } = props,
@@ -304,8 +315,11 @@ const Subtitle = ({
 };
 
 /**
- * This is a variant of BasicCell that allows adding subtitles, before and after
- * the cell title.
+ * This is a variant of CompactCell that allows adding subtitles, before and
+ * after the cell title. They typically represent an item that can be
+ * clicked/tapped to view more complex details. They vary in height depending on
+ * the presence or absence of subtitles, and they allow for a wide range of
+ * functionality depending on which accessories are active.
  *
  * ### Usage
  *
@@ -329,12 +343,14 @@ function DetailCell(props) {
   } = props,
         coreProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(CellCore, coreProps, /*#__PURE__*/React.createElement(Subtitle, {
+  return /*#__PURE__*/React.createElement(CellCore, _extends({}, coreProps, {
+    innerStyle: styles.innerWrapper
+  }), /*#__PURE__*/React.createElement(Subtitle, {
     subtitle: subtitle1,
     disabled: coreProps.disabled
   }), subtitle1 && /*#__PURE__*/React.createElement(Strut, {
     size: Spacing.xxxxSmall_2
-  }), typeof title === "string" ? /*#__PURE__*/React.createElement(LabelLarge, null, title) : title, subtitle2 && /*#__PURE__*/React.createElement(Strut, {
+  }), typeof title === "string" ? /*#__PURE__*/React.createElement(LabelMedium, null, title) : title, subtitle2 && /*#__PURE__*/React.createElement(Strut, {
     size: Spacing.xxxxSmall_2
   }), /*#__PURE__*/React.createElement(Subtitle, {
     subtitle: subtitle2,
@@ -345,7 +361,11 @@ function DetailCell(props) {
 const styles = StyleSheet.create({
   subtitle: {
     color: Color.offBlack64
+  },
+  // This is to override the default padding of the CellCore innerWrapper.
+  innerWrapper: {
+    padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`
   }
 });
 
-export { BasicCell, DetailCell };
+export { CompactCell, DetailCell };

package/dist/index.js

@@ -130,6 +130,14 @@ const CellMeasurements = {
     paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
   },
 
+  /**
+   * The DetailCell wrapper's gap.
+   */
+  detailCellPadding: {
+    paddingVertical: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.small_12,
+    paddingHorizontal: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_2___default.a.medium_16
+  },
+
   /**
    * The extra vertical spacing added to the title/content wrapper.
    */
@@ -280,7 +288,7 @@ const 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).
+ * used by CompactCell 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
@@ -299,7 +307,8 @@ const CellCore = props => {
     rightAccessoryStyle = undefined,
     style,
     testId,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    innerStyle
   } = props;
 
   const renderCell = eventState => {
@@ -307,11 +316,11 @@ const CellCore = props => {
     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],
+      (eventState == null ? void 0 : eventState.focused) && styles.focused],
       "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
+      style: [styles.innerWrapper, innerStyle, // custom styles
+      style, 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
@@ -438,22 +447,24 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 
 
 /**
- * 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.
+ * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
+ * with limited subviews and accessories. Typically they represent additional
+ * info or selection lists. It has a minimum height of 48px and a non-bold
+ * title. It does not have subtitles or a progress bar, and in general it has
+ * less vertical space around text and accessories.
  *
  * ### Usage
  *
  * ```jsx
- * import {BasicCell} from "@khanacademy/wonder-blocks-cell";
+ * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
  *
- * <BasicCell
- *  title="Basic cell"
+ * <CompactCell
+ *  title="Compact cell"
  *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
  * />
  * ```
  */
-function BasicCell(props) {
+function CompactCell(props) {
   const {
     title,
     ...coreProps
@@ -461,7 +472,7 @@ function BasicCell(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);
+/* harmony default export */ __webpack_exports__["a"] = (CompactCell);
 
 /***/ }),
 /* 10 */
@@ -481,6 +492,10 @@ function BasicCell(props) {
 /* 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);
+/* harmony import */ var _internal_common_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+
 
 
 
@@ -507,8 +522,11 @@ const Subtitle = ({
 };
 
 /**
- * This is a variant of BasicCell that allows adding subtitles, before and after
- * the cell title.
+ * This is a variant of CompactCell that allows adding subtitles, before and
+ * after the cell title. They typically represent an item that can be
+ * clicked/tapped to view more complex details. They vary in height depending on
+ * the presence or absence of subtitles, and they allow for a wide range of
+ * functionality depending on which accessories are active.
  *
  * ### Usage
  *
@@ -531,12 +549,14 @@ function DetailCell(props) {
     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, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_internal_cell_core_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"], _extends({}, coreProps, {
+    innerStyle: styles.innerWrapper
+  }), /*#__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"], {
+  }), typeof title === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["LabelMedium"], 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,
@@ -547,6 +567,10 @@ function DetailCell(props) {
 const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   subtitle: {
     color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default.a.offBlack64
+  },
+  // This is to override the default padding of the CellCore innerWrapper.
+  innerWrapper: {
+    padding: `${_internal_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].detailCellPadding.paddingVertical}px ${_internal_common_js__WEBPACK_IMPORTED_MODULE_7__[/* CellMeasurements */ "a"].detailCellPadding.paddingHorizontal}px`
   }
 });
 /* harmony default export */ __webpack_exports__["a"] = (DetailCell);
@@ -563,8 +587,8 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 
 "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_compact_cell_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CompactCell", function() { return _components_compact_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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/components/__docs__/{basic-cell.stories.js → compact-cell.stories.js}

@@ -14,14 +14,16 @@ import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 
 import ComponentInfo from "../../../../../.storybook/components/component-info.js";
 import {name, version} from "../../../package.json";
-import BasicCellArgTypes, {AccessoryMappings} from "./basic-cell.argtypes.js";
+import CompactCellArgTypes, {
+    AccessoryMappings,
+} from "./compact-cell.argtypes.js";
 
-import BasicCell from "../basic-cell.js";
+import CompactCell from "../compact-cell.js";
 
 export default {
-    title: "Cell / BasicCell",
-    component: BasicCell,
-    argTypes: BasicCellArgTypes,
+    title: "Cell / CompactCell",
+    component: CompactCell,
+    argTypes: CompactCellArgTypes,
     parameters: {
         componentSubtitle: ((
             <ComponentInfo name={name} version={version} />
@@ -44,19 +46,19 @@ export default {
 };
 
 /**
- * Default BasicCell example. It will be rendered as the first/default story and
+ * Default CompactCell example. It will be rendered as the first/default story and
  * it can be interacted with the controls panel in the Browser.
  */
-const Template = (args) => <BasicCell {...args} />;
+const Template = (args) => <CompactCell {...args} />;
 
-export const DefaultBasicCell: StoryComponentType = Template.bind({});
+export const DefaultCompactCell: StoryComponentType = Template.bind({});
 
-DefaultBasicCell.args = {
+DefaultCompactCell.args = {
     title: "Basic Cell",
     rightAccessory: <Icon icon={icons.caretRight} />,
 };
 
-DefaultBasicCell.parameters = {
+DefaultCompactCell.parameters = {
     chromatic: {
         // We have screenshots of other stories that cover other variants.
         disableSnapshot: true,
@@ -66,14 +68,14 @@ DefaultBasicCell.parameters = {
 /**
  * Only including an accessory on the left.
  */
-export const BasicCellLeft: StoryComponentType = () => (
-    <BasicCell
+export const CompactCellLeft: StoryComponentType = () => (
+    <CompactCell
         title="Intro to rational & irrational numbers"
         leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
     />
 );
 
-BasicCellLeft.parameters = {
+CompactCellLeft.parameters = {
     docs: {
         storyDescription:
             "You can create a minimal cell that only uses a title and an Icon that can be placed on the left or right (or both). In this case, we will place the icon on the left to show you how cell is flexible. Note that you can pass any of the existing WB components such as `Icon`, `IconButton`, `Tooltip`, etc.",
@@ -83,14 +85,14 @@ BasicCellLeft.parameters = {
 /**
  * Only including an accessory on the right.
  */
-export const BasicCellRight: StoryComponentType = (args) => (
-    <BasicCell
+export const CompactCellRight: StoryComponentType = (args) => (
+    <CompactCell
         title="Intro to rational & irrational numbers"
         rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
     />
 );
 
-BasicCellRight.parameters = {
+CompactCellRight.parameters = {
     docs: {
         storyDescription:
             "You can also create a cell with an accessory placed on the right. Note that you can pass any of the existing WB components such as `Icon`.",
@@ -100,26 +102,26 @@ BasicCellRight.parameters = {
 /**
  * Adding multiline title to verify that the cell's height is correct.
  */
-export const BasicCellWithDifferentHeights: StoryComponentType = (args) => (
+export const CompactCellWithDifferentHeights: StoryComponentType = (args) => (
     <>
-        <BasicCell
+        <CompactCell
             title="Single line with short accessory."
             rightAccessory={AccessoryMappings.withCaret}
         />
         <Strut size={Spacing.xSmall_8} />
-        <BasicCell
+        <CompactCell
             title="Single line with tall accessory."
             rightAccessory={AccessoryMappings.withIconText}
         />
         <Strut size={Spacing.xSmall_8} />
-        <BasicCell
+        <CompactCell
             title="Multi line title with tall accessory. Content should fit within the container and the cell height should be consistent no matter the content length."
             rightAccessory={AccessoryMappings.withIconText}
         />
     </>
 );
 
-BasicCellWithDifferentHeights.parameters = {
+CompactCellWithDifferentHeights.parameters = {
     docs: {
         storyDescription:
             "Cells should keep a consistent height no matter the content passed in the title prop. It should also respect a `minHeight` of 48px",
@@ -127,14 +129,14 @@ BasicCellWithDifferentHeights.parameters = {
 };
 
 /**
- * A BasicCell example adding both accessories (left and right)
+ * A CompactCell example adding both accessories (left and right)
  */
 const calendarIcon: IconAsset = {
     small: `M14.22 1.6H13.33V0H11.56V1.6H4.44V0H2.67V1.6H1.78C0.79 1.6 0.01 2.32 0.01 3.2L0 14.4C0 15.28 0.79 16 1.78 16H14.22C15.2 16 16 15.28 16 14.4V3.2C16 2.32 15.2 1.6 14.22 1.6ZM14.22 14.4H1.78V5.6H14.22V14.4ZM3.56 7.2H8V11.2H3.56V7.2Z`,
 };
 
-export const BasicCellBoth: StoryComponentType = () => (
-    <BasicCell
+export const CompactCellBoth: StoryComponentType = () => (
+    <CompactCell
         title="Intro to rational & irrational numbers"
         leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
         rightAccessory={
@@ -143,18 +145,18 @@ export const BasicCellBoth: StoryComponentType = () => (
     />
 );
 
-BasicCellBoth.storyName = "BasicCell with both accessories";
+CompactCellBoth.storyName = "CompactCell with both accessories";
 
-BasicCellBoth.parameters = {
+CompactCellBoth.parameters = {
     docs: {
         storyDescription:
             "You can also create a more complex cell with accessories placed on both sides. Note that you can extend the Icon component with custom paths such as the following example.",
     },
 };
 
-export const BasicCellAccessoryStyles: StoryComponentType = () => (
-    <BasicCell
-        title="BasicCell with custom accessory styles"
+export const CompactCellAccessoryStyles: StoryComponentType = () => (
+    <CompactCell
+        title="CompactCell with custom accessory styles"
         leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
         leftAccessoryStyle={{
             minWidth: Spacing.xxLarge_48,
@@ -170,9 +172,10 @@ export const BasicCellAccessoryStyles: StoryComponentType = () => (
     />
 );
 
-BasicCellAccessoryStyles.storyName = "BasicCell accessories with custom styles";
+CompactCellAccessoryStyles.storyName =
+    "CompactCell accessories with custom styles";
 
-BasicCellAccessoryStyles.parameters = {
+CompactCellAccessoryStyles.parameters = {
     docs: {
         storyDescription:
             "Accessories can also be customized to adapt to different sizes and alignments. In this example, we can see how a cell can be customized for both accessories.",
@@ -182,19 +185,19 @@ BasicCellAccessoryStyles.parameters = {
 /**
  * Defining horizontal rule variants
  */
-export const BasicCellHorizontalRules: StoryComponentType = () => (
+export const CompactCellHorizontalRules: StoryComponentType = () => (
     <>
-        <BasicCell
+        <CompactCell
             title="This is a basic cell with an 'inset' horizontal rule"
             leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
             horizontalRule="inset"
         />
-        <BasicCell
+        <CompactCell
             title="This is a basic cell with a 'full-width' horizontal rule"
             leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
             horizontalRule="full-width"
         />
-        <BasicCell
+        <CompactCell
             title="This is a basic cell without a horizontal rule"
             leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
             horizontalRule="none"
@@ -202,18 +205,18 @@ export const BasicCellHorizontalRules: StoryComponentType = () => (
     </>
 );
 
-BasicCellHorizontalRules.storyName = "Defining horizontal rule variants";
+CompactCellHorizontalRules.storyName = "Defining horizontal rule variants";
 
-BasicCellHorizontalRules.parameters = {
+CompactCellHorizontalRules.parameters = {
     docs: {
         storyDescription:
             "Cell components can use the `horizontalRule` prop to use a set of predefined variants that we can use to match our needs.",
     },
 };
 
-export const BasicCellWithCustomStyles: StoryComponentType = () => (
-    <BasicCell
-        title="BasicCell with a darkBlue background"
+export const CompactCellWithCustomStyles: StoryComponentType = () => (
+    <CompactCell
+        title="CompactCell with a darkBlue background"
         leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
         rightAccessory={<Icon icon={calendarIcon} color={Color.white} />}
         style={{
@@ -224,7 +227,7 @@ export const BasicCellWithCustomStyles: StoryComponentType = () => (
     />
 );
 
-BasicCellWithCustomStyles.parameters = {
+CompactCellWithCustomStyles.parameters = {
     docs: {
         storyDescription:
             "Cell components can also adapt to different visual needs. One example of this can be done by passing a custom style object to the `style` prop.",
@@ -232,12 +235,12 @@ BasicCellWithCustomStyles.parameters = {
 };
 
 /*
- * BasicCell with onClick set
+ * CompactCell with onClick set
 
  */
 
-export const ClickableBasicCell: StoryComponentType = () => (
-    <BasicCell
+export const ClickableCompactCell: StoryComponentType = () => (
+    <CompactCell
         title="Intro to rational & irrational numbers"
         rightAccessory={<Icon icon={icons.caretRight} />}
         onClick={() => {}}
@@ -245,7 +248,7 @@ export const ClickableBasicCell: StoryComponentType = () => (
     />
 );
 
-ClickableBasicCell.parameters = {
+ClickableCompactCell.parameters = {
     chromatic: {
         // This only includes interactions with the clickable cell, so no need
         // to capture screenshots.
@@ -257,8 +260,8 @@ ClickableBasicCell.parameters = {
     },
 };
 
-export const BasicCellActive: StoryComponentType = () => (
-    <BasicCell
+export const CompactCellActive: StoryComponentType = () => (
+    <CompactCell
         title="Title for article item"
         leftAccessory={
             <Icon icon={icons.contentVideo} size="medium" color="black" />
@@ -269,15 +272,15 @@ export const BasicCellActive: StoryComponentType = () => (
     />
 );
 
-BasicCellActive.parameters = {
+CompactCellActive.parameters = {
     docs: {
         storyDescription:
             "The cell also supports different states within itself. The different styles are defined internally (e.g hover, focused, pressed, active, disabled) and we allow passing some props to use the `active` or `disabled` state.",
     },
 };
 
-export const BasicCellDisabled: StoryComponentType = () => (
-    <BasicCell
+export const CompactCellDisabled: StoryComponentType = () => (
+    <CompactCell
         title="Title for article item"
         leftAccessory={AccessoryMappings.withImage}
         rightAccessory={<Icon icon={calendarIcon} size="small" />}
@@ -286,7 +289,7 @@ export const BasicCellDisabled: StoryComponentType = () => (
     />
 );
 
-BasicCellDisabled.parameters = {
+CompactCellDisabled.parameters = {
     docs: {
         storyDescription:
             "In the following example we can see how the `disabled` state works. Note that we apply an opacity to all the elements to make it more apparent that the cell is disabled. This includes text, SVG icons, images, etc.",

package/src/components/__docs__/detail-cell.argtypes.js

@@ -1,8 +1,8 @@
 // @flow
-import BasicCellArgTypes from "./basic-cell.argtypes.js";
+import CompactCellArgTypes from "./compact-cell.argtypes.js";
 
 export default {
-    ...BasicCellArgTypes,
+    ...CompactCellArgTypes,
     subtitle1: {
         control: {
             type: "text",

package/src/components/__tests__/{basic-cell.test.js → compact-cell.test.js}

@@ -5,28 +5,30 @@ import {render, screen} from "@testing-library/react";
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
 
-import BasicCell from "../basic-cell.js";
+import CompactCell from "../compact-cell.js";
 
-describe("BasicCell", () => {
-    it("should render the default BasicCell component", () => {
+describe("CompactCell", () => {
+    it("should render the default CompactCell component", () => {
         // Arrange
 
         // Act
-        render(<BasicCell title="Basic cell" />);
+        render(<CompactCell title="Compact cell" />);
 
         // Assert
-        expect(screen.getByText("Basic cell")).toBeInTheDocument();
+        expect(screen.getByText("Compact cell")).toBeInTheDocument();
     });
 
     it("should render the title using a Typography element", () => {
         // Arrange
 
         // Act
-        render(<BasicCell title={<HeadingMedium>Basic cell</HeadingMedium>} />);
+        render(
+            <CompactCell title={<HeadingMedium>Compact cell</HeadingMedium>} />,
+        );
 
         // Assert
         expect(
-            screen.getByRole("heading", {name: "Basic cell"}),
+            screen.getByRole("heading", {name: "Compact cell"}),
         ).toBeInTheDocument();
     });
 
@@ -35,8 +37,8 @@ describe("BasicCell", () => {
 
         // Act
         render(
-            <BasicCell
-                title="Basic cell"
+            <CompactCell
+                title="Compact cell"
                 leftAccessory={
                     <Icon icon={icons.caretRight} aria-label="Caret icon" />
                 }
@@ -52,8 +54,8 @@ describe("BasicCell", () => {
 
         // Act
         render(
-            <BasicCell
-                title="Basic cell"
+            <CompactCell
+                title="Compact cell"
                 rightAccessory={
                     <Icon icon={icons.caretRight} aria-label="Caret icon" />
                 }
@@ -68,17 +70,17 @@ describe("BasicCell", () => {
         // Arrange
 
         // Act
-        render(<BasicCell title="Basic cell" testId="cellId" />);
+        render(<CompactCell title="Compact cell" testId="cellId" />);
 
         // Assert
-        expect(screen.getByTestId("cellId")).toHaveTextContent("Basic cell");
+        expect(screen.getByTestId("cellId")).toHaveTextContent("Compact cell");
     });
 
     it("should add a button if onClick is set", () => {
         // Arrange
 
         // Act
-        render(<BasicCell title="Basic cell" onClick={jest.fn()} />);
+        render(<CompactCell title="Compact cell" onClick={jest.fn()} />);
 
         // Assert
         expect(screen.getByRole("button")).toBeInTheDocument();
@@ -87,7 +89,7 @@ describe("BasicCell", () => {
     it("should allow clicking the cell if onClick is set", () => {
         // Arrange
         const onClickMock = jest.fn();
-        render(<BasicCell title="Basic cell" onClick={onClickMock} />);
+        render(<CompactCell title="Compact cell" onClick={onClickMock} />);
 
         // Act
         screen.getByRole("button").click();

package/src/components/{basic-cell.js → compact-cell.js}

@@ -8,22 +8,24 @@ import CellCore from "./internal/cell-core.js";
 import type {CellProps} from "../util/types.js";
 
 /**
- * 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.
+ * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
+ * with limited subviews and accessories. Typically they represent additional
+ * info or selection lists. It has a minimum height of 48px and a non-bold
+ * title. It does not have subtitles or a progress bar, and in general it has
+ * less vertical space around text and accessories.
  *
  * ### Usage
  *
  * ```jsx
- * import {BasicCell} from "@khanacademy/wonder-blocks-cell";
+ * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
  *
- * <BasicCell
- *  title="Basic cell"
+ * <CompactCell
+ *  title="Compact cell"
  *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
  * />
  * ```
  */
-function BasicCell(props: CellProps): React.Node {
+function CompactCell(props: CellProps): React.Node {
     const {title, ...coreProps} = props;
 
     return (
@@ -37,4 +39,4 @@ function BasicCell(props: CellProps): React.Node {
     );
 }
 
-export default BasicCell;
+export default CompactCell;

package/src/components/detail-cell.js

@@ -5,9 +5,10 @@ import {StyleSheet} from "aphrodite";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {LabelSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {LabelSmall, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import CellCore from "./internal/cell-core.js";
+import {CellMeasurements} from "./internal/common.js";
 
 import type {CellProps, TypographyText} from "../util/types.js";
 
@@ -55,8 +56,11 @@ type DetailCellProps = {|
 |};
 
 /**
- * This is a variant of BasicCell that allows adding subtitles, before and after
- * the cell title.
+ * This is a variant of CompactCell that allows adding subtitles, before and
+ * after the cell title. They typically represent an item that can be
+ * clicked/tapped to view more complex details. They vary in height depending on
+ * the presence or absence of subtitles, and they allow for a wide range of
+ * functionality depending on which accessories are active.
  *
  * ### Usage
  *
@@ -76,11 +80,11 @@ function DetailCell(props: DetailCellProps): React.Node {
     const {title, subtitle1, subtitle2, ...coreProps} = props;
 
     return (
-        <CellCore {...coreProps}>
+        <CellCore {...coreProps} innerStyle={styles.innerWrapper}>
             <Subtitle subtitle={subtitle1} disabled={coreProps.disabled} />
             {subtitle1 && <Strut size={Spacing.xxxxSmall_2} />}
             {typeof title === "string" ? (
-                <LabelLarge>{title}</LabelLarge>
+                <LabelMedium>{title}</LabelMedium>
             ) : (
                 title
             )}
@@ -95,6 +99,11 @@ const styles = StyleSheet.create({
     subtitle: {
         color: Color.offBlack64,
     },
+
+    // This is to override the default padding of the CellCore innerWrapper.
+    innerWrapper: {
+        padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`,
+    },
 });
 
 export default DetailCell;

package/src/components/internal/cell-core.js

@@ -2,6 +2,8 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Color, {fade} from "@khanacademy/wonder-blocks-color";
@@ -94,11 +96,19 @@ type CellCoreProps = {|
      * The content of the cell.
      */
     children: React.Node,
+
+    /**
+     * The optional styles applied to the inner wrapper.
+     *
+     * Note: This is not intended to be used externally, only used directly
+     * within the package scope.
+     */
+    innerStyle?: StyleType,
 |};
 
 /**
  * CellCore is the base cell wrapper. It's used as the skeleton/layout that is
- * used by BasicCell and DetailCell (and any other variants).
+ * used by CompactCell 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
@@ -118,6 +128,7 @@ const CellCore = (props: CellCoreProps): React.Node => {
         style,
         testId,
         "aria-label": ariaLabel,
+        innerStyle,
     } = props;
 
     const renderCell = (eventState?: ClickableState): React.Node => {
@@ -130,14 +141,15 @@ const CellCore = (props: CellCoreProps): React.Node => {
                     // focused applied to the main wrapper to make the border
                     // outline part of the wrapper
                     eventState?.focused && styles.focused,
-                    // custom styles
-                    style,
                 ]}
                 aria-current={active ? "true" : undefined}
             >
                 <View
                     style={[
                         styles.innerWrapper,
+                        innerStyle,
+                        // custom styles
+                        style,
                         horizontalRuleStyles,
                         disabled && styles.disabled,
                         active && styles.active,

package/src/components/internal/common.js

@@ -18,6 +18,14 @@ export const CellMeasurements = {
         paddingHorizontal: Spacing.medium_16,
     },
 
+    /**
+     * The DetailCell wrapper's gap.
+     */
+    detailCellPadding: {
+        paddingVertical: Spacing.small_12,
+        paddingHorizontal: Spacing.medium_16,
+    },
+
     /**
      * The extra vertical spacing added to the title/content wrapper.
      */

package/src/index.js

@@ -1,5 +1,5 @@
 // @flow
-import BasicCell from "./components/basic-cell.js";
+import CompactCell from "./components/compact-cell.js";
 import DetailCell from "./components/detail-cell.js";
 
-export {BasicCell, DetailCell};
+export {CompactCell, DetailCell};