@khanacademy/wonder-blocks-button 2.10.1 → 2.11.2

package/src/components/button.stories.js

@@ -48,8 +48,7 @@ DefaultButton.args = {
 DefaultButton.parameters = {
     design: {
         type: "figma",
-        url:
-            "https://www.figma.com/file/VbVu3h2BpBhH80niq101MHHE/Wonder-Blocks-(Web)?node-id=401%3A307",
+        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
@@ -353,7 +352,7 @@ ButtonsWithRouter.parameters = {
     },
 };
 
-export const NavigationWithAsyncAction: StoryComponentType = () => (
+export const BeforeNavCallbacks: StoryComponentType = () => (
     <MemoryRouter>
         <View style={styles.row}>
             <Button
@@ -365,7 +364,7 @@ export const NavigationWithAsyncAction: StoryComponentType = () => (
                     })
                 }
             >
-                Async action, client-side nav
+                beforeNav, client-side nav
             </Button>
             <Button
                 href="/foo"
@@ -377,7 +376,7 @@ export const NavigationWithAsyncAction: StoryComponentType = () => (
                     })
                 }
             >
-                Async action, server-side nav
+                beforeNav, server-side nav
             </Button>
             <Button
                 href="https://google.com"
@@ -389,7 +388,7 @@ export const NavigationWithAsyncAction: StoryComponentType = () => (
                     })
                 }
             >
-                Async action, open URL
+                beforeNav, open URL in new tab
             </Button>
             <Switch>
                 <Route path="/foo">
@@ -400,10 +399,71 @@ export const NavigationWithAsyncAction: StoryComponentType = () => (
     </MemoryRouter>
 );
 
-NavigationWithAsyncAction.parameters = {
+BeforeNavCallbacks.storyName = "beforeNav Callbacks";
+
+BeforeNavCallbacks.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.",
+            "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,
@@ -421,7 +481,7 @@ export const PreventNavigation: StoryComponentType = () => (
                     e.preventDefault();
                 }}
             >
-                This button prevent navigation.
+                This button prevents navigation.
             </Button>
             <Switch>
                 <Route path="/foo">

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.