fix: add ukraine banner (mswjs#194)

src/components/Banner.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { Box } from 'atomic-layout'
+import { Grid } from './Grid'
+
+const BannerContainer = styled.div`
+  background-color: var(--color-black);
+  color: #fff;
+  padding: 0.75rem 0;
+  font-weight: 500;
+
+  a {
+    color: var(--color-primary);
+    font-weight: bold;
+  }
+`
+
+export function Banner(): JSX.Element {
+  return (
+    <BannerContainer>
+      <Grid>
+        <Box
+          flex
+          alignItems="center"
+          justifyContent="center"
+          flexDirectionSmDown="column"
+        >
+          <Box as="span" marginRight="0.5ch">
+            Support Ukraine 🇺🇦
+          </Box>{' '}
+          <a
+            href="https://bank.gov.ua/en/about/support-the-armed-forces"
+            target="_blank"
+          >
+            Support Ukrainian Military to Win The War.
+          </a>
+        </Box>
+      </Grid>
+    </BannerContainer>
+  )
+}

src/components/layout.tsx

@@ -3,10 +3,12 @@ import React from 'react'
 import { BaseLayout } from './BaseLayout'
 import Header from './header'
 import { Footer } from './Footer'
+import { Banner } from './Banner'
 
 const Layout: React.FC = ({ children }) => {
   return (
     <BaseLayout>
+      <Banner />
       <Header />
       <main>{children}</main>
       <Footer />

src/templates/docs/DocsLayout.tsx

@@ -10,6 +10,7 @@ import { TableOfContents } from './components/TableOfContents'
 import { DocsPageFooter } from './components/DocsPageFooter'
 import { BaseLayout } from '../../components/BaseLayout'
 import { Footer } from '../../components/Footer'
+import { Banner } from '../../components/Banner'
 
 interface Props {
   page?: any
@@ -78,6 +79,7 @@ const DocsLayout: React.FC<Props> = ({
 
   return (
     <BaseLayout>
+      <Banner />
       <Header withMenu={true} onMenuClick={handleBurgerClick} />
       <Grid>
         <Composition