feat: add toolbar links

ccontrols · Jun 25, 2020 · 0e19144 · 0e19144
1 parent b5172bd
commit 0e19144
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/core/core/package.json b/core/core/package.json
@@ -30,6 +30,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@component-controls/components": "^1.4.0",
     "deepmerge": "^4.2.2",
     "escape-html": "^1.0.3",
     "faker": "^4.1.0",

diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -1,4 +1,5 @@
 import { Configuration as WebpackConfiguration } from 'webpack';
+import { ActionItems } from '@component-controls/components';
 import { ComponentType, ReactNode } from 'react';
 import { StoryRenderFn } from './utility';
 
@@ -169,6 +170,21 @@ export interface RunOnlyConfiguration {
    * story sorting function
    */
   storySort?: (a: string, b: string) => number;
+
+  /**
+   * custom toolbar items
+   */
+  toolbar?: {
+    /**
+     * left side toolbar items
+     */
+    left?: ActionItems;
+
+    /**
+     * right side toolbar items
+     */
+    right?: ActionItems;
+  };
 }
 
 export type RunConfiguration = RunOnlyConfiguration &

diff --git a/examples/gatsby/.config/runtime.js b/examples/gatsby/.config/runtime.js
@@ -1,4 +1,9 @@
+/** @jsx jsx */
+import { jsx, Box, Text } from 'theme-ui';
+import { Link } from "@component-controls/components";
 import { Container } from "@component-controls/app";
+import { OctofaceIcon } from '@primer/octicons-react';
+
 const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
 
 module.exports = {
@@ -32,4 +37,35 @@ module.exports = {
     const bIndex = categories.findIndex(c => c === bDoc);
     return aIndex - bIndex;
   },
+  toolbar: {
+    right: [
+      {
+        node: (
+          <Link href="https://twitter.com/atanasster">
+            <Box sx={{ mr: 1, display: 'flex', flexDirection: 'row', alignItems: 'center'}} >
+              <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentColor" sx={{ pt: '1px'}}>
+                <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z">
+                </path>
+              </svg>
+              <Text sx={{ ml: '2px'}}>
+                twitter
+              </Text>
+            </Box>
+          </Link>
+        ),
+      },
+      {
+        node: (
+          <Link href="https://github.com/ccontrols/component-controls">
+            <Box sx={{ mr: 1, display: 'flex', flexDirection: 'row', alignItems: 'center'}} >
+              <OctofaceIcon />
+              <Text sx={{ ml: '2px'}}>
+                github
+              </Text>
+            </Box>
+          </Link>
+        ),
+      },
+    ]
+  }
 }
diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx
@@ -21,6 +21,7 @@ export interface AppProps {
 export const App: FC<AppProps> = ({ title, children }) => {
   const { storeProvider, docId } = useContext(BlockContext);
   const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
+  const { toolbar } = storeProvider.config || {};
   const items: SkiLinksItemProps[] = [
     {
       target: 'content',
@@ -43,7 +44,7 @@ export const App: FC<AppProps> = ({ title, children }) => {
       <SEO title={title} />
       <SkipLinks items={items} />
       <Box variant="app">
-        <Header />
+        <Header toolbar={toolbar} />
 
         {children}
         <Footer />