Merge pull request #474 from Royal-Navy/feature/docs-site-svgr

Generate components from SVGs in doc site

.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

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

packages/docs-site/gatsby-config.js

@@ -9,7 +9,6 @@ module.exports = {
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-catch-links`,
-    'gatsby-plugin-react-svg',
     {
       resolve: `gatsby-plugin-sass`,
       options: {
@@ -22,27 +21,6 @@ module.exports = {
         resources: [`${__dirname}/src/helpers/css/_variables.scss`],
       },
     },
-    {
-      resolve: `gatsby-source-icon-parser`,
-      options: {
-        name: `icons`,
-        path: `${__dirname}/src/library/icons`,
-      },
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `icons`,
-        path: `${__dirname}/src/library/icons`,
-      },
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

packages/docs-site/package.json

@@ -8,14 +8,17 @@
   "author": "NELSON",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "rm -rf ./.cache && gatsby build",
-    "develop": "gatsby develop",
-    "develop:clean": "rm -rf ./.cache && gatsby develop",
+    "build": "yarn cache:clear && yarn svgr && gatsby build",
+    "develop": "yarn svgr && gatsby develop",
+    "develop:clean": "yarn cache:clear && yarn svgr && gatsby develop",
     "format": "prettier --write \"src/**/*.js\"",
     "lint": "eslint src",
     "lint:ci": "eslint -f ../../node_modules/eslint-junit/index.js src",
     "test": "jest",
-    "cache:clear": "rm -rf ./.cache"
+    "cache:clear": "rm -rf ./.cache",
+    "svgr": "yarn svgr:clear && yarn svgr:build",
+    "svgr:clear": "find src -regex '.*/images/.*.js' -delete",
+    "svgr:build": "svgr -d src src"
   },
   "browserslist": [
     ">0.2%",
@@ -48,7 +51,6 @@
     "gatsby-plugin-mdx": "^1.0.58",
     "gatsby-plugin-offline": "^3.0.25",
     "gatsby-plugin-react-helmet": "^3.1.16",
-    "gatsby-plugin-react-svg": "^2.1.2",
     "gatsby-plugin-sass": "^2.1.24",
     "gatsby-plugin-sass-resources": "^2.0.0",
     "gatsby-plugin-sharp": "^2.3.4",
@@ -70,6 +72,7 @@
   "devDependencies": {
     "@babel/core": "^7.7.4",
     "@royalnavy/eslint-config-react": "^1.8.0",
+    "@svgr/cli": "^4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "babel-core": "^7.0.0-bridge.0",

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 (