DetailCell: Add variant stories (#2407)

## Summary:
Add scenario and variant stories for DetailCell. This will help us confirm styling for different states with visual regression tests.

For now, the color contrast issues haven't been addressed yet. Coordinating with design on what styling updates we want long term (see WB-1797 comments for more details!). Including these stories for now so we can have visual regression tests ready when we address the color issues!

Issue: WB-1797

## Test plan:
- Review stories for:
  - All Variants (`?path=/docs/packages-cell-detailcell-all-variants--docs`)
  - Scenarios (`?path=/story/packages-cell-detailcell--scenarios`)

Author: beaesguerra

Reviewers: beaesguerra, marcysutton

Required Reviewers:

Approved By: marcysutton

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

Pull Request URL: #2407

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

@@ -0,0 +1,122 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import type {Meta, StoryObj} from "@storybook/react";
+
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {DetailCell} from "@khanacademy/wonder-blocks-cell";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * DetailCell component. This is only used for visual testing in Chromatic.
+ */
+export default {
+    title: "Packages / Cell / DetailCell / All Variants",
+    parameters: {
+        docs: {
+            autodocs: false,
+        },
+        backgrounds: {
+            default: "offWhite",
+        },
+    },
+} as Meta;
+
+type StoryComponentType = StoryObj<typeof DetailCell>;
+
+const states = [
+    {
+        label: "Default",
+        props: {},
+    },
+    {
+        label: "Disabled",
+        props: {disabled: true},
+    },
+    {
+        label: "Active",
+        props: {active: true},
+    },
+];
+
+const defaultProps = {
+    title: "Title for article item",
+    subtitle1: "Subtitle 1 for article item",
+    subtitle2: "Subtitle 2 for article item",
+    leftAccessory: (
+        <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+    ),
+    rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
+};
+
+const States = (props: {label: string} & PropsFor<typeof DetailCell>) => {
+    return (
+        <View>
+            <View style={[styles.scenarios]}>
+                {states.map((scenario) => {
+                    return (
+                        <View style={styles.scenario} key={scenario.label}>
+                            <LabelSmall>
+                                {props.label} ({scenario.label})
+                            </LabelSmall>
+                            <DetailCell {...props} {...scenario.props} />
+                        </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+
+const AllVariants = () => (
+    <View style={{gap: spacing.large_24}}>
+        <States label="Default" {...defaultProps} />
+        <States label="Clickable" {...defaultProps} onClick={() => {}} />
+        <States label="Link" {...defaultProps} href="/" />
+    </View>
+);
+
+export const Default: StoryComponentType = {
+    render: AllVariants,
+};
+
+export const Hover: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: StoryComponentType = {
+    name: "Hover + Focus",
+    render: AllVariants,
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+export const Active: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {active: true}},
+};
+
+const styles = StyleSheet.create({
+    statesContainer: {
+        padding: spacing.medium_16,
+    },
+    scenarios: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xxxLarge_64,
+        flexWrap: "wrap",
+    },
+    scenario: {
+        gap: spacing.small_12,
+        overflow: "hidden",
+    },
+});

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

@@ -13,6 +13,7 @@ import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import ComponentInfo from "../components/component-info";
 import DetailCellArgTypes from "./detail-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 export default {
     title: "Packages / Cell / DetailCell",
@@ -344,6 +345,130 @@ export const DetailCellsAsListItems: StoryComponentType = {
     },
 };
 
+export const Scenarios = () => {
+    const longText =
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ";
+    const longTextWithNoWordBreak =
+        "Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua";
+
+    const defaultProps = {
+        title: "Title for article item",
+        subtitle1: "Subtitle 1 for article item",
+        subtitle2: "Subtitle 2 for article item",
+        leftAccessory: (
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        ),
+        rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
+    };
+
+    const scenarios = [
+        {
+            label: "Default",
+            props: defaultProps,
+        },
+        {
+            label: "No Icons",
+            props: {
+                ...defaultProps,
+                leftAccessory: undefined,
+                rightAccessory: undefined,
+            },
+        },
+        {
+            label: "Left Icon Only",
+            props: {
+                ...defaultProps,
+                rightAccessory: undefined,
+            },
+        },
+        {
+            label: "Right Icon Only",
+            props: {
+                ...defaultProps,
+                leftAccessory: undefined,
+            },
+        },
+        {
+            label: "No Subtitles",
+            props: {
+                ...defaultProps,
+                subtitle1: undefined,
+                subtitle2: undefined,
+            },
+        },
+        {
+            label: "Subtitle 1 only",
+            props: {
+                ...defaultProps,
+                subtitle2: undefined,
+            },
+        },
+        {
+            label: "Subtitle 2 only",
+            props: {
+                ...defaultProps,
+                subtitle1: undefined,
+            },
+        },
+        {
+            label: "Title only",
+            props: {
+                title: defaultProps.title,
+            },
+        },
+        {
+            label: "Long Text",
+            props: {
+                ...defaultProps,
+                title: longText,
+                subtitle1: longText,
+                subtitle2: longText,
+            },
+        },
+        {
+            label: "Long Text No Word Break",
+            props: {
+                ...defaultProps,
+                title: longTextWithNoWordBreak,
+                subtitle1: longTextWithNoWordBreak,
+                subtitle2: longTextWithNoWordBreak,
+            },
+        },
+        {
+            label: "Long Text (no icons)",
+            props: {
+                ...defaultProps,
+                title: longText,
+                subtitle1: longText,
+                subtitle2: longText,
+                leftAccessory: undefined,
+                rightAccessory: undefined,
+            },
+        },
+        {
+            label: "Long Text No Word Break (no icons)",
+            props: {
+                ...defaultProps,
+                title: longTextWithNoWordBreak,
+                subtitle1: longTextWithNoWordBreak,
+                subtitle2: longTextWithNoWordBreak,
+                leftAccessory: undefined,
+                rightAccessory: undefined,
+            },
+        },
+    ];
+    return (
+        <View style={{gap: spacing.large_24}}>
+            {scenarios.map((scenario) => (
+                <>
+                    <LabelSmall>{scenario.label}</LabelSmall>
+                    <DetailCell {...scenario.props} />
+                </>
+            ))}
+        </View>
+    );
+};
+
 const styles = StyleSheet.create({
     example: {
         backgroundColor: color.offWhite,