@khanacademy/wonder-blocks-cell 2.2.12 → 2.2.14

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.2.14
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-clickable@2.4.4
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-layout@1.4.15
+    -   @khanacademy/wonder-blocks-typography@1.1.37
+
+## 2.2.13
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.4.3
+-   @khanacademy/wonder-blocks-core@4.6.1
+-   @khanacademy/wonder-blocks-layout@1.4.14
+-   @khanacademy/wonder-blocks-typography@1.1.36
+
 ## 2.2.12
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,300 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var _extends = require('@babel/runtime/helpers/extends');
+var aphrodite = require('aphrodite');
+var Clickable = require('@khanacademy/wonder-blocks-clickable');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Color = require('@khanacademy/wonder-blocks-color');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+
+const CellMeasurements = {
+  cellMinHeight: Spacing__default["default"].xxLarge_48,
+  cellPadding: {
+    paddingVertical: Spacing__default["default"].small_12,
+    paddingHorizontal: Spacing__default["default"].medium_16
+  },
+  detailCellPadding: {
+    paddingVertical: Spacing__default["default"].medium_16,
+    paddingHorizontal: Spacing__default["default"].medium_16
+  },
+  accessoryHorizontalSpacing: Spacing__default["default"].medium_16
+};
+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 = aphrodite.StyleSheet.create({
+  horizontalRule: {
+    position: "relative",
+    ":after": {
+      width: "100%",
+      content: "''",
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      height: Spacing__default["default"].xxxxSmall_2,
+      boxShadow: `inset 0px -1px 0px ${Color__default["default"].offBlack8}`
+    }
+  },
+  horizontalRuleInset: {
+    ":after": {
+      width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`
+    }
+  }
+});
+
+const LeftAccessory = ({
+  leftAccessory,
+  leftAccessoryStyle,
+  disabled
+}) => {
+  if (!leftAccessory) {
+    return null;
+  }
+
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends__default["default"]({}, leftAccessoryStyle)]
+  }, leftAccessory), React__namespace.createElement(wonderBlocksLayout.Strut, {
+    size: CellMeasurements.accessoryHorizontalSpacing
+  }));
+};
+
+const RightAccessory = ({
+  rightAccessory,
+  rightAccessoryStyle,
+  active,
+  disabled
+}) => {
+  if (!rightAccessory) {
+    return null;
+  }
+
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
+    size: CellMeasurements.accessoryHorizontalSpacing
+  }), React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends__default["default"]({}, rightAccessoryStyle), active && styles$1.accessoryActive]
+  }, rightAccessory));
+};
+
+const CellCore = props => {
+  const {
+    active,
+    children,
+    disabled,
+    href,
+    horizontalRule = "inset",
+    leftAccessory = undefined,
+    leftAccessoryStyle = undefined,
+    onClick,
+    rightAccessory = undefined,
+    rightAccessoryStyle = undefined,
+    style,
+    testId,
+    "aria-label": ariaLabel,
+    innerStyle,
+    target
+  } = props;
+
+  const renderCell = eventState => {
+    const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$1.wrapper, (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
+      "aria-current": active ? "true" : undefined
+    }, React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$1.innerWrapper, innerStyle, style, horizontalRuleStyles, disabled && styles$1.disabled, active && styles$1.active, !disabled && (eventState == null ? void 0 : eventState.hovered) && styles$1.hovered, active && (eventState == null ? void 0 : eventState.hovered) && styles$1.activeHovered, !disabled && (eventState == null ? void 0 : eventState.pressed) && styles$1.pressed, !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles$1.activePressed]
+    }, React__namespace.createElement(LeftAccessory, {
+      leftAccessory: leftAccessory,
+      leftAccessoryStyle: leftAccessoryStyle,
+      disabled: disabled
+    }), React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$1.content,
+      testId: testId
+    }, children), React__namespace.createElement(RightAccessory, {
+      rightAccessory: rightAccessory,
+      rightAccessoryStyle: rightAccessoryStyle,
+      active: active,
+      disabled: disabled
+    })));
+  };
+
+  if (onClick || href) {
+    return React__namespace.createElement(Clickable__default["default"], {
+      disabled: disabled,
+      onClick: onClick,
+      href: href,
+      hideDefaultFocusRing: true,
+      "aria-label": ariaLabel ? ariaLabel : undefined,
+      target: target
+    }, eventState => renderCell(eventState));
+  }
+
+  return renderCell();
+};
+
+const styles$1 = aphrodite.StyleSheet.create({
+  wrapper: {
+    background: Color__default["default"].white,
+    color: Color__default["default"].offBlack,
+    minHeight: CellMeasurements.cellMinHeight,
+    textAlign: "left"
+  },
+  innerWrapper: {
+    padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
+    flexDirection: "row",
+    flex: 1
+  },
+  content: {
+    alignSelf: "center",
+    flex: 1,
+    overflowWrap: "break-word"
+  },
+  accessory: {
+    minWidth: "auto",
+    alignItems: "center",
+    alignSelf: "center"
+  },
+  accessoryRight: {
+    color: Color__default["default"].offBlack64
+  },
+  hovered: {
+    background: Color__default["default"].offBlack8
+  },
+  focused: {
+    borderRadius: Spacing__default["default"].xxxSmall_4,
+    outline: `solid ${Spacing__default["default"].xxxxSmall_2}px ${Color__default["default"].blue}`,
+    outlineOffset: -Spacing__default["default"].xxxxSmall_2,
+    overflow: "hidden"
+  },
+  pressed: {
+    background: Color__default["default"].offBlack16
+  },
+  active: {
+    background: Color.fade(Color__default["default"].blue, 0.08),
+    color: Color__default["default"].blue
+  },
+  activeHovered: {
+    background: Color.fade(Color__default["default"].blue, 0.16)
+  },
+  activePressed: {
+    background: Color.fade(Color__default["default"].blue, 0.24)
+  },
+  disabled: {
+    color: Color__default["default"].offBlack32,
+    ":hover": {
+      cursor: "not-allowed"
+    }
+  },
+  accessoryActive: {
+    color: Color__default["default"].blue
+  },
+  accessoryDisabled: {
+    color: Color__default["default"].offBlack,
+    opacity: 0.32
+  }
+});
+
+const _excluded$1 = ["title"];
+
+function CompactCell(props) {
+  const {
+    title
+  } = props,
+        coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+
+  return React__namespace.createElement(CellCore, coreProps, typeof title === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, title) : title);
+}
+
+const _excluded = ["title", "subtitle1", "subtitle2"];
+
+const Subtitle = ({
+  subtitle,
+  disabled
+}) => {
+  if (!subtitle) {
+    return null;
+  }
+
+  if (typeof subtitle === "string") {
+    return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+      style: !disabled && styles.subtitle
+    }, subtitle);
+  }
+
+  return subtitle;
+};
+
+function DetailCell(props) {
+  const {
+    title,
+    subtitle1,
+    subtitle2
+  } = props,
+        coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+
+  return React__namespace.createElement(CellCore, _extends__default["default"]({}, coreProps, {
+    innerStyle: styles.innerWrapper
+  }), React__namespace.createElement(Subtitle, {
+    subtitle: subtitle1,
+    disabled: coreProps.disabled
+  }), subtitle1 && React__namespace.createElement(wonderBlocksLayout.Strut, {
+    size: Spacing__default["default"].xxxxSmall_2
+  }), typeof title === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, title) : title, subtitle2 && React__namespace.createElement(wonderBlocksLayout.Strut, {
+    size: Spacing__default["default"].xxxxSmall_2
+  }), React__namespace.createElement(Subtitle, {
+    subtitle: subtitle2,
+    disabled: coreProps.disabled
+  }));
+}
+
+const styles = aphrodite.StyleSheet.create({
+  subtitle: {
+    color: Color__default["default"].offBlack64
+  },
+  innerWrapper: {
+    padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`
+  }
+});
+
+exports.CompactCell = CompactCell;
+exports.DetailCell = DetailCell;

package/dist/index.js.flow

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.2.12",
+  "version": "2.2.14",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,19 +14,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.2",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.13",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
+    "@khanacademy/wonder-blocks-layout": "^1.4.15",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.35"
+    "@khanacademy/wonder-blocks-typography": "^1.1.37"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   },
   "author": "",
   "license": "MIT"