@khanacademy/wonder-blocks-cell 2.2.15 → 2.2.16

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-cell
 
+## 2.2.16
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-clickable@2.4.6
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-layout@1.4.17
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 2.2.15
 
 ### Patch Changes

package/dist/components/compact-cell.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { CellProps } from "../util/types";
+/**
+ * `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 {CompactCell} from "@khanacademy/wonder-blocks-cell";
+ *
+ * <CompactCell
+ *  title="Compact cell"
+ *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ * />
+ * ```
+ */
+declare const CompactCell: React.FC<CellProps>;
+export default CompactCell;

package/dist/components/compact-cell.js.flow

@@ -0,0 +1,30 @@
+/**
+ * Flowtype definitions for compact-cell
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { CellProps } from "../util/types";
+
+/**
+ * `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 {CompactCell} from "@khanacademy/wonder-blocks-cell";
+ *
+ * <CompactCell
+ *  title="Compact cell"
+ *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ * />
+ * ```
+ */
+declare var CompactCell: React.FC<CellProps>;
+declare export default typeof CompactCell;

package/dist/components/detail-cell.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { CellProps, TypographyText } from "../util/types";
+type DetailCellProps = CellProps & {
+    /**
+     * You can either provide a string or a custom node Typography element (or
+     * nothing at all). Both a string or a custom node Typography element will
+     * occupy the “Subtitle1” area of the Cell.
+     */
+    subtitle1?: TypographyText;
+    /**
+     * You can either provide a string or a custom node Typography element (or
+     * nothing at all). Both a string or a custom node Typography element will
+     * occupy the “Subtitle2” area of the Cell.
+     */
+    subtitle2?: TypographyText;
+};
+/**
+ * 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
+ *
+ * ```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" />}
+ * />
+ * ```
+ */
+declare const DetailCell: React.FC<DetailCellProps>;
+export default DetailCell;

package/dist/components/detail-cell.js.flow

@@ -0,0 +1,51 @@
+/**
+ * Flowtype definitions for detail-cell
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { CellProps, TypographyText } from "../util/types";
+declare type DetailCellProps = {
+  ...CellProps,
+  ...{
+    /**
+     * You can either provide a string or a custom node Typography element (or
+     * nothing at all). Both a string or a custom node Typography element will
+     * occupy the “Subtitle1” area of the Cell.
+     */
+    subtitle1?: TypographyText,
+
+    /**
+     * You can either provide a string or a custom node Typography element (or
+     * nothing at all). Both a string or a custom node Typography element will
+     * occupy the “Subtitle2” area of the Cell.
+     */
+    subtitle2?: TypographyText,
+    ...
+  },
+};
+/**
+ * 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
+ *
+ * ```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" />}
+ * />
+ * ```
+ */
+declare var DetailCell: React.FC<DetailCellProps>;
+declare export default typeof DetailCell;

package/dist/components/internal/cell-core.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { CellProps } from "../../util/types";
+type CellCoreProps = Partial<Omit<CellProps, "title">> & {
+    /**
+     * The content of the cell.
+     */
+    children: React.ReactNode;
+    /**
+     * 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 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
+ * (using the `children` prop).
+ */
+declare const CellCore: React.FC<CellCoreProps>;
+export default CellCore;

package/dist/components/internal/cell-core.js.flow

@@ -0,0 +1,38 @@
+/**
+ * Flowtype definitions for cell-core
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { CellProps } from "../../util/types";
+declare type CellCoreProps = {
+  ...$Rest<$Diff<CellProps, { title: any }>, { ... }>,
+  ...{
+    /**
+     * 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 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
+ * (using the `children` prop).
+ */
+declare var CellCore: React.FC<CellCoreProps>;
+declare export default typeof CellCore;

package/dist/components/internal/common.d.ts

@@ -0,0 +1,30 @@
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { HorizontalRuleVariant } from "../../util/types";
+export declare const CellMeasurements: {
+    readonly cellMinHeight: 48;
+    /**
+     * The cell wrapper's gap.
+     */
+    readonly cellPadding: {
+        readonly paddingVertical: 12;
+        readonly paddingHorizontal: 16;
+    };
+    /**
+     * The DetailCell wrapper's gap.
+     */
+    readonly detailCellPadding: {
+        readonly paddingVertical: 16;
+        readonly paddingHorizontal: 16;
+    };
+    /**
+     * The horizontal spacing between the left and right accessory.
+     */
+    readonly accessoryHorizontalSpacing: 16;
+};
+/**
+ * Gets the horizontalRule style based on the variant.
+ * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal
+ * rule.
+ * @returns A styled horizontal rule.
+ */
+export declare const getHorizontalRuleStyles: (horizontalRule: HorizontalRuleVariant) => StyleType;

package/dist/components/internal/common.js.flow

@@ -0,0 +1,45 @@
+/**
+ * Flowtype definitions for common
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { HorizontalRuleVariant } from "../../util/types";
+declare export var CellMeasurements: {
+  +cellMinHeight: 48,
+
+  /**
+   * The cell wrapper's gap.
+   */
+  +cellPadding: {
+    +paddingVertical: 12,
+    +paddingHorizontal: 16,
+    ...
+  },
+
+  /**
+   * The DetailCell wrapper's gap.
+   */
+  +detailCellPadding: {
+    +paddingVertical: 16,
+    +paddingHorizontal: 16,
+    ...
+  },
+
+  /**
+   * The horizontal spacing between the left and right accessory.
+   */
+  +accessoryHorizontalSpacing: 16,
+  ...
+};
+/**
+ * Gets the horizontalRule style based on the variant.
+ * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal
+ * rule.
+ * @returns A styled horizontal rule.
+ */
+declare export var getHorizontalRuleStyles: (
+  horizontalRule: HorizontalRuleVariant
+) => StyleType;

