From fae89b9aa0c8a7b15081ac1a725a2857b88463e3 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 26 Sep 2023 11:51:12 +0200
Subject: [PATCH 1/2] Sync OKR and measurement header title style

---
 src/views/Item/ItemMeasurements.vue | 34 +++++++++++++++++------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/views/Item/ItemMeasurements.vue b/src/views/Item/ItemMeasurements.vue
index 944cc34c0..595b9f69e 100644
--- a/src/views/Item/ItemMeasurements.vue
+++ b/src/views/Item/ItemMeasurements.vue
@@ -1,17 +1,18 @@
 <template>
   <div class="measurements-page">
     <div v-if="allKpis.length" class="measurements-page__header">
-      <h1 class="pkt-txt-24-medium">{{ $t('kpi.heading') }}</h1>
+      <h1 class="pkt-txt-18-medium">{{ $t('kpi.heading') }}</h1>
+    </div>
 
-      <div v-if="hasEditRights" data-mode="dark">
-        <pkt-button
-          :text="$t('admin.measurement.new')"
-          skin="primary"
-          variant="icon-left"
-          icon-name="plus-sign"
-          @onClick="openKpiDrawer(false)"
-        />
-      </div>
+    <div v-if="hasEditRights" class="measurements-page__actions">
+      <pkt-button
+        :text="$t('admin.measurement.new')"
+        skin="primary"
+        size="small"
+        variant="icon-left"
+        icon-name="plus-sign"
+        @onClick="openKpiDrawer(false)"
+      />
     </div>
 
     <page-layout
@@ -201,18 +202,23 @@ export default {
 
 <style lang="scss" scoped>
 .measurements-page {
+  position: relative;
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
 
   &__header {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
     padding: 1.5rem;
   }
 
+  &__actions {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+
   ::v-deep .page__container {
     padding-top: 0.5rem;
   }

From 099e26e4e63785bfa412b2422f89bbb1bc2fb80d Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 26 Sep 2023 11:53:11 +0200
Subject: [PATCH 2/2] Add breadcrumbs to objective and key result panes

---
 package-lock.json                      | 40 ++++++++++-----------
 package.json                           |  4 +--
 src/components/panes/KeyResultPane.vue | 47 +++++++++++++++++-------
 src/components/panes/ObjectivePane.vue | 49 +++++++++++++++++---------
 src/components/panes/PaneWrapper.vue   |  4 +--
 src/styles/main.scss                   |  4 +++
 6 files changed, 95 insertions(+), 53 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c788ce21f..183c49e0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "okr-tracker",
       "version": "3.9.0",
       "dependencies": {
-        "@oslokommune/punkt-vue2": "^5.1.21",
+        "@oslokommune/punkt-vue2": "^8.0.6",
         "d3": "^7.6.1",
         "d3-array": "^3.1.1",
         "d3-axis": "^3.0.0",
@@ -51,7 +51,7 @@
       "devDependencies": {
         "@babel/eslint-parser": "7.16.5",
         "@babel/preset-env": "^7.16.5",
-        "@oslokommune/punkt-css": "^5.1.19",
+        "@oslokommune/punkt-css": "^8.0.5",
         "@vitejs/plugin-vue2": "^2.2.0",
         "env-cmd": "^10.1.0",
         "esbuild": "^0.15.14",
@@ -3410,18 +3410,18 @@
       }
     },
     "node_modules/@oslokommune/punkt-assets": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-3.1.2.tgz",
-      "integrity": "sha512-60DaqN9sGev0f68iJk4PHc8H4Meys+6Rv8OOybga6qGXvEPGIj0pRy5Qn0yw00GB7gR7QTJcdrMB0yIb7XQg9A==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-8.0.0.tgz",
+      "integrity": "sha512-pUlV6mjqsOxylZ3OdzsbalKZSn59uRR5Xi8YMKbf+a5R6wLTcGBUBmPfjJ3PwjTedGdzfXX6O5E58rbAPpYbOA==",
       "peer": true,
       "engines": {
         "node": ">=16.0.0"
       }
     },
     "node_modules/@oslokommune/punkt-css": {
-      "version": "5.1.19",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-5.1.19.tgz",
-      "integrity": "sha512-WZcGox2H32uF/GRggFuIyhVEW/jRe44xT7bZkOrMQuKeNe9MX++WDJG16V6aF9wkdcQXUnHDKy2AOGPV3aizBQ==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-8.0.5.tgz",
+      "integrity": "sha512-hOKX62tW06R7CbsLRnD+Rp32mmzH1mjJtqic0UhT2AJ4Bkhy1CDXc2P69+YxvViZkS+zA7PAelnl4R8yrkm0vw==",
       "engines": {
         "node": ">=16.0.0"
       },
@@ -3430,9 +3430,9 @@
       }
     },
     "node_modules/@oslokommune/punkt-vue2": {
-      "version": "5.1.21",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-5.1.21.tgz",
-      "integrity": "sha512-BMjCokAmv4x83p7xjvLZprHxOjGqNp3VnQ+fcqF51ft0IwRs5GPzlBs9CjvTKry+/iFzWKoZe4k/jDo2dgMLcg==",
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-8.0.6.tgz",
+      "integrity": "sha512-7RutHW651yZIlXmicA48hbl6g6AUBYRn50QZF3oPuiCnbsnhyJik3B3/rRrafahEFFvV1jVH5HMXXb9KRo3C2w==",
       "engines": {
         "node": ">=16.0.0"
       },
@@ -20675,21 +20675,21 @@
       }
     },
     "@oslokommune/punkt-assets": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-3.1.2.tgz",
