From 66e08b5d85400daf0cb4831cb4cc320a0fda7174 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Wed, 5 Aug 2020 07:18:41 +0300
Subject: [PATCH] feat: footer left and right customization

---
 core/core/src/configuration.ts            |  5 +++
 ui/app/src/Footer/Footer.tsx              | 38 +++++++++++++++++------
 ui/components/src/ActionBar/ActionBar.tsx |  2 +-
 ui/components/src/ThemeContext/theme.ts   |  6 ----
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
index 1bf8f7e29..a65c9f914 100644
--- 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
index 294f68c67..b5d90a110 100644
--- 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
index d4b8f1a2d..901e3583c 100644
--- 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
index af8f91cab..053f51394 100644
--- 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` },
     },
   },