Start creating component gallery (sticker sheet) on Wonder Blocks ove…

…rview page
Khan · Oct 31, 2023 · b311e93 · b311e93
1 parent d65b600
commit b311e93
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 0 deletions.
diff --git a/.storybook/components/component-gallery.tsx b/.storybook/components/component-gallery.tsx
@@ -0,0 +1,61 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {
+    Accordion,
+    AccordionSection,
+} from "@khanacademy/wonder-blocks-accordion";
+import Banner from "@khanacademy/wonder-blocks-banner";
+import BirthdayPicker from "@khanacademy/wonder-blocks-birthday-picker";
+import {RenderStateRoot, View} from "@khanacademy/wonder-blocks-core";
+
+import ComponentTile from "./component-tile";
+
+export default function ComponentGallery() {
+    return (
+        <RenderStateRoot>
+            <View style={styles.container}>
+                <ComponentTile
+                    name="Accordion"
+                    description={`An accordion displays a vertically
+                        stacked list of sections, each of which
+                        contains content that can be shown or hidden by
+                        clicking its header.`}
+                    href="/?path=/docs/accordion-accordion--docs"
+                >
+                    <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="Banner" href="/?path=/docs/banner--docs">
+                    <Banner text="This is a banner!" layout="floating" />
+                </ComponentTile>
+
+                <ComponentTile
+                    name="Birthday Picker"
+                    href="/?path=/docs/birthdaypicker--docs"
+                >
+                    <BirthdayPicker onChange={() => {}} />
+                </ComponentTile>
+            </View>
+        </RenderStateRoot>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+    },
+});
diff --git a/.storybook/components/component-tile.tsx b/.storybook/components/component-tile.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import {View} from "@khanacademy/wonder-blocks-core";
+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 (
+        <Clickable href={href} target="_blank" style={styles.tile}>
+            {() => (
+                <>
+                    <View style={styles.description}>
+                        <HeadingMedium tag="h3" style={styles.name}>
+                            {name}
+                        </HeadingMedium>
+                        <Body>{description}</Body>
+                    </View>
+                    <View style={styles.componentView}>{children}</View>
+                </>
+            )}
+        </Clickable>
+    );
+}
+
+const styles = StyleSheet.create({
+    tile: {
+        display: "flex",
+        flexDirection: "column",
+        border: `1px solid ${tokens.color.offBlack16}`,
+        borderRadius: tokens.spacing.small_12,
+        margin: tokens.spacing.xSmall_8,
+        // Set the width to half the max width of the stories page content.
+        width: 484,
+        minHeight: 300,
+        overflow: "hidden",
+        backgroundColor: tokens.color.offWhite,
+
+        ":hover": {
+            outline: `1px solid ${tokens.color.blue}`,
+            border: `1px solid ${tokens.color.blue}`,
+        },
+    },
+    description: {
+        padding: tokens.spacing.large_24,
+    },
+    name: {
+        marginBottom: tokens.spacing.small_12,
+    },
+    componentView: {
+        flexDirection: "column",
+        justifyContent: "center",
+        padding: tokens.spacing.large_24,
+        borderTop: `1px solid ${tokens.color.offBlack16}`,
+        borderRadius: tokens.spacing.small_12,
+        backgroundColor: tokens.color.white,
+        flexGrow: 1,
+    },
+});
diff --git a/__docs__/_overview_.mdx b/__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 "../.storybook/components/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 />