Add 'contentStyle' prop to DetailCell (#2192)

## Summary:
We need a way to align content to the top the content container so that we can can implement cards with all items aligned to the top.  This PR adds a 'contentStyle' prop to provide this functional.  It's similar to the existing leftAccessoryStyle and rightAccessoryStyle props.

I also added a 'start:storybook' script to package.json that matches the command we use in webapp.  'yarn start' will still work to start Storybook.

Issue: None

## Test plan:
- yarn start:storybook
- view the DetailCell story for custom styles, see that the title is top-aligned like the two accessories are

<img width="399" alt="Screen Shot 2024-02-28 at 10 11 16 AM" src="https://github.com/Khan/wonder-blocks/assets/1044413/f31d4844-c819-4e7e-9f34-2972db20f4b0">

Author: kevinbarabash

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ codecov/project, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2192

.changeset/shy-lizards-explode.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-cell": minor
+---
+
+Added 'contentStyle' prop to DetailCell

__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx

@@ -52,6 +52,16 @@ export default {
             },
         },
     },
+    contentStyle: {
+        description: `Optional custom styles applied to the content wrapper. For example, it can be used to set a custom minWidth or a custom alignment.`,
+        table: {
+            category: "Styling",
+            type: {
+                summary: "AccessoryStyle",
+                detail: '"minWidth" | "alignSelf" | "alignItems"',
+            },
+        },
+    },
     leftAccessory: {
         description: `If provided, this adds a left accessory to the cell. Left Accessories can be defined using WB components such as PhosphorIcon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the "LeftAccessory” area of the Cell.`,
         control: {type: "select"},

__docs__/wonder-blocks-cell/detail-cell.stories.tsx

@@ -123,8 +123,9 @@ DetailCellDisabled.parameters = {
 export const DetailCellWithCustomStyles: StoryComponentType = () => (
     <DetailCell
         title="Title for article item"
-        subtitle1="Subtitle for article item"
-        subtitle2="Subtitle for article item"
+        contentStyle={{
+            alignSelf: "flex-start",
+        }}
         leftAccessory={
             <PhosphorIcon icon={IconMappings.caretLeftBold} size="small" />
         }
@@ -139,14 +140,15 @@ export const DetailCellWithCustomStyles: StoryComponentType = () => (
         }}
         style={{
             textAlign: "center",
+            minHeight: 88,
         }}
     />
 );
 
 DetailCellWithCustomStyles.parameters = {
     docs: {
         description: {
-            story: "Accessories can also be customized to adapt to different sizes and alignments. In this example, we can see how a cell can be customized for both accessories.",
+            story: "Accessories and the main content container can also be customized to adapt to different sizes and alignments. In this example, we can see how a cell can be customized for both accessories and the content.",
         },
     },
 };

package.json

@@ -24,7 +24,8 @@
     "lint": "yarn lint:ci .",
     "lint:ci": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx",
     "publish:ci": "yarn run lint:pkg-json && node utils/publish/pre-publish-check-ci.js && git diff --stat --exit-code HEAD && yarn build && yarn build:types && changeset publish",
-    "start": "storybook dev -p 6061",
+    "start": "start:storybook",
+    "start:storybook": "storybook dev -p 6061",
     "test:common": "yarn run build && yarn run lint && yarn run alex && yarn run typecheck",
     "test:coverage": "yarn run test:common && yarn run jest --coverage",
     "test": "yarn run test:common && yarn run jest",

packages/wonder-blocks-cell/src/components/internal/__tests__/cell-core.test.tsx

@@ -138,4 +138,23 @@ describe("CellCore", () => {
         // Assert
         expect(screen.getByRole("button")).toHaveStyle("color: blue");
     });
+
+    it("should pass an style to the content container", () => {
+        // Arrange
+
+        // Act
+        render(
+            <CellCore
+                onClick={jest.fn()}
+                contentStyle={{alignSelf: "flex-start"}}
+            >
+                <div>cell core content</div>
+            </CellCore>,
+        );
+
+        // Assert
+        const elem = screen.getByText("cell core content");
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(elem.parentElement).toHaveStyle("align-self: flex-start");
+    });
 });

packages/wonder-blocks-cell/src/components/internal/cell-core.tsx

@@ -99,6 +99,7 @@ function CellInner(props: CellCoreProps): React.ReactElement {
         children,
         disabled,
         horizontalRule = "inset",
+        contentStyle = undefined,
         leftAccessory = undefined,
         leftAccessoryStyle = undefined,
         rightAccessory = undefined,
@@ -127,7 +128,7 @@ function CellInner(props: CellCoreProps): React.ReactElement {
             />
 
             {/* Cell contents */}
-            <View style={styles.content} testId={testId}>
+            <View style={[styles.content, contentStyle]} testId={testId}>
                 {children}
             </View>
 

packages/wonder-blocks-cell/src/util/types.ts

@@ -50,6 +50,12 @@ export type CellProps = {
      * LabelLarge.
      */
     title: TypographyText;
+    /**
+     * Optional custom styles applied to the content wrapper. For
+     * example, it can be used to set a custom minWidth or a custom
+     * alignment.
+     */
+    contentStyle?: AccessoryStyle;
     /**
      * If provided, this adds a left accessory to the cell. Left
      * Accessories can be defined using WB components such as Icon,