Add footer with sitemap.

hms-dbmi · Apr 3, 2024 · 898a65f · 898a65f
1 parent aefbf80
commit 898a65f
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 4 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -8,7 +8,8 @@ body {
   @apply h-full overflow-hidden;
 }
 
-body {
+#shell-header,
+section.main-content {
   padding: 0 1em;
 }
 
@@ -125,6 +126,41 @@ header .app-bar {
   border-bottom: solid rgb(var(--color-surface-400)) 2px;
 }
 
+#page-footer {
+  margin: 3em 0 0 0;
+  border-style: solid;
+  border-top-width: 2px;
+  @apply bg-primary-100-800-token border-surface-400-500-token;
+}
+#sitemap-footer {
+  padding: 0.5em 0 0;
+  margin: 0 auto;
+  text-align: center;
+  padding: 1em 15%;
+}
+#sitemap-footer ul {
+  text-align: left;
+  margin: 0 2em;
+}
+#main-footer {
+  padding: 1em;
+  @apply bg-primary-300-600-token;
+}
+#main-footer ul {
+  margin: 0 auto;
+  text-align: center;
+}
+#main-footer ul li {
+  display: inline;
+  padding: 0 1em;
+  border-style: solid;
+  border-right-width: 2px;
+  @apply border-primary-400-500-token;
+}
+#main-footer ul li:last-child {
+  border-right: none;
+}
+
 .key-focus {
   border: 2px solid rgb(var(--color-surface-500)) !important;
 }

diff --git a/src/lib/components/Content.svelte b/src/lib/components/Content.svelte
@@ -4,7 +4,7 @@
   export let full = false;
 </script>
 
-<section class={`main-content ${full && 'w-full'}`}>
+<section class={`main-content ${full ? 'w-full' : ''}`}>
   {#if title}<h1 class="mb-4">{title}</h1>{/if}
   {#if subtitle}<p class="subtitle mb-4">{subtitle}</p>{/if}
   <slot />

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { branding } from '$lib/configuration';
+</script>
+
+{#if branding.footer.addSitemap && branding.sitemap.length > 0}
+  <div id="sitemap-footer">
+    <div class="flex flex-wrap place-content-center">
+      {#each branding.sitemap as section}
+        <ul class="basis-1/4">
+          <li class="font-bold">{section.category}</li>
+          {#each section.links as link}
+            <li><a target={link.newTab ? '_blank' : '_self'} href={link.url}>{link.title}</a></li>
+          {/each}
+        </ul>
+      {/each}
+    </div>
+  </div>
+{/if}
+<div id="main-footer" class="flex">
+  <ul>
+    {#each branding.footer.links as link}
+      <li><a target={link.newTab ? '_blank' : '_self'} href={link.url}>{link.title}</a></li>
+    {/each}
+  </ul>
+</div>
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
@@ -1,5 +1,42 @@
 export const branding = {
   applicationName: 'PIC‑SURE',
+  sitemap: [
+    {
+      category: 'Explore PIC-Sure',
+      links: [
+        { title: 'User Guide', url: 'https://pic-sure.gitbook.io/pic-sure', newTab: true },
+        { title: 'Data Dashboard', url: '#' },
+      ],
+    },
+    {
+      category: 'About',
+      links: [
+        { title: 'Some link', url: '#' },
+        { title: 'Wow, another link', url: '#' },
+        { title: "You're probably crazy but, it's another link", url: '#' },
+        { title: "Yep, you're crazy", url: '#' },
+      ],
+    },
+  ],
+  footer: {
+    addSitemap: true,
+    links: [
+      {
+        title: 'Terms of Service',
+        url: '#',
+      },
+      {
+        title: 'Privacy Policy',
+        url: 'https://pic-sure.gitbook.io/pic-sure/privacy-policy',
+        newTab: true,
+      },
+      {
+        title: 'Contact Us',
+        url: 'https://hms-dbmi.atlassian.net/servicedesk/customer/portal/5',
+        newTab: true,
+      },
+    ],
+  },
   apiPage: {
     cards: [
       {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
   import Navigation from '$lib/components/Navigation.svelte';
+  import Footer from '$lib/components/Footer.svelte';
 
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -24,5 +25,7 @@
     <Navigation />
   </svelte:fragment>
   <slot />
-  <svelte:fragment slot="footer"></svelte:fragment>
+  <svelte:fragment slot="pageFooter">
+    <Footer />
+  </svelte:fragment>
 </AppShell>
diff --git a/tests/routes/help/test.ts b/tests/routes/help/test.ts
@@ -5,7 +5,8 @@ test.describe('Help page', () => {
   branding.help.links.forEach(({ title }) => {
     test(`Has expected link to ${title}`, async ({ page }) => {
       await page.goto('/help');
-      await expect(page.getByText(title, { exact: true })).toBeVisible();
+
+      await expect(page.locator('.main-content').getByText(title, { exact: true })).toBeVisible();
     });
   });
 });