Hoff 113- added Hof skeleton project

.gitignore

@@ -1 +1,9 @@
 node_modules
+.DS_Store
+public
+.env
+yarn-error.log
+apps/**/translations/**/*
+!apps/**/translations/src/
+!apps/**/translations/src/**/*
+.vscode

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 UKHomeOffice
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,45 @@
-# hof-skeleton
+# Hof skeleton
+This is to get you started with HOF. Use this to create a new project.
+
+## Install prerequisites
+
+Step 1 : Install Node Version Manager
+
+        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+        # or
+        wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+        # or
+        brew install nvm
+
+    Check the version   nvm --version
+
+Step 2 : nvm install 18.19.0
+
+Step 3: nvm use 18.19.0
+
+Step 4: npm i -g yarn
+
+Step 5: yarn
+
+Step 6: yarn run start:dev
+
+- [Node.js](https://nodejs.org/en/) - Tested against LTS
+- NPM (installed with Node.js) - Works with versions 2 and 3
+- [Redis server](http://redis.io/download) running on the default port
+
+
+### Replacing existing project and settings with a prefered project name
+
+- In the apps folder rename the existing folder 'hof-project'.
+
+    > Example   apps/hof-project -->  apps/name-of-project .
+
+- navigate to the index.js file on line-4 replace 'hof-project'.
+
+    > Example  name: 'hof-project' -->   name: 'name-of-project'.
+
+- navigate to hof-settings.json on line-8 replace the app route.
+
+    > Example  "routes": [
+                    "./apps/hof-project"    -->  "./apps/name-of-project".
+                ],

apps/hof-project/fields/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+  name: {
+    mixin: 'input-text'
+  }
+};

apps/hof-project/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const SummaryPageBehaviour = require('hof').components.summary;
+
+module.exports = {
+  name: 'hof-project',
+  steps: {
+    '/start': {
+      fields: ['name'],
+      next: '/confirm'
+    },
+    '/confirm': {
+      behaviours: [SummaryPageBehaviour],
+      sections: require('./sections/summary-data-sections'),
+      next: '/confirmation'
+    },
+    '/confirmation': {
+      backLink: false
+    }
+  }
+};

apps/hof-project/sections/summary-data-sections.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+  start: [
+    'name'
+  ]
+};

apps/hof-project/translations/src/en/buttons.json

@@ -0,0 +1,6 @@
+{
+    "start": "Start Now",
+    "edit": "Change",
+    "continue": "Continue",
+    "confirm-submission": "Submit"
+}

apps/hof-project/translations/src/en/fields.json

@@ -0,0 +1,5 @@
+{
+    "name": {
+        "label": "Hof project name (if known)"
+    }
+}

apps/hof-project/translations/src/en/journey.json

@@ -0,0 +1,4 @@
+{
+  "header": "New HOF Service Form",
+  "phase": "beta"
+}

apps/hof-project/translations/src/en/pages.json

@@ -0,0 +1,18 @@
+{
+  "start": {
+    "header": "Welcome to Hof Project"
+  },
+  "confirm": {
+    "header": "Check your answers",
+    "sections": {
+      "name": {
+        "header": "Hof Project Details"
+      }
+    },
+    "fields": {
+      "name": {
+        "label": "Project Name"
+      }
+    }
+  }
+}

apps/hof-project/translations/src/en/validation.json

@@ -0,0 +1 @@
+{}

apps/hof-project/views/partials/confirmation-alert.html

@@ -0,0 +1,3 @@
+<div class="govuk-panel govuk-panel--confirmation" role="alert">
+  <h1 govuk-panel__title>{{#t}}journey.confirmation.message{{/t}}</h1>
+</div>

assets/js/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+require('hof/frontend/themes/gov-uk/client-js');
+const govuk = require('govuk-frontend');
+const $ = require('jquery');
+const accessibleAutocomplete = require('accessible-autocomplete');
+
+
+$('.typeahead').each(function applyTypeahead() {
+  accessibleAutocomplete.enhanceSelectElement({
+    defaultValue: '',
+    selectElement: this
+  });
+});
+
+govuk.initAll();

assets/scss/app.scss

@@ -0,0 +1,202 @@
+@import "hof/frontend/themes/gov-uk/styles/govuk";
+
+ul {
+  @extend .govuk-list--bullet;
+}
+
+a {
+  @extend .govuk-link;
+}
+
+// Accessible autocomplete
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid #0b0c0c;
+  border-radius: 0;
+  /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0;
+  /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #b1b4b6;
+  position: absolute;
+}
+
+.autocomplete__input--default {
+  padding: 5px;
+}
+
+.autocomplete__input--focused {
+  outline: 3px solid #fd0;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 5px 34px 5px 5px;
+  /* Space for arrow. Other padding should match .autocomplete__input--default. */
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #0B0C0C;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #b1b4b6;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option>* {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #1d70b8;
+  border-color: #1d70b8;
+  color: white;
+  outline: none;
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 5px;
+}
+
+@media (min-width: 641px) {
+
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}
+
+//Cookie banner styling
+
+#cookie-banner {
+  #cookie-banner-actions {
+    font-size: 65% !important;
+    width: 66.667% !important;
+  }
+}
+
+pre.looped-records {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+/* Links instead of regular buttons */
+.button-as-link .govuk-button {
+  background-color: Transparent;
+  background: none !important;
+  border: none;
+  padding: 0 !important;
+  font-family: inherit;
+  line-height: 25px;
+  -webkit-box-shadow: 0 0px 0 #003618;
+  box-shadow: 0 0px 0 #003618;
+  text-decoration: underline;
+  cursor: pointer;
+  margin-bottom: 1em;
+  color: #1d70b8;
+  font-size: 1em;
+}
+
+.button-as-link:active {
+  background: #ffdd00;
+}
+
+.button-as-link .govuk-button:active {
+  color: black;
+  line-height: 23px;
+  border-bottom-style: solid;
+  border-bottom-color: black;
+  border-bottom-width: 4px;
+  text-decoration: none;
+}

config.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

hof.settings.json

@@ -0,0 +1,14 @@
+{
+  "appName": "Hof Skeleton Project",
+  "theme": "govUK",
+  "behaviours": [
+    "hof/components/clear-session"
+  ],
+  "routes": [
+    "./apps/hof-project"
+  ],
+  "session": {
+    "name": "hof-project.hof.sid"
+  },
+  "getAccessibility": true
+}