Merge pull request #329 from oslokommune/uxsignals

Add UX Signals widget

src/components/UxSignals.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="uxsignals-wrapper" data-uxsignals-embed="panel-ikxmf8p595" :data-uxsignals-mode="mode"></div>
+</template>
+
+<script>
+export default {
+  name: 'UxSignals',
+
+  computed: {
+    mode() {
+      return import.meta.env.PROD ? '' : 'demo';
+    },
+  },
+
+  mounted() {
+    const uxSignalsScript = document.createElement('script');
+    uxSignalsScript.async = true;
+    uxSignalsScript.src = 'https://uxsignals-frontend.uxsignals.app.iterate.no/embed.js';
+    document.head.appendChild(uxSignalsScript);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/colors' as *;
+@use '@/styles/variables' as *;
+
+.uxsignals-wrapper {
+  flex: 2 1 800px;
+}
+
+:deep(.uxsignals-container) {
+  margin: 1rem;
+  padding: 1.5rem;
+  color: $color-purple;
+  font-family: 'OsloSans', serif !important;
+  background-color: #ffffff;
+  border: 3px solid #dae3e5;
+  border-radius: 0;
+
+  @media screen and (min-width: $break-md) {
+    margin-right: 1.5rem;
+    margin-left: 1.5rem;
+  }
+
+  @media screen and (min-width: $break-lg) {
+    margin-right: 2rem;
+    margin-left: 2rem;
+  }
+}
+
+:deep(.uxsignals-embed > div) {
+  padding: 0;
+}
+
+:deep(.uxsignals-header) {
+  h2 {
+    font-weight: 500;
+    font-size: $font-large;
+  }
+}
+
+:deep(.uxsignals-description) {
+  p {
+    font-size: $font-body;
+  }
+}
+
+:deep(.uxsignals-cta-container) {
+  margin: 0;
+
+  button {
+    padding: 16px;
+    color: #ffffff;
+    background-color: $color-purple;
+    border-radius: 0;
+
+    span {
+      font-weight: 500;
+      font-size: $font-body;
+    }
+
+    &:hover {
+      background-color: #1f42aa;
+      outline: 0;
+
+      span {
+        text-decoration: underline;
+        text-underline-offset: 0.3em;
+      }
+    }
+
+    &:focus {
+      background-color: #1f42aa;
+      outline-color: #e0adff;
+    }
+
+    &:active {
+      outline: 0;
+
+      span {
+        text-decoration: none;
+      }
+    }
+  }
+}
+</style>

src/views/District.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="main-container">
+    <ux-signals />
+
     <div class="main-container__cards main-container__cards--district">
       <div class="topics-grid">
         <v-category
@@ -24,15 +26,18 @@
 import { mapState, mapGetters } from 'vuex';
 import VCategory from '@/components/VCategory.vue';
 import VLeaflet from '@/components/VLeaflet.vue';
+import UxSignals from '@/components/UxSignals.vue';
 import { topics, topicNames } from '@/config/topics';
 import districts from '@/config/geoData/districts';
 import { getDistrictName } from '@/util';
 
 export default {
   name: 'District',
+
   components: {
     VCategory,
     VLeaflet,
+    UxSignals,
   },
 
   props: {

src/views/__tests__/__snapshots__/district.spec.js.snap

@@ -4,6 +4,7 @@ exports[`Bydel renders component correctly 1`] = `
 <div
   class="main-container"
 >
+  <ux-signals-stub />
   <div
     class="main-container__cards main-container__cards--district"
   >

src/views/__tests__/district.spec.js

@@ -23,6 +23,7 @@ describe('Bydel', () => {
         plugins: [router, store, i18n],
         stubs: {
           VLeaflet: true,
+          UxSignals: true,
         },
       },
       props: {