Merge pull request #144 from fs-webdev/reducingDuplication

moving duplicated code to a ButtonLink component

Author: joeycozza

packages/react-scripts/template/src/components/ButtonLink.js

@@ -0,0 +1,11 @@
+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,
+}

packages/react-scripts/template/src/components/ButtonLink.stories.js

@@ -0,0 +1,7 @@
+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>)

packages/react-scripts/template/src/components/example/FrontierDocsCard.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Card, CardActions, CardContent, CardActionArea } from '@fs/zion-ui'
+import { 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 }) => {
@@ -31,14 +32,9 @@ const FrontierDocsCard = ({ logoColor, animationDuration, handleLogoClick }) =>
  </CardContent>
 
  <CardActions>
- <Button
- variant="text"
- size="small"
- color="primary"
- href="https://www.familysearch.org/frontier/docs"
- >
+ <ButtonLink href="https://www.familysearch.org/frontier/docs">
  {t('getting.started.docs.link', 'Frontier Docs')}
- </Button>
+ </ButtonLink>
  </CardActions>
  </Card>
  )

packages/react-scripts/template/src/components/example/LearnReactCard.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button, Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
+import { Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
+import ButtonLink from '../ButtonLink'
 import ReactImage from './reactjs.jpg'
 
 const LearnReactCard = () => (
@@ -9,22 +10,10 @@ const LearnReactCard = () => (
  <h2>Learn React</h2>
  </CardContent>
  <CardActions>
- <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>
+ <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>
  </CardActions>
  </Card>
 )

packages/react-scripts/template/src/components/example/ZionCard.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button, Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
+import { Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui'
+import ButtonLink from '../ButtonLink'
 import ZionImage from './zion.jpg'
 
 const ZionCard = () => (
@@ -14,17 +15,8 @@ const ZionCard = () => (
  <p>Zion is the place to go to find reusable components for your FamilySearch application.</p>
  </CardContent>
  <CardActions>
- <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>
+ <ButtonLink href="https://beta.familysearch.org/frontier/zion">Components</ButtonLink>
+ <ButtonLink href="https://github.com/fs-webdev/zion">Github</ButtonLink>
  </CardActions>
  </Card>
 )