From 061a9396eb29a9fd8c1a46081af058d32249facb Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Wed, 3 Feb 2021 11:02:57 -0500
Subject: [PATCH 1/3] Updates button examples

---
 .../src/components/Button/Button.stories.tsx  | 145 +++++++++++++++---
 1 file changed, 120 insertions(+), 25 deletions(-)

diff --git a/packages/core/src/components/Button/Button.stories.tsx b/packages/core/src/components/Button/Button.stories.tsx
index a5005574fe..98b6d46b25 100644
--- a/packages/core/src/components/Button/Button.stories.tsx
+++ b/packages/core/src/components/Button/Button.stories.tsx
@@ -17,6 +17,17 @@ import React, { FunctionComponentFactory } from 'react';
 import { Button } from './Button';
 import { MemoryRouter, Route, useLocation } from 'react-router-dom';
 import { createRouteRef } from '@backstage/core-api';
+import {
+  Divider,
+  Grid,
+  Link,
+  List,
+  ListItem,
+  ListItemText,
+  ListSubheader,
+  Typography,
+  Button as MaterialButton,
+} from '@material-ui/core';
 
 const Location = () => {
   const location = useLocation();
@@ -28,14 +39,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 +70,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="tertiary" 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="tertiary" 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="tertiary"
+            variant="outlined"
+          >
+            View URL
+          </MaterialButton>
+          &nbsp; links to a defined URL using Material-UI's Button.
+        </ListItem>
+
+        <ListItem>
+          <MaterialButton
+            onClick={handleClick}
+            color="tertiary"
+            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`,
-};

From f2e106df0a8238814b3f316fa8a3fc561bde5f9a Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Wed, 3 Feb 2021 12:33:22 -0500
Subject: [PATCH 2/3] Fix TypeScript compile errors

---
 packages/core/src/components/Button/Button.stories.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/core/src/components/Button/Button.stories.tsx b/packages/core/src/components/Button/Button.stories.tsx
index 98b6d46b25..a0756925d6 100644
--- a/packages/core/src/components/Button/Button.stories.tsx
+++ b/packages/core/src/components/Button/Button.stories.tsx
@@ -15,16 +15,14 @@
  */
 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,
-  Grid,
   Link,
   List,
   ListItem,
   ListItemText,
-  ListSubheader,
   Typography,
   Button as MaterialButton,
 } from '@material-ui/core';

From ff9c940ca7fd944208e97ed376763e7a39092003 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Wed, 3 Feb 2021 12:34:51 -0500
Subject: [PATCH 3/3] Fix props

---
 packages/core/src/components/Button/Button.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/Button/Button.stories.tsx b/packages/core/src/components/Button/Button.stories.tsx
index a0756925d6..af95e64d52 100644
--- a/packages/core/src/components/Button/Button.stories.tsx
+++ b/packages/core/src/components/Button/Button.stories.tsx
@@ -132,7 +132,7 @@ export const ButtonLinks = () => {
           // TODO: Refactor to use new routing mechanisms
         }
         <ListItem>
-          <Button to={routeRef.path} color="tertiary" variant="outlined">
+          <Button to={routeRef.path} color="default" variant="outlined">
             Route Ref
           </Button>
           &nbsp; has props for both Material-UI's component as well as for
@@ -140,7 +140,7 @@ export const ButtonLinks = () => {
         </ListItem>
 
         <ListItem>
-          <Button to="/staticpath" color="tertiary" variant="outlined">
+          <Button to="/staticpath" color="default" variant="outlined">
             Static Path
           </Button>
           &nbsp; links to a statically defined route. In general, this should be
@@ -150,7 +150,7 @@ export const ButtonLinks = () => {
         <ListItem>
           <MaterialButton
             href="https://backstage.io"
-            color="tertiary"
+            color="default"
             variant="outlined"
           >
             View URL
@@ -161,7 +161,7 @@ export const ButtonLinks = () => {
         <ListItem>
           <MaterialButton
             onClick={handleClick}
-            color="tertiary"
+            color="default"
             variant="outlined"
           >
             Trigger Event