refactor

src/components/molecules/LogoUnit.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
 import classNames from 'classnames'
 import { moveInBottom } from '../atoms/Transitions'
@@ -38,20 +38,15 @@ export default class LogoUnit extends PureComponent {
           const { title, tagline } = data.metaYaml
 
           return (
-            <div className={wrapClasses}>
+            <this.Animation>
-              <this.Animation>
+              <Link className={wrapClasses} to={'/'}>
                 <Logo className={styles.logo} />
-                <h1 data-testid="logo-title" className={this.nameClasses}>
+                <h1 className={this.nameClasses}>{title.toLowerCase()}</h1>
-                  {title.toLowerCase()}
+                <p className={this.descriptionClasses}>
-                </h1>
-                <p
-                  data-testid="logo-tagline"
-                  className={this.descriptionClasses}
-                >
                   {tagline.toLowerCase()}
                 </p>
-              </this.Animation>
+              </Link>
-            </div>
+            </this.Animation>
           )
         }}
       />

src/components/molecules/LogoUnit.module.scss

@@ -1,7 +1,9 @@
 @import 'variables';
 
 .logounit {
+    pointer-events: none;
     display: block;
+    width: 100%;
 }
 
 .logo {
@@ -46,9 +48,16 @@
 }
 
 .minimal {
-    transform: scale(.7);
+    pointer-events: all;
-    transform-origin: top center;
+    width: auto;
-    transform-box: border-box;
+
+    &,
+    &:hover,
+    &:focus {
+        transform: scale(.7);
+        transform-origin: top center;
+        transform-box: border-box;
+    }
 
     .title,
     .description {

src/components/molecules/LogoUnit.test.jsx

@@ -11,17 +11,23 @@ beforeEach(() => {
 describe('LogoUnit', () => {
   it('renders correctly from data file values', () => {
     const { title, tagline } = data.metaYaml
-    const { container, getByTestId } = render(<LogoUnit />)
+    const { container } = render(<LogoUnit />)
 
     expect(container.firstChild).toBeInTheDocument()
-    expect(getByTestId('logo-title')).toHaveTextContent(title.toLowerCase())
+    expect(container.querySelector('.title')).toHaveTextContent(
-    expect(getByTestId('logo-tagline')).toHaveTextContent(tagline.toLowerCase())
+      title.toLowerCase()
+    )
+    expect(container.querySelector('.description')).toHaveTextContent(
+      tagline.toLowerCase()
+    )
   })
 
   it('renders in minimal variant', () => {
     const { container } = render(<LogoUnit minimal={true} />)
 
     expect(container.firstChild).toBeInTheDocument()
-    expect(container.firstChild.className).toMatch(/logounit minimal/)
+    expect(container.querySelector('.logounit').className).toMatch(
+      /logounit minimal/
+    )
   })
 })

src/components/organisms/Footer.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Link, StaticQuery, graphql } from 'gatsby'
+import { StaticQuery, graphql } from 'gatsby'
 import classNames from 'classnames'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../molecules/LogoUnit'
@@ -27,9 +27,7 @@ const FooterMarkup = ({ pkg, meta, year }) => {
 
   return (
     <footer className={classes}>
-      <Link to={'/'}>
+      <LogoUnit minimal />
-        <LogoUnit minimal />
-      </Link>
 
       <Networks minimal />
 

src/components/organisms/Header.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Link, StaticQuery, graphql } from 'gatsby'
+import { StaticQuery, graphql } from 'gatsby'
 import classNames from 'classnames'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
@@ -25,21 +25,20 @@ export default class Header extends PureComponent {
 
   render() {
     const { minimal } = this.props
-    const headerClasses = classNames([styles.header], {
-      [styles.minimal]: minimal
-    })
 
     return (
       <StaticQuery
         query={query}
         render={data => {
           const meta = data.metaYaml
+          const headerClasses = classNames([styles.header], {
+            [styles.minimal]: minimal
+          })
+
           return (
             <header className={headerClasses}>
               <ThemeSwitch />
-              <Link className={styles.link} to={'/'}>
+              <LogoUnit minimal={minimal} />
-                <LogoUnit minimal={minimal} />
-              </Link>
               <Networks hide={minimal} />
               <Availability hide={minimal && !meta.availability.status} />
             </header>

src/components/organisms/Header.module.scss

@@ -12,19 +12,8 @@
     justify-content: flex-start;
 }
 
-.link {
-    pointer-events: none;
-    display: block;
-    width: 100%;
-}
-
 .minimal {
     min-height: 0;
     padding-top: $spacer * 2;
     padding-bottom: 0;
-
-    .link {
-        pointer-events: all;
-        width: auto;
-    }
 }