update to use zion3

packages/react-scripts/scripts/utils/frontierInit.js

@@ -29,7 +29,7 @@ function installFrontierDependencies(appPath, appName, ownPath) {
       '@fs/zion-style-normalize@1',
       '@fs/zion-subnav@1',
       '@fs/zion-user@2',
-      '@fs/zion-ui@1',
+      '@fs/zion-ui@3',
       'formik@1',
       'i18next@17',
       'react-i18next@10',
@@ -51,7 +51,7 @@ function installFrontierDependencies(appPath, appName, ownPath) {
       '@fs/eslint-config-frontier-react@3',
       '@fs/babel-preset-frontier@2',
       '@fs/storybook-addons@1',
-      '@fs/zion-testing-library@1',
+      '@fs/zion-testing-library@2',
       '@fs/zion-style-normalize@1',
       'eslint@6',
       'i18next-scanner@2',

packages/react-scripts/template-hf/src/setupProxy.js

@@ -11,7 +11,7 @@ const setupServer = require('../server')
 // put any custom proxies here, see https://www.familysearch.org/frontier/docs/develop/proxies
 const customProxies = []
 
-module.exports = app => {
+module.exports = (app) => {
   // Sets up local proxies for XHR calls.
   //      e.g. /service/tree/tf => https://beta.familysearch.org/service/tree/tf
   //      beta above comes from your .env file

packages/react-scripts/template-typescript/src/setupProxy.js

@@ -2,6 +2,6 @@
 // docs here: https://github.com/fs-webdev/exo#proxy
 const setProxies = require('@fs/react-scripts/proxy/setupProxy')
 
-module.exports = app => {
+module.exports = (app) => {
   setProxies(app)
 }

packages/react-scripts/template/.storybook/config.js

@@ -24,7 +24,7 @@ const baseCss = css`
 addDecorator(withKnobs)
 addDecorator(withA11y)
 addDecorator(addReadme)
-addDecorator(storyFn => (
+addDecorator((storyFn) => (
   <I18nProvider i18nInstance={i18n}>
     <ThemeProvider theme={zionTheme}>
       <StyleNormalize>

packages/react-scripts/template/.storybook/middleware.js

@@ -2,7 +2,7 @@ require('dotenv')
 const setupProxy = require('@fs/react-scripts/proxy/setupProxy')
 const customProxies = require('../src/setupProxy').customProxies
 
-module.exports = router => {
+module.exports = (router) => {
   setupProxy(router, customProxies)
 
   router.get('/dev-env', (req, res) => {

packages/react-scripts/template/.storybook/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = async ({ config }) => {
 
   //ability to turn off HMR with an envar
   if (process.env.DISABLE_HMR === 'true') {
-    config.entry = config.entry.filter(singleEntry => !singleEntry.includes('/webpack-hot-middleware/'))
+    config.entry = config.entry.filter((singleEntry) => !singleEntry.includes('/webpack-hot-middleware/'))
   }
 
   return config
@@ -37,7 +37,7 @@ function isNotStorybookBabelLoader(rule) {
 }
 
 function printRules(config) {
-  config.module.rules.forEach(rule => {
+  config.module.rules.forEach((rule) => {
     console.log('rule.test: ', rule.test)
     console.log('rule.include: ', rule.include)
     console.log('rule.exclude: ', rule.exclude)

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

@@ -1,12 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Card, CardActions, CardContent, CardMedia } from '@fs/zion-ui'
-import IconButton from '@fs/zion-ui/icon-button'
+import { Card, CardActions, CardContent, CardMedia, IconButton, TypeBlock, colors } from '@fs/zion-ui'
+import { Body1, Caption } from '@fs/zion-ui/type'
+import { css } from '@emotion/core'
 import { SocialLike, ArrowChevron } from '@fs/zion-icon'
 import axios from '@fs/zion-axios'
+import { boolAttr } from '@fs/zion-frontend-friends'
 
 // Custom hook for fetching artifacts from the the memory service
-const useArtifacts = cisId => {
+const useArtifacts = (cisId) => {
   // Handles dispatched actions
   // Take an action type, applies state changes and returns new state
   const reducer = (state, { type, ...data }) => {
@@ -36,12 +38,12 @@ const useArtifacts = cisId => {
       .get(
         `/service/memories/presentation/patrons/${cisId}/persons?numTaggedPersonArtifacts=3&includeTaggedPersons=true&includeEmptyPersons=false&includeHistory=false`
       )
-      .then(response => response.data.filter(a => a.featuredImages && a.featuredImages.length > 0))
-      .then(artifacts => {
+      .then((response) => response.data.filter((a) => a.featuredImages && a.featuredImages.length > 0))
+      .then((artifacts) => {
         // Success!  Dispatch action with results
         dispatch({ type: 'SUCCESS', artifacts })
       })
-      .catch(error => dispatch({ type: 'ERROR', error })) // Dispatch Error, update state
+      .catch((error) => dispatch({ type: 'ERROR', error })) // Dispatch Error, update state
   }, [cisId])
 
   return [state]
@@ -57,35 +59,47 @@ const ArtifactsCard = ({ cisId, likeButtonPressed }) => {
 
   // Event handlers
   const handleNextClick = () => {
-    setSelectedIndex(currentIndex => currentIndex + 1)
+    setSelectedIndex((currentIndex) => currentIndex + 1)
   }
 
   const handlePreviousClick = () => {
-    setSelectedIndex(currentIndex => currentIndex - 1)
+    setSelectedIndex((currentIndex) => currentIndex - 1)
   }
 
   const handleToggleLiked = () => {
     // Notify parent that the like button was pressed
     likeButtonPressed()
 
     // Update internal state
-    setLiked(current => {
+    setLiked((current) => {
       current[selectedIndex] = !current[selectedIndex]
       return current
     })
   }
 
   // Helper functions for rendering
   function renderLoading() {
-    return <CardContent>Loading ... </CardContent>
+    return (
+      <CardContent>
+        <TypeBlock size="sm" header="Loading ... " />
+      </CardContent>
+    )
   }
 
   function renderError() {
-    return <CardContent>An error has occured</CardContent>
+    return (
+      <CardContent>
+        <TypeBlock size="sm" header="An Error Occurred" />
+      </CardContent>
+    )
   }
 
   function renderNoArtifacts() {
-    return <CardContent>There are no artifacts to display.</CardContent>
+    return (
+      <CardContent>
+        <Body1>There are no artifacts to display</Body1>
+      </CardContent>
+    )
   }
 
   function renderArtifacts() {
@@ -97,31 +111,57 @@ const ArtifactsCard = ({ cisId, likeButtonPressed }) => {
       <>
         <CardMedia height="var(--cell-width)" image={featuredImage.thumbSquareUrl} title={featuredImage.title} />
         <CardContent>
-          <h3>{selectedArtifact.name}</h3>
+          <TypeBlock size="sm" header={selectedArtifact.name} />
+          <Caption>{featuredImage.title}</Caption>
         </CardContent>
         <CardActions>
-          <IconButton color={liked[selectedIndex] ? 'secondary' : 'default'} onClick={handleToggleLiked}>
-            <SocialLike />
-          </IconButton>
-          <IconButton onClick={handlePreviousClick} disabled={selectedIndex === 0}>
-            <ArrowChevron direction="left" />
-          </IconButton>
-          <IconButton onClick={handleNextClick} disabled={selectedIndex + 1 === artifacts.length}>
-            <ArrowChevron />
-          </IconButton>
+          <ToggleIconButton
+            aria-label="Click to like this photo"
+            Icon={SocialLike}
+            onClick={handleToggleLiked}
+            pressed={liked[selectedIndex]}
+          />
+          <IconButton
+            aria-label="Click to see the previous photo"
+            Icon={ArrowChevron}
+            onClick={handlePreviousClick}
+            iconDirection="left"
+            disabled={selectedIndex === 0}
+          />
+          <IconButton
+            aria-label="Click to see the next photo"
+            Icon={ArrowChevron}
+            onClick={handleNextClick}
+            disabled={selectedIndex + 1 === artifacts.length}
+          />
         </CardActions>
       </>
     )
   }
 
   return (
-    <Card>
+    <Card stretch={false}>
       {error && renderError()}
       {loading ? renderLoading() : renderArtifacts()}
     </Card>
   )
 }
 
+const ToggleIconButton = ({ pressed = false, ...props }) => {
+  const buttonStyle = css`
+    &[pressed] {
+      svg {
+        fill: ${colors.link.visited};
+      }
+    }
+  `
+  return (
+    <div css={buttonStyle} pressed={boolAttr(pressed)}>
+      <IconButton {...props} />
+    </div>
+  )
+}
+
 ArtifactsCard.propTypes = {
   /** User is needed to obtain artifacts from their family history from memory service. */
   user: PropTypes.shape({

packages/react-scripts/template/src/components/example/Example.stories.js

@@ -4,7 +4,7 @@ import ExamplePageComponent from './ExamplePage'
 import LearnReactCardComponent from './LearnReactCard'
 import ZionCardComponent from './ZionCard'
 import NotSignedInCardComponent from './NotSignedInCard'
-import SignedInCardReadme from './SignedInCard.md'
+import UserCardComponent from './UserCard'
 
 export default {
   title: 'ExamplePage',
@@ -14,16 +14,7 @@ export const ExamplePage = () => <ExamplePageComponent />
 
 export const LearnReactCard = () => <LearnReactCardComponent />
 
-export const SignedInCard = () => null
-
-SignedInCard.story = {
-  name: 'Signed In Card',
-  parameters: {
-    readme: {
-      content: SignedInCardReadme,
-    },
-  },
-}
+export const UserCard = () => <UserCardComponent />
 
 export const NotSignedInCard = () => <NotSignedInCardComponent user={{}} />
 

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

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useUser } from '@fs/zion-user'
-import { Grid, Cell } from '@fs/zion-ui'
+import { Grid, Cell, TypeBlock } from '@fs/zion-ui'
 import FrontierDocsCard from './FrontierDocsCard'
 import ZionCard from './ZionCard'
 import LearnReactCard from './LearnReactCard'
 import NotSignedInCard from './NotSignedInCard'
 import ArtifactsCard from './ArtifactsCard'
 import UserCard from './UserCard'
-import FormCard from './FormCard/FormCard'
+import FormCard from './FormCard'
 
 // Hook to generate a random color
 const useRandomColor = () => {
@@ -40,7 +40,7 @@ const ExamplePage = () => {
 
   // Event handlers
   function likeButtonPressed() {
-    setLikeButtonPressedCount(currentCount => currentCount + 1)
+    setLikeButtonPressedCount((currentCount) => currentCount + 1)
   }
 
   function handleLogoAnimationDurationChange(duration) {
@@ -51,7 +51,7 @@ const ExamplePage = () => {
     <Grid>
       {/* Row 1 */}
       <Cell>
-        <h1>Welcome to your new Frontier Application</h1>
+        <TypeBlock header="Welcome to your new Frontier Application" />
       </Cell>
 
       {/* Row 2 */}
@@ -72,28 +72,30 @@ const ExamplePage = () => {
         <LearnReactCard />
       </Cell>
 
-      <Cell sm="6" lg="4">
-        <RequireSignedInUser
-          user={user}
-          Component={UserCard}
-          likeButtonPressedCount={likeButtonPressedCount}
-          logoColor={logoColor}
-          logoAnimationDuration={logoAnimationDuration}
-          handleLogoAnimationDurationChange={handleLogoAnimationDurationChange}
-        />
-      </Cell>
+      {
+        <Cell sm="6" lg="4">
+          <RequireSignedInUser
+            user={user}
+            Component={UserCard}
+            likeButtonPressedCount={likeButtonPressedCount}
+            logoColor={logoColor}
+            logoAnimationDuration={logoAnimationDuration}
+            handleLogoAnimationDurationChange={handleLogoAnimationDurationChange}
+          />
+        </Cell>
+      }
 
       {/* Row 4 */}
-      <Cell sm="6" lg="4">
+
+      <Cell sm="4" md="6" lg="4">
         <RequireSignedInUser
           user={user}
           cisId={user.cisId}
           Component={ArtifactsCard}
           likeButtonPressed={likeButtonPressed}
         />
       </Cell>
-
-      <Cell sm="6" lg="8">
+      <Cell sm="8" md="6" lg="8">
         <FormCard />
       </Cell>
     </Grid>