Merge branch 'OIT-472-Preparing-for-static-deployment' into OIT-472-preparing-for-static-deployment-merge-check

Author: ajhillman-ddj

package-lock.json

@@ -15,6 +15,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite dev",
     "build": "vite build && npm run package",
+    "deploy": "gh-pages -d docs",
     "preview": "vite preview",
     "prepackage": "tsx scripts/generate-index.ts && node scripts/copy-static-assets-to-lib.js",
     "package": "npm run prepackage && svelte-kit sync && svelte-package && publint",
@@ -61,6 +62,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.3.0",
+    "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.1",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -95,13 +97,15 @@
     "@maptiler/sdk": "^3.0.1",
     "@ministryofjustice/frontend": "^4.0.1",
     "@monaco-editor/loader": "^1.4.0",
+    "@sveltejs/adapter-netlify": "^5.0.2",
     "@types/dompurify": "^3.0.5",
     "accessible-autocomplete": "^3.0.1",
     "csv-parser": "^3.0.0",
     "d3": "^7.9.0",
     "decimal.js": "^10.5.0",
     "dompurify": "^3.2.5",
     "flowbite-svelte-icons": "^2.0.3",
+    "gh-pages": "^6.3.0",
     "govuk-frontend": "^5.9.0",
     "labelplacer": "^0.0.0",
     "leaflet": "^1.9.4",

package.json

@@ -0,0 +1,39 @@
+# Review checklist #1
+## For reviewing a newly-added component applying for status `Baseline completed`
+
+A component's status should be updated to `Baseline completed` when the core functionality for the component has been completed and it is ready for use in prototyping. 
+
+`Baseline completed` components have not necessarily passed review for responsive design, accessibility, progressive enhancement and real-use testing. 
+
+Therefore, developers should be prepared that these components may be modified in the future. Where modifications occur, a new version of the component library will be published and a description of the updates will be included in the change log.
+
+### 1. Merging and pull requests
+
+- [ ] Are there merge conflicts with the `Main` branch? <br>
+      (developers should check for conflicts before submitting a pull request by merging `Main` into their branch.)
+
+- [ ] Does the pull request clearly detail new dependencies and features, and list any specific checks which they want the review to focus on?
+
+### 2. Is the component self-contained?
+
+- [ ] Does the component have a simple and specific function? <br>
+      (if the component's function is broad, the developer should consider splitting it into smaller child components.)
+
+- [ ] Does the component fulfil its function without reference to external code or other components? <br>
+
+### 3. Is the component fully-functional and resuable?
+
+- [ ] List the different use cases for the component. Can all of these use cases be realised by adjusting the components props? <br>
+      (if a use cases requires adjusting props in an opaque way, that use case should be demonstrated as an example.)
+
+### 4. Are the component props well constructed?
+
+- [ ] Are component props sorted into intuitive categories in the demo UI?
+      
+- [ ] Have component props been given names which accurately and succintly describe what they do?
+
+- [ ] Have component props been given reasonable default values where appropriate? <br>
+      (generally, props should have default values unless they are derived from the data pipeline)
+
+- [ ]
+      

pull_request_templates/new-component-baseline-review.md

@@ -0,0 +1,66 @@
+# Pull request template #1
+## For adding a new component with status `Baseline completed`
+
+A component's status should be updated to `Baseline completed` when the core functionality for the component has been completed and it is ready for use in prototyping. 
+
+`Baseline completed` components have not necessarily passed review for responsive design, accessibility, progressive enhancement and real-use testing. 
+
+Therefore, developers should be prepared that these components may be modified in the future. Where modifications occur, a new version of the component library will be published and a description of the updates will be included in the change log.
+
+---
+
+### New component details:
+
+| Key | Value |
+| :--- | :--- |
+| Name | Line |
+| Folder | data-vis |
+| Sub-folder | line-chart |
+
+---
+
+### New component information:
+
+| Key | Value |
+| :--- | :--- |
+| Description | The `Line` component receives an array of data and a lineFunction and combines them to render an SVG path element. <br><br>This path element can have hover and click events. It can also have markers, which can have their own optional hover and click events. |
+| Context | Since the `Line` component renders an SVG path element it must be called within an `<svg>` element. <br><br>The Line component has been designed as a child component of `Lines`, which takes a full dataset and renders a line for each row, allowing developers to customise the styling and behaviour of lines in groups or individually.<br><br>The Lines component has, in turn, been designed as a child component of `LineChart`, which incorporates other components include `Axis` and labelling to form a complete data visualisation. |
+
+---
+
+### Connected components:
+
+| Component | Description of connectivity | Status |
+| :--- | :--- | :--- |
+| `Lines` | Calls `Line` component to render individual lines.  | `In progress` |
+| `LineChart` | Calls `Lines` to render all lines. | Not yet developed |
+
+---
+
+### Dependencies:
+
+| Dependency | Description | New dependency? |
+| :--- | :--- | :--- | 
+| None | - | - |
+
+---
+
+### Core features:
+
+| Feature | Description |
+| :--- | :--- |
+| Description | The Line component  |
+
+---
+
+### Requested checks:
+
+| Check | Description |
+| :--- | :--- |
+| - | -  |
+
+---
+
+### Additional notes:
+
+

pull_request_templates/new_component-baseline.md

@@ -56,7 +56,7 @@ const exports = svelteFilesInComponents
 // Write the file
 writeFileSync(
   indexFile,
-  `// this file is auto-generated — do not edit by hand\nimport "$lib/main.css";\n\n${exports.join("\n")}\n`,
+  `// this file is auto-generated — do not edit by hand\nimport "./main.css";\n\n${exports.join("\n")}\n`,
 );
 
 let logMessage = `Generated ${indexFile} with ${exports.length} unique exports from ./components.`;

scripts/generate-index.ts

@@ -2,10 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link
-      rel="icon"
-      href="%sveltekit.assets%/assets/images/oflog_crest_white.png"
-    />
+
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, viewport-fit=cover"

src/app.html

@@ -22,6 +22,7 @@
     label: string;
     lang?: string;
     hrefLang?: string;
+    onclick?: (event: MouseEvent) => void;
   }
 
   interface FooterSection {
@@ -64,8 +65,6 @@
   }>();
 </script>
 
-Check - hello
-
 <!-- Main footer container -->
 <footer class="govuk-footer">
   <div class={containerWidth}>
@@ -120,6 +119,7 @@ Check - hello
                   href={link.href}
                   lang={link.lang}
                   hreflang={link.hrefLang}
+                  onclick={link.onclick}
                 >
                   {link.label}
                 </a>

src/lib/components/layout/Footer.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { base } from "$app/paths";
+
   import { onMount } from "svelte";
 
   // Define navigation item type