package/dist/es/index.js

@@ -1,7 +1,5 @@
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
 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';
 import { View } from '@khanacademy/wonder-blocks-core';
@@ -9,6 +7,34 @@ import Color, { fade } from '@khanacademy/wonder-blocks-color';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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);
+}
+
 const CellMeasurements = {
   cellMinHeight: Spacing.xxLarge_48,
   cellPadding: {
@@ -25,10 +51,8 @@ const getHorizontalRuleStyles = horizontalRule => {
   switch (horizontalRule) {
     case "inset":
       return [styles$2.horizontalRule, styles$2.horizontalRuleInset];
-
     case "full-width":
       return styles$2.horizontalRule;
-
     case "none":
       return {};
   }
@@ -61,14 +85,12 @@ const LeftAccessory = ({
   if (!leftAccessory) {
     return null;
   }
-
   return React.createElement(React.Fragment, null, React.createElement(View, {
     style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends({}, leftAccessoryStyle)]
   }, leftAccessory), React.createElement(Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
   }));
 };
-
 const RightAccessory = ({
   rightAccessory,
   rightAccessoryStyle,
@@ -78,14 +100,12 @@ const RightAccessory = ({
   if (!rightAccessory) {
     return null;
   }
-
   return React.createElement(React.Fragment, null, React.createElement(Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
   }), React.createElement(View, {
     style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends({}, rightAccessoryStyle), active && styles$1.accessoryActive]
   }, rightAccessory));
 };
-
 const CellCore = props => {
   const {
     active,
@@ -104,7 +124,6 @@ const CellCore = props => {
     innerStyle,
     target
   } = props;
-
   const renderCell = eventState => {
     const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
     return React.createElement(View, {
@@ -126,7 +145,6 @@ const CellCore = props => {
       disabled: disabled
     })));
   };
-
   if (onClick || href) {
     return React.createElement(Clickable, {
       disabled: disabled,
@@ -137,10 +155,8 @@ const CellCore = props => {
       target: target
     }, eventState => renderCell(eventState));
   }
-
   return renderCell();
 };
-
 const styles$1 = StyleSheet.create({
   wrapper: {
     background: Color.white,
@@ -204,18 +220,15 @@ const styles$1 = StyleSheet.create({
 });
 
 const _excluded$1 = ["title"];
-
-function CompactCell(props) {
+const CompactCell = function CompactCell(props) {
   const {
-    title
-  } = props,
-        coreProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-
+      title
+    } = props,
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   return React.createElement(CellCore, coreProps, typeof title === "string" ? React.createElement(LabelMedium, null, title) : title);
-}
+};
 
 const _excluded = ["title", "subtitle1", "subtitle2"];
-
 const Subtitle = ({
   subtitle,
   disabled
@@ -223,24 +236,20 @@ const Subtitle = ({
   if (!subtitle) {
     return null;
   }
-
   if (typeof subtitle === "string") {
     return React.createElement(LabelSmall, {
       style: !disabled && styles.subtitle
     }, subtitle);
   }
-
   return subtitle;
 };
-
-function DetailCell(props) {
+const DetailCell = function DetailCell(props) {
   const {
-    title,
-    subtitle1,
-    subtitle2
-  } = props,
-        coreProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+      title,
+      subtitle1,
+      subtitle2
+    } = props,
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded);
   return React.createElement(CellCore, _extends({}, coreProps, {
     innerStyle: styles.innerWrapper
   }), React.createElement(Subtitle, {
@@ -254,8 +263,7 @@ function DetailCell(props) {
     subtitle: subtitle2,
     disabled: coreProps.disabled
   }));
-}
-
+};
 const styles = StyleSheet.create({
   subtitle: {
     color: Color.offBlack64

package/dist/index.d.ts

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