From 1508a1c494c36d42715768d9d44543815d7d92c3 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Sat, 6 Jun 2020 11:08:22 -0400
Subject: [PATCH] feat: skip links and app layout

---
 .../stories/src/stories/home-page.stories.mdx |  3 +-
 .../src/components/GatsbyLink.tsx             | 18 +----
 .../src/components/Layout.tsx                 | 25 ++-----
 .../src/components/Sidebar.tsx                | 12 ---
 ui/app-components/src/Sidebar/Sidebar.tsx     | 20 ++++-
 ui/app-components/src/SkipLinks/SkipLinks.tsx | 73 +++++++++++++++++++
 ui/app-components/src/SkipLinks/index.ts      |  1 +
 ui/app-components/src/index.ts                |  1 +
 ui/app/src/App/App.tsx                        | 53 ++++++++++++++
 ui/app/src/App/index.ts                       |  1 +
 .../app/src/Footer}/Footer.tsx                | 15 ++--
 ui/app/src/Footer/index.ts                    |  1 +
 ui/app/src/Page/Page.tsx                      | 15 ++--
 ui/app/src/SideContext/SideContext.tsx        |  5 +-
 ui/app/src/Sidebar/Sidebar.tsx                | 12 +--
 ui/app/src/index.ts                           |  2 +
 ui/blocks/src/PageContainer/PageContainer.tsx |  7 +-
 .../src/BlockContainer/BlockContainer.tsx     |  8 +-
 ui/components/src/BlockContainer/index.ts     |  1 +
 ui/components/src/BlockContainer/pageLink.ts  |  7 ++
 20 files changed, 198 insertions(+), 82 deletions(-)
 delete mode 100644 integrations/gatsby-theme-stories/src/components/Sidebar.tsx
 create mode 100644 ui/app-components/src/SkipLinks/SkipLinks.tsx
 create mode 100644 ui/app-components/src/SkipLinks/index.ts
 create mode 100644 ui/app/src/App/App.tsx
 create mode 100644 ui/app/src/App/index.ts
 rename {integrations/gatsby-theme-stories/src/components => ui/app/src/Footer}/Footer.tsx (58%)
 create mode 100644 ui/app/src/Footer/index.ts
 create mode 100644 ui/components/src/BlockContainer/pageLink.ts

diff --git a/examples/stories/src/stories/home-page.stories.mdx b/examples/stories/src/stories/home-page.stories.mdx
index 849279165..9150cb938 100644
--- a/examples/stories/src/stories/home-page.stories.mdx
+++ b/examples/stories/src/stories/home-page.stories.mdx
@@ -5,7 +5,7 @@ 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%'}}>
@@ -13,6 +13,7 @@ import { jsx, Flex, Heading, Text } from 'theme-ui';
     <Text>
       design -> develop -> test
     </Text>  
+    <Button>Getting started</Button>
   </Flex>  
 </Flex>
 
diff --git a/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx b/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx
index 38e824fe8..d1b4d4448 100644
--- a/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx
+++ b/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" />
 );
diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
index 146a8ddf7..eed234ebf 100644
--- a/integrations/gatsby-theme-stories/src/components/Layout.tsx
+++ b/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>
diff --git a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx
deleted file mode 100644
index ab21ab0ce..000000000
--- a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import { jsx } from 'theme-ui';
-import { Sidebar as AppSidebar } from '@component-controls/app';
-
-export interface SidebarProps {
-  docPath?: string;
-}
-
-export const Sidebar: FC<SidebarProps> = ({ docPath }) => {
-  return <AppSidebar docPath={docPath} />;
-};
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
index 0a646c073..106b263fb 100644
--- a/ui/app-components/src/Sidebar/Sidebar.tsx
+++ b/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)}
       >
diff --git a/ui/app-components/src/SkipLinks/SkipLinks.tsx b/ui/app-components/src/SkipLinks/SkipLinks.tsx
new file mode 100644
index 000000000..cc542398b
--- /dev/null
+++ b/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>
+);
diff --git a/ui/app-components/src/SkipLinks/index.ts b/ui/app-components/src/SkipLinks/index.ts
new file mode 100644
index 000000000..02ab199e1
--- /dev/null
+++ b/ui/app-components/src/SkipLinks/index.ts
@@ -0,0 +1 @@
+export * from './SkipLinks';
diff --git a/ui/app-components/src/index.ts b/ui/app-components/src/index.ts
index 8077e31b0..1e895c9e7 100644
--- a/ui/app-components/src/index.ts
+++ b/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';
diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx
new file mode 100644
index 000000000..13442babc
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/ui/app/src/App/index.ts b/ui/app/src/App/index.ts
new file mode 100644
index 000000000..ac7ba3b3a
--- /dev/null
+++ b/ui/app/src/App/index.ts
@@ -0,0 +1 @@
+export * from './App';
diff --git a/integrations/gatsby-theme-stories/src/components/Footer.tsx b/ui/app/src/Footer/Footer.tsx
similarity index 58%
rename from integrations/gatsby-theme-stories/src/components/Footer.tsx
rename to ui/app/src/Footer/Footer.tsx
index 7c6e83120..d2ca569bb 100644
--- a/integrations/gatsby-theme-stories/src/components/Footer.tsx
+++ b/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>
diff --git a/ui/app/src/Footer/index.ts b/ui/app/src/Footer/index.ts
new file mode 100644
index 000000000..ddcc5a9cd
--- /dev/null
+++ b/ui/app/src/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/ui/app/src/Page/Page.tsx b/ui/app/src/Page/Page.tsx
index a25368973..6144d7519 100644
--- a/ui/app/src/Page/Page.tsx
+++ b/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} />;
 };
