Merge pull request #4378 from adamdmharvey/button-examples

storybook: Add opinionated Button examples

packages/core/src/components/Button/Button.stories.tsx

@@ -15,8 +15,17 @@
  */
 import React, { FunctionComponentFactory } from 'react';
 import { Button } from './Button';
-import { MemoryRouter, Route, useLocation } from 'react-router-dom';
+import { MemoryRouter, useLocation } from 'react-router-dom';
 import { createRouteRef } from '@backstage/core-api';
+import {
+  Divider,
+  Link,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+  Button as MaterialButton,
+} from '@material-ui/core';
 
 const Location = () => {
   const location = useLocation();
@@ -28,14 +37,27 @@ export default {
   component: Button,
   decorators: [
     (storyFn: FunctionComponentFactory<{}>) => (
-      <MemoryRouter>
-        <div>
+      <>
+        <Typography>
+          A collection of buttons that should be used in the Backstage
+          interface. These leverage the properties inherited from{' '}
+          <Link href="https://material-ui.com/components/buttons/">
+            Material-UI Button
+          </Link>
+          , but include an opinionated set that align to the Backstage design.
+        </Typography>
+
+        <Divider />
+
+        <MemoryRouter>
           <div>
-            <Location />
+            <div>
+              <Location />
+            </div>
+            {storyFn()}
           </div>
-          {storyFn()}
-        </div>
-      </MemoryRouter>
+        </MemoryRouter>
+      </>
     ),
   ],
 };
@@ -46,36 +68,107 @@ export const Default = () => {
     title: 'Hi there!',
   });
 
+  // Design Permutations:
+  // color   = default | primary | secondary
+  // variant = contained | outlined | text
   return (
-    <>
-      <Button to={routeRef.path}>This button</Button>&nbsp;will utilise the
-      react-router MemoryRouter's navigation
-      <Route path={routeRef.path}>
-        <h1>{routeRef.title}</h1>
-      </Route>
-    </>
+    <List>
+      <ListItem>
+        <ListItemText>
+          <Typography variant="h6">Default Button:</Typography>
+          This is the default button design which should be used in most cases.
+          <br />
+          <pre>color="primary" variant="contained"</pre>
+        </ListItemText>
+
+        <Button to={routeRef.path} color="primary" variant="contained">
+          Register Component
+        </Button>
+      </ListItem>
+      <ListItem>
+        <ListItemText>
+          <Typography variant="h6">Secondary Button:</Typography>
+          Used for actions that cancel, skip, and in general perform negative
+          functions, etc.
+          <br />
+          <pre>color="secondary" variant="contained"</pre>
+        </ListItemText>
+
+        <Button to={routeRef.path} color="secondary" variant="contained">
+          Cancel
+        </Button>
+      </ListItem>
+      <ListItem>
+        <ListItemText>
+          <Typography variant="h6">Tertiary Button:</Typography>
+          Used commonly in a ButtonGroup and when the button function itself is
+          not a primary function on a page.
+          <br />
+          <pre>color="default" variant="outlined"</pre>
+        </ListItemText>
+
+        <Button to={routeRef.path} color="default" variant="outlined">
+          View Details
+        </Button>
+      </ListItem>
+    </List>
   );
 };
 
-export const PassProps = () => {
+export const ButtonLinks = () => {
   const routeRef = createRouteRef({
     path: '/hello',
     title: 'Hi there!',
   });
 
+  const handleClick = () => {
+    return 'Your click worked!';
+  };
+
   return (
     <>
-      <Button to={routeRef.path} color="secondary" variant="outlined">
-        This link
-      </Button>
-      &nbsp;has props for both material-ui's component as well as for
-      react-router-dom's
-      <Route path={routeRef.path}>
-        <h1>{routeRef.title}</h1>
-      </Route>
+      <List>
+        {
+          // TODO: Refactor to use new routing mechanisms
+        }
+        <ListItem>
+          <Button to={routeRef.path} color="default" variant="outlined">
+            Route Ref
+          </Button>
+          &nbsp; has props for both Material-UI's component as well as for
+          react-router-dom's Route object.
+        </ListItem>
+
+        <ListItem>
+          <Button to="/staticpath" color="default" variant="outlined">
+            Static Path
+          </Button>
+          &nbsp; links to a statically defined route. In general, this should be
+          avoided.
+        </ListItem>
+
+        <ListItem>
+          <MaterialButton
+            href="https://backstage.io"
+            color="default"
+            variant="outlined"
+          >
+            View URL
+          </MaterialButton>
+          &nbsp; links to a defined URL using Material-UI's Button.
+        </ListItem>
+
+        <ListItem>
+          <MaterialButton
+            onClick={handleClick}
+            color="default"
+            variant="outlined"
+          >
+            Trigger Event
+          </MaterialButton>
+          &nbsp; triggers an onClick event using Material-UI's Button.
+        </ListItem>
+      </List>
     </>
   );
 };
-PassProps.story = {
-  name: `Accepts material-ui Button's and react-router-dom Link's props`,
-};