Feat/language link helper

.github/dependabot.yml

@@ -15,6 +15,3 @@ updates:
       - web-team
     reviewers:
       - 'KTH/web-team'
-    ignore:
-      - dependency-name: 'kth-style'
-        versions: ['9.x', '10.x']

i18n/messages.en.js

@@ -41,5 +41,11 @@ module.exports = {
     template_silent_login_page_heading: 'Silent login page',
     template_not_found_page_heading: 'Not found',
     template_back_link: 'Back to start page',
+
+    language_link_lang_sv: 'Svenska',
+    language_link_not_translated: 'Den här sidan saknar översättning',
+    language_link_button_close: 'Close',
+    label_translation_link: 'Svenska (med dialog)',
+    label_translation_dialog: 'KTH på svenska',
   },
 }

i18n/messages.se.js

@@ -41,5 +41,11 @@ module.exports = {
     template_silent_login_page_heading: 'Sida med tyst inloggning',
     template_not_found_page_heading: 'Sidan hittades inte ',
     template_back_link: 'Tillbaka till start-sidan',
+
+    language_link_lang_en: 'English',
+    language_link_not_translated: 'This page isn’t translated',
+    language_link_button_close: 'Stäng',
+    label_translation_link: 'English (with dialog)',
+    label_translation_dialog: 'KTH:s International Website',
   },
 }

package.json

@@ -35,6 +35,7 @@
     "@kth/log": "^4.0.7",
     "@kth/monitor": "^4.2.1",
     "@kth/session": "^3.0.9",
+    "@kth/style": "^0.17.2",
     "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
     "dotenv": "^16.4.5",
@@ -45,7 +46,7 @@
     "kth-node-express-routing": "^2.2.0",
     "kth-node-i18n": "^1.0.18",
     "kth-node-redis": "^3.3.0",
-    "kth-style": "^9.1.2",
+    "kth-style": "^10.0.18",
     "passport": "^0.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

public/css/node-web.scss

@@ -1,5 +1,19 @@
-// Scss code goes here!
+@use '~@kth/style/scss/utils/reset.scss';
+@use '~@kth/style/scss/utils/mixins.scss';
 
-#app {
-  padding: 30px;
+@use '~@kth/style/scss/components/logotype.scss';
+@use '~@kth/style/scss/components/search.scss';
+@use '~@kth/style/scss/components/alert.scss';
+@use '~@kth/style/scss/components/footer.scss';
+@use '~@kth/style/scss/components/mega-menu.scss';
+@use '~@kth/style/scss/components/visually-hidden.scss';
+@use '~@kth/style/scss/components/button.scss';
+@use '~@kth/style/scss/components/header.scss';
+@use '~@kth/style/scss/components/menu-item.scss';
+@use '~@kth/style/scss/components/menu-panel.scss';
+@use '~@kth/style/scss/components/translation-panel';
+
+.container {
+  @include mixins.container;
+  padding-block: 30px;
 }

public/js/app/components/Button.jsx

