@companieshouse/ch-node-utils 1.3.2 → 1.3.4

package/README.md

@@ -76,3 +76,27 @@ Available as a normal npm dependency([here on npmjs](https://www.npmjs.com/packa
 | ------- | ----------- |
 |`CH_NODE_UTILS_DROP_LANG_QUERY_PARAM`| It could be set to [drop the lang="xx" query param](https://github.com/companieshouse/ch-node-utils/blob/f9e5c47a86206f0b12e4e536c4c459db16747631/src/middleware/manageLocales.middleware.ts#L25) from the current URL ([see Example](https://github.com/companieshouse/docker-chs-development/blob/842c61245adcbba02a6316847fc4f9d94c52410d/services/modules/dissolution/dissolution-web.docker-compose.yaml#L50)) |
 |`CH_NODE_UTILS_LOG_LVL`| It could be set to ["TRACE" or "DEBUG" (case insensitive)](https://github.com/companieshouse/ch-node-utils/blob/24bc717477d21082439d1b460108cb0d60465f0f/src/utils/log.ts#L2) to dump internal info while inside ch-node-utils ([see Example](https://github.com/companieshouse/docker-chs-development/blob/842c61245adcbba02a6316847fc4f9d94c52410d/services/modules/dissolution/dissolution-web.docker-compose.yaml#L49))|
+
+### Menu navigation bar
+A menu navigation bar component has been added to make it easier to add links pointing to new services when needed. There are two Nunjucks macros: one that adds a menu navigation bar with the provided items and another that adds a menu navigation bar with predefined items. The latter internally uses the former and at the moment contains links to the following service:
+
+- Authorised agent
+- Your companies
+- Your filings
+- Companies you follow
+- Basket
+- Manage account
+- Sign out
+
+The "Authorised agent" menu item appears conditionally if the logged user has ACSP membership.
+
+The navbar requires importing language files from the `locales` folder in ch-node-utils and making them available to all Nunjuck templates using the [`addGlobal()` function](https://mozilla.github.io/nunjucks/api.html#addglobal) in `app.ts`. At the moment only English and Welsh language versions are supported. It also requires a flag `displayAuthorisedAgent` set the same way for displaying the "Authorised agent" menu item. If the logged user has ACSP membership, this flag should be set to `'yes'`.
+
+The navbar also requires the use of styles provided in the [ch.gov.uk.css](https://github.com/companieshouse/cdn.ch.gov.uk/blob/master/app/assets/stylesheets/ch.gov.uk.css) stylesheet (you can either add the provided link to the head section or include specific styles in your own stylesheet)
+
+`<link href="{{ cdnHost }}/stylesheets/ch.gov.uk.css" rel="stylesheet"/>`
+
+It also requires the [navbar.js](https://github.com/companieshouse/cdn.ch.gov.uk/blob/master/app/assets/javascripts/lib/navbar.js) script to be added to the footer to make the navbar work in mobile mode
+
+`<script src="{{ cdnHost }}/javascripts/lib/navbar.js"></script>`
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companieshouse/ch-node-utils",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "author": "companieshouse",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

package/templates/navbar.njk

@@ -0,0 +1,74 @@
+{#
+GENERAL NOTES:
+The navbar requires importing language files from the locales folder in ch-node-utils
+and making them available to all Nunjuck templates using the addGlobal() function in app.ts.
+It also requires a flag displayAuthorisedAgent set the same way for displaying the 'Authorised agent'
+menu item. If the logged user has ACSP membership, this flag should be set to 'yes'.
+
+It also requires the use of styles provided in the following stylesheet
+(you can either add the provided link to the head section or include specific
+styles in your own stylesheet)
+
+    <link href="{{ cdnHost }}/stylesheets/ch.gov.uk.css" rel="stylesheet"/>
+
+It also requires the following script to be added to the footer
+
+    <script src="{{ cdnHost }}/javascripts/lib/navbar.js"></script>
+#}
+
+{# 
+A macro that adds a menu navigation bar with the provided items.
+It receives:
+- signInHref: the URL of the sign in / register page
+- menuItems: a collection of objects representing individual menu items.
+    Each object must contain properties with the following keys to build an anchor:
+    - id: it's the anchor element id
+    - href: the URL of the page the menu item will point to
+    - displayText: the text to display in the anchor
+- userDisplayText: a text identifying the logged user, e.g. email address or name
+#}
+{% macro addNavbar(signInHref, menuItems, userDisplayText) %}
+    <div class="js-toggle-nav" id="global-nav">
+        <nav role="navigation" class="content" aria-label="{{ lang.mainNavbar or 'The main navigation bar' }}">
+            {% if userDisplayText %}
+                <a href="#navigation" class="js-header-toggle menu">{{ userDisplayText }}
+                    <span class="govuk-visually-hidden">{{ lang.clickToExpandOrCollapse or 'Click to expand or collapse' }}</span>
+                </a>
+            {% else %}
+                <a id="user-signin-mobile" href="{{ signInHref }}" class="sign-in govuk-link">{{ lang.signInOrRegister or 'Sign in / Register' }}</a>
+            {% endif %}
+
+            <ul id="navigation">
+                <li id="signed-in-user" class="user">
+                    {{ userDisplayText }}
+                </li>
+                {% for item in menuItems %}
+                    <li>
+                        <a class="govuk-link" id="{{ item.id }}" href="{{ item.href }}">{{ item.displayText }}</a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </nav>
+    </div>
+{% endmacro %}
+
+{# 
+A macro that adds a menu navigation bar with predefined items.
+It receives:
+- userDisplayText: a text identifying the logged user, e.g. email address or name
+- chsMonitorGuiUrl: the URL for the 'Companies you follow' link
+#}
+{% macro addPredefinedNavbar(userDisplayText, chsMonitorGuiUrl) %}
+    {% set menuItems = [
+        { id: "authorised-agent", href: "/authorised-agent", displayText: lang.authorisedAgent or "Authorised agent" } if displayAuthorisedAgent === "yes",
+        { id: "your-companies", href: "/your-companies", displayText: lang.yourCompanies or "Your companies" },
+        { id: "your-filings", href: "/user/transactions", displayText: lang.yourFilings or "Your filings" },
+        { id: "companies-you-follow", href: chsMonitorGuiUrl, displayText: lang.companiesYouFollow or "Companies you follow" },
+        { id: "basket", href: "/basket", displayText: lang.basket or "Basket" },
+        { id: "your-details", href: "/user/account", displayText: lang.manageAccount or "Manage account" },
+        { id: "user-signout", href: "/signout", displayText: lang.signOut or "Sign out" }
+    ] | reject("falsy") %}
+
+    {{ addNavbar("/signin", menuItems, userDisplayText) }}
+
+{% endmacro %}