Merge pull request #152 from gladly-team/kevin/update-copy

Update copy, fix intro link styling

src/components/ImpactCounter.js

@@ -85,8 +85,8 @@ const ImpactCounter = (props) => {
             className={classes.dropdownText}
             gutterBottom
           >
-            This shows how many treats you've provided to help shelter cats get
-            adopted. Every tab you open helps. Keep it up!
+            This shows how many treats your tabs can provide to help shelter
+            cats get adopted. Every tab you open helps. Keep it up!
           </Typography>
         </div>
       </DashboardPopover>

src/components/Link.js

@@ -14,10 +14,12 @@ const useStyles = makeStyles(() => ({
 }))
 
 const Link = (props) => {
-  const { children, className, to } = props
+  const { children, className, target, to } = props
   const classes = useStyles()
   const [destInternal, setDestInternal] = useState(true)
 
+  // Explicitly set target="_top" for external links, because our
+  // app may be served in an iframe.
   // We won't always server-render the "target" prop correctly.
   // If that causes problems, use the URL from the request when
   // server-side rendering.
@@ -31,12 +33,18 @@ const Link = (props) => {
     }
   }, [to])
 
+  // Always use the anchor prop, if provided; otherwise, fall
+  // back to the default.
+  let anchorTarget
+  if (target) {
+    anchorTarget = target
+  } else {
+    anchorTarget = destInternal ? undefined : '_top'
+  }
+
   return (
     <NextJsLink href={to}>
-      <a
-        target={destInternal ? undefined : '_top'}
-        className={clsx(classes.anchor, className)}
-      >
+      <a target={anchorTarget} className={clsx(classes.anchor, className)}>
         {children}
       </a>
     </NextJsLink>
@@ -52,10 +60,12 @@ Link.propTypes = {
   ]).isRequired,
   className: PropTypes.string,
   to: PropTypes.string.isRequired,
+  target: PropTypes.string,
 }
 
 Link.defaultProps = {
   className: '',
+  target: undefined,
 }
 
 export default Link

src/components/OnboardingFlow.js

@@ -11,7 +11,7 @@ import onboarding3 from 'src/assets/onboarding/onboarding3.png'
 import PropTypes from 'prop-types'
 import Link from 'src/components/Link'
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles((theme) => ({
   card: {
     display: 'flex',
     width: '400px',
@@ -43,6 +43,11 @@ export const useStyles = makeStyles(() => ({
     justifyContent: 'flex-end',
     display: 'flex',
   },
+  link: {
+    display: 'inline',
+    color: theme.palette.primary.main,
+    textDecoration: 'none',
+  },
 }))
 
 export const onboardingStepContents = (classes) => [
@@ -63,7 +68,7 @@ export const onboardingStepContents = (classes) => [
           align="center"
           className={classes.childrenTypography}
         >
-          Tabbers like you are supporting critical nonprofit all around the
+          Tabbers like you are supporting critical nonprofit work all around the
           world. Thank you!
         </Typography>
       </div>
@@ -79,9 +84,14 @@ export const onboardingStepContents = (classes) => [
           align="center"
           className={classes.childrenTypography}
         >
-          Your tabs will help shelter cats get adopted by
-          <Link to="https://thejacksongalaxyproject.greatergood.org/about/cat-pawsitive/">
-            providing treats used in positive reinforcement training.
+          Your tabs support initiatives that help shelter cats get adopted,
+          including initiatives that{' '}
+          <Link
+            target="_blank"
+            to="https://thejacksongalaxyproject.greatergood.org/about/cat-pawsitive/"
+            className={classes.link}
+          >
+            use treats in positive reinforcement training.
           </Link>
         </Typography>
         <Typography

src/components/__tests__/Link.test.js

@@ -11,6 +11,7 @@ const getMockProps = () => ({
   children: 'hi',
   className: 'some-class',
   to: 'https://tab.gladly.io/newtab/blah/',
+  target: undefined,
 })
 
 beforeEach(() => {
@@ -61,7 +62,7 @@ describe('Link component', () => {
       className: 'some-class-here',
     }
     const wrapper = shallow(<Link {...mockProps} />)
-    const anchor = wrapper.childAt(0)
+    const anchor = wrapper.find('a').first()
     expect(anchor.prop('className')).toContain('some-class-here')
   })
 
@@ -96,4 +97,25 @@ describe('Link component', () => {
     mount(<Link {...mockProps} />)
     expect(isURLForDifferentApp).toHaveBeenCalledWith(`/my-base-path/my/thing`)
   })
+
+  it('assigns the "target" prop to the anchor if it is provided', () => {
+    const Link = require('src/components/Link').default
+    const mockProps = {
+      ...getMockProps(),
+      target: '_blank',
+    }
+    const wrapper = shallow(<Link {...mockProps} />)
+    expect(wrapper.find('a').first().prop('target')).toEqual('_blank')
+  })
+
+  it('uses the "target" prop when provided, rather than target="_top", when it is an external link', () => {
+    const Link = require('src/components/Link').default
+    const mockProps = {
+      ...getMockProps(),
+      url: 'https://blahblah.com',
+      target: '_blank',
+    }
+    const wrapper = shallow(<Link {...mockProps} />)
+    expect(wrapper.find('a').first().prop('target')).toEqual('_blank')
+  })
 })