diff --git a/src/components/molecules/LogoUnit.jsx b/src/components/molecules/LogoUnit.jsx index d31d21e..30069cf 100644 --- a/src/components/molecules/LogoUnit.jsx +++ b/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 ( -
- + + -

- {title.toLowerCase()} -

-

+

{title.toLowerCase()}

+

{tagline.toLowerCase()}

-
-
+ + ) }} /> diff --git a/src/components/molecules/LogoUnit.module.scss b/src/components/molecules/LogoUnit.module.scss index 5bfebcc..35fca41 100644 --- a/src/components/molecules/LogoUnit.module.scss +++ b/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); - transform-origin: top center; - transform-box: border-box; + pointer-events: all; + width: auto; + + &, + &:hover, + &:focus { + transform: scale(.7); + transform-origin: top center; + transform-box: border-box; + } .title, .description { diff --git a/src/components/molecules/LogoUnit.test.jsx b/src/components/molecules/LogoUnit.test.jsx index a5defdf..ca46905 100644 --- a/src/components/molecules/LogoUnit.test.jsx +++ b/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() + const { container } = render() expect(container.firstChild).toBeInTheDocument() - expect(getByTestId('logo-title')).toHaveTextContent(title.toLowerCase()) - expect(getByTestId('logo-tagline')).toHaveTextContent(tagline.toLowerCase()) + expect(container.querySelector('.title')).toHaveTextContent( + title.toLowerCase() + ) + expect(container.querySelector('.description')).toHaveTextContent( + tagline.toLowerCase() + ) }) it('renders in minimal variant', () => { const { container } = render() expect(container.firstChild).toBeInTheDocument() - expect(container.firstChild.className).toMatch(/logounit minimal/) + expect(container.querySelector('.logounit').className).toMatch( + /logounit minimal/ + ) }) }) diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index 154e7fa..3e425f7 100644 --- a/src/components/organisms/Footer.jsx +++ b/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 (