feat: footer

ccontrols · Jun 5, 2020 · daaae16 · daaae16
1 parent 84ea2df
commit daaae16
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 10 deletions.
diff --git a/integrations/gatsby-theme-stories/src/components/Footer.tsx 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
@@ -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
@@ -27,6 +27,7 @@ export const Header: FC<HeaderProps & BoxProps> = ({
 }) => (
   <Flex
     as="header"
+    variant="header"
     sx={{
       ...(position === 'fixed' ||
       position === 'absolute' ||