@khanacademy/wonder-blocks-cell - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

CHANGELOG.md

 # @khanacademy/wonder-blocks-cell
 
+## 2.2.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.6
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-layout@1.4.9
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 2.2.2
@@ -4,0 +13,0 @@

dist/es/index.js

@@ -14,6 +14,2 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
   cellMinHeight: Spacing.xxLarge_48,
-
-  /**
-   * The cell wrapper's gap.
-   */
   cellPadding: {
@@ -23,6 +19,2 @@ paddingVertical: Spacing.small_12,
   },
-
-  /**
-   * The DetailCell wrapper's gap.
-   */
   detailCellPadding: {
@@ -32,15 +24,4 @@ paddingVertical: Spacing.medium_16,
   },
-
-  /**
-   * 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 => {
@@ -65,5 +46,3 @@ switch (horizontalRule) {
       position: "absolute",
-      // align to the bottom of the cell
       bottom: 0,
-      // align border to the right of the cell
       right: 0,
@@ -76,3 +55,2 @@ height: Spacing.xxxxSmall_2,
     ":after": {
-      // Inset doesn't include the left padding of the cell.
       width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`
@@ -83,6 +61,2 @@ }
 
-/**
- * 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 = ({
@@ -97,5 +71,5 @@ leftAccessory,
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  return React.createElement(React.Fragment, null, React.createElement(View, {
     style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends({}, leftAccessoryStyle)]
-  }, leftAccessory), /*#__PURE__*/React.createElement(Strut, {
+  }, leftAccessory), React.createElement(Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
@@ -105,6 +79,2 @@ }));
 
-/**
- * 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 = ({
@@ -120,5 +90,5 @@ rightAccessory,
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+  return React.createElement(React.Fragment, null, React.createElement(Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
-  }), /*#__PURE__*/React.createElement(View, {
+  }), React.createElement(View, {
     style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends({}, rightAccessoryStyle), active && styles$1.accessoryActive]
@@ -128,10 +98,2 @@ }, rightAccessory));
 
-/**
- * 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).
- */
 const CellCore = props => {
@@ -158,22 +120,15 @@ const {
     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],
+    return React.createElement(View, {
+      style: [styles$1.wrapper, (eventState == null ? void 0 : eventState.focused) && styles$1.focused],
       "aria-current": active ? "true" : undefined
-    }, /*#__PURE__*/React.createElement(View, {
-      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
-      !disabled && active && (eventState == null ? void 0 : eventState.pressed) && styles$1.activePressed]
-    }, /*#__PURE__*/React.createElement(LeftAccessory, {
+    }, React.createElement(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.createElement(LeftAccessory, {
       leftAccessory: leftAccessory,
       leftAccessoryStyle: leftAccessoryStyle,
       disabled: disabled
-    }), /*#__PURE__*/React.createElement(View, {
+    }), React.createElement(View, {
       style: styles$1.content,
       testId: testId
-    }, children), /*#__PURE__*/React.createElement(RightAccessory, {
+    }, children), React.createElement(RightAccessory, {
       rightAccessory: rightAccessory,
@@ -184,7 +139,6 @@ rightAccessoryStyle: rightAccessoryStyle,
     })));
-  }; // Pressable cell.
+  };
 
-
   if (onClick || href) {
-    return /*#__PURE__*/React.createElement(Clickable, {
+    return React.createElement(Clickable, {
       disabled: disabled,
@@ -197,5 +151,4 @@ onClick: onClick,
     }, eventState => renderCell(eventState));
-  } // No click event attached, so just render the cell as-is.
+  }
 
-
   return renderCell();
@@ -218,3 +171,2 @@ };
     alignSelf: "center",
-    // Expand the content to fill the available space.
     flex: 1,
@@ -224,30 +176,16 @@ overflowWrap: "break-word"
   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
   },
-
-  /**
-   * 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"
@@ -285,20 +223,2 @@ },
 
-/**
- * `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" />}
- * />
- * ```
- */
 function CompactCell(props) {
@@ -310,3 +230,3 @@ const {
 
-  return /*#__PURE__*/React.createElement(CellCore, coreProps, typeof title === "string" ? /*#__PURE__*/React.createElement(LabelMedium, null, title) : title);
+  return React.createElement(CellCore, coreProps, typeof title === "string" ? React.createElement(LabelMedium, null, title) : title);
 }
@@ -325,3 +245,3 @@
   if (typeof subtitle === "string") {
-    return /*#__PURE__*/React.createElement(LabelSmall, {
+    return React.createElement(LabelSmall, {
       style: !disabled && styles.subtitle
@@ -334,23 +254,2 @@ }, subtitle);
 
-/**
- * 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" />}
- * />
- * ```
- */
 function DetailCell(props) {
@@ -364,12 +263,12 @@ const {
 
-  return /*#__PURE__*/React.createElement(CellCore, _extends({}, coreProps, {
+  return React.createElement(CellCore, _extends({}, coreProps, {
     innerStyle: styles.innerWrapper
-  }), /*#__PURE__*/React.createElement(Subtitle, {
+  }), React.createElement(Subtitle, {
     subtitle: subtitle1,
     disabled: coreProps.disabled
-  }), subtitle1 && /*#__PURE__*/React.createElement(Strut, {
+  }), subtitle1 && React.createElement(Strut, {
     size: Spacing.xxxxSmall_2
-  }), typeof title === "string" ? /*#__PURE__*/React.createElement(LabelMedium, null, title) : title, subtitle2 && /*#__PURE__*/React.createElement(Strut, {
+  }), typeof title === "string" ? React.createElement(LabelMedium, null, title) : title, subtitle2 && React.createElement(Strut, {
     size: Spacing.xxxxSmall_2
-  }), /*#__PURE__*/React.createElement(Subtitle, {
+  }), React.createElement(Subtitle, {
     subtitle: subtitle2,
@@ -384,3 +283,2 @@ disabled: coreProps.disabled
   },
-  // This is to override the default padding of the CellCore innerWrapper.
   innerWrapper: {
@@ -387,0 +285,0 @@ padding: `${CellMeasurements.detailCellPadding.paddingVertical}px ${CellMeasurements.detailCellPadding.paddingHorizontal}px`

package.json

 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "design": "v1",
@@ -17,8 +17,8 @@ "publishConfig": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.5",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.6",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
@@ -30,3 +30,3 @@ "peerDependencies": {
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
@@ -33,0 +33,0 @@ "author": "",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

90025

decreased by-3.79%

Lines of code

2319

decreased by-3.9%

Dependency changes

• Updated@khanacademy/wonder-blocks-clickable@^2.2.6

• Updated@khanacademy/wonder-blocks-core@^4.3.1

• Updated@khanacademy/wonder-blocks-layout@^1.4.9

• Updated@khanacademy/wonder-blocks-typography@^1.1.31