From 9ab774002815a044785594ecefe7c5a2b6a77c3f Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Wed, 25 Nov 2020 12:24:33 +0100
Subject: [PATCH] a11y issues with Storefront (#902)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 Remove link as the linked page is in draft

* ✏️ Fix dead link

* 🐛 Try to fix duplicate title bug

I'm not sure if we added the SEO in wrapper for a reason back in August, didn't dare to delete it yet...

* ✏️ Did work locally, but failed on CI. Case issue?
---
 .../docs/guidelines/spacing/overview.mdx      |  2 +-
 apps/storefront/gatsby-config.js              |  2 +-
 .../component-status/component-status.yaml    |  2 +-
 .../src/gatsby-theme-docz/base/Seo.js         | 95 +++++++++++++++++++
 .../components/Layout/index.js                |  3 +-
 .../src/gatsby-theme-docz/wrapper.js          |  2 +-
 6 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 apps/storefront/src/gatsby-theme-docz/base/Seo.js

diff --git a/apps/storefront/docs/guidelines/spacing/overview.mdx b/apps/storefront/docs/guidelines/spacing/overview.mdx
index 82d5325053..304ca8d600 100644
--- a/apps/storefront/docs/guidelines/spacing/overview.mdx
+++ b/apps/storefront/docs/guidelines/spacing/overview.mdx
@@ -55,7 +55,7 @@ There are eight spacers to choose between: `XX Small`, `X Small`, `Small`, `Medi
 
 ## Using with components
 
-Visit [spacing usage](https://eds.equinor.com/patterns/spacing-usage/) for more details on on how to use spacing together with components.  
+<!-- Visit [spacing usage](https://eds.equinor.com/patterns/spacing-usage/) for more details on on how to use spacing together with components.  -->
 
 <FigmaImage
   url="https://www.figma.com/file/0TbIXrrObWj80Cf7KucKYFL0/Design-Tokens?node-id=239%3A1"
diff --git a/apps/storefront/gatsby-config.js b/apps/storefront/gatsby-config.js
index 0dc89e344d..34d9f328e8 100644
--- a/apps/storefront/gatsby-config.js
+++ b/apps/storefront/gatsby-config.js
@@ -17,7 +17,7 @@ module.exports = {
         mdPlugins: [remarkEmoji],
       },
     },
-    `gatsby-plugin-react-helmet`,
+
     {
       resolve: `gatsby-source-filesystem`,
       options: {
diff --git a/apps/storefront/src/data/component-status/component-status.yaml b/apps/storefront/src/data/component-status/component-status.yaml
index 93ebd5103e..a8d28a471e 100644
--- a/apps/storefront/src/data/component-status/component-status.yaml
+++ b/apps/storefront/src/data/component-status/component-status.yaml
@@ -131,7 +131,7 @@ components:
         - *4
       react:
         - *4
-  - component: 'Navigation Navigation drawer'
+  - component: 'Navigation drawer'
     status:
       documentation:
         - *4
diff --git a/apps/storefront/src/gatsby-theme-docz/base/Seo.js b/apps/storefront/src/gatsby-theme-docz/base/Seo.js
new file mode 100644
index 0000000000..e6fd074b31
--- /dev/null
+++ b/apps/storefront/src/gatsby-theme-docz/base/Seo.js
@@ -0,0 +1,95 @@
+/**
+ * SEO component that queries for data with
+ *  Gatsby's useStaticQuery React hook
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+/* eslint import/no-default-export: off */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Helmet } from 'react-helmet-async'
+import { useStaticQuery, graphql } from 'gatsby'
+
+function SEO({ description, lang, meta, title }) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+            image
+          }
+        }
+      }
+    `,
+  )
+
+  const metaDescription = description || site.siteMetadata.description
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:image`,
+          content: site.siteMetadata.image,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:type`,
+          content: `website`,
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.author,
+        },
+        {
+          name: `twitter:title`,
+          content: title,
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription,
+        },
+      ].concat(meta)}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``,
+  title: '',
+}
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string,
+}
+
+export default SEO
diff --git a/apps/storefront/src/gatsby-theme-docz/components/Layout/index.js b/apps/storefront/src/gatsby-theme-docz/components/Layout/index.js
index 42f1005fdf..752180a691 100644
--- a/apps/storefront/src/gatsby-theme-docz/components/Layout/index.js
+++ b/apps/storefront/src/gatsby-theme-docz/components/Layout/index.js
@@ -8,7 +8,7 @@ import { Sidebar } from '../Sidebar'
 import { MainContainer } from '../MainContainer'
 import { SkipLink } from '../../../components/SkipLink'
 import { BaseLayout } from '../../../components/BaseLayout'
-import SEO from '../../../components/seo'
+import SEO from '../../base/Seo'
 import styled from 'styled-components'
 import './global.css'
 
@@ -24,6 +24,7 @@ const StyledSidebar = styled(Sidebar)`
 
 export const Layout = ({ doc, children }) => {
   const [open, setOpen] = useState(false)
+
   return (
     <BaseLayout>
       <SEO title={doc.value.metaTitle} />
diff --git a/apps/storefront/src/gatsby-theme-docz/wrapper.js b/apps/storefront/src/gatsby-theme-docz/wrapper.js
index dcc6849f13..7ba2e1df5a 100644
--- a/apps/storefront/src/gatsby-theme-docz/wrapper.js
+++ b/apps/storefront/src/gatsby-theme-docz/wrapper.js
@@ -9,7 +9,7 @@ import SEO from '../components/seo'
 const Wrapper = ({ children }) => {
   return (
     <>
-      <SEO />
+      {/*   <SEO /> */}
       <Helmet>
         <meta charSet="utf-8" />
         <link