From 2dd753686fe0149f14e21b62a2620e6e8847906b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simen=20Heggest=C3=B8yl?=
 <simen.heggestoyl@origo.oslo.kommune.no>
Date: Wed, 18 Oct 2023 13:26:03 +0200
Subject: [PATCH] Add drag & drop indicator icon

---
 package-lock.json                             | 28 +++++++++----------
 package.json                                  |  4 +--
 .../header/OrganizationSelector.vue           |  2 +-
 .../widgets/WidgetKpiCard/WidgetKpiCard.vue   | 20 ++++++++++++-
 src/styles/_forms.scss                        |  1 -
 src/styles/main.scss                          |  4 +++
 6 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ee3fa2aa..8aa6a5255 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "okr-tracker",
       "version": "3.10.0",
       "dependencies": {
-        "@oslokommune/punkt-vue2": "^5.1.21",
+        "@oslokommune/punkt-vue2": "^9.2.6",
         "d3": "^7.6.1",
         "d3-array": "^3.1.1",
         "d3-axis": "^3.0.0",
@@ -52,7 +52,7 @@
         "@babel/eslint-parser": "7.16.5",
         "@babel/preset-env": "^7.16.5",
         "@firebase/rules-unit-testing": "^2.0.7",
-        "@oslokommune/punkt-css": "^5.1.19",
+        "@oslokommune/punkt-css": "^9.2.6",
         "@vitejs/plugin-vue2": "^2.2.0",
         "env-cmd": "^10.1.0",
         "esbuild": "^0.15.14",
@@ -3457,9 +3457,9 @@
       }
     },
     "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": "9.2.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-9.2.6.tgz",
+      "integrity": "sha512-HQ4L95HqHIOJ/Tj7zEevbnSsg0jpVe9Z4swyxe1c5YxapX66R80XGTUTeIpPRwvpUBtYIcm9zmAlFSHCKeGVYA==",
       "engines": {
         "node": ">=16.0.0"
       },
@@ -3468,9 +3468,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": "9.2.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-9.2.6.tgz",
+      "integrity": "sha512-kaBy5naCU4ZQFb1AHU5MSiwU9Kncd2xn0+ImyoOu+mxHE8g0cMoqNiZHmk3Zdsfs/861hVM90z+8nBWO5SfXtA==",
       "engines": {
         "node": ">=16.0.0"
       },
@@ -20897,15 +20897,15 @@
       "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": "9.2.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-css/-/punkt-css-9.2.6.tgz",
+      "integrity": "sha512-HQ4L95HqHIOJ/Tj7zEevbnSsg0jpVe9Z4swyxe1c5YxapX66R80XGTUTeIpPRwvpUBtYIcm9zmAlFSHCKeGVYA==",
       "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": "9.2.6",
+      "resolved": "https://registry.npmjs.org/@oslokommune/punkt-vue2/-/punkt-vue2-9.2.6.tgz",
+      "integrity": "sha512-kaBy5naCU4ZQFb1AHU5MSiwU9Kncd2xn0+ImyoOu+mxHE8g0cMoqNiZHmk3Zdsfs/861hVM90z+8nBWO5SfXtA==",
       "requires": {}
     },
     "@popperjs/core": {
diff --git a/package.json b/package.json
index 93d22d009..670526550 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "node": "18"
   },
   "dependencies": {
-    "@oslokommune/punkt-vue2": "^5.1.21",
+    "@oslokommune/punkt-vue2": "^9.2.6",
     "d3": "^7.6.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -68,7 +68,7 @@
     "@babel/eslint-parser": "7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@firebase/rules-unit-testing": "^2.0.7",
-    "@oslokommune/punkt-css": "^5.1.19",
+    "@oslokommune/punkt-css": "^9.2.6",
     "@vitejs/plugin-vue2": "^2.2.0",
     "env-cmd": "^10.1.0",
     "esbuild": "^0.15.14",
diff --git a/src/components/Navigation/header/OrganizationSelector.vue b/src/components/Navigation/header/OrganizationSelector.vue
index fd616c58a..572b74342 100644
--- a/src/components/Navigation/header/OrganizationSelector.vue
+++ b/src/components/Navigation/header/OrganizationSelector.vue
@@ -81,7 +81,7 @@ export default {
   &__item {
     gap: 0.25rem;
     align-items: center;
-    margin: 0.5rem 1.25rem;
+    margin: 0.6875rem 1.25rem;
 
     .pkt-form-check-input {
       width: 1rem;
diff --git a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
index 9a030867a..722b72c90 100644
--- a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
+++ b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
@@ -4,6 +4,10 @@
     :title="kpi.name"
     :class="['kpi-card-widget', { 'kpi-card-widget--compact': compact }]"
   >
+    <template v-if="hasEditRights" #title-actions>
+      <pkt-icon class="drag-icon" name="drag" />
+    </template>
+
     <div class="kpi-card-widget__inner">
       <div class="kpi-card-widget__trend">
         <period-trend-tag
@@ -33,7 +37,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import {
   filterDuplicatedProgressValues,
   formatKPIValue,
@@ -74,6 +78,7 @@ export default {
 
   computed: {
     ...mapState(['selectedPeriod']),
+    ...mapGetters(['hasEditRights']),
 
     progress() {
       return filterDuplicatedProgressValues(this.progressCollection);
@@ -159,6 +164,19 @@ export default {
     max-width: 50%;
   }
 
+  ::v-deep .widget__header {
+    align-items: flex-start;
+  }
+
+  .drag-icon {
+    --fg-color: var(--color-grayscale-30);
+
+    ::v-deep svg {
+      height: 0.875rem;
+      min-height: 0.875rem;
+    }
+  }
+
   .no-data {
     flex: 1;
     align-self: center;
diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
index 637a1675d..a91197687 100644
--- a/src/styles/_forms.scss
+++ b/src/styles/_forms.scss
@@ -82,7 +82,6 @@
     flex-direction: column;
     gap: 0;
     align-items: flex-start;
-    margin-top: 0.15rem;
     font-weight: 300;
 
     .description {
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';