Adding Simple URL-based feature flags (#117)

* Fixes #66: As a developer, I want to limit the audience
that sees new features, so that we can control
the message and positioning of our tool.
Implements simple feature flagging via URL parameters.
Provide "?flags=x,y,z" to enable flags x, y, and z.
* Fixing type to use Location instead of URL
* Updating README with info on how to use feature flags

client/src/components/J40Header.tsx

@@ -4,13 +4,21 @@ import {GovBanner,
   Title,
   PrimaryNav,
   SiteAlert} from '@trussworks/react-uswds';
-import {useIntl} from 'gatsby-plugin-intl';
+import {useIntl, Link} from 'gatsby-plugin-intl';
 import {Helmet} from 'react-helmet';
-const headerLinks = [
-  <></>,
-];
+import {useFlags} from '../contexts/FlagContext';
+
+const headerLinks = (flags: string[] | undefined) => {
+  const timelineLink = <Link key="/timeline" to="/timeline"> Timeline </Link>;
+  const links = [];
+  if (flags && flags.includes('timeline')) {
+    links.push(timelineLink);
+  }
+  return links;
+};
 
 const J40Header = () => {
+  const flags = useFlags();
   const intl = useIntl();
   const title = intl.formatMessage({
     id: '71L0pp',
@@ -39,7 +47,7 @@ const J40Header = () => {
           <div className="usa-navbar">
             <Title className={'j40-title'}>{title}</Title>
           </div>
-          <PrimaryNav items={headerLinks}/>
+          <PrimaryNav items={headerLinks(flags)} />
         </div>
       </Header>
     </>

client/src/components/layout.tsx

@@ -2,17 +2,22 @@ import React, {ReactNode} from 'react';
 import * as styles from './layout.module.scss';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
+import {URLFlagProvider} from '../contexts/FlagContext';
+
 interface ILayoutProps {
-  children: ReactNode
+  children: ReactNode,
+  location: Location
 }
 
-const Layout = ({children}: ILayoutProps) => {
+const Layout = ({children, location}: ILayoutProps) => {
   return (
-    <div className={styles.site}>
-      <J40Header />
-      <div className={styles.siteContent}>{children}</div>
-      <J40Footer />
-    </div>
+    <URLFlagProvider location={location}>
+      <div className={styles.site}>
+        <J40Header />
+        <div className={styles.siteContent}>{children}</div>
+        <J40Footer />
+      </div>
+    </URLFlagProvider>
   );
 };