Merge remote-tracking branch 'origin/main' into dropdown-cell

.storybook/main.ts

@@ -11,7 +11,7 @@ const config: StorybookConfig = {
         getAbsolutePath("@storybook/addon-designs"),
         getAbsolutePath("@storybook/addon-interactions"),
         getAbsolutePath("@storybook/addon-mdx-gfm"),
-        getAbsolutePath("@storybook/addon-mdx-gfm"),
+        getAbsolutePath("storybook-addon-pseudo-states"),
     ],
     staticDirs: ["../static"],
     core: {

__docs__/_overview_.mdx

@@ -7,6 +7,8 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Caption} from "@khanacademy/wonder-blocks-typography";
 
+import ComponentGallery from "./components/gallery/component-gallery";
+
 <Meta title="Overview" />
 
 export default function Layout({children}) {
@@ -99,3 +101,7 @@ from design to development:
 Have a question? Contact the team in the
 [#wonder-blocks](https://khanacademy.slack.com/archives/C8Z9DSKC7) Slack
 channel.
+
+## Components
+
+<ComponentGallery />

__docs__/components/gallery/component-gallery.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+
+import AccordionGallerySection from "./sections/accordion-section";
+import BannerSection from "./sections/banner-section";
+import BirthdayPickerSection from "./sections/birthday-picker-section";
+import BreadcrumbsSection from "./sections/breadcrumbs-section";
+import ButtonSection from "./sections/button-section";
+import CellSection from "./sections/cell-section";
+import DropdownSection from "./sections/dropdown-section";
+import FormSection from "./sections/form-section";
+import IconButtonSection from "./sections/icon-button-section";
+import IconSection from "./sections/icon-section";
+import LinkSection from "./sections/link-section";
+import ModalSection from "./sections/modal-section";
+import PillSection from "./sections/pill-section";
+import PopoverSection from "./sections/popover-section";
+import ProgressSpinnerSection from "./sections/progress-spinner-section";
+import SearchFieldSection from "./sections/search-field-section";
+import SwitchSection from "./sections/switch-section";
+import ToolbarSection from "./sections/toolbar-section";
+import TooltipSection from "./sections/tooltip-section";
+
+export default function ComponentGallery() {
+    return (
+        <View>
+            <AccordionGallerySection />
+            <BannerSection />
+            <BirthdayPickerSection />
+            <BreadcrumbsSection />
+            <ButtonSection />
+            <CellSection />
+            <DropdownSection />
+            <FormSection />
+            <IconButtonSection />
+            <IconSection />
+            <LinkSection />
+            <ModalSection />
+            <PillSection />
+            <PopoverSection />
+            <ProgressSpinnerSection />
+            <SearchFieldSection />
+            <SwitchSection />
+            <ToolbarSection />
+            <TooltipSection />
+        </View>
+    );
+}

__docs__/components/gallery/component-tile.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import externalLinkIcon from "@phosphor-icons/core/bold/arrow-square-out-bold.svg";
+
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {Body, HeadingMedium} from "@khanacademy/wonder-blocks-typography";
+
+type Props = {
+    children: React.ReactNode;
+    name: string;
+    description?: string;
+    href: string;
+};
+
+export default function ComponentTile(props: Props) {
+    const {children, description, name, href} = props;
+    return (
+        <View style={styles.tile}>
+            <Clickable
+                href={href}
+                target="_blank"
+                style={styles.clickable}
+                aria-label={`View ${name} component in a new tab.`}
+            >
+                {() => (
+                    <>
+                        <View style={styles.description}>
+                            <View style={styles.headingContainer}>
+                                <HeadingMedium tag="h4">{name}</HeadingMedium>
+                                <View style={styles.externalLinkIcon}>
+                                    <PhosphorIcon
+                                        icon={externalLinkIcon}
+                                        size="small"
+                                        aria-hidden="true"
+                                    />
+                                </View>
+                            </View>
+                            {description && (
+                                <Body style={styles.descriptionText}>
+                                    {description}
+                                </Body>
+                            )}
+                        </View>
+                    </>
+                )}
+            </Clickable>
+            <View style={styles.componentView}>{children}</View>
+        </View>
+    );
+}
+
+const mobile = "@media (max-width: 1023px)";
+
+const styles = StyleSheet.create({
+    tile: {
+        display: "flex",
+        flexDirection: "column",
+        margin: tokens.spacing.xSmall_8,
+        // Set the width to half the max width of the stories page content.
+        width: 484,
+        minHeight: 300,
+
+        [mobile]: {
+            width: "95%",
+        },
+    },
+    clickable: {
+        backgroundColor: tokens.color.offWhite,
+        border: `1px solid ${tokens.color.offBlack16}`,
+        borderStartStartRadius: tokens.spacing.small_12,
+        borderStartEndRadius: tokens.spacing.small_12,
+
+        ":hover": {
+            border: `1px solid ${tokens.color.blue}`,
+            outline: `1px solid ${tokens.color.blue}`,
+        },
+
+        ":focus": {
+            border: `1px solid ${tokens.color.blue}`,
+            outline: `1px solid ${tokens.color.blue}`,
+        },
+    },
+    description: {
+        padding: tokens.spacing.large_24,
+    },
+    headingContainer: {
+        width: "fit-content",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    descriptionText: {
+        marginTop: tokens.spacing.small_12,
+    },
+    componentView: {
+        flexDirection: "column",
+        justifyContent: "center",
+        padding: tokens.spacing.large_24,
+        border: `1px solid ${tokens.color.offBlack16}`,
+        borderTop: "none",
+        borderEndStartRadius: tokens.spacing.small_12,
+        borderEndEndRadius: tokens.spacing.small_12,
+        flexGrow: 1,
+
+        [mobile]: {
+            overflowX: "scroll",
+        },
+    },
+    externalLinkIcon: {
+        marginLeft: tokens.spacing.xSmall_8,
+    },
+});

__docs__/components/gallery/sections/accordion-section.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import {
+    Accordion,
+    AccordionSection,
+} from "@khanacademy/wonder-blocks-accordion";
+import {RenderStateRoot, View} from "@khanacademy/wonder-blocks-core";
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+
+import ComponentTile from "../component-tile";
+import {styles} from "../styles";
+
+export default function AccordionGallerySection() {
+    return (
+        <RenderStateRoot>
+            <HeadingLarge id="accordion" tag="h3" style={styles.sectionLabel}>
+                Accordion
+            </HeadingLarge>
+
+            <View style={styles.section}>
+                <ComponentTile
+                    name="Accordion"
+                    href="/?path=/docs/accordion-accordion--docs"
+                    description={`A vertically stacked list of sections,
+                        each of which contains content that can be expanded
+                        or collapsed by clicking its header.`}
+                >
+                    <Accordion>
+                        <AccordionSection header="First section">
+                            This is the information present in the first section
+                        </AccordionSection>
+                        <AccordionSection header="Second section">
+                            This is the information present in the second
+                            section
+                        </AccordionSection>
+                        <AccordionSection header="Third section">
+                            This is the information present in the third section
+                        </AccordionSection>
+                    </Accordion>
+                </ComponentTile>
+
+                <ComponentTile
+                    name="AccordionSection"
+                    href="/?path=/docs/accordion-accordionsection--docs"
+                    description={`A single collapsible section within
+                        an accordion. It can be used by itself or within
+                        an accordion.`}
+                >
+                    <AccordionSection header="Accordion Section">
+                        This is an accordion section.
+                    </AccordionSection>
+                </ComponentTile>
+            </View>
+        </RenderStateRoot>
+    );
+}

__docs__/components/gallery/sections/banner-section.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import Banner from "@khanacademy/wonder-blocks-banner";
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+
+import ComponentTile from "../component-tile";
+import {styles} from "../styles";
+
+export default function BannerSection() {
+    return (
+        <>
+            <HeadingLarge id="banner" tag="h3" style={styles.sectionLabel}>
+                Banner
+            </HeadingLarge>
+            <ComponentTile
+                name="Banner"
+                href="/?path=/docs/banner--docs"
+                description={`Displays a prominent message and
+                    related optional actions. It can be used as a way
+                    of informing the user of important changes.`}
+            >
+                <Banner text="This is a banner!" layout="floating" />
+            </ComponentTile>
+        </>
+    );
+}

__docs__/components/gallery/sections/birthday-picker-section.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import BirthdayPicker from "@khanacademy/wonder-blocks-birthday-picker";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+
+import ComponentTile from "../component-tile";
+import {styles} from "../styles";
+
+export default function BirthdayPickerSection() {
+    return (
+        <>
+            <HeadingLarge
+                id="birthday-picker"
+                tag="h3"
+                style={styles.sectionLabel}
+            >
+                Birthday Picker
+            </HeadingLarge>
+            <ComponentTile
+                name="BirthdayPicker"
+                href="/?path=/docs/birthdaypicker--docs"
+                description={`Similar to a datepicker, but specifically
+                    for birthdates. It consists of a set of dropdowns
+                    to choose the date.`}
+            >
+                <View style={styles.centerContent}>
+                    <BirthdayPicker onChange={() => {}} />
+                </View>
+            </ComponentTile>
+        </>
+    );
+}

__docs__/components/gallery/sections/breadcrumbs-section.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import {
+    Breadcrumbs,
+    BreadcrumbsItem,
+} from "@khanacademy/wonder-blocks-breadcrumbs";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Link from "@khanacademy/wonder-blocks-link";
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+
+import ComponentTile from "../component-tile";
+import {styles} from "../styles";
+
+export default function BannerSection() {
+    return (
+        <>
+            <HeadingLarge id="breadcrumbs" tag="h3" style={styles.sectionLabel}>
+                Breadcrumbs
+            </HeadingLarge>
+            <ComponentTile
+                name="Breadcrumbs"
+                href="/?path=/docs/breadcrumbs--docs"
+                description={`A breadcrumb trail consists of a list of
+                    links to the parent pages of the current page in
+                    hierarchical order. It helps users find their place
+                    within a website or web application.`}
+            >
+                <View style={styles.centerContent}>
+                    <Breadcrumbs>
+                        <BreadcrumbsItem>
+                            <Link href="">Course</Link>
+                        </BreadcrumbsItem>
+                        <BreadcrumbsItem>
+                            <Link href="">Unit</Link>
+                        </BreadcrumbsItem>
+                        <BreadcrumbsItem>Lesson</BreadcrumbsItem>
+                    </Breadcrumbs>
+                </View>
+            </ComponentTile>
+        </>
+    );
+}