@khanacademy/wonder-blocks-cell 2.2.13 → 2.2.15

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.2.15
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+    -   @khanacademy/wonder-blocks-clickable@2.4.5
+    -   @khanacademy/wonder-blocks-color@1.2.1
+    -   @khanacademy/wonder-blocks-core@4.7.0
+    -   @khanacademy/wonder-blocks-layout@1.4.16
+    -   @khanacademy/wonder-blocks-typography@1.1.38
+
+## 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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.2.13",
+  "version": "2.2.15",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,19 +14,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.3",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.1",
-    "@khanacademy/wonder-blocks-layout": "^1.4.14",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+    "@khanacademy/wonder-blocks-color": "^1.2.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.16",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.36"
+    "@khanacademy/wonder-blocks-typography": "^1.1.38"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.1"
   },
   "author": "",
   "license": "MIT"

package/src/components/__docs__/compact-cell.stories.js

@@ -12,13 +12,11 @@ import type {StoryComponentType} from "@storybook/react";
 
 import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import CompactCellArgTypes, {
-    AccessoryMappings,
-} from "./compact-cell.argtypes.js";
+import CompactCellArgTypes, {AccessoryMappings} from "./compact-cell.argtypes";
 
-import CompactCell from "../compact-cell.js";
+import CompactCell from "../compact-cell";
 
 export default {
     title: "Cell / CompactCell",

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

@@ -1,5 +1,5 @@
 // @flow
-import CompactCellArgTypes from "./compact-cell.argtypes.js";
+import CompactCellArgTypes from "./compact-cell.argtypes";
 
 export default {
     ...CompactCellArgTypes,

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

@@ -10,11 +10,11 @@ import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import DetailCellArgTypes from "./detail-cell.argtypes.js";
+import DetailCellArgTypes from "./detail-cell.argtypes";
 
-import DetailCell from "../detail-cell.js";
+import DetailCell from "../detail-cell";
 
 export default {
     title: "Cell / DetailCell",

package/src/components/__tests__/compact-cell.test.js

@@ -5,7 +5,7 @@ import {render, screen} from "@testing-library/react";
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
 
-import CompactCell from "../compact-cell.js";
+import CompactCell from "../compact-cell";
 
 describe("CompactCell", () => {
     it("should render the default CompactCell component", () => {

package/src/components/__tests__/detail-cell.test.js

@@ -4,7 +4,7 @@ import {render, screen} from "@testing-library/react";
 
 import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
 
-import DetailCell from "../detail-cell.js";
+import DetailCell from "../detail-cell";
 
 describe("DetailCell", () => {
     it("should render the default DetailCell component", () => {

package/src/components/compact-cell.js

@@ -3,9 +3,9 @@ import * as React from "react";
 
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
-import CellCore from "./internal/cell-core.js";
+import CellCore from "./internal/cell-core";
 
-import type {CellProps} from "../util/types.js";
+import type {CellProps} from "../util/types";
 
 /**
  * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell

package/src/components/detail-cell.js

@@ -7,10 +7,10 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelSmall, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
-import CellCore from "./internal/cell-core.js";
-import {CellMeasurements} from "./internal/common.js";
+import CellCore from "./internal/cell-core";
+import {CellMeasurements} from "./internal/common";
 
-import type {CellProps, TypographyText} from "../util/types.js";
+import type {CellProps, TypographyText} from "../util/types";
 
 type SubtitleProps = {|
     subtitle?: TypographyText,

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

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import CellCore from "../cell-core.js";
+import CellCore from "../cell-core";
 
 describe("CellCore", () => {
     it("should render the CellCore component", () => {

package/src/components/internal/__tests__/common.test.js

@@ -1,6 +1,6 @@
 // @flow
 
-import {getHorizontalRuleStyles} from "../common.js";
+import {getHorizontalRuleStyles} from "../common";
 
 describe("getHorizontalRuleStyles", () => {
     it("should get 'inset' styles as an array", () => {

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

@@ -11,9 +11,9 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {ClickableState} from "@khanacademy/wonder-blocks-clickable";
-import {CellMeasurements, getHorizontalRuleStyles} from "./common.js";
+import {CellMeasurements, getHorizontalRuleStyles} from "./common";
 
-import type {CellProps, TypographyText} from "../../util/types.js";
+import type {CellProps, TypographyText} from "../../util/types";
 
 type LeftAccessoryProps = {|
     leftAccessory?: CellProps["leftAccessory"],

package/src/components/internal/common.js

@@ -5,7 +5,7 @@ import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {HorizontalRuleVariant} from "../../util/types.js";
+import type {HorizontalRuleVariant} from "../../util/types";
 
 export const CellMeasurements = {
     cellMinHeight: Spacing.xxLarge_48,

package/src/index.js

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