Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Feb 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
101 changes: 101 additions & 0 deletions pic-sure-theme.ts
Original file line number Diff line number Diff line change
@@ -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
}
};
3 changes: 2 additions & 1 deletion playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
8 changes: 6 additions & 2 deletions src/app.html
Original file line number Diff line number Diff line change
@@ -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>
58 changes: 44 additions & 14 deletions src/app.postcss
Original file line number Diff line number Diff line change
Expand Up @@ -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: */
Expand Down Expand Up @@ -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));
}
30 changes: 30 additions & 0 deletions src/lib/configuration.ts
Original file line number Diff line number Diff line change
@@ -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')
}
]
}
};
4 changes: 3 additions & 1 deletion src/lib/content.svelte
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<svelte:fragment slot="header">
<Navigation />
</svelte:fragment>
<hr class="!border-t-2" />
<!-- (sidebarLeft) -->
<!-- (sidebarRight) -->
<!-- (pageHeader) -->
Expand Down
13 changes: 11 additions & 2 deletions src/routes/help/+page.svelte
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions src/routes/help/dummy/+page.svelte
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 2 additions & 6 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -18,12 +19,7 @@ export default {
typography,
skeleton({
themes: {
preset: [
{
name: 'vintage',
enhancements: true
}
]
custom: [picSureTheme]
}
})
]
Expand Down
2 changes: 1 addition & 1 deletion tests/test.ts → tests/lib/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
];
Expand Down
11 changes: 11 additions & 0 deletions tests/routes/help/test.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
});