Merge pull request #878 from oslokommune/okr-color-coding

Color coded objectives and key results

src/components/EmptyState.vue

@@ -78,10 +78,10 @@ $-empty-state-skins: (
     gap: 1rem;
     justify-content: center;
     max-width: map.get(variables.$breakpoints, 'phablet');
-    height: 100%;
     margin-right: auto;
     margin-left: auto;
     padding: 2rem 1.5rem;
+    text-align: center;
 
     @include bp('tablet-up') {
       gap: 1.5rem;

src/components/GanttChart.vue

@@ -579,7 +579,7 @@ export default {
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--color-gray);
+  background-color: var(--color-gray-light);
 
   &__inner {
     position: relative;

src/components/KeyResultLinkCard.vue

@@ -31,7 +31,7 @@
           </div>
         </div>
 
-        <progress-bar :progression="progression" compact />
+        <progress-bar :progression="progression" skin="yellow" compact />
       </div>
     </a>
   </router-link>
@@ -111,8 +111,8 @@ export default {
 
   &--active {
     color: var(--color-hover);
-    background-color: var(--color-blue-5);
-    border: 2px solid var(--color-hover);
+    background-color: var(--color-yellow-5);
+    border-color: var(--color-yellow);
   }
 }
 

src/components/ProgressBar.vue

@@ -1,12 +1,11 @@
 <template>
-  <div :class="['progress-bar', { 'progress-bar--compact': compact }]">
+  <div :class="['progress-bar', skinClass, { 'progress-bar--compact': compact }]">
     <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div class="progress-bar__bar">
       <div
         :class="[
           'progress-bar__value',
           { 'progress-bar__value--indicator': progression > 0 && progression < 1 },
-          { 'progress-bar__value--complete': progression >= 1 },
         ]"
         :style="progressValueStyle"
         role="progressbar"
@@ -44,6 +43,11 @@ export default {
       type: Number,
       default: 0,
     },
+    skin: {
+      type: String,
+      default: 'blue',
+      validator: (value) => ['blue', 'yellow', 'green'].includes(value),
+    },
     leftLabel: {
       type: String,
       default: null,
@@ -75,6 +79,13 @@ export default {
     progressValueStyle() {
       return `width: ${this.percent}%`;
     },
+
+    skinClass() {
+      if (this.progression >= 1) {
+        return 'progress-bar--green';
+      }
+      return `progress-bar--${this.skin}`;
+    },
   },
 };
 </script>
@@ -83,6 +94,11 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .progress-bar {
+  // Default skin colors: `blue`
+  --progress-bar-bg: var(--color-grayscale-10);
+  --progress-bar-value: var(--color-blue);
+  --progress-bar-value-indicator: var(--color-blue-dark);
+
   width: 100%;
 
   h4 + &__bar {
@@ -92,7 +108,7 @@ export default {
   &__bar {
     position: relative;
     margin-bottom: 1rem;
-    background-color: var(--color-grayscale-10);
+    background-color: var(--progress-bar-bg);
 
     > span {
       position: absolute;
@@ -104,14 +120,10 @@ export default {
 
   &__value {
     height: 1rem;
-    background-color: var(--color-blue);
+    background-color: var(--progress-bar-value);
 
     &--indicator {
-      border-right: 1px solid var(--color-blue-dark);
-    }
-
-    &--complete {
-      background-color: var(--color-green);
+      border-right: 1px solid var(--progress-bar-value-indicator);
     }
   }
 
@@ -133,5 +145,15 @@ export default {
       height: 0.5rem;
     }
   }
+
+  &--green {
+    --progress-bar-value: var(--color-green);
+    --progress-bar-value-indicator: var(--color-green-dark);
+  }
+
+  &--yellow {
+    --progress-bar-value: var(--color-yellow);
+    --progress-bar-value-indicator: var(--color-yellow-70);
+  }
 }
 </style>

src/components/panes/KeyResultPane.vue

@@ -13,57 +13,75 @@
       :breadcrumbs="breadcrumbs"
     />
 
-    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
-      {{ $t('general.keyResult') }}
-    </pkt-tag>
+    <div class="key-result-pane__details">
+      <div class="key-result-pane__header">
+        <pkt-tag text-style="normal-text" skin="yellow">
+          {{ $t('general.keyResult') }}
+        </pkt-tag>
+
+        <pkt-button
+          v-if="hasEditRights"
+          v-tooltip="$t('btn.updateKeyResult')"
+          skin="tertiary"
+          size="small"
+          variant="icon-only"
+          icon-name="edit"
+          @onClick="$emit('edit-key-result')"
+        />
+      </div>
 
-    <div class="key-result-pane__title">
       <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
-      <pkt-button
-        v-if="hasEditRights"
-        v-tooltip="$t('btn.updateKeyResult')"
-        skin="tertiary"
-        size="small"
-        variant="icon-only"
-        icon-name="edit"
-        @onClick="$emit('edit-key-result')"
+
+      <HTML-output
+        v-if="activeKeyResult.description"
+        class="key-result-pane__description"
+        :html="activeKeyResult.description"
       />
-    </div>
 
-    <HTML-output
-      v-if="activeKeyResult.description"
-      class="key-result-pane__description"
-      :html="activeKeyResult.description"
-    />
+      <progress-bar
+        class="key-result-pane__progression"
+        :title="`${$t('keyResult.progression')}:`"
+        :progression="progression"
+        :right-label="progressionRightLabel"
+        skin="yellow"
+      />
+    </div>
 
-    <progress-bar
-      class="key-result-pane__progression"
-      :title="`${$t('keyResult.progression')}:`"
-      :progression="progression"
-      :right-label="progressionRightLabel"
-    />
+    <div class="key-result-pane__values">
+      <div class="key-result-pane__values-header">
+        <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+        <pkt-button
+          v-if="hasEditRights"
+          :text="$t('keyResult.newValue')"
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="showValueModal = true"
+        />
+      </div>
+
+      <div v-if="isLoading">
+        <loading-small />
+        {{ $t('general.loading') }}
+      </div>
+
+      <widget-progress-history
+        v-else-if="progress.length"
+        :progress="progress"
+        :is-loading="isLoading"
+        @update-record="updateHistoryRecord"
+        @delete-record="deleteHistoryRecord"
+      />
 
-    <widget-progress-history
-      class="key-result-pane__values"
-      :title="$t('keyResult.registeredValues')"
-      :progress="progress"
-      :is-loading="isLoading"
-      @update-record="updateHistoryRecord"
-      @delete-record="deleteHistoryRecord"
-    >
-      <template #title-actions>
-        <div v-if="hasEditRights">
-          <pkt-button
-            :text="$t('keyResult.newValue')"
-            skin="primary"
-            size="small"
-            variant="icon-left"
-            icon-name="plus-sign"
-            @onClick="showValueModal = true"
-          />
-        </div>
-      </template>
-    </widget-progress-history>
+      <empty-state
+        v-else
+        icon="history"
+        :heading="$t('widget.history.empty.heading')"
+        :body="$t('empty.noKeyResultProgress')"
+        skin="warning"
+      />
+    </div>
 
     <widget class="key-result-pane__graph" :title="$t('general.graph')">
       <svg ref="graph" class="graph"></svg>
@@ -114,6 +132,8 @@ import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
+import LoadingSmall from '@/components/LoadingSmall.vue';
+import EmptyState from '@/components/EmptyState.vue';
 
 export default {
   name: 'KeyResultPane',
@@ -131,6 +151,8 @@ export default {
     HTMLOutput,
     ProgressModal,
     ProgressBar,
+    LoadingSmall,
+    EmptyState,
   },
 
   data: () => ({
@@ -304,48 +326,82 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
-  &__title {
+  background-color: #faf6f1;
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border-left: 0.25rem solid var(--color-yellow-50);
+
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
+
+  &__header {
     display: flex;
     justify-content: space-between;
     text-wrap: balance;
 
     .pkt-btn {
-      margin: -0.75rem 0 0 1rem;
+      margin: -0.5rem -0.5rem 0 0;
     }
   }
 
   &__progression {
     margin-top: 1rem;
   }
 
-  &__values,
-  &__graph {
-    padding: 0;
-    border: 0;
-  }
   &__values {
-    margin-top: 1rem;
+    margin-top: 3rem;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+    }
+
+    ::v-deep .widget__header {
+      // Temporarily hide the history widget header. The table is
+      // to be replaced
+      display: none;
+    }
   }
 
-  ::v-deep .widget {
-    padding: 1.5rem 0;
+  &__graph {
+    margin-top: 3rem;
 
-    h3 {
-      @include get-text('pkt-txt-16-medium');
+    ::v-deep .widget__header {
+      h3 {
+        @include get-text('pkt-txt-16-medium');
+      }
     }
   }
 
   &__widgets {
-    ::v-deep .widget {
-      border: 0;
+    margin-top: 3rem;
 
+    ::v-deep .widget__header {
       h3 {
         @include get-text('pkt-txt-16');
       }
     }
   }
 }
 
+.empty {
+  background-color: transparent;
+}
+
+::v-deep .widget {
+  padding: 0;
+  border: 0;
+}
+
 ::v-deep .pkt-breadcrumbs--mobile {
   width: 100%;