@khanacademy/wonder-blocks-cell 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @khanacademy/wonder-blocks-cell
+
+## 1.0.0
+### Major Changes
+
+- dc6c5f05: Add DetailCell component
+
+### Minor Changes
+
+- dc6c5f05: Add horizontalRule, style and testId to BasicCell
+- dc6c5f05: Add BasicCell and also title, leftAccessory, rightAccessory props
+- dc6c5f05: Add states (active, disabled, hovered, focused, pressed), onClick and aria-label
+- dc6c5f05: Adds `wonder-blocks-cell` package
+
+### Patch Changes
+
+- 2855fa1f: Add WB layout as a dependency

package/dist/es/index.js

@@ -0,0 +1,351 @@
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import * as React from 'react';
+import { LabelMedium, LabelLarge, LabelSmall } from '@khanacademy/wonder-blocks-typography';
+import _extends from '@babel/runtime/helpers/extends';
+import { StyleSheet } from 'aphrodite';
+import Clickable from '@khanacademy/wonder-blocks-clickable';
+import { View } from '@khanacademy/wonder-blocks-core';
+import Color, { fade } from '@khanacademy/wonder-blocks-color';
+import { Strut } from '@khanacademy/wonder-blocks-layout';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+
+const CellMeasurements = {
+  cellMinHeight: Spacing.xxLarge_48,
+
+  /**
+   * The cell wrapper's gap.
+   */
+  cellPadding: {
+    paddingVertical: Spacing.xSmall_8,
+    paddingHorizontal: Spacing.medium_16
+  },
+
+  /**
+   * The extra vertical spacing added to the title/content wrapper.
+   */
+  contentVerticalSpacing: Spacing.xxxSmall_4,
+
+  /**
+   * The horizontal spacing between the left and right accessory.
+   */
+  accessoryHorizontalSpacing: Spacing.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$2.horizontalRule, styles$2.horizontalRuleInset];
+
+    case "full-width":
+      return styles$2.horizontalRule;
+
+    case "none":
+      return {};
+  }
+};
+const styles$2 = 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: Spacing.xxxxSmall_2,
+      boxShadow: `inset 0px -1px 0px ${Color.offBlack8}`
+    }
+  },
+  horizontalRuleInset: {
+    ":after": {
+      // Inset doesn't include the left padding of the cell.
+      width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`
+    }
+  }
+});
+
+/**
+ * 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends({}, leftAccessoryStyle)]
+  }, leftAccessory), /*#__PURE__*/React.createElement(Strut, {
+    size: CellMeasurements.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+    size: CellMeasurements.accessoryHorizontalSpacing
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends({}, rightAccessoryStyle), active && styles$1.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 = getHorizontalRuleStyles(horizontalRule);
+    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],
+      "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
+      // 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
+      !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles$1.activePressed]
+    }, /*#__PURE__*/React.createElement(LeftAccessory, {
+      leftAccessory: leftAccessory,
+      leftAccessoryStyle: leftAccessoryStyle,
+      disabled: disabled
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles$1.content,
+      testId: testId
+    }, children), /*#__PURE__*/React.createElement(RightAccessory, {
+      rightAccessory: rightAccessory,
+      rightAccessoryStyle: rightAccessoryStyle,
+      active: active,
+      disabled: disabled
+    })));
+  }; // Pressable cell.
+
+
+  if (onClick) {
+    return /*#__PURE__*/React.createElement(Clickable, {
+      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$1 = StyleSheet.create({
+  wrapper: {
+    background: Color.white,
+    color: Color.offBlack,
+    minHeight: CellMeasurements.cellMinHeight,
+    textAlign: "left"
+  },
+  innerWrapper: {
+    padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
+    flexDirection: "row",
+    flex: 1
+  },
+  content: {
+    alignSelf: "center",
+    overflowWrap: "break-word",
+    padding: `${CellMeasurements.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: Color.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: Color.offBlack8
+  },
+  // Handling the focus ring internally because clickable doesn't support
+  // rounded focus ring.
+  focused: {
+    borderRadius: Spacing.xxxSmall_4,
+    outline: `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`,
+    // The focus ring is not visible when there are stacked cells.
+    // Using outlineOffset to display the focus ring inside the cell.
+    outlineOffset: -Spacing.xxxxSmall_2,
+    // To hide the internal corners of the cell.
+    overflow: "hidden"
+  },
+  pressed: {
+    background: Color.offBlack16
+  },
+  active: {
+    background: fade(Color.blue, 0.08),
+    color: Color.blue
+  },
+  activeHovered: {
+    background: fade(Color.blue, 0.16)
+  },
+  activePressed: {
+    background: fade(Color.blue, 0.24)
+  },
+  disabled: {
+    color: Color.offBlack32
+  },
+  accessoryActive: {
+    color: Color.blue
+  },
+  accessoryDisabled: {
+    color: Color.offBlack,
+    opacity: 0.32
+  }
+});
+
+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.
+ *
+ * ### 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
+  } = props,
+        coreProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+
+  return /*#__PURE__*/React.createElement(CellCore, coreProps, typeof title === "string" ? /*#__PURE__*/React.createElement(LabelMedium, null, title) : title);
+}
+
+const _excluded = ["title", "subtitle1", "subtitle2"];
+
+const Subtitle = ({
+  subtitle,
+  disabled
+}) => {
+  if (!subtitle) {
+    return null;
+  }
+
+  if (typeof subtitle === "string") {
+    return /*#__PURE__*/React.createElement(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
+  } = props,
+        coreProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(CellCore, coreProps, /*#__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, {
+    size: Spacing.xxxxSmall_2
+  }), /*#__PURE__*/React.createElement(Subtitle, {
+    subtitle: subtitle2,
+    disabled: coreProps.disabled
+  }));
+}
+
+const styles = StyleSheet.create({
+  subtitle: {
+    color: Color.offBlack64
+  }
+});
+
+export { BasicCell, DetailCell };