-      "integrity": "sha512-60DaqN9sGev0f68iJk4PHc8H4Meys+6Rv8OOybga6qGXvEPGIj0pRy5Qn0yw00GB7gR7QTJcdrMB0yIb7XQg9A==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-assets/-/punkt-assets-8.0.0.tgz",
+      "integrity": "sha512-pUlV6mjqsOxylZ3OdzsbalKZSn59uRR5Xi8YMKbf+a5R6wLTcGBUBmPfjJ3PwjTedGdzfXX6O5E58rbAPpYbOA==",
       "peer": true
     },
     "@oslokommune/punkt-css": {
-      "version": "5.1.19",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-5.1.19.tgz",
-      "integrity": "sha512-WZcGox2H32uF/GRggFuIyhVEW/jRe44xT7bZkOrMQuKeNe9MX++WDJG16V6aF9wkdcQXUnHDKy2AOGPV3aizBQ==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-8.0.5.tgz",
+      "integrity": "sha512-hOKX62tW06R7CbsLRnD+Rp32mmzH1mjJtqic0UhT2AJ4Bkhy1CDXc2P69+YxvViZkS+zA7PAelnl4R8yrkm0vw==",
       "requires": {}
     },
     "@oslokommune/punkt-vue2": {
-      "version": "5.1.21",
-      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-5.1.21.tgz",
-      "integrity": "sha512-BMjCokAmv4x83p7xjvLZprHxOjGqNp3VnQ+fcqF51ft0IwRs5GPzlBs9CjvTKry+/iFzWKoZe4k/jDo2dgMLcg==",
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-8.0.6.tgz",
+      "integrity": "sha512-7RutHW651yZIlXmicA48hbl6g6AUBYRn50QZF3oPuiCnbsnhyJik3B3/rRrafahEFFvV1jVH5HMXXb9KRo3C2w==",
       "requires": {}
     },
     "@popperjs/core": {
diff --git a/package.json b/package.json
index f4884ecf9..3f0ad17a1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "node": "18"
   },
   "dependencies": {
-    "@oslokommune/punkt-vue2": "^5.1.21",
+    "@oslokommune/punkt-vue2": "^8.0.6",
     "d3": "^7.6.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.16.5",
     "@babel/preset-env": "^7.16.5",
-    "@oslokommune/punkt-css": "^5.1.19",
+    "@oslokommune/punkt-css": "^8.0.5",
     "@vitejs/plugin-vue2": "^2.2.0",
     "env-cmd": "^10.1.0",
     "esbuild": "^0.15.14",
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index 69e37d672..d2baed15e 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -1,22 +1,24 @@
 <template>
   <pane-wrapper
     ref="pane"
-    :title="$t('general.keyResult')"
     class="key-result-pane"
     closable
     @close="
       $router.push({ name: 'ObjectiveHome', params: { objectiveId: activeObjective.id } })
     "
   >
-    <archived-restore
-      v-if="activeKeyResult.archived"
-      class="mt-size-16"
-      :restore="restore"
-      :object-type="$t('archived.keyResult')"
+    <pkt-breadcrumbs
+      class="pkt-hide-laptop-up"
+      navigation-type="router"
+      :breadcrumbs="breadcrumbs"
     />
 
+    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
+      {{ $t('general.keyResult') }}
+    </pkt-tag>
+
     <div class="key-result-pane__title">
-      <h2 class="pkt-txt-16-medium">{{ activeKeyResult.name }}</h2>
+      <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateKeyResult')"
@@ -103,13 +105,12 @@ import Progress from '@/db/Progress';
 import LineChart from '@/util/LineChart';
 import { getRandomInt } from '@/util';
 import { getKeyResultProgressDetails } from '@/util/keyResultProgress';
-import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import WidgetWrapper from '@/components/widgets/WidgetWrapper.vue';
 import WidgetProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetProgressHistory.vue';
 // import WidgetKeyResultNotes from '@/components/widgets/WidgetKeyResultNotes.vue';
 import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.vue';
-import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
@@ -120,12 +121,13 @@ export default {
   components: {
     PktAlert,
     PktButton,
+    PktBreadcrumbs,
+    PktTag,
     PaneWrapper,
     Widget: WidgetWrapper,
     WidgetProgressHistory,
     // WidgetKeyResultNotes,
     WidgetKeyResultDetails,
-    ArchivedRestore,
     HTMLOutput,
     ProgressModal,
     ProgressBar,
@@ -140,7 +142,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activePeriod']),
+    ...mapState(['activeItem', 'activePeriod']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -169,6 +171,20 @@ export default {
         { unit: this.activeKeyResult.unit }
       )}`;
     },
+
+    breadcrumbs() {
+      return [
+        { text: this.activeItem.name, href: { name: 'ItemHome' } },
+        {
+          text: this.activeObjective.name,
+          href: {
+            name: 'ObjectiveHome',
+            params: { objectiveId: this.activeObjective.id },
+          },
+        },
+        { text: this.activeKeyResult.name },
+      ];
+    },
   },
 
   watch: {
@@ -291,7 +307,6 @@ export default {
   &__title {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
     text-wrap: balance;
 
     .pkt-btn {
@@ -330,4 +345,12 @@ export default {
     }
   }
 }
+
+::v-deep .pkt-breadcrumbs--mobile {
+  width: 100%;
+
+  .pkt-breadcrumbs__text {
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 1026eda94..04d1029ef 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -1,13 +1,22 @@
 <template>
   <pane-wrapper
     ref="pane"
-    :title="$t('general.objective')"
     class="objective-pane"
     closable
     @close="$router.push({ name: 'ItemHome' })"
   >
+    <pkt-breadcrumbs
+      class="pkt-hide-laptop-up"
+      navigation-type="router"
+      :breadcrumbs="breadcrumbs"
+    />
+
+    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
+      {{ $t('general.objective') }}
+    </pkt-tag>
+
     <div class="objective-pane__title">
-      <h2 class="pkt-txt-16-medium">{{ activeObjective.name }}</h2>
+      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
       <pkt-button
         v-if="hasEditRights"
         v-tooltip="$t('btn.updateObjective')"
@@ -31,11 +40,9 @@
       :progression="activeObjective.progression"
     />
 
-    <div v-if="period" class="objective-pane__period">
-      <span class="pkt-txt-16-light">{{ $t('objective.period') }}</span>
-      <pkt-tag text-style="normal-text" skin="beige" size="small">
-        {{ periodDates(period) }}
-      </pkt-tag>
+    <div v-if="period" class="mt-size-16">
+      <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
+      <div class="pkt-txt-14">{{ periodDates(period) }}</div>
     </div>
 
     <div class="objective-pane__key-results">
@@ -91,7 +98,7 @@ import { format } from 'd3-format';
 import { mapGetters, mapState } from 'vuex';
 import { dateLong, periodDates } from '@/util';
 import { db } from '@/config/firebaseConfig';
-import { PktButton, PktTag } from '@oslokommune/punkt-vue2';
+import { PktBreadcrumbs, PktButton, PktTag } from '@oslokommune/punkt-vue2';
 import ProgressBar from '@/components/ProgressBar.vue';
 import PaneWrapper from '@/components/panes/PaneWrapper.vue';
 import LoadingSmall from '@/components/LoadingSmall.vue';
@@ -110,6 +117,7 @@ export default {
     OkrLinkCard,
     HTMLOutput,
     LoadingSmall,
+    PktBreadcrumbs,
     PktButton,
     PktTag,
     ProgressBar,
@@ -123,6 +131,7 @@ export default {
   }),
 
   computed: {
+    ...mapState(['activeItem']),
     ...mapState('okrs', ['activeObjective', 'activeKeyResult']),
     ...mapGetters(['hasEditRights']),
 
@@ -143,6 +152,13 @@ export default {
 
       return null;
     },
+
+    breadcrumbs() {
+      return [
+        { text: this.activeItem.name, href: { name: 'ItemHome' } },
+        { text: this.activeObjective.name },
+      ];
+    },
   },
 
   watch: {
@@ -186,7 +202,6 @@ export default {
   &__title {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
     text-wrap: balance;
 
     .pkt-btn {
@@ -194,14 +209,6 @@ export default {
     }
   }
 
-  &__period > span {
-    &:first-child {
-      display: block;
-      margin-bottom: 0.25rem;
-      color: var(--color-grayscale-60);
-    }
-  }
-
   &__progression {
     margin-top: 1rem;
   }
@@ -271,4 +278,12 @@ export default {
     }
   }
 }
+
+::v-deep .pkt-breadcrumbs--mobile {
+  width: 100%;
+
+  .pkt-breadcrumbs__text {
+    white-space: nowrap;
+  }
+}
 </style>
diff --git a/src/components/panes/PaneWrapper.vue b/src/components/panes/PaneWrapper.vue
index 08e8213a2..14e08f6af 100644
--- a/src/components/panes/PaneWrapper.vue
+++ b/src/components/panes/PaneWrapper.vue
@@ -14,7 +14,7 @@
     </div>
 
     <div class="pane__inner">
-      <div class="pane__header">
+      <div v-if="title" class="pane__header">
         <h1 class="pkt-txt-18-medium">{{ title }}</h1>
       </div>
 
@@ -38,7 +38,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      default: null,
     },
     closable: {
       type: Boolean,
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e52873fba..e4584d949 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,7 @@
+@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' with (
+  $font-path: '@oslokommune/punkt-assets/dist'
+);
+
 @use 'reset';
 @use 'widgets';
 @use 'nav';