diff --git a/ui/app/src/SideContext/SideContext.tsx b/ui/app/src/SideContext/SideContext.tsx
index 66469170e..4ef48dce9 100644
--- a/ui/app/src/SideContext/SideContext.tsx
+++ b/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}
diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
index 4640d84e8..949b838a2 100644
--- a/ui/app/src/Sidebar/Sidebar.tsx
+++ b/ui/app/src/Sidebar/Sidebar.tsx
@@ -19,10 +19,6 @@ export interface SidebarProps {
    * title element
    */
   title?: React.ReactNode;
-  /**
-   * current path
-   */
-  docPath?: string;
 }
 
 const createMenuItem = (
@@ -60,10 +56,7 @@ const createMenuItem = (
     newItem,
   );
 };
-export const SidebarBase: FC<SidebarProps> = ({
-  docPath,
-  title: propsTitle,
-}) => {
+export const SidebarBase: FC<SidebarProps> = ({ title: propsTitle }) => {
   const { doc } = useStoryContext({ id: '.' });
   if (doc && doc.fullPage) {
     return null;
@@ -96,6 +89,7 @@ export const SidebarBase: FC<SidebarProps> = ({
         borderRight: (t: Theme) => `1px solid ${t.colors?.shadow}`,
       }}
       width={300}
+      id="sidebar"
     >
       {responsive && (
         <Header shadow={false}>
@@ -114,7 +108,7 @@ export const SidebarBase: FC<SidebarProps> = ({
           />
         </Box>
         <Navmenu
-          activeItem={{ id: docPath }}
+          activeItem={{ id: doc?.title }}
           search={search}
           items={menuItems}
         />
diff --git a/ui/app/src/index.ts b/ui/app/src/index.ts
index f61495b35..ee0490163 100644
--- a/ui/app/src/index.ts
+++ b/ui/app/src/index.ts
@@ -1,3 +1,5 @@
+export * from './App';
+export * from './Footer';
 export * from './Header';
 export * from './Page';
 export * from './SEO';
diff --git a/ui/blocks/src/PageContainer/PageContainer.tsx b/ui/blocks/src/PageContainer/PageContainer.tsx
index 0649b0fcb..f26e9f8fe 100644
--- a/ui/blocks/src/PageContainer/PageContainer.tsx
+++ b/ui/blocks/src/PageContainer/PageContainer.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
 import { FC, useEffect, forwardRef } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx, Box, BoxProps } from 'theme-ui';
 import { MDXProvider, MDXProviderComponents } from '@mdx-js/react';
 
 import { markdownComponents } from '@component-controls/components';
@@ -34,9 +34,9 @@ export interface PageContainerProps {
  * If the page is an MDX page, will display the MDX components.
  * Otherwise, the page elements are passed as children
  */
-export const PageContainer: FC<PageContainerProps> = forwardRef(
+export const PageContainer: FC<PageContainerProps & BoxProps> = forwardRef(
   (
-    { children, components = {}, maxWidth, padding = 4 },
+    { children, components = {}, maxWidth, padding = 4, ...rest },
     ref: React.Ref<HTMLDivElement>,
   ) => {
     useEffect(() => {
@@ -75,6 +75,7 @@ export const PageContainer: FC<PageContainerProps> = forwardRef(
           fontFamily: 'body',
           width: '100%',
         }}
+        {...rest}
       >
         <Box
           sx={{ maxWidth, width: '100%', p: padding, position: 'relative' }}
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
index f11b0713c..a0c2c9aa7 100644
--- a/ui/components/src/BlockContainer/BlockContainer.tsx
+++ b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -9,6 +9,7 @@ import Octicon, {
 import { Markdown } from '../Markdown';
 import { Subtitle } from '../Subtitle';
 import { Collapsible } from '../Collapsible';
+import { pageLink } from './pageLink';
 
 export interface BlockContainerProps {
   /**
@@ -66,11 +67,6 @@ export const BlockContainer: FC<BlockContainerProps> = ({
       {title}
     </Subtitle>
   );
-  //workaround for storybook iframe url
-  const url =
-    (typeof window !== 'undefined' && window.location !== window.parent.location
-      ? document.referrer
-      : typeof document !== 'undefined' && document.location.href) || '';
   return (
     <Box
       sx={{
@@ -106,7 +102,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({
                   visibility: 'visible',
                 },
               }}
-              href={`${url.split('#')[0]}#${blockId}`}
+              href={pageLink(blockId)}
               data-title={title}
             >
               <Octicon icon={LinkIcon} />
diff --git a/ui/components/src/BlockContainer/index.ts b/ui/components/src/BlockContainer/index.ts
index 6e13be755..0a1be860b 100644
--- a/ui/components/src/BlockContainer/index.ts
+++ b/ui/components/src/BlockContainer/index.ts
@@ -1 +1,2 @@
 export * from './BlockContainer';
+export * from './pageLink';
diff --git a/ui/components/src/BlockContainer/pageLink.ts b/ui/components/src/BlockContainer/pageLink.ts
new file mode 100644
index 000000000..bc92b09bc
--- /dev/null
+++ b/ui/components/src/BlockContainer/pageLink.ts
@@ -0,0 +1,7 @@
+export const pageLink = (id: string) => {
+  const url =
+    (typeof window !== 'undefined' && window.location !== window.parent.location
+      ? document.referrer
+      : typeof document !== 'undefined' && document.location.href) || '';
+  return `${url.split('#')[0]}#${id}`;
+};