improved footer layout

scm-ui/ui-components/src/layout/Footer.stories.tsx

@@ -5,8 +5,11 @@ import { Binder, BinderContext } from "@scm-manager/ui-extensions";
 import { Me } from "@scm-manager/ui-types";
 import { EXTENSION_POINT } from "../avatar/Avatar";
 // @ts-ignore ignore unknown png
-import avatar from "../__resources__/avatar.png";
+import hitchhiker from "../__resources__/hitchhiker.png";
+// @ts-ignore ignore unknown jpg
+import marvin from "../__resources__/marvin.jpg";
 import NavLink from "../navigation/NavLink";
+import ExternalLink from "../navigation/ExternalLink";
 
 const trillian: Me = {
   name: "trillian",
@@ -16,15 +19,16 @@ const trillian: Me = {
   _links: {}
 };
 
-const bindAvatar = (binder: Binder) => {
+const bindAvatar = (binder: Binder, avatar: string) => {
   binder.bind(EXTENSION_POINT, () => {
     return avatar;
   });
 };
 
 const bindLinks = (binder: Binder) => {
-  binder.bind("footer.links", () => <a href="#">REST API</a>);
-  binder.bind("footer.links", () => <a href="#">CLI</a>);
+  binder.bind("footer.information", () => <ExternalLink to="#" label="REST API" />);
+  binder.bind("footer.information", () => <ExternalLink to="#" label="CLI" />);
+  binder.bind("footer.support", () => <ExternalLink to="#" label="FAQ" />);
   binder.bind("profile.setting", () => <NavLink label="Authorized Keys" to="#" />);
 };
 
@@ -42,7 +46,7 @@ storiesOf("Layout|Footer", module)
   })
   .add("With Avatar", () => {
     const binder = new Binder("avatar-story");
-    bindAvatar(binder);
+    bindAvatar(binder, hitchhiker);
     return withBinder(binder);
   })
   .add("With Plugin Links", () => {
@@ -52,7 +56,7 @@ storiesOf("Layout|Footer", module)
   })
   .add("Full", () => {
     const binder = new Binder("link-story");
-    bindAvatar(binder);
+    bindAvatar(binder, marvin);
     bindLinks(binder);
     return withBinder(binder);
   });

scm-ui/ui-components/src/layout/Footer.tsx

@@ -6,6 +6,8 @@ import NavLink from "../navigation/NavLink";
 import FooterSection from "./FooterSection";
 import styled from "styled-components";
 import { EXTENSION_POINT } from "../avatar/Avatar";
+import ExternalLink from "../navigation/ExternalLink";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   me?: Me;
@@ -50,10 +52,12 @@ const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
 );
 
 const Footer: FC<Props> = ({ me, version, links }) => {
+  const [t] = useTranslation("commons");
   const binder = useBinder();
   if (!me) {
     return null;
   }
+
   const extensionProps = { me, url: "/me", links };
   let meSectionTile;
   if (binder.hasExtension(EXTENSION_POINT)) {
@@ -67,24 +71,18 @@ const Footer: FC<Props> = ({ me, version, links }) => {
       <section className="section container">
         <div className="columns is-size-7">
           <FooterSection title={meSectionTile}>
-            <NavLink to="#" label="Profile" />
-            <NavLink to="#" label="Change Password" />
+            <NavLink to="/me" label={t("footer.user.profile")} />
+            <NavLink to="/me/settings/password" label={t("profile.changePasswordNavLink")} />
             <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
           </FooterSection>
-          <FooterSection title={<TitleWithIcon title="Information" icon="info-circle" />}>
-            <a href="https://www.scm-manager.org/" target="_blank">
-              SCM-Manager {version}
-            </a>
-            <ExtensionPoint name="footer.links" props={extensionProps} renderAll={true} />
+          <FooterSection title={<TitleWithIcon title={t("footer.information.title")} icon="info-circle" />}>
+            <ExternalLink to="https://www.scm-manager.org/" label={`SCM-Manager ${version}`} />
+            <ExtensionPoint name="footer.information" props={extensionProps} renderAll={true} />
           </FooterSection>
-          <FooterSection title={<TitleWithIcon title="About" icon="external-link-alt" />}>
-            <a href="https://www.scm-manager.org/" target="_blank">
-              Learn more
-            </a>
-            <a target="_blank" href="https://cloudogu.com/">
-              Powered by Cloudogu
-            </a>
-            <ExtensionPoint name="footer.links" props={extensionProps} renderAll={true} />
+          <FooterSection title={<TitleWithIcon title={t("footer.support.title")} icon="life-ring" />}>
+            <ExternalLink to="https://www.scm-manager.org/support/" label={t("footer.support.community")} />
+            <ExternalLink to="https://cloudogu.com/en/scm-manager-enterprise/" label={t("footer.support.enterprise")} />
+            <ExtensionPoint name="footer.support" props={extensionProps} renderAll={true} />
           </FooterSection>
         </div>
       </section>

scm-ui/ui-components/src/layout/FooterSection.tsx

@@ -18,11 +18,7 @@ const FooterSection: FC<Props> = ({ title, children }) => {
   return (
     <section className="column is-one-third">
       <Title>{title}</Title>
-      <Menu>
-        {React.Children.map(children, (child, index) => (
-          <li key={index}>{child}</li>
-        ))}
-      </Menu>
+      <Menu>{children}</Menu>
     </section>
   );
 };