Apply SVG component pattern to remaining images

.circleci/config.yml

@@ -224,6 +224,9 @@ jobs:
       - run:
           name: Build React Components
           command: yarn --cwd packages/react-component-library build
+      - run:
+          name: Build site
+          command: yarn --cwd packages/docs-site build
       - run:
           name: Jest
           environment:

packages/docs-site/.gitignore

@@ -7,4 +7,5 @@ public/
 generated-library/
 
 # SVGR components
-src/library/images/**/**.js
+src/**/images/**.js
+src/**/images/**/**.js

packages/docs-site/package.json

@@ -17,8 +17,8 @@
     "test": "jest",
     "cache:clear": "rm -rf ./.cache",
     "svgr": "yarn svgr:clear && yarn svgr:build",
-    "svgr:clear": "find src/library/images -name '*.js' -delete",
-    "svgr:build": "svgr -d src/library/images src/library/images"
+    "svgr:clear": "find src -regex '.*/images/.*.js' -delete",
+    "svgr:build": "svgr -d src src"
   },
   "browserslist": [
     ">0.2%",

packages/docs-site/src/components/presenters/Masthead/index.js

@@ -9,7 +9,7 @@ import {
 } from '@royalnavy/react-component-library'
 
 import packageJson from '../../../../package'
-import SiteLogo from './images/site-logo.svg'
+import SiteLogo from './images/SiteLogo'
 
 import './masthead.scss'
 

packages/docs-site/src/components/presenters/Masthead/masthead.scss

@@ -116,6 +116,35 @@
   margin-bottom: 0;
   margin-top: 0;
   width: 210px;
+
+  .site-logo_svg__home {
+    opacity: 0;
+    transition: 0.2s;
+    transform: translateY(10px);
+    transition-delay: 0s;
+  }
+  .site-logo_svg__team {
+    opacity: 1;
+    transition: 0.2s;
+    transform: translateY(0);
+    transition-delay: 0.1s;
+  }
+  .site-logo_svg__logo:hover .site-logo_svg__team {
+    opacity: 0;
+    transform: translateY(-10px);
+    transition-delay: 0s;
+  }
+  .site-logo_svg__logo:hover .site-logo_svg__home {
+    opacity: 1;
+    transform: translateY(0);
+    transition-delay: 0.1s;
+  }
+  .site-logo_svg__left-arrow {
+    transition: 0.2s;
+  }
+  .site-logo_svg__logo:hover .site-logo_svg__left-arrow {
+    fill: #3a8fdd;
+  }
 }
 
 .masthead__version {

packages/docs-site/src/components/presenters/card/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import './card.scss'
 
-import ArrowRightIcon from './arrow-right-icon.svg'
+import ArrowRightIcon from './images/ArrowRightIcon'
 
 const Card = ({
   type,

packages/docs-site/src/components/presenters/code-highlighter/index.js

@@ -7,7 +7,7 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 import './code-highlighter.scss'
 
-import CopyIcon from './copy-icon.svg'
+import CopyIcon from './images/CopyIcon'
 
 const CodeHighlighter = ({ className, source, language, children }) => {
   useEffect(() => {

packages/docs-site/src/components/presenters/data-table/table-head.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import uuid from 'uuid'
 
-import DownArrowIcon from './down-arrow-icon.svg'
+import DownArrowIcon from './images/DownArrowIcon'
 
 const TableHead = ({ headings, onClickHeading }) => {
   return (

packages/docs-site/src/components/presenters/footer/index.js

@@ -5,7 +5,7 @@ import Links from '../Links'
 
 import './footer.scss'
 
-import MonoLogo from './logo.svg'
+import MonoLogo from './images/Logo'
 
 const Footer = ({ children, links }) => (
   <div className="rn-footer">

packages/docs-site/src/components/presenters/sketch-widget/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 
 import './sketch-widget.scss'
 
-import SketchLogo from './sketch-logo.svg'
-import DownloadIcon from './download-icon.svg'
+import SketchLogo from './images/SketchLogo'
+import DownloadIcon from './images/DownloadIcon'
 
 const SketchWidget = ({ name, href }) => {
   return (