From 90f326f0b82fcc5f164af3b9f3bba619ed757a59 Mon Sep 17 00:00:00 2001
From: Hyrum Gomez <HyrumGomez0@churchofjesuschrist.org>
Date: Wed, 3 Jul 2019 15:18:38 -0600
Subject: [PATCH] Reverting to how buttons were

---
 .../template/src/components/ButtonLink.js     | 11 ---------
 .../src/components/ButtonLink.stories.js      |  7 ------
 .../components/example/FrontierDocsCard.js    | 12 ++++++----
 .../src/components/example/LearnReactCard.js  | 23 ++++++++++++++-----
 .../src/components/example/ZionCard.js        | 16 +++++++++----
 5 files changed, 37 insertions(+), 32 deletions(-)
 delete mode 100644 packages/react-scripts/template/src/components/ButtonLink.js
 delete mode 100644 packages/react-scripts/template/src/components/ButtonLink.stories.js

diff --git a/packages/react-scripts/template/src/components/ButtonLink.js b/packages/react-scripts/template/src/components/ButtonLink.js
deleted file mode 100644
index a1be645a37..0000000000
--- a/packages/react-scripts/template/src/components/ButtonLink.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Button } from '@fs/zion-ui'
-
-export default function ButtonLink({ href, ...props }) {
-  return <Button variant="text" size="small" color="primary" href={href} {...props} />
-}
-
-ButtonLink.propTypes = {
-  href: PropTypes.string.isRequired,
-}
diff --git a/packages/react-scripts/template/src/components/ButtonLink.stories.js b/packages/react-scripts/template/src/components/ButtonLink.stories.js
deleted file mode 100644
index ae0e02c32f..0000000000
--- a/packages/react-scripts/template/src/components/ButtonLink.stories.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import ButtonLink from './ButtonLink'
-
-storiesOf('ButtonLink', module)
-  .add('Link to google', () => <ButtonLink href="https://www.google.com">Google</ButtonLink>)
-  .add('Link to github', () => <ButtonLink href="https://www.github.com">Github</ButtonLink>)
diff --git a/packages/react-scripts/template/src/components/example/FrontierDocsCard.js b/packages/react-scripts/template/src/components/example/FrontierDocsCard.js
index e034533160..08fa294a52 100644
--- a/packages/react-scripts/template/src/components/example/FrontierDocsCard.js
+++ b/packages/react-scripts/template/src/components/example/FrontierDocsCard.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Card, CardActions, CardContent, CardActionArea } from '@fs/zion-ui'
+import { Button, Card, CardActions, CardContent, CardActionArea } from '@fs/zion-ui'
 import { useTranslation } from 'react-i18next'
-import ButtonLink from '../ButtonLink'
 import Logo from './Logo'
 
 const FrontierDocsCard = ({ logoColor, animationDuration, handleLogoClick }) => {
@@ -32,9 +31,14 @@ const FrontierDocsCard = ({ logoColor, animationDuration, handleLogoClick }) =>
       </CardContent>
 
       <CardActions>
-        <ButtonLink href="https://www.familysearch.org/frontier/docs">
+        <Button
+          variant="text"
+          size="small"
+          color="primary"
+          href="https://www.familysearch.org/frontier/docs"
+        >
           {t('getting.started.docs.link', 'Frontier Docs')}
-        </ButtonLink>
+        </Button>
       </CardActions>
     </Card>
   )
diff --git a/packages/react-scripts/template/src/components/example/LearnReactCard.js b/packages/react-scripts/template/src/components/example/LearnReactCard.js
index b43ade1f1f..f27ae577d4 100644
--- a/packages/react-scripts/template/src/components/example/LearnReactCard.js
+++ b/packages/react-scripts/template/src/components/example/LearnReactCard.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import { Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
-import ButtonLink from '../ButtonLink'
+import { Button, Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
 import ReactImage from './reactjs.jpg'
 
 const LearnReactCard = () => (
@@ -10,10 +9,22 @@ const LearnReactCard = () => (
       <h2>Learn React</h2>
     </CardContent>
     <CardActions>
-      <ButtonLink href="https://reactjs.org/docs/getting-started.html">React Docs</ButtonLink>
-      <ButtonLink href="https://github.com/fs-webdev/skill-building-program/tree/master/badges-active/react">
-        Earn your badge
-      </ButtonLink>
+      <Button
+        variant="text"
+        size="small"
+        color="primary"
+        href="https://reactjs.org/docs/getting-started.html"
+      >
+        React Docs
+      </Button>
+      <Button
+        href="https://github.com/fs-webdev/skill-building-program/tree/master/badges-active/react"
+        variant="text"
+        size="small"
+        color="primary"
+      >
+        Earn your Badge
+      </Button>
     </CardActions>
   </Card>
 )
diff --git a/packages/react-scripts/template/src/components/example/ZionCard.js b/packages/react-scripts/template/src/components/example/ZionCard.js
index 317dc4a38a..407a2e2144 100644
--- a/packages/react-scripts/template/src/components/example/ZionCard.js
+++ b/packages/react-scripts/template/src/components/example/ZionCard.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import { Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
-import ButtonLink from '../ButtonLink'
+import { Button, Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
 import ZionImage from './zion.jpg'
 
 const ZionCard = () => (
@@ -15,8 +14,17 @@ const ZionCard = () => (
       <p>Zion is the place to go to find reusable components for your FamilySearch application.</p>
     </CardContent>
     <CardActions>
-      <ButtonLink href="https://beta.familysearch.org/frontier/zion">Components</ButtonLink>
-      <ButtonLink href="https://github.com/fs-webdev/zion">Github</ButtonLink>
+      <Button
+        variant="text"
+        size="small"
+        color="primary"
+        href="https://beta.familysearch.org/frontier/zion"
+      >
+        Components
+      </Button>
+      <Button variant="text" size="small" color="primary" href="https://github.com/fs-webdev/zion">
+        Github
+      </Button>
     </CardActions>
   </Card>
 )