From daaae168f39436d194cd659d46866e283b8055dc Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Fri, 5 Jun 2020 15:24:39 -0400
Subject: [PATCH] feat: footer

---
 .../src/components/Footer.tsx                 | 32 +++++++++++++++++++
 .../src/components/Layout.tsx                 | 29 +++++++++++------
 ui/app-components/src/Header/Header.tsx       |  1 +
 3 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 integrations/gatsby-theme-stories/src/components/Footer.tsx

diff --git a/integrations/gatsby-theme-stories/src/components/Footer.tsx b/integrations/gatsby-theme-stories/src/components/Footer.tsx
new file mode 100644
index 000000000..7c6e83120
--- /dev/null
+++ b/integrations/gatsby-theme-stories/src/components/Footer.tsx
@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { Text, Flex, Link, jsx } from 'theme-ui';
+
+export const Footer = () => {
+  return (
+    <Flex
+      as="footer"
+      variant="footer"
+      sx={{ flexDirection: 'column', alignItems: 'center' }}
+    >
+      <Text>
+        Copyright &copy; {new Date().getFullYear()}. All rights reserved.
+      </Text>
+      <Flex
+        sx={{
+          alignItems: `center`,
+          p: 1,
+          color: `text`,
+          fontWeight: `semibold`,
+          a: { color: `text` },
+        }}
+      >
+        <Link
+          aria-label="visit component-controls repository"
+          href="https://github.com/ccontrols/component-controls"
+        >
+          component controls
+        </Link>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
index 30153436d..90264b02d 100644
--- a/integrations/gatsby-theme-stories/src/components/Layout.tsx
+++ b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -11,6 +11,7 @@ import { SEO } from './SEO';
 import { Sidebar } from './Sidebar';
 import { Header } from './Header';
 import { PagesConfig } from './types';
+import { Footer } from './Footer';
 
 interface LayoutProps {
   title?: string;
@@ -39,16 +40,24 @@ export const Layout: FC<LayoutProps> = ({
       />
       <SEO title={title} />
       <SidebarContextProvider>
-        <Header title={title}></Header>
-        <Flex sx={{ flexDirection: 'row' }}>
-          <BlockContextProvider
-            storyId={story}
-            docId={docTitle}
-            store={storyStore}
-          >
-            <Sidebar docPath={docTitle} />
-            <Page pagesFn={pagesFn} />
-          </BlockContextProvider>
+        <Flex
+          sx={{
+            minHeight: '100vh',
+            flexDirection: 'column',
+          }}
+        >
+          <Header title={title}></Header>
+          <Flex sx={{ flexDirection: 'row', flex: 1 }}>
+            <BlockContextProvider
+              storyId={story}
+              docId={docTitle}
+              store={storyStore}
+            >
+              <Sidebar docPath={docTitle} />
+              <Page pagesFn={pagesFn} />
+            </BlockContextProvider>
+          </Flex>
+          <Footer />
         </Flex>
       </SidebarContextProvider>
     </ThemeProvider>
diff --git a/ui/app-components/src/Header/Header.tsx b/ui/app-components/src/Header/Header.tsx
index 84afac62e..575e2af1b 100644
--- a/ui/app-components/src/Header/Header.tsx
+++ b/ui/app-components/src/Header/Header.tsx
@@ -27,6 +27,7 @@ export const Header: FC<HeaderProps & BoxProps> = ({
 }) => (
   <Flex
     as="header"
+    variant="header"
     sx={{
       ...(position === 'fixed' ||
       position === 'absolute' ||