feat(KUI-1262): upgrade to KTH Style 10

.azure/prod.parameters.json

@@ -42,7 +42,8 @@
         "LOGGING_LEVEL": "INFO",
         "LOGGING_ACCESS_LOG": "true",
         "UG_REST_AUTH_API_TOKEN_URI": "https://login.ug.kth.se/adfs/",
-        "UG_REST_API_URI": "https://integral-api.sys.kth.se/ug"
+        "UG_REST_API_URI": "https://integral-api.sys.kth.se/ug",
+        "TOOLBAR_URL": "https://www.kth.se/social/toolbar/widget.js"
       }
     },
     "monitorPath": {

.azure/ref.parameters.json

@@ -41,7 +41,8 @@
         "LOGGING_LEVEL": "INFO",
         "LOGGING_ACCESS_LOG": "true",
         "UG_REST_AUTH_API_TOKEN_URI": "https://login.ref.ug.kth.se/adfs/",
-        "UG_REST_API_URI": "https://integral-api.sys.kth.se/test/ug"
+        "UG_REST_API_URI": "https://integral-api.sys.kth.se/test/ug",
+        "TOOLBAR_URL": "https://www-r.referens.sys.kth.se/social/toolbar/widget.js"
       }
     },
     "monitorPath": {

config/serverSettings.js

@@ -138,6 +138,10 @@ module.exports = {
     redisOptions: unpackRedisConfig('REDIS_URI', devRedis),
   },
 
+  toolbar: {
+    url: getEnv('TOOLBAR_URL', devDefaults('https://www-r.referens.sys.kth.se/social/toolbar/widget.js')),
+  },
+
   appInsights: {
     instrumentationKey: getEnv('APPINSIGHTS_INSTRUMENTATIONKEY', ''),
   },

i18n/messages.en.js

@@ -33,6 +33,10 @@ module.exports = {
 
     skip_to_main_content: 'Skip to main content',
     back_to_top_label: 'To page top',
+
+    language_link_lang_sv: 'Svenska',
+    menu_panel_search: 'Search',
+    menu_panel_close: 'Close',
   },
   bankIdAlertText: `Please note that <a href="https://www.kth.se/en/studies/freestanding-courses/applying-to-a-course-if-you-are-not-in-sweden-1.1275545" class="external-link" target="_blank" rel="noopener noreferrer">Students not located in Sweden may have problems attending a course at KTH.</a> <br/> You could meet obstacles if you're required to pay fees or if you do not have a Swedish Mobile BankID. `,
   courseLabels: {

i18n/messages.se.js

@@ -34,6 +34,10 @@ module.exports = {
 
     skip_to_main_content: 'Hoppa till huvudinnehållet',
     back_to_top_label: 'Till sidans topp',
+
+    language_link_lang_en: 'English',
+    menu_panel_search: 'Sök',
+    menu_panel_close: 'Stäng',
   },
   bankIdAlertText:
     'Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.',

package.json

@@ -28,11 +28,12 @@
   "dependencies": {
     "@kth/api-call": "^4.1.0",
     "@kth/kth-node-response": "^1.0.7",
-    "@kth/kth-node-web-common": "^9.2.0",
+    "@kth/kth-node-web-common": "^9.3.0",
     "@kth/log": "^4.0.7",
     "@kth/monitor": "^4.2.1",
     "@kth/server": "^4.1.0",
     "@kth/session": "^3.0.9",
+    "@kth/style": "^0.18.6",
     "@kth/ug-rest-api-helper": "^1.0.25",
     "applicationinsights": "^2.9.5",
     "axios": "^1.6.7",
@@ -49,7 +50,7 @@
     "kth-node-express-routing": "^2.2.0",
     "kth-node-i18n": "^1.0.18",
     "kth-node-redis": "^3.3.0",
-    "kth-style": "^9.1.1",
+    "kth-style": "^10.3.0",
     "react": "^18.2.0",
     "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",

public/css/_shared.scss

@@ -0,0 +1,150 @@
+// This file contains style shared between the four public facing Om kursen apps (kopps-public-react-web, kursinfo-web, kurs-pm-web and kursutveckling-web)
+@use '~@kth/style/scss/tokens/typography.scss' as typography;
+
+#app {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  & > .row {
+    margin: 0;
+
+    &:has(> .kth-local-navigation--mobile) {
+      display: block;
+    }
+    @media (min-width: 992px) {
+      &:has(> .kth-local-navigation--mobile) {
+        display: flex;
+      }
+    }
+  }
+}
+
+#mainContent {
+  padding: 0;
+
+  header {
+    margin-bottom: 1.5rem;
+  }
+}
+
+#mainMenu + #mainContent {
+  @media (min-width: 992px) {
+    padding-left: 30px;
+  }
+}
+
+#mainMenu.kth-local-navigation {
+  padding: 0 20px 15px 0;
+
+  & > * {
+    max-width: 15rem;
+  }
+}
+
+.kth-local-navigation--mobile {
+  h2 {
+    margin-inline-start: 1rem;
+  }
+}
+
+.kth-content.articleNavigation {
+  #breadcrumbs {
+    margin-top: 15px;
+    ol {
+      margin: 0;
+    }
+
+    display: none;
+    @media (min-width: 992px) {
+      display: flex;
+    }
+  }
+}
+
+.kth-alert {
+  margin-bottom: 30px;
+}
+
+.info-box {
+  $yellow: #fcf8e3;
+  $space-between: 14px;
+  padding: 20px;
+  margin-bottom: 30px;
+  background-color: var(--color-background-alt);
+  display: block;
+  word-wrap: break-word;
+
+  h2,
+  h3 {
+    @include typography.font-heading-s;
+    margin-top: 16px;
+    margin-bottom: 14px;
+  }
+  p {
+    margin-bottom: 14px;
+  }
+  & > :first-child {
+    margin-top: 0;
+  }
+  & > :last-child {
+    margin-bottom: 0;
+  }
+
+  &.yellow {
+    background-color: $yellow;
+  }
+}
+
+.pdf-link {
+  margin: 0;
+  &::before {
+    margin-right: 0;
+  }
+}
+
+.person {
+  img {
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+}
+
+p {
+  &#page-sub-heading {
+    font-weight: 600;
+    line-height: 1.375;
+    margin-bottom: 14px;
+    margin-top: 0.325rem;
+
+    font-size: 1.25rem;
+
+    @media (max-width: 767.98px) {
+      font-size: 1rem;
+    }
+  }
+}
+
+#page-sub-heading-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+#page-sub-heading-admin-link {
+  font-size: 1rem;
+  line-height: 1.375;
+  margin-bottom: 14px;
+  margin-top: 0.325rem;
+  text-align: right;
+}
+
+@media (max-width: 991.98px) {
+  #page-sub-heading-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: normal;
+  }
+  #page-sub-heading-admin-link {
+    text-align: left;
+  }
+}

public/css/_sidebar.scss

@@ -0,0 +1,35 @@
+#roundInformationContainer {
+  h2 {
+    margin-bottom: 14px;
+  }
+}
+
+#roundInformationOneCol {
+  margin-top: 14px;
+}
+
+#roundDropdownMenuHeaderWrapper {
+  display: flex;
+  align-items: center;
+  h2 {
+    margin-bottom: 0;
+  }
+  .info-modal {
+    top: 0;
+    bottom: 0;
+  }
+}
+
+#courseLinks {
+  padding-top: 30px;
+}
+
+.round-header-info-box {
+  margin-bottom: 0;
+  padding-bottom: 0;
+
+  :last-child {
+    border-bottom: 1px solid white;
+    padding-bottom: 20px;
+  }
+}