@khanacademy/wonder-blocks-button 2.10.0 → 2.11.1

package/src/components/button.stories.js

@@ -1,24 +1,40 @@
 // @flow
 import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import {withDesign} from "storybook-addon-designs";
 import {action} from "@storybook/addon-actions";
 
+import {MemoryRouter, Route, Switch} from "react-router-dom";
+
+import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
+import {icons} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Color from "@khanacademy/wonder-blocks-color";
-
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import type {StoryComponentType} from "@storybook/react";
 import Button from "./button.js";
 
+import ComponentInfo from "../../../../.storybook/components/component-info.js";
+import ButtonArgTypes from "./__docs__/button.argtypes.js";
+import {name, version} from "../../package.json";
+
 export default {
     title: "Navigation/Button",
     component: Button,
+    parameters: {
+        componentSubtitle: ((
+            <ComponentInfo name={name} version={version} />
+        ): any),
+    },
+    decorators: [withDesign],
+    argTypes: ButtonArgTypes,
 };
 
-export const buttonsWithKnobs: StoryComponentType = (args) => {
-    return <Button {...args} onClick={action("onClick")} />;
-};
+const Template = (args) => <Button {...args} />;
+
+export const DefaultButton: StoryComponentType = Template.bind({});
 
-buttonsWithKnobs.args = {
+DefaultButton.args = {
     children: "Hello, world!",
     kind: "primary",
     color: "default",
@@ -26,11 +42,13 @@ buttonsWithKnobs.args = {
     light: false,
     disabled: false,
     style: {maxWidth: 200},
+    onClick: () => {},
 };
 
-buttonsWithKnobs.parameters = {
-    options: {
-        showAddonPanel: true,
+DefaultButton.parameters = {
+    design: {
+        type: "figma",
+        url: "https://www.figma.com/file/VbVu3h2BpBhH80niq101MHHE/Wonder-Blocks-(Web)?node-id=401%3A307",
     },
     chromatic: {
         // We already have screenshots of other stories that cover more of the button states
@@ -38,7 +56,7 @@ buttonsWithKnobs.parameters = {
     },
 };
 
-export const basicButtons: StoryComponentType = () => (
+export const BasicButtons: StoryComponentType = () => (
     <View>
         <View style={{flexDirection: "row"}}>
             <Button onClick={() => {}}>Hello, world!</Button>
@@ -82,7 +100,45 @@ export const basicButtons: StoryComponentType = () => (
     </View>
 );
 
-export const darkBackgroundButtons: StoryComponentType = () => (
+BasicButtons.parameters = {
+    docs: {
+        storyDescription:
+            "There are three kinds of buttons: `primary` (default), `secondary`, and `tertiary`.",
+    },
+};
+
+export const ButtonsWithColors: StoryComponentType = () => (
+    <View style={styles.row}>
+        <Button style={styles.button} onClick={() => {}} color="destructive">
+            Primary
+        </Button>
+        <Button
+            style={styles.button}
+            onClick={() => {}}
+            kind="secondary"
+            color="destructive"
+        >
+            Secondary
+        </Button>
+        <Button
+            style={styles.button}
+            onClick={() => {}}
+            kind="tertiary"
+            color="destructive"
+        >
+            Tertiary
+        </Button>
+    </View>
+);
+
+ButtonsWithColors.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 = () => (
     <View style={{backgroundColor: Color.darkBlue}}>
         <View style={{flexDirection: "row"}}>
             <Button onClick={() => {}} light={true}>
@@ -148,51 +204,92 @@ export const darkBackgroundButtons: StoryComponentType = () => (
     </View>
 );
 
-darkBackgroundButtons.parameters = {
+DarkBackgroundButtons.parameters = {
     backgrounds: {
         default: "darkBlue",
     },
+    docs: {
+        storyDescription:
+            "Buttons on a `darkBlue` background should set `light` to `true`.",
+    },
 };
 
-export const smallButtons: StoryComponentType = () => (
-    <View style={{flexDirection: "row"}}>
-        <Button onClick={() => {}} size="small">
-            Hello, world!
-        </Button>
-        <Strut size={16} />
-        <Button onClick={() => {}} size="small" kind="secondary">
-            Hello, world!
-        </Button>
-        <Strut size={16} />
-        <Button onClick={() => {}} size="small" kind="tertiary">
-            Hello, world!
-        </Button>
-    </View>
-);
-
-export const xlargeButtons: StoryComponentType = () => (
-    <View style={{flexDirection: "row"}}>
-        <Button onClick={() => {}} size="xlarge">
-            Hello, world!
-        </Button>
-        <Strut size={16} />
-        <Button onClick={() => {}} size="xlarge" kind="secondary">
-            Hello, world!
-        </Button>
-        <Strut size={16} />
-        <Button onClick={() => {}} size="xlarge" kind="tertiary">
-            Hello, world!
-        </Button>
+export const ButtonsWithSize: 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>
+        </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>
+        </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>
+        </View>
     </View>
 );
 
-export const longLabelsAreEllipsized: StoryComponentType = () => (
-    <Button onClick={() => {}} style={{maxWidth: 200}}>
-        label too long for the parent container
-    </Button>
-);
+ButtonsWithSize.parameters = {
+    docs: {
+        storyDescription:
+            "Buttons have a size that's either `medium` (default), `small`, or `xlarge`.",
+    },
+};
 
-export const buttonWithSpinner: StoryComponentType = () => (
+export const ButtonWithSpinner: StoryComponentType = () => (
     <View style={{flexDirection: "row"}}>
         <Button
             onClick={() => {}}
@@ -218,7 +315,241 @@ export const buttonWithSpinner: StoryComponentType = () => (
     </View>
 );
 
-export const submitButtonInForm: StoryComponentType = () => (
+ButtonWithSpinner.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>
+);
+
+ButtonsWithRouter.storyName = "Navigation with React Router";
+
+ButtonsWithRouter.parameters = {
+    docs: {
+        storyDescription:
+            "Buttons do client-side navigation by default, if React Router exists:",
+    },
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+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>
+        </View>
+    </MemoryRouter>
+);
+
+BeforeNavCallbacks.storyName = "beforeNav Callbacks";
+
+BeforeNavCallbacks.parameters = {
+    docs: {
+        storyDescription:
+            "These buttons always wait until the async callback code completes before starting navigation.",
+    },
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+export const SafeWithNavCallbacks: 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);
+                    })
+                }
+            >
+                safeWithNav, open URL in new tab
+            </Button>
+            <Switch>
+                <Route path="/foo">
+                    <View id="foo">Hello, world!</View>
+                </Route>
+            </Switch>
+        </View>
+    </MemoryRouter>
+);
+
+SafeWithNavCallbacks.storyName = "safeWithNav Callbacks";
+
+SafeWithNavCallbacks.parameters = {
+    docs: {
+        storyDescription:
+            "If the `onClick` callback calls `preventDefault()`, then navigation will not occur.",
+    },
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+export const PreventNavigation: StoryComponentType = () => (
+    <MemoryRouter>
+        <View style={styles.row}>
+            <Button
+                href="/foo"
+                style={styles.button}
+                onClick={(e) => {
+                    action("clicked")(e);
+                    e.preventDefault();
+                }}
+            >
+                This button prevents navigation.
+            </Button>
+            <Switch>
+                <Route path="/foo">
+                    <View id="foo">Hello, world!</View>
+                </Route>
+            </Switch>
+        </View>
+    </MemoryRouter>
+);
+
+PreventNavigation.storyName =
+    "Prevent navigation by calling e.preventDefault()";
+
+PreventNavigation.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();
@@ -232,12 +563,23 @@ export const submitButtonInForm: StoryComponentType = () => (
     </form>
 );
 
-submitButtonInForm.parameters = {
+SubmitButtonInForm.parameters = {
     options: {
         showAddonPanel: true,
     },
     chromatic: {
-        // We already have screenshots of other stories that cover more of the button states
+        // 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,
+    },
+});

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.