feat: add Header component

integrations/gatsby-theme-stories/src/components/Header.tsx

@@ -2,7 +2,11 @@
 import { FC, useContext } from 'react';
 import { jsx } from 'theme-ui';
 import { Flex } from '@theme-ui/components';
-import { ColorMode, SidebarContext } from '@component-controls/app-components';
+import {
+  ColorMode,
+  SidebarContext,
+  Header as AppHeader,
+} from '@component-controls/app-components';
 
 interface HeaderProps {
   title?: string;
@@ -11,7 +15,7 @@ export const Header: FC<HeaderProps> = ({ children }) => {
   const { SidebarToggle } = useContext(SidebarContext);
 
   return (
-    <header sx={{ px: 3 }}>
+    <AppHeader position="sticky">
       <Flex
         sx={{
           py: 3,
@@ -33,11 +37,9 @@ export const Header: FC<HeaderProps> = ({ children }) => {
             a: { color: `secondary`, ':hover': { color: `accent` } },
             flexFlow: `wrap`,
           }}
-        >
-          link
-        </Flex>
+        ></Flex>
         <ColorMode />
       </Flex>
-    </header>
+    </AppHeader>
   );
 };

ui/app-components/src/Header/Header.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header, HeaderProps } from '.';
+
+export default {
+  title: 'App components/Header',
+  component: Header,
+};
+
+export const overview = ({ position }: HeaderProps) => (
+  <Header position={position}>header</Header>
+);
+
+overview.story = {
+  controls: {
+    position: {
+      type: 'options',
+      options: ['fixed', 'absolute', 'sticky', 'static', 'relative'],
+    },
+  },
+};

ui/app-components/src/Header/Header.tsx

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, BoxProps, Theme } from 'theme-ui';
+
+export interface HeaderProps {
+  /** Position property for the header element */
+  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
+
+  /** z-index for the header */
+  zIndex?: number;
+}
+
+/**
+ * A page header component
+ */
+export const Header: FC<HeaderProps & BoxProps> = ({
+  children,
+  zIndex,
+  position,
+  ...rest
+}) => (
+  <Box
+    as="header"
+    sx={{
+      ...(position === 'fixed' ||
+      position === 'absolute' ||
+      position === 'sticky'
+        ? {
+            top: 0,
+            left: 'auto',
+            right: 0,
+            zIndex,
+          }
+        : undefined),
+      background: 'primary',
+      p: 2,
+      mb: 1,
+      justifyItems: 'between',
+      alignItems: 'center',
+      boxShadow: (t: Theme) => `0 1px 3px 1px ${t.colors?.shadow}`,
+    }}
+    {...rest}
+  >
+    {children}
+  </Box>
+);
+
+Header.defaultProps = {
+  position: 'relative',
+  zIndex: 10,
+};

ui/app-components/src/Header/index.ts

@@ -0,0 +1 @@
+export * from './Header';

ui/app-components/src/index.ts

@@ -1,4 +1,5 @@
 export * from './ColorMode';
+export * from './Header';
 export * from './Keyboard';
 export * from './Navmenu';
 export * from './Sidebar';