feat: skip links and app layout

examples/stories/src/stories/home-page.stories.mdx

@@ -5,14 +5,15 @@ fullPage: true
 menu: false
 ---
 
-import { jsx, Flex, Heading, Text } from 'theme-ui';
+import { jsx, Flex, Heading, Text, Button } from 'theme-ui';
 
 <Flex sx={{ minHeight: '300px', width: '100%', alignItems: 'center', backgroundColor: 'primary', color: 'white' }}>
   <Flex sx={{ flexDirection: 'column', alignItems: 'center', width: '100%'}}>
     <Heading as='h1'>component-controls</Heading>
     <Text>
       design -> develop -> test
     </Text>  
+    <Button>Getting started</Button>
   </Flex>  
 </Flex>
 

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, LinkProps, Theme } from 'theme-ui';
+import { jsx, LinkProps } from 'theme-ui';
 import { Link } from 'gatsby';
 
 export const GatsbyLink: FC<LinkProps & { to?: string }> = ({
@@ -9,19 +9,5 @@ export const GatsbyLink: FC<LinkProps & { to?: string }> = ({
   ...props
 }) => (
   //@ts-ignore
-  <Link
-    to={href || to || ''}
-    {...props}
-    activeClassName="active"
-    sx={{
-      color: 'inherit',
-      '&.active': {
-        borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`,
-        color: 'white',
-      },
-      ':hover': {
-        backgroundColor: 'shadow',
-      },
-    }}
-  />
+  <Link to={href || to || ''} {...props} activeClassName="active" />
 );

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

@@ -1,19 +1,17 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Flex } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { Global } from '@emotion/core';
 import { ThemeProvider } from '@component-controls/components';
-import { Page, SEO, Header } from '@component-controls/app';
+import { App } from '@component-controls/app';
 import {
   SidebarContextProvider,
   LinkContextProvider,
 } from '@component-controls/app-components';
 import { BlockContextProvider } from '@component-controls/blocks';
 import { Store } from '@component-controls/store';
-import { Sidebar } from './Sidebar';
 import { GatsbyLink } from './GatsbyLink';
 import { PagesConfig } from './types';
-import { Footer } from './Footer';
 
 interface LayoutProps {
   title?: string;
@@ -41,23 +39,10 @@ export const Layout: FC<LayoutProps> = ({
         })}
       />
       <BlockContextProvider storyId={story} docId={docTitle} store={storyStore}>
-        <SEO title={title} />
         <SidebarContextProvider>
-          <Flex
-            sx={{
-              minHeight: '100vh',
-              flexDirection: 'column',
-            }}
-          >
-            <LinkContextProvider linkClass={GatsbyLink}>
-              <Header title={title}></Header>
-              <Flex sx={{ flexDirection: 'row', flex: 1 }}>
-                <Sidebar docPath={docTitle} />
-                <Page pagesFn={pagesFn} />
-              </Flex>
-              <Footer />
-            </LinkContextProvider>
-          </Flex>
+          <LinkContextProvider linkClass={GatsbyLink}>
+            <App title={title} pagesFn={pagesFn} />
+          </LinkContextProvider>
         </SidebarContextProvider>
       </BlockContextProvider>
     </ThemeProvider>

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

@@ -1,6 +1,14 @@
 /** @jsx jsx */
 import React, { FC, useContext } from 'react';
-import { jsx, Box, Flex, BoxProps, Heading, SxStyleProp } from 'theme-ui';
+import {
+  jsx,
+  Box,
+  Flex,
+  BoxProps,
+  Heading,
+  SxStyleProp,
+  Theme,
+} from 'theme-ui';
 import { SidebarContext } from './SidebarContext';
 
 export interface SidebarProps {
@@ -63,12 +71,20 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
         bottom: 0,
       };
   return collapsed ? null : (
-    <Box sx={style} {...rest}>
+    <Box tabIndex={0} sx={style} {...rest}>
       <div
         sx={{
           position: !responsive ? 'fixed' : undefined,
           height: '100%',
           overflowY: 'auto',
+          a: {
+            '&.active': {
+              borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`,
+            },
+            ':hover': {
+              backgroundColor: 'shadow',
+            },
+          },
         }}
         onClick={() => responsive && setCollapsed(true)}
       >

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

@@ -0,0 +1,73 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Flex, LinkProps, SxStyleProp, Theme } from 'theme-ui';
+
+const skipNavStyles: SxStyleProp = {
+  border: (t: Theme) => `1px solid ${t.colors?.primary}`,
+  clip: `react(0 0 0 0)`,
+  width: '0.01em',
+  height: '0.01em',
+  whiteSpace: 'nowrap',
+  padding: 0,
+  overflow: `hidden`,
+  position: `absolute`,
+  flexDirection: 'column',
+  '&:focus-within': {
+    padding: 3,
+    position: `fixed`,
+    top: `50px`,
+    left: `15px`,
+    backgroundColor: `background`,
+    zIndex: 15,
+    width: `auto`,
+    height: `auto`,
+    clip: `auto`,
+    textDecoration: `none`,
+  },
+};
+export interface SkiLinksItemOwnProps {
+  /**
+   * target's id property, without the # char
+   */
+  target: string;
+  /**
+   * text message to be displayed
+   */
+  text: string;
+}
+
+export type SkiLinksItemProps = SkiLinksItemOwnProps & LinkProps;
+
+/**
+ * single skip link anchor item
+ */
+export const SkiLinksItem: FC<SkiLinksItemProps & LinkProps> = ({
+  target,
+  text,
+  ...rest
+}) => (
+  <a {...rest} href={`#${target}`} data-skip-link="true">
+    {text}
+  </a>
+);
+
+export interface SkipLinksProps {
+  items: SkiLinksItemProps[];
+}
+
+/**
+ * list of anchor elements to skip to
+ *
+ */
+
+export const SkipLinks: FC<SkipLinksProps> = ({ items }) => (
+  <Flex
+    sx={{ ...skipNavStyles }}
+    as="section"
+    aria-label="skip tab order to linked items"
+  >
+    {items.map((item, idx) => (
+      <SkiLinksItem key={`skip_link_${idx}`} {...item} />
+    ))}
+  </Flex>
+);

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

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

ui/app-components/src/index.ts

@@ -4,3 +4,4 @@ export * from './Keyboard';
 export * from './Link';
 export * from './Navmenu';
 export * from './Sidebar';
+export * from './SkipLinks';

ui/app/src/App/App.tsx

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import { FC, Fragment } from 'react';
+import { jsx, Flex } from 'theme-ui';
+import {
+  SkipLinks,
+  SkiLinksItemProps,
+} from '@component-controls/app-components';
+import { useStoryContext } from '@component-controls/blocks';
+import { SEO } from '../SEO';
+import { Header } from '../Header';
+import { Page, PagesConfig } from '../Page';
+import { Footer } from '../Footer';
+
+export interface AppProps {
+  title?: string;
+  pagesFn: PagesConfig;
+}
+export const App: FC<AppProps> = ({ title, pagesFn }) => {
+  const { doc } = useStoryContext({ id: '.' });
+  const items: SkiLinksItemProps[] = [
+    {
+      target: 'content',
+      text: 'skip to main content',
+    },
+  ];
+  if (!doc || !doc.fullPage) {
+    items.push({
+      target: 'sidebar',
+      text: 'skip to navigation sidebar',
+    });
+    items.push({
+      target: 'contextbar',
+      text: 'skip to context sidebar',
+    });
+  }
+
+  return (
+    <Fragment>
+      <SEO title={title} />
+      <SkipLinks items={items} />
+      <Flex
+        sx={{
+          minHeight: '100vh',
+          flexDirection: 'column',
+        }}
+      >
+        <Header title={title}></Header>
+        <Page pagesFn={pagesFn} />
+        <Footer />
+      </Flex>
+    </Fragment>
+  );
+};

ui/app/src/App/index.ts

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

integrations/gatsby-theme-stories/src/components/Footer.tsx → ui/app/src/Footer/Footer.tsx

@@ -1,7 +1,13 @@
 /** @jsx jsx */
+import { FC, useContext } from 'react';
 import { Text, Flex, Link, jsx } from 'theme-ui';
+import { BlockContext } from '@component-controls/blocks';
+
+export const Footer: FC = () => {
+  const { storeProvider } = useContext(BlockContext);
+  const config = storeProvider.config;
+  const { author, siteUrl, siteDescription } = config?.options || {};
 
-export const Footer = () => {
   return (
     <Flex
       as="footer"
@@ -20,11 +26,8 @@ export const Footer = () => {
           a: { color: `text` },
         }}
       >
-        <Link
-          aria-label="visit component-controls repository"
-          href="https://github.com/ccontrols/component-controls"
-        >
-          component controls
+        <Link aria-label={siteDescription} href={siteUrl}>
+          {author}
         </Link>
       </Flex>
     </Flex>

ui/app/src/Footer/index.ts

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

ui/app/src/Page/Page.tsx

@@ -1,10 +1,12 @@
 /** @jsx jsx */
-import { FC, ReactNode, Fragment, useRef } from 'react';
-import { jsx, Container } from 'theme-ui';
+import { FC, ReactNode, useRef } from 'react';
+import { jsx, Container, Flex } from 'theme-ui';
 import * as qs from 'qs';
 import { Tabs, Tab, TabList, TabPanel } from '@component-controls/components';
 import { PageContainer, useStoryContext } from '@component-controls/blocks';
+
 import { SideContext } from '../SideContext';
+import { Sidebar } from '../Sidebar';
 export interface PageConfig {
   key: string;
   title: string;
@@ -28,8 +30,9 @@ export const BasePage: FC<PageProps> = ({ pagesFn }) => {
     0,
   );
   return (
-    <Fragment>
-      <Container sx={{ flex: 1 }}>
+    <Flex sx={{ flexDirection: 'row', flex: 1 }}>
+      <Sidebar />
+      <Container sx={{ flex: 1 }} id="content">
         <Tabs
           fontSize={16}
           selectedIndex={tabIndex}
@@ -64,14 +67,14 @@ export const BasePage: FC<PageProps> = ({ pagesFn }) => {
         </Tabs>
       </Container>
       <SideContext pageRef={pageRef} />
-    </Fragment>
+    </Flex>
   );
 };
 
 export const Page: FC<PageProps> = props => {
   const { doc } = useStoryContext({ id: '.' });
   if (doc && doc.fullPage && doc.MDXPage) {
-    return <PageContainer maxWidth="100%" padding={0} />;
+    return <PageContainer maxWidth="100%" padding={0} id="content" />;
   }
   return <BasePage {...props} />;
 };

ui/app/src/SideContext/SideContext.tsx

@@ -61,7 +61,7 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
       <SidebarContext.Consumer>
         {({ SidebarClose, SidebarToggle, collapsed, responsive }) => (
           <div>
-            <AppSidebar width={300} minWidth={250}>
+            <AppSidebar width={300} minWidth={250} id="contextbar">
               {responsive && (
                 <Header shadow={false}>
                   <SidebarClose />
@@ -76,6 +76,9 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
                 <Flex as="nav" sx={{ flexDirection: 'column' }}>
                   {items?.map((el, index) => (
                     <NavLink
+                      sx={{
+                        pl: 2,
+                      }}
                       key={`context_link_${index}`}
                       href={el.getAttribute('href') || undefined}
                       className={el === activeItem ? 'active' : undefined}