feat: footer left and right customization

ccontrols · Aug 5, 2020 · 66e08b5 · 66e08b5
1 parent eea21a6
commit 66e08b5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -201,6 +201,11 @@ export interface RunOnlyConfiguration {
    */
   toolbar?: ToolbarConfig;
 
+  /**
+   * custom footer items
+   */
+  footer?: ToolbarConfig;
+
   /**
    * custom props to components
    * ex:

diff --git a/ui/app/src/Footer/Footer.tsx b/ui/app/src/Footer/Footer.tsx
@@ -1,7 +1,8 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { Text, Flex, Link, jsx } from 'theme-ui';
 import { useConfig } from '@component-controls/store';
+import { ActionBar, ActionItems } from '@component-controls/components';
 
 /**
  * application footer component
@@ -13,18 +14,37 @@ export const Footer: FC = () => {
     siteUrl,
     siteTitle,
     siteCopyright = `Copyright \u00A9 ${new Date().getFullYear()}`,
+    footer,
   } = config || {};
-  if (siteCopyright || author) {
-    return (
-      <Flex as="footer" variant="appfooter.container">
-        <Text variant="appfooter.copyright">
-          {`${siteCopyright}${author ? `by ${author}` : ''}`}
-        </Text>
-        <Flex variant="appfooter.inner">
+  const leftActions: ActionItems = useMemo(() => {
+    const actions: ActionItems = [];
+    if (siteCopyright || author) {
+      actions.push({
+        node: <Text>{`${siteCopyright}${author ? ` by ${author}` : ''}`}</Text>,
+      });
+    }
+    return footer.left ? [...actions, ...footer.left] : actions;
+  }, [footer.left, siteCopyright, author]);
+
+  const rightActions: ActionItems = useMemo(() => {
+    const actions: ActionItems = [];
+    if (siteTitle) {
+      actions.push({
+        node: (
           <Link aria-label="visit project home page" href={siteUrl}>
             {siteTitle}
           </Link>
-        </Flex>
+        ),
+      });
+    }
+    return footer.right ? [...footer.right, ...actions] : actions;
+  }, [footer.right, siteTitle, siteUrl]);
+
+  if (leftActions.length || rightActions.length) {
+    return (
+      <Flex as="footer" variant="appfooter.container">
+        <ActionBar themeKey="footer" actions={leftActions} />
+        <ActionBar themeKey="footer" actions={rightActions} />
       </Flex>
     );
   }

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -13,7 +13,7 @@ export interface ActionBarProps {
   /**
    * two possible layouts from the theme
    */
-  themeKey?: 'actionbar' | 'toolbar';
+  themeKey?: 'actionbar' | 'toolbar' | 'footer';
 }
 
 /**

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -906,12 +906,6 @@ export const theme: ControlsTheme = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-    },
-    copyright: {},
-    inner: {
-      alignItems: `center`,
-      color: `text`,
-      fontWeight: `heading`,
       a: { color: `text` },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ export interface ActionBarProps { @@
       /**
        * two possible layouts from the theme
        */
-      themeKey?: 'actionbar' | 'toolbar';
+      themeKey?: 'actionbar' | 'toolbar' | 'footer';
     }
     /**
@@ Expand Down @@