Hiding content that requires JS when JS is disabled

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]}

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"

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>

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>

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"
   />

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 }