From 78f0531cfe1d6018d4f9ba28730666b759844738 Mon Sep 17 00:00:00 2001 From: Rickard Falk Date: Thu, 25 Jan 2024 15:02:20 +0100 Subject: [PATCH 1/8] chore: remove dependabot ignore --- .github/dependabot.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index a1d10a80..da14b982 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -15,6 +15,3 @@ updates: - web-team reviewers: - 'KTH/web-team' - ignore: - - dependency-name: 'kth-style' - versions: ['9.x', '10.x'] From 087ed087aba4be39e52890408b963a0a36ea3a25 Mon Sep 17 00:00:00 2001 From: Rickard Falk Date: Thu, 25 Jan 2024 15:03:28 +0100 Subject: [PATCH 2/8] chore(deps): update @kth/kth-node-web-common, @kth/style, and kth-style --- package-lock.json | 29 ++++++++++++++++++++++------- package.json | 3 ++- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9e31771..dfabdc78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@kth/log": "^4.0.7", "@kth/monitor": "^4.2.1", "@kth/session": "^3.0.9", + "@kth/style": "^0.11.0", "body-parser": "^1.20.2", "cookie-parser": "^1.4.6", "dotenv": "^16.4.5", @@ -29,7 +30,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", @@ -3369,6 +3370,14 @@ "redis": "^3.1.2" } }, + "node_modules/@kth/style": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@kth/style/-/style-0.11.0.tgz", + "integrity": "sha512-xGzsRbDmlW59f9XszJPkvU0pY6L4Xfj9D8io3bdh8v95LQE72veVAgRhEgU4X3UGbIvMylF83IgJqN7IiE4/UA==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/@microsoft/applicationinsights-web-snippet": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web-snippet/-/applicationinsights-web-snippet-1.0.1.tgz", @@ -12039,9 +12048,9 @@ } }, "node_modules/kth-style": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/kth-style/-/kth-style-9.1.2.tgz", - "integrity": "sha512-lPYyenB9UJeoJghbzUW+tdhnSu/WFhO5Fcj82DPH3FO3AtdOHZz1WC29xn8/FER8PgpAuBngbSy3XPP9RfXMMw==", + "version": "10.0.18", + "resolved": "https://registry.npmjs.org/kth-style/-/kth-style-10.0.18.tgz", + "integrity": "sha512-ey+eLyaKnOQusXfQUuqunw89jwPRzAdx4M0BPI/BWr5j2abBtmq7OLV805xnxIcZPwDVjNxskeuYfaitz4MxdA==", "dependencies": { "bootstrap": "^5.3.3", "jquery": "^3.6.0", @@ -18841,6 +18850,12 @@ "redis": "^3.1.2" } }, + "@kth/style": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@kth/style/-/style-0.11.0.tgz", + "integrity": "sha512-xGzsRbDmlW59f9XszJPkvU0pY6L4Xfj9D8io3bdh8v95LQE72veVAgRhEgU4X3UGbIvMylF83IgJqN7IiE4/UA==", + "requires": {} + }, "@microsoft/applicationinsights-web-snippet": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web-snippet/-/applicationinsights-web-snippet-1.0.1.tgz", @@ -25161,9 +25176,9 @@ } }, "kth-style": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/kth-style/-/kth-style-9.1.2.tgz", - "integrity": "sha512-lPYyenB9UJeoJghbzUW+tdhnSu/WFhO5Fcj82DPH3FO3AtdOHZz1WC29xn8/FER8PgpAuBngbSy3XPP9RfXMMw==", + "version": "10.0.18", + "resolved": "https://registry.npmjs.org/kth-style/-/kth-style-10.0.18.tgz", + "integrity": "sha512-ey+eLyaKnOQusXfQUuqunw89jwPRzAdx4M0BPI/BWr5j2abBtmq7OLV805xnxIcZPwDVjNxskeuYfaitz4MxdA==", "requires": { "bootstrap": "^5.3.3", "jquery": "^3.6.0", diff --git a/package.json b/package.json index b8cb4ae5..367cefae 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@kth/log": "^4.0.7", "@kth/monitor": "^4.2.1", "@kth/session": "^3.0.9", + "@kth/style": "^0.11.0", "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", From 9904d8962df38608e8440757eb21e56fe353d754 Mon Sep 17 00:00:00 2001 From: Rickard Falk Date: Thu, 25 Jan 2024 15:04:03 +0100 Subject: [PATCH 3/8] feat: add routes for @kth/style assets --- server/server.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/server/server.js b/server/server.js index 9cd529a4..574820b2 100644 --- a/server/server.js +++ b/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)) From fa7d34e8766ab5f25f8b2b23a1a14a7502e66f3b Mon Sep 17 00:00:00 2001 From: Rickard Falk Date: Thu, 25 Jan 2024 15:06:36 +0100 Subject: [PATCH 4/8] feat: include styles from @kth/style --- public/css/node-web.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/public/css/node-web.scss b/public/css/node-web.scss index 00b52e1c..005ecb98 100644 --- a/public/css/node-web.scss +++ b/public/css/node-web.scss @@ -1,5 +1,18 @@ -// 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'; + +.container { + @include mixins.container; + padding-block: 30px; } From b3afabd75bd9c25e358b0c0990ad6d14a2dd9fe1 Mon Sep 17 00:00:00 2001 From: Rickard Falk Date: Thu, 25 Jan 2024 15:07:32 +0100 Subject: [PATCH 5/8] feat: use @kth/style in handlebars templates --- server/controllers/adminCtrl.js | 1 + server/controllers/sampleCtrl.js | 1 + server/views/layouts/publicLayout.handlebars | 14 +++- server/views/partials/kthFooter.handlebars | 2 +- server/views/partials/kthHeader.handlebars | 73 +++++++++++++------- 5 files changed, 63 insertions(+), 28 deletions(-) diff --git a/server/controllers/adminCtrl.js b/server/controllers/adminCtrl.js index 2a95f4c7..843e4c85 100644 --- a/server/controllers/adminCtrl.js +++ b/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 }) diff --git a/server/controllers/sampleCtrl.js b/server/controllers/sampleCtrl.js index 9b2a2adf..4012d5ae 100644 --- a/server/controllers/sampleCtrl.js +++ b/server/controllers/sampleCtrl.js @@ -54,6 +54,7 @@ async function getIndex(req, res, next) { lang, proxyPrefix, toolbarUrl: serverConfig.toolbar.url, + theme: 'external', }) } catch (err) { log.error('Error in getIndex', { error: err }) diff --git a/server/views/layouts/publicLayout.handlebars b/server/views/layouts/publicLayout.handlebars index 1dcbf7c3..71423135 100644 --- a/server/views/layouts/publicLayout.handlebars +++ b/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,27 @@ {{/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'}}} + {{i18n 'skip_to_main_content' lang}} {{> kthHeader }} -
+
{{{body}}}
diff --git a/server/views/partials/kthFooter.handlebars b/server/views/partials/kthFooter.handlebars index c18f91b3..feacaf44 100644 --- a/server/views/partials/kthFooter.handlebars +++ b/server/views/partials/kthFooter.handlebars @@ -1,5 +1,5 @@
-
{{{blocks.footer}}}
+
{{{blocks.footer}}}
diff --git a/server/views/partials/kthHeader.handlebars b/server/views/partials/kthHeader.handlebars index 42c2b443..0a5aa66d 100644 --- a/server/views/partials/kthHeader.handlebars +++ b/server/views/partials/kthHeader.handlebars @@ -1,30 +1,53 @@ -
-
-
-
- {{{blocks.image}}} {{{blocks.title}}} -
- - -
- {{{blocks.secondaryMenu}}} -
-
{{{blocks.megaMenu}}} {{{blocks.search}}}
-
-
-
- -
-
- {{breadcrumbs breadcrumbsList lang}} -
+
+ + +
  • + + English + +
    • +
  • + +
    • +
    \ No newline at end of file From b91a6b5ace6cc33aef344e01c13081b4ee79a98b Mon Sep 17 00:00:00 2001 From: Rickard Falk Date: Thu, 25 Jan 2024 15:07:53 +0100 Subject: [PATCH 6/8] feat: style button with @kth/style --- public/js/app/components/Button.jsx | 2 +- public/js/app/components/__snapshots__/Button.test.js.snap | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/js/app/components/Button.jsx b/public/js/app/components/Button.jsx index 78de7be1..b42571d3 100644 --- a/public/js/app/components/Button.jsx +++ b/public/js/app/components/Button.jsx @@ -7,7 +7,7 @@ function Button({ caption = 'N/A', lang = 'sv', onClick = null }) { const doClick = onClick || setButtonClicked return ( <> - {buttonClicked ?

    {i18n.message('template_button_works', lang)}

    : null} diff --git a/public/js/app/components/__snapshots__/Button.test.js.snap b/public/js/app/components/__snapshots__/Button.test.js.snap index 13f416a2..9ae5d04f 100644 --- a/public/js/app/components/__snapshots__/Button.test.js.snap +++ b/public/js/app/components/__snapshots__/Button.test.js.snap @@ -3,7 +3,7 @@ exports[`Component