Merge pull request #218 from oslokommune/alert-component

added an alert component and changed eslint rules
oslokommune · May 6, 2021 · c08a4f1 · c08a4f1
2 parents 894bf05 + 96a5940
commit c08a4f1
Show file tree

Hide file tree

Showing 27 changed files with 789 additions and 1,477 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,20 +12,6 @@ module.exports = {
   extends: ['plugin:vue/recommended', '@vue/airbnb', '@vue/prettier'],
 
   rules: {
-    'vue/component-name-in-template-casing': [
-      'error',
-      'kebab-case',
-      {
-        registeredComponentsOnly: true,
-        ignores: [],
-      },
-    ],
-    'import/extensions': [
-      'error',
-      {
-        svg: 'ignorePackages',
-      },
-    ],
     'no-shadow': ['error', { allow: ['state'] }],
     'no-underscore-dangle': 'off',
     'global-require': 'off',

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Unreleased
 
+# [Release v1.1.20] 2021-05-06
+
+- Add alert component to show warnings to users
+- Changed eslint rules
+
 # [Release v1.1.19] 2021-04-30
 
 - Updated dependencies

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -2,6 +2,11 @@
   <div id="app" class="app" tabindex="-1" :class="{ menuIsOpen, navigationIsOpen }">
     <the-navigation-drawer />
     <div class="app__content">
+      <div v-if="showWarning" class="ok-alert-container">
+        <div class="ok-alert ok-alert--warning">
+          {{ $t('alert.warning') }}
+        </div>
+      </div>
       <the-navigation-topbar />
       <main>
         <router-view />
@@ -14,10 +19,10 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
-import TheNavigationDrawer from './components/TheNavigationDrawer';
-import TheNavigationTopbar from './components/TheNavigationTopbar';
-import TheFooter from './components/TheFooter';
-import Modal from './components/Modal';
+import TheNavigationDrawer from './components/TheNavigationDrawer.vue';
+import TheNavigationTopbar from './components/TheNavigationTopbar.vue';
+import TheFooter from './components/TheFooter.vue';
+import Modal from './components/Modal.vue';
 
 export default {
   name: 'App',
@@ -26,6 +31,7 @@ export default {
 
   data: () => ({
     isOpen: false,
+    showWarning: true,
   }),
 
   metaInfo() {
@@ -90,7 +96,69 @@ document.body.addEventListener('keydown', () => {
 </script>
 
 <style lang="scss">
+$borderRadius: 1.5px;
+
+@mixin boxShadow($color) {
+  box-shadow: 0 1px 3px rgba($color, 0.2), 0 3px 12px rgba($color, 0.05);
+}
+
+@mixin boxColor($color, $shadowColor: #292858) {
+  background: rgba($color, 0.1);
+  @include boxShadow($shadowColor);
+
+  &::after {
+    background: linear-gradient($color, darken($color, 5%));
+  }
+
+  &::before {
+    background: $color;
+  }
+}
+
 .app:focus {
   outline: none;
 }
+
+.ok-alert-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ok-alert {
+  position: relative;
+  max-width: 600px;
+  margin: 1rem 1.5rem 1rem;
+  padding: 1rem 2.5rem 1rem 1.5rem;
+  overflow: hidden;
+  font-size: 1rem;
+  border-radius: $borderRadius;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: none;
+    bottom: 0;
+    left: 0;
+    display: inline-flex;
+    align-items: inherit;
+    justify-content: center;
+    width: 0.25rem;
+    height: 100%;
+    padding-top: 1rem;
+    padding-left: 0;
+    font-size: 1.75rem;
+    font-family: 'Oslo Icons', sans-serif;
+    text-align: center;
+    content: '';
+  }
+}
+
+.ok-alert {
+  @include boxColor(#242433);
+}
+
+.ok-alert--warning {
+  @include boxColor(#f8c66b, darken(#f8c66b, 20%));
+}
 </style>
diff --git a/src/__tests__/__snapshots__/app.spec.js.snap b/src/__tests__/__snapshots__/app.spec.js.snap
@@ -11,6 +11,18 @@ exports[`App shallowmounts app 1`] = `
   <div
     class="app__content"
   >
+    <div
+      class="ok-alert-container"
+    >
+      <div
+        class="ok-alert ok-alert--warning"
+      >
+        
+        Grunnet planlagt vedlikeholdsarbeid vil Bydelsfakta oppleve noe nedetid og/eller feilmeldinger fra og med søndag 09.05. Vi beklager ulempene dette medfører.
+      
+      </div>
+    </div>
+     
     <the-navigation-topbar-stub />
      
     <main>

diff --git a/src/__tests__/app.spec.js b/src/__tests__/app.spec.js
@@ -3,11 +3,11 @@ import Vuex from 'vuex';
 import VueMeta from 'vue-meta';
 import VueRouter from 'vue-router';
 
-import App from '../App';
-import clickOutside from '../directives/clickOutside';
-import setupI18n from '../i18n';
-import mockStore from '../../tests/MockStore';
-import { routes } from '../router';
+import App from '@/App.vue';
+import clickOutside from '@/directives/clickOutside';
+import setupI18n from '@/i18n';
+import mockStore from '@/../tests/MockStore';
+import { routes } from '@/router';
 
 global.scroll = jest.fn();
 window.scroll = jest.fn();

diff --git a/src/__tests__/store.spec.js b/src/__tests__/store.spec.js
@@ -1,6 +1,6 @@
-import { mutations, actions, getters } from '../store';
-import districts from '../config/geoData/districts';
-import { allDistricts, oneDistrict, oneDistrictCompare } from '../../tests/config/expectedDistrictResults';
+import { mutations, actions, getters } from '@/store';
+import districts from '@/config/geoData/districts';
+import { allDistricts, oneDistrict, oneDistrictCompare } from '@/../tests/config/expectedDistrictResults';
 
 const {
   ADD_DISTRICT,

diff --git a/src/components/GraphCard.vue b/src/components/GraphCard.vue
@@ -255,13 +255,13 @@
 <script>
 import { mapGetters, mapState } from 'vuex';
 import { timeParse, timeFormat } from 'd3';
-import GraphInstance from './GraphInstance';
-import downloadSvg from '../util/downloadSvg';
-import downloadPng from '../util/downloadPng';
-import tableToCsv from '../util/tableToCsv';
-import tableToExcel from '../util/tableToExcel';
-import VLeaflet from './VLeaflet';
-import OkIcon from './OkIcon';
+import downloadSvg from '@/util/downloadSvg';
+import downloadPng from '@/util/downloadPng';
+import tableToCsv from '@/util/tableToCsv';
+import tableToExcel from '@/util/tableToExcel';
+import GraphInstance from './GraphInstance.vue';
+import VLeaflet from './VLeaflet.vue';
+import OkIcon from './OkIcon.vue';
 
 export default {
   name: 'GraphCard',
@@ -427,8 +427,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import './../styles/colors';
-@import './../styles/variables';
+@import '@/styles/colors';
+@import '@/styles/variables';
 
 .map-container,
 .about-container {

diff --git a/src/components/GraphInstance.vue b/src/components/GraphInstance.vue
@@ -61,21 +61,21 @@ import { mean } from 'd3';
 import * as Sentry from '@sentry/vue';
 import { mapState } from 'vuex';
 import { dragscroll } from 'vue-dragscroll';
-import TemplateBars from '../util/graph-templates/templateBars';
-import TemplateLines from '../util/graph-templates/templateLines';
-import TemplateLinesMulti from '../util/graph-templates/templateLinesMulti';
-import TemplateAgeDistribution from '../util/graph-templates/templateAgeDistribution';
-import TemplatePyramid from '../util/graph-templates/templatePyramid';
-import TemplateBoxPlot from '../util/graph-templates/templateBoxPlot';
-import TemplatePopulationDetailsTable from '../util/graph-templates/templatePopulationDetailsTable';
-import TemplateTernaryPlot from '../util/graph-templates/templateTernaryPlot';
-import TemplateStackedBars from '../util/graph-templates/templateStackedBars';
-import TemplateLivingConditions from '../util/graph-templates/templateLivingConditions';
-import TemplateComboHistogram from '../util/graph-templates/templateComboHistogram';
-import TemplateBarsAndLines from '../util/graph-templates/templateBarsAndLines';
-import districtNames from '../config/districtNames';
-import Spinner from '../assets/spinner.svg';
-import OkIcon from './OkIcon';
+import TemplateBars from '@/util/graph-templates/templateBars';
+import TemplateLines from '@/util/graph-templates/templateLines';
+import TemplateLinesMulti from '@/util/graph-templates/templateLinesMulti';
+import TemplateAgeDistribution from '@/util/graph-templates/templateAgeDistribution';
+import TemplatePyramid from '@/util/graph-templates/templatePyramid';
+import TemplateBoxPlot from '@/util/graph-templates/templateBoxPlot';
+import TemplatePopulationDetailsTable from '@/util/graph-templates/templatePopulationDetailsTable';
+import TemplateTernaryPlot from '@/util/graph-templates/templateTernaryPlot';
+import TemplateStackedBars from '@/util/graph-templates/templateStackedBars';
+import TemplateLivingConditions from '@/util/graph-templates/templateLivingConditions';
+import TemplateComboHistogram from '@/util/graph-templates/templateComboHistogram';
+import TemplateBarsAndLines from '@/util/graph-templates/templateBarsAndLines';
+import districtNames from '@/config/districtNames';
+import Spinner from '@/assets/spinner.svg';
+import OkIcon from './OkIcon.vue';
 
 export default {
   components: { OkIcon, Spinner },
@@ -321,8 +321,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './../styles/colors';
-@import './../styles/variables';
+@import '@/styles/colors';
+@import '@/styles/variables';
 
 .graph {
   &__shadow {

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import OkIcon from './OkIcon';
+import OkIcon from './OkIcon.vue';
 
 export default {
   name: 'Modal',
@@ -79,7 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/_colors.scss';
+@import '@/styles/_colors.scss';
 
 .overlay {
   position: fixed;

diff --git a/src/components/OkIcon.vue b/src/components/OkIcon.vue
@@ -4,21 +4,21 @@
 
 <script>
 // Import all icons (note the '?inline' suffix)
-import hamburger from '../assets/icons/menu.svg';
-import help from '../assets/icons/help.svg';
-import photo from '../assets/icons/photo.svg';
-import download from '../assets/icons/download.svg';
-import arrowDown from '../assets/icons/arrow-down.svg';
-import mapPin from '../assets/icons/map-pin.svg';
-import graph from '../assets/icons/graph.svg';
-import dataTable from '../assets/icons/data-table.svg';
-import fullscreen from '../assets/icons/fullscreen.svg';
-import fullscreenExit from '../assets/icons/fullscreen-exit.svg';
-import oslologo from '../assets/oslo-logo.svg';
-import cross from '../assets/icons/cross.svg';
-import newWindow from '../assets/icons/new-window.svg';
+import hamburger from '@/assets/icons/menu.svg';
+import help from '@/assets/icons/help.svg';
+import photo from '@/assets/icons/photo.svg';
+import download from '@/assets/icons/download.svg';
+import arrowDown from '@/assets/icons/arrow-down.svg';
+import mapPin from '@/assets/icons/map-pin.svg';
+import graph from '@/assets/icons/graph.svg';
+import dataTable from '@/assets/icons/data-table.svg';
+import fullscreen from '@/assets/icons/fullscreen.svg';
+import fullscreenExit from '@/assets/icons/fullscreen-exit.svg';
+import oslologo from '@/assets/oslo-logo.svg';
+import cross from '@/assets/icons/cross.svg';
+import newWindow from '@/assets/icons/new-window.svg';
 
-/* 
+/*
   available options (optional):
     - 'size' : <String> 'small'
     - 'margin: <Number> px|em|rem

diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
@@ -13,8 +13,8 @@ export default {};
 </script>
 
 <style lang="scss">
-@import '../styles/_variables';
-@import '../styles/_colors';
+@import '@/styles/_variables';
+@import '@/styles/_colors';
 
 .footer {
   margin-bottom: 3rem;

diff --git a/src/components/TheNavigationDrawer.vue b/src/components/TheNavigationDrawer.vue
@@ -119,9 +119,9 @@
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import allDistricts from '../config/allDistricts';
-import predefinedOptions from '../config/predefinedOptions';
-import OsloLogo from '../assets/oslo-logo.svg';
+import allDistricts from '@/config/allDistricts';
+import predefinedOptions from '@/config/predefinedOptions';
+import OsloLogo from '@/assets/oslo-logo.svg';
 
 export default {
   name: 'TheNavigationDrawer',

diff --git a/src/components/TheNavigationTopbar.vue b/src/components/TheNavigationTopbar.vue
@@ -56,9 +56,9 @@
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
-import allDistricts from '../config/allDistricts';
-import { categories, topics, disabledTopics } from '../config/topics';
-import OkIcon from './OkIcon';
+import allDistricts from '@/config/allDistricts';
+import { categories, topics, disabledTopics } from '@/config/topics';
+import OkIcon from './OkIcon.vue';
 
 export default {
   name: 'TheNavigationTopbar',
@@ -140,8 +140,8 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '../styles/colors';
-@import '../styles/variables';
+@import '@/styles/colors';
+@import '@/styles/variables';
 
 .header {
   position: relative;

diff --git a/src/components/__tests__/VCategory.spec.js b/src/components/__tests__/VCategory.spec.js
@@ -1,8 +1,8 @@
 import { mount, RouterLinkStub, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import VCategory from '../VCategory';
-import store from '../../store';
-import setupI18n from '../../i18n';
+import store from '@/store';
+import setupI18n from '@/i18n';
+import VCategory from '../VCategory.vue';
 
 const i18n = setupI18n();
 

diff --git a/src/components/__tests__/graphCard.spec.js b/src/components/__tests__/graphCard.spec.js
@@ -3,12 +3,12 @@ import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import vueResize from 'vue-resize';
 import VueAnalytics from 'vue-analytics';
-import GraphCard from '../GraphCard';
-import clickOutside from '../../directives/clickOutside';
-import { topics } from '../../config/topics';
-import mockStore from '../../../tests/MockStore';
-import setupI18n from '../../i18n';
-import { routes } from '../../router';
+import clickOutside from '@/directives/clickOutside';
+import { topics } from '@/config/topics';
+import mockStore from '@/../tests/MockStore';
+import setupI18n from '@/i18n';
+import { routes } from '@/router';
+import GraphCard from '../GraphCard.vue';
 
 const i18n = setupI18n();