[ALS-5894] Add help page button links (#6)

package.json

@@ -11,7 +11,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
-    "test:integration": "playwright test --reporter=html",
+    "test:integration": "playwright test",
     "test:unit": "vitest"
   },
   "devDependencies": {

pic-sure-theme.ts

@@ -0,0 +1,101 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const picSureTheme: CustomThemeConfig = {
+  name: 'pic-sure-theme',
+  properties: {
+    // =~= Theme Properties =~=
+    '--theme-font-family-base': `'Nunito Sans', sans-serif`,
+    '--theme-font-family-heading': `'Nunito Sans', sans-serif`,
+    '--theme-font-color-base': '0 0 0',
+    '--theme-font-color-dark': '255 255 255',
+    '--theme-rounded-base': '9999px',
+    '--theme-rounded-container': '8px',
+    '--theme-border-base': '1px',
+    // =~= Theme On-X Colors =~=
+    '--on-primary': '0 0 0',
+    '--on-secondary': '0 0 0',
+    '--on-tertiary': '255 255 255',
+    '--on-success': '0 0 0',
+    '--on-warning': '0 0 0',
+    '--on-error': '0 0 0',
+    '--on-surface': '0 0 0',
+    // =~= Theme Colors  =~=
+    // primary | #c4b49c
+    '--color-primary-50': '246 244 240', // #f6f4f0
+    '--color-primary-100': '243 240 235', // #f3f0eb
+    '--color-primary-200': '240 236 230', // #f0ece6
+    '--color-primary-300': '231 225 215', // #e7e1d7
+    '--color-primary-400': '214 203 186', // #d6cbba
+    '--color-primary-500': '196 180 156', // #c4b49c
+    '--color-primary-600': '176 162 140', // #b0a28c
+    '--color-primary-700': '147 135 117', // #938775
+    '--color-primary-800': '118 108 94', // #766c5e
+    '--color-primary-900': '96 88 76', // #60584c
+    // secondary | #848484
+    '--color-secondary-50': '237 237 237', // #ededed
+    '--color-secondary-100': '230 230 230', // #e6e6e6
+    '--color-secondary-200': '224 224 224', // #e0e0e0
+    '--color-secondary-300': '206 206 206', // #cecece
+    '--color-secondary-400': '169 169 169', // #a9a9a9
+    '--color-secondary-500': '132 132 132', // #848484
+    '--color-secondary-600': '119 119 119', // #777777
+    '--color-secondary-700': '99 99 99', // #636363
+    '--color-secondary-800': '79 79 79', // #4f4f4f
+    '--color-secondary-900': '65 65 65', // #414141
+    // tertiary | #675AFF
+    '--color-tertiary-50': '232 230 255', // #e8e6ff
+    '--color-tertiary-100': '225 222 255', // #e1deff
+    '--color-tertiary-200': '217 214 255', // #d9d6ff
+    '--color-tertiary-300': '194 189 255', // #c2bdff
+    '--color-tertiary-400': '149 140 255', // #958cff
+    '--color-tertiary-500': '103 90 255', // #675AFF
+    '--color-tertiary-600': '93 81 230', // #5d51e6
+    '--color-tertiary-700': '77 68 191', // #4d44bf
+    '--color-tertiary-800': '62 54 153', // #3e3699
+    '--color-tertiary-900': '50 44 125', // #322c7d
+    // success | #5cb85c
+    '--color-success-50': '231 244 231', // #e7f4e7
+    '--color-success-100': '222 241 222', // #def1de
+    '--color-success-200': '214 237 214', // #d6edd6
+    '--color-success-300': '190 227 190', // #bee3be
+    '--color-success-400': '141 205 141', // #8dcd8d
+    '--color-success-500': '92 184 92', // #5cb85c
+    '--color-success-600': '83 166 83', // #53a653
+    '--color-success-700': '69 138 69', // #458a45
+    '--color-success-800': '55 110 55', // #376e37
+    '--color-success-900': '45 90 45', // #2d5a2d
+    // warning | #e89b17
+    '--color-warning-50': '252 240 220', // #fcf0dc
+    '--color-warning-100': '250 235 209', // #faebd1
+    '--color-warning-200': '249 230 197', // #f9e6c5
+    '--color-warning-300': '246 215 162', // #f6d7a2
+    '--color-warning-400': '239 185 93', // #efb95d
+    '--color-warning-500': '232 155 23', // #e89b17
+    '--color-warning-600': '209 140 21', // #d18c15
+    '--color-warning-700': '174 116 17', // #ae7411
+    '--color-warning-800': '139 93 14', // #8b5d0e
+    '--color-warning-900': '114 76 11', // #724c0b
+    // error | #FF0000
+    '--color-error-50': '255 217 217', // #ffd9d9
+    '--color-error-100': '255 204 204', // #ffcccc
+    '--color-error-200': '255 191 191', // #ffbfbf
+    '--color-error-300': '255 153 153', // #ff9999
+    '--color-error-400': '255 77 77', // #ff4d4d
+    '--color-error-500': '255 0 0', // #FF0000
+    '--color-error-600': '230 0 0', // #e60000
+    '--color-error-700': '191 0 0', // #bf0000
+    '--color-error-800': '153 0 0', // #990000
+    '--color-error-900': '125 0 0', // #7d0000
+    // surface | #bababa
+    '--color-surface-50': '245 245 245', // #f5f5f5
+    '--color-surface-100': '241 241 241', // #f1f1f1
+    '--color-surface-200': '238 238 238', // #eeeeee
+    '--color-surface-300': '227 227 227', // #e3e3e3
+    '--color-surface-400': '207 207 207', // #cfcfcf
+    '--color-surface-500': '186 186 186', // #bababa
+    '--color-surface-600': '167 167 167', // #a7a7a7
+    '--color-surface-700': '140 140 140', // #8c8c8c
+    '--color-surface-800': '112 112 112', // #707070
+    '--color-surface-900': '91 91 91' // #5b5b5b
+  }
+};

playwright.config.ts

@@ -6,7 +6,8 @@ const config: PlaywrightTestConfig = {
     port: 4173
   },
   testDir: 'tests',
-  testMatch: /(.+\.)?(test|spec)\.[jt]s/
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  reporter: [['list'], ['html']]
 };
 
 export default config;