@@ -7,7 +7,7 @@ function Button({ caption = 'N/A', lang = 'sv', onClick = null }) {
   const doClick = onClick || setButtonClicked
   return (
     <>
-      <button type="button" className="btn btn-primary" onClick={() => doClick(true)}>
+      <button type="button" className="kth-button primary" onClick={() => doClick(true)}>
         {caption}
       </button>
       {buttonClicked ? <p>{i18n.message('template_button_works', lang)}</p> : null}

public/js/app/components/__snapshots__/Button.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Component <Button> changes output after first click 1`] = `
 <DocumentFragment>
   <button
-    class="btn btn-primary"
+    class="kth-button primary"
     type="button"
   >
     This is a message
@@ -17,7 +17,7 @@ exports[`Component <Button> changes output after first click 1`] = `
 exports[`Component <Button> creates a button 1`] = `
 <DocumentFragment>
   <button
-    class="btn btn-primary"
+    class="kth-button primary"
     type="button"
   >
     This is a message

server/controllers/adminCtrl.js

@@ -57,6 +57,7 @@ async function getAdminIndex(req, res, next) {
       lang,
       proxyPrefix,
       toolbarUrl: serverConfig.toolbar.url,
+      theme: 'intranet',
     })
   } catch (err) {
     log.error('Error in getAdminIndex', { error: err })

server/controllers/sampleCtrl.js

@@ -12,9 +12,6 @@ const serverConfig = require('../configuration').server
 const { getServerSideFunctions } = require('../utils/serverSideRendering')
 
 async function getIndex(req, res, next) {
-  console.log('IN CON<tROLLER')
-  console.log('Blocks', res.locals.blocks)
-
   try {
     const lang = language.getLanguage(res)
     const { user } = req
@@ -54,6 +51,10 @@ async function getIndex(req, res, next) {
       lang,
       proxyPrefix,
       toolbarUrl: serverConfig.toolbar.url,
+      theme: 'external',
+      translationLinkMessageKey: 'label_translation_link',
+      translationLink: `https://kth.se${lang === 'sv' ? '?l=en' : '?l=sv'}`,
+      translationDialogMessageKey: 'label_translation_dialog',
     })
   } catch (err) {
     log.error('Error in getIndex', { error: err })

server/server.js

@@ -85,6 +85,8 @@ server.use(_addProxy('/static/browserConfig'), browserConfigHandler)
 
 // Files/statics routes
 server.use(_addProxy('/static/kth-style'), express.static('./node_modules/kth-style/dist', staticOption))
+server.use(_addProxy('/assets'), express.static('./node_modules/@kth/style/assets', staticOption))
+server.use(_addProxy('/assets/js'), express.static('./node_modules/@kth/style/dist/esm', staticOption))
 
 // Map static content like images, css and js.
 server.use(_addProxy('/static'), express.static('./dist', staticOption))

server/views/helpers/index.js

@@ -2,6 +2,7 @@
 
 const registerHeaderContentHelper = require('@kth/kth-node-web-common/lib/handlebars/helpers/headerContent')
 const { registerBreadcrumbHelper } = require('@kth/kth-node-web-common/lib/handlebars/helpers/breadcrumbs')
+const { registerLanguageLinkHelper } = require('@kth/kth-node-web-common/lib/handlebars/helpers/languageLink')
 const log = require('@kth/log')
 const config = require('../../configuration').server
 const packageFile = require('../../../package.json')
@@ -36,6 +37,7 @@ registerHeaderContentHelper({
  * Those only need to be required. Docs embedded in source.
  */
 registerBreadcrumbHelper()
+registerLanguageLinkHelper()
 require('@kth/kth-node-web-common/lib/handlebars/helpers/contentedit')
 
 const i18n = require('../../../i18n')

server/views/layouts/publicLayout.handlebars

@@ -14,6 +14,7 @@
   {{/if}}
 
   {{prefixStyle '/static/kth-style/css/kth-bootstrap.css' 'styles' 'screen'}}
+  {{prefixStyle '/assets/fonts.css' 'styles' 'screen'}}
   {{prefixStyle '/static/app.css' 'styles' 'screen'}}
 
   {{{render 'styles'}}}
@@ -24,18 +25,31 @@
   {{/if}}
 
   {{prefixScript '/static/vendor.js' 'head-scripts'}}
+  {{prefixModuleScript '/assets/js/index.js' 'head-scripts'}}
   {{prefixScript '/static/browserConfig' 'head-scripts'}}
-  {{prefixScript '/static/kth-style/js/menus.js' 'head-scripts'}}
   {{prefixScript '/static/kth-style/js/backtotop.js' 'head-scripts'}}
   {{{render 'head-scripts'}}}
 
   <script src="{{toolbarUrl}}"></script>
+  <script type="module">
+    import { MenuPanel } from '{{proxyPrefix}}/assets/js/index.js'
+    MenuPanel.init(document.querySelector('.kth-header'), document.querySelectorAll('.kth-mega-menu .kth-menu-item'))
+    MenuPanel.init(document.querySelector('.kth-header'), document.querySelectorAll('.kth-menu-item.search'))
+    MenuPanel.initModal(
+      document.querySelector('.kth-menu-item.collapsable'),
+      document.querySelector('.kth-menu-panel--modal')
+    )
+    MenuPanel.initTranslationModal(
+      document.querySelector(".kth-menu-item.language"),
+      document.querySelector(".kth-translation")
+    )
+  </script>
 </head>
 
 <body>
   <a class="skipToMainContent" href="#mainContent" tabindex="1">{{i18n 'skip_to_main_content' lang}}</a>
   {{> kthHeader }}
-  <div class="container main">
+  <div class="container">
     <div class="row">
         {{{body}}}
     </div>

server/views/partials/kthFooter.handlebars

@@ -1,5 +1,5 @@
 <!-- add "scroll-to-top" button when scrolled down -->
 <!--indexOff: all-->
 <div id="back-to-top" role="link" aria-label="{{i18n 'back_to_top_label' lang}}"></div>
-<footer class="container">{{{blocks.footer}}}</footer>
+<footer class="kth-footer {{{theme}}}"><div class="kth-footer__content">{{{blocks.footer}}}</div></footer>
 <!--indexOn: all-->

server/views/partials/kthHeader.handlebars

@@ -1,30 +1,51 @@
 <!--indexOff: all-->
-<header>
-  <div class="container-fluid">
-    <div class="container">
-      <div class="header-container__top">
-        {{{blocks.image}}} {{{blocks.title}}}
-        <div id="mobileMenuWrapper">
-          <button id="nav-icon" class="navbar-toggler nav-icon" type="button"
-            title="{{i18n 'button_mobile_menu_label' lang}}" ></button>
-          <nav id="mobileMenu" aria-label="{{i18n 'mobile_menu_aria_label' lang}}" class=" block navbar
-            navbar-expand-lg navbar-light">
-            <div id="mobileMenuContent" class="navbar-collapse collapse">
-              <ul id="mobileMenuList" class="menu navbar-nav mr-auto"></ul>
+<header class="kth-header {{{theme}}}">
+      <div class="kth-header__container">
+        <a href="/" class="kth-logotype">
+          <figure>
+            <img class="blue" alt="Till KTH:s startsida" width="64" height="64" src="{{{proxyPrefix}}}/assets/logotype/logotype-blue.svg">
+            <img class="white" alt="Till KTH:s startsida" width="64" height="64" src="{{{proxyPrefix}}}/assets/logotype/logotype-white.svg">
+          </figure>
+        </a>
+    {{{blocks.megaMenu}}}
+    <ul class="kth-header__tools">
+      <li>
+        <button class="kth-menu-item search">
+          <span>Search</span>
+        </button>
+        <dialog class="kth-menu-panel">
+          <div class="kth-menu-panel__container">
+            <button class="kth-icon-button close">
+              <span class="kth-visually-hidden">Close</span>
+            </button>
+            <div class="kth-menu-panel__content search">
+              <form action="https://kth.se/search" method="get">
+                <div class="kth-search">
+                  <label for="search-input">Search the KTH intranet</label>
+                  <input type="hidden" name="urlFilter" value="intra.kth.se">
+                  <input type="hidden" name="filterLabel" value="Sök på intranät">
+                  <input type="hidden" name="l" value="sv">
+                  <input type="text" id="search-input" name="q" autocomplete="off" autofocus="">
+                  <button type="submit">
+                    <span class="kth-visually-hidden">Search</span>
+                  </button>
+                </div>
+              </form>
             </div>
-          </nav>
-        </div>
-        {{{blocks.secondaryMenu}}}
-      </div>
-      <div class="header-container__bottom">{{{blocks.megaMenu}}} {{{blocks.search}}}</div>
-    </div>
-  </div>
-  <div id="gradientBorder"></div>
-
-  <div class="container articleNavigation">
-    <div class="row justify-content-between">
-      {{breadcrumbs breadcrumbsList lang}}
-    </div>
+          </div>
+      </dialog>
+    </li>
+      <li>
+          {{{languageLink lang translationLinkMessageKey translationLink translationDialogMessageKey}}}
+      </li>
+      <li>
+        <nav class="kth-mega-menu--collapsable">
+          <button class="kth-menu-item">
+            <span>Menu in mobile</span>
+          </button>
+        </nav>
+      </li>
+    </ul>
   </div>
 </header>
 <!--indexOn: all-->

test/mock-api/server.js

@@ -7,15 +7,12 @@ const config = require('./config')
 
 const app = express()
 config.paths.forEach(path => {
-  // console.log('Added path', path.url)
   app[path.method](path.url, (req, res) => {
-    // console.log('Responded on path', path.url)
     res.send(path.response)
   })
 })
 
 app.use((req, res) => {
-  // console.log('Caught request on path', req.url)
   res.send('')
 })
 process.on('SIGTERM', () => {