@khanacademy/wonder-blocks-button 2.11.7 → 3.0.0

package/src/__tests__/custom-snapshot.test.js

@@ -38,7 +38,7 @@ describe("Button", () => {
 describe("ButtonCore", () => {
     for (const kind of ["primary", "secondary", "tertiary"]) {
         for (const color of ["default", "destructive"]) {
-            for (const size of ["medium", "small"]) {
+            for (const size of ["medium", "small", "large"]) {
                 for (const light of [true, false]) {
                     for (const state of [
                         "disabled",

package/src/components/__docs__/accessibility.stories.mdx

@@ -5,7 +5,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 
 <Meta
-    title="Navigation/Button/Accessibility"
+    title="Button / Accessibility"
     component={Button}
     parameters={{
         previewTabs: {

package/src/components/__docs__/best-practices.stories.mdx

@@ -5,7 +5,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 
 <Meta
-    title="Navigation/Button/Best practices"
+    title="Button / Best practices"
     component={Button}
     parameters={{
         previewTabs: {

package/src/components/__docs__/button.argtypes.js

@@ -66,15 +66,15 @@ export default {
     },
     size: {
         description: "The size of the button.",
-        options: ["small", "medium", "xlarge"],
+        options: ["small", "medium", "large"],
         control: {type: "select"},
         table: {
             category: "Layout",
             defaultValue: {
-                detail: `"medium" = height: 40; "small" = height: 32; "xlarge" = height: 60;`,
+                detail: `"medium" = height: 40; "small" = height: 32; "large" = height: 56;`,
             },
             type: {
-                summary: `"medium" | "small" | "xlarge"`,
+                summary: `"medium" | "small" | "large"`,
             },
         },
     },

package/src/components/{button.stories.js → __docs__/button.stories.js}

@@ -11,15 +11,18 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {icons} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import type {StoryComponentType} from "@storybook/react";
-import Button from "./button.js";
+import type {StyleDeclaration} from "aphrodite";
 
-import ComponentInfo from "../../../../.storybook/components/component-info.js";
-import ButtonArgTypes from "./__docs__/button.argtypes.js";
-import {name, version} from "../../package.json";
+import Button from "../button.js";
+
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ButtonArgTypes from "./button.argtypes.js";
+import {name, version} from "../../../package.json";
 
 export default {
-    title: "Navigation/Button",
+    title: "Button",
     component: Button,
     parameters: {
         componentSubtitle: ((
@@ -28,13 +31,14 @@ export default {
     },
     decorators: [withDesign],
     argTypes: ButtonArgTypes,
+    excludeStories: ["styles"],
 };
 
 const Template = (args) => <Button {...args} />;
 
-export const DefaultButton: StoryComponentType = Template.bind({});
+export const Default: StoryComponentType = Template.bind({});
 
-DefaultButton.args = {
+Default.args = {
     children: "Hello, world!",
     kind: "primary",
     color: "default",
@@ -45,7 +49,7 @@ DefaultButton.args = {
     onClick: () => {},
 };
 
-DefaultButton.parameters = {
+Default.parameters = {
     design: {
         type: "figma",
         url: "https://www.figma.com/file/VbVu3h2BpBhH80niq101MHHE/Wonder-Blocks-(Web)?node-id=401%3A307",
@@ -56,7 +60,25 @@ DefaultButton.parameters = {
     },
 };
 
-export const BasicButtons: StoryComponentType = () => (
+export const styles: StyleDeclaration = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: Spacing.xSmall_8,
+    },
+    button: {
+        marginRight: Spacing.xSmall_8,
+    },
+    fillSpace: {
+        minWidth: 140,
+    },
+    example: {
+        background: Color.offWhite,
+        padding: Spacing.medium_16,
+    },
+});
+
+export const Variants: StoryComponentType = () => (
     <View>
         <View style={{flexDirection: "row"}}>
             <Button onClick={() => {}}>Hello, world!</Button>
@@ -100,14 +122,14 @@ export const BasicButtons: StoryComponentType = () => (
     </View>
 );
 
-BasicButtons.parameters = {
+Variants.parameters = {
     docs: {
         storyDescription:
             "There are three kinds of buttons: `primary` (default), `secondary`, and `tertiary`.",
     },
 };
 
-export const ButtonsWithColors: StoryComponentType = () => (
+export const WithColor: StoryComponentType = () => (
     <View style={styles.row}>
         <Button style={styles.button} onClick={() => {}} color="destructive">
             Primary
@@ -131,14 +153,16 @@ export const ButtonsWithColors: StoryComponentType = () => (
     </View>
 );
 
-ButtonsWithColors.parameters = {
+WithColor.storyName = "Color";
+
+WithColor.parameters = {
     docs: {
         storyDescription:
             "Buttons have a `color` that is either `default` (the default, as shown above) or `destructive` (as can seen below):",
     },
 };
 
-export const DarkBackgroundButtons: StoryComponentType = () => (
+export const Dark: StoryComponentType = () => (
     <View style={{backgroundColor: Color.darkBlue}}>
         <View style={{flexDirection: "row"}}>
             <Button onClick={() => {}} light={true}>
@@ -204,7 +228,7 @@ export const DarkBackgroundButtons: StoryComponentType = () => (
     </View>
 );
 
-DarkBackgroundButtons.parameters = {
+Dark.parameters = {
     backgrounds: {
         default: "darkBlue",
     },
@@ -214,87 +238,135 @@ DarkBackgroundButtons.parameters = {
     },
 };
 
-export const ButtonsWithSize: StoryComponentType = () => (
+const kinds = ["primary", "secondary", "tertiary"];
+
+export const Icon: StoryComponentType = () => (
     <View>
         <View style={styles.row}>
-            <Button style={styles.button} onClick={() => {}} size="small">
-                Label
-            </Button>
-            <Button
-                style={styles.button}
-                onClick={() => {}}
-                kind="secondary"
-                size="small"
-            >
-                Label
-            </Button>
-            <Button
-                style={styles.button}
-                onClick={() => {}}
-                kind="tertiary"
-                size="small"
-            >
-                Label
-            </Button>
+            {kinds.map((kind, idx) => (
+                <Button
+                    kind={kind}
+                    icon={icons.contentExercise}
+                    style={styles.button}
+                    key={idx}
+                >
+                    {kind}
+                </Button>
+            ))}
         </View>
         <View style={styles.row}>
-            <Button style={styles.button} onClick={() => {}} size="medium">
-                Label
-            </Button>
-            <Button
-                style={styles.button}
-                onClick={() => {}}
-                kind="secondary"
-                size="medium"
-            >
-                Label
-            </Button>
-            <Button
-                style={styles.button}
-                onClick={() => {}}
-                kind="tertiary"
-                size="medium"
-            >
-                Label
-            </Button>
+            {kinds.map((kind, idx) => (
+                <Button
+                    kind={kind}
+                    icon={icons.contentExercise}
+                    style={styles.button}
+                    key={idx}
+                    size="small"
+                >
+                    {`${kind} small`}
+                </Button>
+            ))}
         </View>
+    </View>
+);
+
+Icon.parameters = {
+    docs: {
+        storyDescription: "Buttons can have an icon on it's left side.",
+    },
+};
+
+export const Size: StoryComponentType = () => (
+    <View>
         <View style={styles.row}>
-            <Button style={styles.button} onClick={() => {}} size="xlarge">
-                Label
-            </Button>
-            <Button
-                style={styles.button}
-                onClick={() => {}}
-                kind="secondary"
-                size="xlarge"
-            >
-                Label
-            </Button>
-            <Button
-                style={styles.button}
-                onClick={() => {}}
-                kind="tertiary"
-                size="xlarge"
-            >
-                Label
-            </Button>
+            <LabelMedium style={styles.fillSpace}>small</LabelMedium>
+            <View style={[styles.row, styles.example]}>
+                <Button style={styles.button} onClick={() => {}} size="small">
+                    Label
+                </Button>
+                <Button
+                    style={styles.button}
+                    onClick={() => {}}
+                    kind="secondary"
+                    size="small"
+                >
+                    Label
+                </Button>
+                <Button
+                    style={styles.button}
+                    onClick={() => {}}
+                    kind="tertiary"
+                    size="small"
+                >
+                    Label
+                </Button>
+            </View>
+        </View>
+        <View style={styles.row}>
+            <LabelMedium style={styles.fillSpace}>medium (default)</LabelMedium>
+
+            <View style={[styles.row, styles.example]}>
+                <Button style={styles.button} onClick={() => {}} size="medium">
+                    Label
+                </Button>
+                <Button
+                    style={styles.button}
+                    onClick={() => {}}
+                    kind="secondary"
+                    size="medium"
+                >
+                    Label
+                </Button>
+                <Button
+                    style={styles.button}
+                    onClick={() => {}}
+                    kind="tertiary"
+                    size="medium"
+                >
+                    Label
+                </Button>
+            </View>
+        </View>
+        <View style={styles.row}>
+            <LabelMedium style={styles.fillSpace}>large</LabelMedium>
+            <View style={[styles.row, styles.example]}>
+                <Button style={styles.button} onClick={() => {}} size="large">
+                    Label
+                </Button>
+                <Button
+                    style={styles.button}
+                    onClick={() => {}}
+                    kind="secondary"
+                    size="large"
+                >
+                    Label
+                </Button>
+                <Button
+                    style={styles.button}
+                    onClick={() => {}}
+                    kind="tertiary"
+                    size="large"
+                >
+                    Label
+                </Button>
+            </View>
         </View>
     </View>
 );
 
-ButtonsWithSize.parameters = {
+Size.parameters = {
     docs: {
         storyDescription:
-            "Buttons have a size that's either `medium` (default), `small`, or `xlarge`.",
+            "Buttons have a size that's either `medium` (default), `small`, or `large`.",
     },
 };
 
-export const ButtonWithSpinner: StoryComponentType = () => (
+export const Spinner: StoryComponentType = () => (
     <View style={{flexDirection: "row"}}>
         <Button
             onClick={() => {}}
             spinner={true}
-            size="xlarge"
+            size="large"
             aria-label={"waiting"}
         >
             Hello, world
@@ -315,139 +387,71 @@ export const ButtonWithSpinner: StoryComponentType = () => (
     </View>
 );
 
-ButtonWithSpinner.parameters = {
+Spinner.parameters = {
     docs: {
         storyDescription:
             "Buttons can show a spinner. This is useful when indicating to a user that their input has been recognized but that the operation will take some time. While the spinner property is set to true the button is disabled.",
     },
 };
 
-export const ButtonsWithRouter: StoryComponentType = () => (
-    <MemoryRouter>
-        <View style={styles.row}>
-            <Button href="/foo" style={styles.button}>
-                Uses Client-side Nav
-            </Button>
-            <Button href="/foo" style={styles.button} skipClientNav>
-                Avoids Client-side Nav
-            </Button>
-            <Switch>
-                <Route path="/foo">
-                    <View id="foo">Hello, world!</View>
-                </Route>
-            </Switch>
-        </View>
-    </MemoryRouter>
+export const TruncatingLabels: StoryComponentType = () => (
+    <Button onClick={() => {}} style={{maxWidth: 200}}>
+        label too long for the parent container
+    </Button>
 );
 
-ButtonsWithRouter.storyName = "Navigation with React Router";
-
-ButtonsWithRouter.parameters = {
+TruncatingLabels.parameters = {
     docs: {
         storyDescription:
-            "Buttons do client-side navigation by default, if React Router exists:",
-    },
-    chromatic: {
-        disableSnapshot: true,
+            "If the label is too long for the button width, the text will be truncated.",
     },
 };
 
-export const BeforeNavCallbacks: StoryComponentType = () => (
-    <MemoryRouter>
-        <View style={styles.row}>
-            <Button
-                href="/foo"
-                style={styles.button}
-                beforeNav={() =>
-                    new Promise((resolve, reject) => {
-                        setTimeout(resolve, 1000);
-                    })
-                }
-            >
-                beforeNav, client-side nav
-            </Button>
-            <Button
-                href="/foo"
-                style={styles.button}
-                skipClientNav={true}
-                beforeNav={() =>
-                    new Promise((resolve, reject) => {
-                        setTimeout(resolve, 1000);
-                    })
-                }
-            >
-                beforeNav, server-side nav
-            </Button>
-            <Button
-                href="https://google.com"
-                style={styles.button}
-                skipClientNav={true}
-                beforeNav={() =>
-                    new Promise((resolve, reject) => {
-                        setTimeout(resolve, 1000);
-                    })
-                }
-            >
-                beforeNav, open URL in new tab
-            </Button>
-            <Switch>
-                <Route path="/foo">
-                    <View id="foo">Hello, world!</View>
-                </Route>
-            </Switch>
+TruncatingLabels.storyName = "Truncating labels";
+
+export const SubmittingForms: StoryComponentType = () => (
+    <form
+        onSubmit={(e) => {
+            e.preventDefault();
+            window.alert("form submitted"); // eslint-disable-line no-alert
+        }}
+    >
+        <View>
+            Foo: <input id="foo" value="bar" />
+            <Button type="submit">Submit</Button>
         </View>
-    </MemoryRouter>
+    </form>
 );
 
-BeforeNavCallbacks.storyName = "beforeNav Callbacks";
-
-BeforeNavCallbacks.parameters = {
+SubmittingForms.parameters = {
     docs: {
         storyDescription:
-            "These buttons always wait until the async callback code completes before starting navigation.",
+            'If the button is inside a form, you can use the `type="submit"` variant, so the form will be submitted on click.',
+    },
+    options: {
+        showAddonPanel: true,
     },
     chromatic: {
+        // We already have screenshots of other stories that cover more of the
+        // button states.
         disableSnapshot: true,
     },
 };
 
-export const SafeWithNavCallbacks: StoryComponentType = () => (
+SubmittingForms.storyName = "Submitting forms";
+
+export const PreventNavigation: StoryComponentType = () => (
     <MemoryRouter>
         <View style={styles.row}>
             <Button
                 href="/foo"
                 style={styles.button}
-                safeWithNav={() =>
-                    new Promise((resolve, reject) => {
-                        setTimeout(resolve, 1000);
-                    })
-                }
-            >
-                safeWithNav, client-side nav
-            </Button>
-            <Button
-                href="/foo"
-                style={styles.button}
-                skipClientNav={true}
-                safeWithNav={() =>
-                    new Promise((resolve, reject) => {
-                        setTimeout(resolve, 1000);
-                    })
-                }
-            >
-                safeWithNav, server-side nav
-            </Button>
-            <Button
-                href="https://google.com"
-                style={styles.button}
-                skipClientNav={true}
-                safeWithNav={() =>
-                    new Promise((resolve, reject) => {
-                        setTimeout(resolve, 1000);
-                    })
-                }
+                onClick={(e) => {
+                    action("clicked")(e);
+                    e.preventDefault();
+                }}
             >
-                safeWithNav, open URL in new tab
+                This button prevents navigation.
             </Button>
             <Switch>
                 <Route path="/foo">
@@ -458,30 +462,26 @@ export const SafeWithNavCallbacks: StoryComponentType = () => (
     </MemoryRouter>
 );
 
-SafeWithNavCallbacks.storyName = "safeWithNav Callbacks";
+PreventNavigation.storyName = "Preventing navigation";
 
-SafeWithNavCallbacks.parameters = {
+PreventNavigation.parameters = {
     docs: {
         storyDescription:
-            "If the `onClick` callback calls `preventDefault()`, then navigation will not occur.",
+            "Sometimes you may need to perform an async action either before or during navigation. This can be accomplished with `beforeNav` and `safeWithNav` respectively.",
     },
     chromatic: {
         disableSnapshot: true,
     },
 };
 
-export const PreventNavigation: StoryComponentType = () => (
+export const WithRouter: StoryComponentType = () => (
     <MemoryRouter>
         <View style={styles.row}>
-            <Button
-                href="/foo"
-                style={styles.button}
-                onClick={(e) => {
-                    action("clicked")(e);
-                    e.preventDefault();
-                }}
-            >
-                This button prevents navigation.
+            <Button href="/foo" style={styles.button}>
+                Uses Client-side Nav
+            </Button>
+            <Button href="/foo" style={styles.button} skipClientNav>
+                Avoids Client-side Nav
             </Button>
             <Switch>
                 <Route path="/foo">
@@ -492,94 +492,14 @@ export const PreventNavigation: StoryComponentType = () => (
     </MemoryRouter>
 );
 
-PreventNavigation.storyName =
-    "Prevent navigation by calling e.preventDefault()";
+WithRouter.storyName = "Navigation with React Router";
 
-PreventNavigation.parameters = {
+WithRouter.parameters = {
     docs: {
         storyDescription:
-            "Sometimes you may need to perform an async action either before or during navigation. This can be accomplished with `beforeNav` and `safeWithNav` respectively.",
-    },
-    chromatic: {
-        disableSnapshot: true,
-    },
-};
-
-const kinds = ["primary", "secondary", "tertiary"];
-
-export const ButtonsWithIcons: StoryComponentType = () => (
-    <View>
-        <View style={styles.row}>
-            {kinds.map((kind, idx) => (
-                <Button
-                    kind={kind}
-                    icon={icons.contentExercise}
-                    style={styles.button}
-                    key={idx}
-                >
-                    {kind}
-                </Button>
-            ))}
-        </View>
-        <View style={styles.row}>
-            {kinds.map((kind, idx) => (
-                <Button
-                    kind={kind}
-                    icon={icons.contentExercise}
-                    style={styles.button}
-                    key={idx}
-                    size="small"
-                >
-                    {`${kind} small`}
-                </Button>
-            ))}
-        </View>
-    </View>
-);
-
-ButtonsWithIcons.parameters = {
-    docs: {
-        storyDescription: "Buttons can have an icon on it's left side.",
-    },
-};
-
-export const LongLabelsAreEllipsized: StoryComponentType = () => (
-    <Button onClick={() => {}} style={{maxWidth: 200}}>
-        label too long for the parent container
-    </Button>
-);
-
-export const SubmitButtonInForm: StoryComponentType = () => (
-    <form
-        onSubmit={(e) => {
-            e.preventDefault();
-            window.alert("form submitted"); // eslint-disable-line no-alert
-        }}
-    >
-        <View>
-            Foo: <input id="foo" value="bar" />
-            <Button type="submit">Submit</Button>
-        </View>
-    </form>
-);
-
-SubmitButtonInForm.parameters = {
-    options: {
-        showAddonPanel: true,
+            "Buttons do client-side navigation by default, if React Router exists:",
     },
     chromatic: {
-        // We already have screenshots of other stories that cover more of the
-        // button states.
         disableSnapshot: true,
     },
 };
-
-const styles = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-        marginBottom: Spacing.xSmall_8,
-    },
-    button: {
-        marginRight: Spacing.xSmall_8,
-    },
-});