src/app.html

@@ -1,12 +1,16 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" class="light">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover" data-theme="vintage" class="h-full overflow-hidden">
+  <body
+    data-sveltekit-preload-data="hover"
+    data-theme="pic-sure-theme"
+    class="h-full overflow-hidden"
+  >
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>

src/app.postcss

@@ -8,16 +8,9 @@ body {
   @apply h-full overflow-hidden;
 }
 
-/* vintage theme */
-@font-face {
-  font-family: 'Abril Fatface';
-  src: url('/fonts/AbrilFatface.ttf');
-  font-display: swap;
-}
-
 section.main-content {
   width: 60%; /* The width is 60%, by default */
-  margin: 20px auto 0;
+  margin: 2rem auto 0;
 }
 
 /* Use a media query to add a breakpoint at 800px: */
@@ -49,12 +42,49 @@ nav#page-navigation a {
   width: 150px;
 }
 nav#page-navigation a[aria-current='page'] {
-  /* @apply bg-primary-500; */
-  background-color: rgba(var(--color-primary-900));
-  color: rgba(var(--color-primary-50));
+  background-color: rgba(var(--color-primary-500));
+  color: rgb(var(--theme-font-color-base));
 }
-nav#page-navigation a:hover {
-  /* @apply bg-secondary-500; */
+nav#page-navigation a:hover,
+nav#page-navigation a:active {
   background-color: rgba(var(--color-secondary-500));
-  color: rgba(var(--color-surface-900));
+  color: rgb(var(--theme-font-color-base));
+}
+
+.subtitle {
+  font-size: 2rem;
+}
+
+.block-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  margin: 2rem 0;
+}
+
+.block-buttons .subtitle {
+  margin: 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  color: rgb(var(--color-tertiary-900));
+  margin: 1rem 0.25rem;
+}
+
+.block-buttons a {
+  color: rgb(var(--text-secondary-500));
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  width: 15rem;
+  min-height: 15rem;
+  padding: 1rem 0.5rem;
+  margin: 0.3rem;
+  @apply card variant-ringed-secondary;
+}
+
+.block-buttons a:hover,
+.block-buttons a:active {
+  background-color: rgb(var(--color-primary-500));
 }

