From 8ccbb3489f2980eae9f8c669831890d72b4ed539 Mon Sep 17 00:00:00 2001
From: Erez Rokah <erezrokah@users.noreply.github.com>
Date: Thu, 4 Jun 2020 20:51:07 +0300
Subject: [PATCH] Black lives matter (#3855)

---
 website/data/notifications.yml          |   6 +
 website/src/components/header.js        | 139 +++++++++++++++---------
 website/src/components/notification.js  |   3 +-
 website/src/components/notifications.js |  36 ++----
 4 files changed, 100 insertions(+), 84 deletions(-)

diff --git a/website/data/notifications.yml b/website/data/notifications.yml
index 33c73322..41db53d7 100644
--- a/website/data/notifications.yml
+++ b/website/data/notifications.yml
@@ -38,3 +38,9 @@ notifications:
     published: false
     title: JAMStack_conf 2018
     url: 'https://jamstackconf.com/'
+  - loud: false
+    message: >-
+      Netlify stands in solidarity with the Black community. Make a donation. Netlify will match it. #BlackLivesMatter
+    published: true
+    title: Donate now
+    url: 'http://www.netlify.com/donation-matching/'
diff --git a/website/src/components/header.js b/website/src/components/header.js
index 6776c410..3c988a49 100644
--- a/website/src/components/header.js
+++ b/website/src/components/header.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'gatsby';
+import { Link, graphql, StaticQuery } from 'gatsby';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
@@ -27,13 +27,18 @@ const StyledHeader = styled.header`
     z-index: ${theme.zIndexes.header};
 
     ${p =>
-      p.hasHeroBelow &&
-      !p.scrolled &&
+      !p.collapsed &&
       css`
         background: #2a2c24;
         padding-top: ${theme.space[5]};
         padding-bottom: ${theme.space[5]};
       `};
+
+    ${p =>
+      p.hasNotifications &&
+      css`
+        padding-top: 0;
+      `};
   }
 `;
 
@@ -125,6 +130,21 @@ const NavLink = styled(Link)`
   font-weight: 600;
 `;
 
+const NOTIFS_QUERY = graphql`
+  query notifs {
+    file(relativePath: { regex: "/notifications/" }) {
+      childDataYaml {
+        notifications {
+          published
+          loud
+          message
+          url
+        }
+      }
+    }
+  }
+`;
+
 const Header = ({ hasHeroBelow }) => {
   const [scrolled, setScrolled] = useState(false);
   const [isNavOpen, setNavOpen] = useState(false);
@@ -158,57 +178,68 @@ const Header = ({ hasHeroBelow }) => {
   };
 
   return (
-    <StyledHeader scrolled={scrolled} id="header" hasHeroBelow={hasHeroBelow}>
-      <Notifications />
-      <HeaderContainer>
-        <Logo>
-          <Link to="/">
-            <img src={logo} alt="Netlify CMS logo" />
-          </Link>
-        </Logo>
-        <MenuActions>
-          <SearchBtn onClick={handleSearchBtnClick}>
-            {isSearchOpen ? <span>&times;</span> : <img src={searchIcon} alt="search" />}
-          </SearchBtn>
-          <MenuBtn onClick={handleMenuBtnClick}>
-            {isNavOpen ? <span>&times;</span> : <span>&#9776;</span>}
-          </MenuBtn>
-        </MenuActions>
-        <SearchBox open={isSearchOpen}>
-          <DocSearch />
-        </SearchBox>
-        <Menu open={isNavOpen}>
-          <MenuList>
-            <MenuItem
-              css={css`
-                margin-top: 8px;
-              `}
-            >
-              <GitHubButton
-                href="https://github.com/netlify/netlify-cms"
-                data-icon="octicon-star"
-                data-show-count="true"
-                aria-label="Star netlify/netlify-cms on GitHub"
-              >
-                Star
-              </GitHubButton>
-            </MenuItem>
-            <MenuItem>
-              <NavLink to="/docs/intro/">Docs</NavLink>
-            </MenuItem>
-            <MenuItem>
-              <NavLink to="/docs/contributor-guide/">Contributing</NavLink>
-            </MenuItem>
-            <MenuItem>
-              <NavLink to="/community/">Community</NavLink>
-            </MenuItem>
-            <MenuItem>
-              <NavLink to="/blog/">Blog</NavLink>
-            </MenuItem>
-          </MenuList>
-        </Menu>
-      </HeaderContainer>
-    </StyledHeader>
+    <StaticQuery query={NOTIFS_QUERY}>
+      {data => {
+        const notifications = data.file.childDataYaml.notifications.filter(
+          notif => notif.published,
+        );
+        const collapsed = !hasHeroBelow || scrolled;
+        const hasNotifications = notifications.length > 0;
+        return (
+          <StyledHeader collapsed={collapsed} id="header" hasNotifications={hasNotifications}>
+            <Notifications notifications={notifications} />
+            <HeaderContainer>
+              <Logo>
+                <Link to="/">
+                  <img src={logo} alt="Netlify CMS logo" />
+                </Link>
+              </Logo>
+              <MenuActions>
+                <SearchBtn onClick={handleSearchBtnClick}>
+                  {isSearchOpen ? <span>&times;</span> : <img src={searchIcon} alt="search" />}
+                </SearchBtn>
+                <MenuBtn onClick={handleMenuBtnClick}>
+                  {isNavOpen ? <span>&times;</span> : <span>&#9776;</span>}
+                </MenuBtn>
+              </MenuActions>
+              <SearchBox open={isSearchOpen}>
+                <DocSearch />
+              </SearchBox>
+              <Menu open={isNavOpen}>
+                <MenuList>
+                  <MenuItem
+                    css={css`
+                      margin-top: 8px;
+                    `}
+                  >
+                    <GitHubButton
+                      href="https://github.com/netlify/netlify-cms"
+                      data-icon="octicon-star"
+                      data-show-count="true"
+                      aria-label="Star netlify/netlify-cms on GitHub"
+                    >
+                      Star
+                    </GitHubButton>
+                  </MenuItem>
+                  <MenuItem>
+                    <NavLink to="/docs/intro/">Docs</NavLink>
+                  </MenuItem>
+                  <MenuItem>
+                    <NavLink to="/docs/contributor-guide/">Contributing</NavLink>
+                  </MenuItem>
+                  <MenuItem>
+                    <NavLink to="/community/">Community</NavLink>
+                  </MenuItem>
+                  <MenuItem>
+                    <NavLink to="/blog/">Blog</NavLink>
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </HeaderContainer>
+          </StyledHeader>
+        );
+      }}
+    </StaticQuery>
   );
 };
 
diff --git a/website/src/components/notification.js b/website/src/components/notification.js
index d2dc414c..70fe4d4f 100644
--- a/website/src/components/notification.js
+++ b/website/src/components/notification.js
@@ -9,6 +9,7 @@ const Notif = styled.a`
   color: white;
   display: block;
   padding: ${theme.space[2]} ${theme.space[3]};
+  margin-bottom: ${theme.space[3]};
   text-align: center;
 
   /* prettier-ignore */
@@ -38,7 +39,7 @@ const Notif = styled.a`
 `;
 
 const Notification = ({ url, loud, children }) => (
-  <Notif href={url} loud={loud}>
+  <Notif href={url} loud={loud} target="_blank" rel="noopener noreferrer">
     {children}
   </Notif>
 );
diff --git a/website/src/components/notifications.js b/website/src/components/notifications.js
index d9ce8456..e5ddb321 100644
--- a/website/src/components/notifications.js
+++ b/website/src/components/notifications.js
@@ -1,34 +1,12 @@
 import React from 'react';
-import { graphql, StaticQuery } from 'gatsby';
-
 import Notification from './notification';
 
-const NOTIFS_QUERY = graphql`
-  query notifs {
-    file(relativePath: { regex: "/notifications/" }) {
-      childDataYaml {
-        notifications {
-          published
-          loud
-          message
-          url
-        }
-      }
-    }
-  }
-`;
-
-const Notifications = () => (
-  <StaticQuery query={NOTIFS_QUERY}>
-    {data => {
-      const notifs = data.file.childDataYaml.notifications.filter(notif => notif.published);
-      return notifs.map((node, i) => (
-        <Notification key={i} url={node.url} loud={node.loud}>
-          {node.message}
-        </Notification>
-      ));
-    }}
-  </StaticQuery>
-);
+const Notifications = ({ notifications }) => {
+  return notifications.map((node, i) => (
+    <Notification key={i} url={node.url} loud={node.loud}>
+      {node.message}
+    </Notification>
+  ));
+};
 
 export default Notifications;