From f0233ee030b06fc5afd4986cbf86b64c996ccc00 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Wed, 16 Jan 2019 06:50:55 -0500
Subject: [PATCH] Hiding content that requires JS when JS is disabled

---
 src/components/Form/__snapshots__/test.js.snap   |  1 +
 src/components/Form/index.js                     |  2 +-
 src/components/Header/__snapshots__/test.js.snap |  8 ++++++--
 src/components/Header/index.js                   |  2 +-
 src/components/Layout/__snapshots__/test.js.snap | 11 +++++++++++
 src/components/Layout/index.js                   |  9 +++++++++
 6 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/Form/__snapshots__/test.js.snap b/src/components/Form/__snapshots__/test.js.snap
index c9cd2a8..60cd4b1 100644
--- a/src/components/Form/__snapshots__/test.js.snap
+++ b/src/components/Form/__snapshots__/test.js.snap
@@ -3,6 +3,7 @@
 exports[`Form rendering 1`] = `
 <div
   className="form"
+  data-requires-js={true}
 >
   <form
     onSubmit={[Function]}
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
index 0994be7..3aa438f 100644
--- a/src/components/Form/index.js
+++ b/src/components/Form/index.js
@@ -53,7 +53,7 @@ class Form extends React.PureComponent {
     } = this.props;
     const { expr, syntax } = this.state;
 
-    return <div className={ style.form }>
+    return <div className={ style.form } data-requires-js>
       <form onSubmit={ this.handleSubmit }>
         <textarea
           name="expr"
diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap
index b53d451..432f7ea 100644
--- a/src/components/Header/__snapshots__/test.js.snap
+++ b/src/components/Header/__snapshots__/test.js.snap
@@ -39,7 +39,9 @@ exports[`Header rendering 1`] = `
         </WithMergedOptions(TransComponent)>
       </mockConstructor>
     </li>
-    <li>
+    <li
+      data-requires-js={true}
+    >
       <LoadNamespace(LocaleSwitcher) />
     </li>
   </ul>
@@ -85,7 +87,9 @@ exports[`Header rendering with no banner 1`] = `
         </WithMergedOptions(TransComponent)>
       </mockConstructor>
     </li>
-    <li>
+    <li
+      data-requires-js={true}
+    >
       <LoadNamespace(LocaleSwitcher) />
     </li>
   </ul>
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index fbb6858..9ac7529 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -31,7 +31,7 @@ export const Header = ({ banner }) => (
           <Trans>Privacy Policy</Trans>
         </Link>
       </li>
-      <li>
+      <li data-requires-js>
         <LocaleSwitcher />
       </li>
     </ul>
diff --git a/src/components/Layout/__snapshots__/test.js.snap b/src/components/Layout/__snapshots__/test.js.snap
index 6d7bfc8..fae7cad 100644
--- a/src/components/Layout/__snapshots__/test.js.snap
+++ b/src/components/Layout/__snapshots__/test.js.snap
@@ -2,6 +2,17 @@
 
 exports[`Layout rendering 1`] = `
 <SentryBoundary>
+  <noscript>
+    <style
+      type="text/css"
+    >
+      
+  [data-requires-js] {
+    display: none !important;
+  }
+
+    </style>
+  </noscript>
   <LoadNamespace(Header)
     banner="Test Banner"
   />
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 29fc54d..3cb6dc2 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -17,7 +17,16 @@ const query = graphql`
   }
 `;
 
+const noscriptStyle = `
+  [data-requires-js] {
+    display: none !important;
+  }
+`;
+
 export const Layout = ({ banner, buildId, children }) => <SentryBoundary>
+  <noscript>
+    <style type="text/css">{ noscriptStyle }</style>
+  </noscript>
   <Header banner={ banner } />
   <SentryBoundary>
     { children }