src/lib/configuration.ts

@@ -0,0 +1,30 @@
+export const branding = {
+  help: {
+    links: [
+      {
+        title: 'User Guide',
+        description: 'Complete user manual for seamless navigation and utilization.',
+        icon: 'fa-solid fa-book fa-5x',
+        url: '/help/dummy?title=' + encodeURI('User Guide')
+      },
+      {
+        title: 'Video Library',
+        description: "Example 'how-to' video demonstrations.",
+        icon: 'fa-solid fa-tv fa-5x',
+        url: '/help/dummy?title=' + encodeURI('Video Library')
+      },
+      {
+        title: 'Request Assistance',
+        description: 'Need help? Submit a service desk ticket, we are here to help!',
+        icon: 'fa-solid fa-hands-holding-circle fa-5x',
+        url: '/help/dummy?title=' + encodeURI('Request Assistance')
+      },
+      {
+        title: 'PIC-Sure Website',
+        description: 'Check out the PIC-Sure website for information.',
+        icon: 'fa-solid fa-circle-info fa-5x',
+        url: '/help/dummy?title=' + encodeURI('PIC-Sure Website')
+      }
+    ]
+  }
+};

src/lib/content.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   export let title = 'Unknown page title';
+  export let subtitle = '';
 </script>
 
 <section class="main-content">
-  <h1 class="h1 mb-4">
+  <h1 class="h1 mb-4 text-center">
     {title}
   </h1>
+  {#if subtitle}<p class="subtitle mb-4 text-center">{subtitle}</p>{/if}
   <slot />
 </section>

src/routes/+layout.svelte

@@ -13,6 +13,7 @@
   <svelte:fragment slot="header">
     <Navigation />
   </svelte:fragment>
+  <hr class="!border-t-2" />
   <!-- (sidebarLeft) -->
   <!-- (sidebarRight) -->
   <!-- (pageHeader) -->

src/routes/help/+page.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
   import Content from '$lib/content.svelte';
+  import { branding } from '$lib/configuration';
 </script>
 
-<Content title="Help">
-  <p>Sample page data for the help page.</p>
+<Content title="Knowledge Hub" subtitle="Self-service learning resources">
+  <div class="block-buttons">
+    {#each branding.help.links as link}
+      <a href={link.url} target="_blank" tabindex="0">
+        <i class={link.icon} />
+        <div class="subtitle">{link.title}</div>
+        <div>{link.description}</div>
+      </a>
+    {/each}
+  </div>
 </Content>

src/routes/help/dummy/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Content from '$lib/content.svelte';
+  import { page } from '$app/stores';
+  export const title = $page.url.searchParams.get('title') || 'Dummy';
+</script>
+
+<Content {title}>
+  <p>Some help page content.</p>
+</Content>

tailwind.config.ts

@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
 import { skeleton } from '@skeletonlabs/tw-plugin';
+import { picSureTheme } from './pic-sure-theme';
 
 export default {
   darkMode: 'class',
@@ -18,12 +19,7 @@ export default {
     typography,
     skeleton({
       themes: {
-        preset: [
-          {
-            name: 'vintage',
-            enhancements: true
-          }
-        ]
+        custom: [picSureTheme]
       }
     })
   ]

tests/test.ts → tests/lib/test.ts

@@ -6,7 +6,7 @@ const routes = [
   { path: '/users', id: 'nav-link-users', headerText: 'Users' },
   { path: '/api', id: 'nav-link-api', headerText: 'API' },
   { path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
-  { path: '/help', id: 'nav-link-help', headerText: 'Help' },
+  { path: '/help', id: 'nav-link-help', headerText: 'Knowledge Hub' },
   { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
   { path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
 ];

tests/routes/help/test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+import { branding } from '../../../src/lib/configuration';
+
+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();
+    });
+  });
+});