Bump stylelint from 15.10.0 to 15.10.1

.eslintrc.js

@@ -11,7 +11,6 @@ module.exports = {
     'plugin:vuejs-accessibility/recommended'
   ],
   parserOptions: {
-    parser: '@typescript-eslint/parser', // the typescript-parser for eslint, instead of tslint
     ecmaVersion: 2020,
     ecmaFeatures: {
       jsx: false
@@ -21,27 +20,30 @@ module.exports = {
     '@typescript-eslint/consistent-type-assertions': ['error', { assertionStyle: 'angle-bracket' }],
     '@typescript-eslint/no-non-null-assertion': 'off',
     'arrow-parens': ['error', 'as-needed'],
+    'class-methods-use-this': 'off',
     'comma-dangle': ['error', 'never'],
     'dot-location': ['error', 'object'],
     'implicit-arrow-linebreak': 'off',
+    'import/extensions': 'off',
     'import/no-named-default': 'off',
     'import/order': ['error', { groups: ['builtin', 'external', 'parent', 'sibling', 'index'] }],
     'max-classes-per-file': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-plusplus': 'off',
     'no-shadow': 'off',
+    'no-undef': 'off',
     'no-useless-constructor': 'off',
     'vue/script-indent': ['error', 2, { baseIndent: 1 }],
     'vuejs-accessibility/click-events-have-key-events': 'off',
+    'vuejs-accessibility/no-static-element-interactions': 'off',
     semi: ['error', 'never']
   },
   overrides: [
     {
       files: ['*.vue'],
       rules: {
-        indent: 'off',
-        'class-methods-use-this': 'off'
+        indent: 'off'
       }
     },
     {
@@ -53,5 +55,10 @@ module.exports = {
         mocha: true
       }
     }
-  ]
+  ],
+  settings: {
+    'import/resolver': {
+      typescript: {}
+    }
+  }
 }

.github/workflows/ci.yml

@@ -18,9 +18,10 @@ jobs:
       with:
         submodules: true
     - name: Set up Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         cache: yarn
+        node-version: 20.x
     - name: Install dependencies
       run: yarn install
     - name: Run unit tests
@@ -35,9 +36,10 @@ jobs:
       with:
         submodules: true
     - name: Set up Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         cache: yarn
+        node-version: 20.x
     - name: Install dependencies
       run: yarn install
     - name: Run ESLint

.github/workflows/deploy.yml

@@ -33,9 +33,10 @@ jobs:
     - name: Setup pages
       uses: actions/configure-pages@v2
     - name: Set up Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         cache: yarn
+        node-version: 20.x
     - name: Install dependencies
       run: yarn install
     - name: Build

.nvmrc

@@ -1 +1 @@
-v16
+v20

.stylelintrc.json

@@ -4,7 +4,6 @@
     "stylelint-config-recommended-vue/scss"
   ],
   "rules":   {
-    "function-parentheses-space-inside": "never-single-line",
     "max-nesting-depth":                 null,
     "selector-max-id":                   null
   }

.yarnrc.yml

@@ -1,8 +1,2 @@
 nodeLinker: node-modules
-
-packageExtensions:
-  stylelint-config-recommended-vue@*:
-    dependencies:
-      stylelint-config-recommended: ^6
-
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

cypress.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: '69ff82',
+  fixturesFolder: 'tests/e2e/fixtures',
+  screenshotsFolder: 'tests/e2e/screenshots',
+  videosFolder: 'tests/e2e/videos',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./tests/e2e/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
+    supportFile: 'tests/e2e/support/index.js',
+  },
+})

package.json

@@ -13,75 +13,77 @@
     "ci:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@bugsnag/core": "^7.16.1",
-    "@bugsnag/js": "^7.14.0",
-    "@bugsnag/plugin-vue": "^7.14.0",
-    "cldr-data": "^36.0.0",
+    "@bugsnag/core": "^7.19.0",
+    "@bugsnag/js": "^7.20.2",
+    "@bugsnag/plugin-vue": "^7.19.0",
+    "cldr-data": "^36.0.1",
     "cldrjs": "^0.5.5",
-    "core-js": "^3.19.1",
+    "core-js": "^3.31.0",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
-    "vue": "^2.6.12",
+    "vue": "^2",
     "vue-class-component": "^7.2.6",
-    "vue-i18n": "^8.26.7",
+    "vue-i18n": "^8",
     "vue-property-decorator": "^9.1.2",
-    "vuex": "^3.6.2",
+    "vuex": "^3",
     "vuex-class": "^0.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.16.11",
-    "@cypress/webpack-preprocessor": "^5.10.0",
-    "@types/chai": "^4.2.22",
-    "@types/chai-as-promised": "^7.1.4",
-    "@types/cldrjs": "^0.4.22",
-    "@types/lodash-es": "^4.17.5",
-    "@types/mocha": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.15",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-router": "~4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-plugin-unit-mocha": "~4.5.15",
-    "@vue/cli-plugin-vuex": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
-    "@vue/eslint-config-airbnb": "^6.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/test-utils": "1.3.0",
-    "babel-loader": "^8.2.3",
-    "chai": "^4.3.4",
+    "@babel/core": "^7.22.6",
+    "@babel/preset-env": "^7.22.6",
+    "@cypress/webpack-preprocessor": "^5.17.1",
+    "@types/chai": "^4.3.5",
+    "@types/chai-as-promised": "^7.1.5",
+    "@types/cldrjs": "^0.4.24",
+    "@types/lodash-es": "^4.17.7",
+    "@types/mocha": "^10.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-e2e-cypress": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-plugin-unit-mocha": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "^1",
+    "babel-loader": "^9.1.2",
+    "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-each": "^0.0.1",
-    "cypress": "^9",
-    "eslint": "^7.32.0",
+    "cypress": "^12.16.0",
+    "eslint": "^8.44.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-chai-expect": "^3.0.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-mocha": "^9.0.0",
-    "eslint-plugin-vue": "^8.1.1",
-    "eslint-plugin-vuejs-accessibility": "^1.1.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.0.3",
+    "eslint-plugin-cypress": "^2.13.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vuejs-accessibility": "^2.1.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.3",
     "null-loader": "^4.0.1",
-    "postcss": "^8.4.5",
-    "postcss-html": "^1.3.0",
-    "sass": "^1.43.4",
-    "sass-loader": "^10.2.0",
-    "start-server-and-test": "^1.14.0",
-    "stylelint": "14.2",
-    "stylelint-config-recommended-scss": "^5",
+    "postcss": "^8.4.24",
+    "postcss-html": "^1.5.0",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "start-server-and-test": "^2.0.0",
+    "stylelint": "^15.10.1",
+    "stylelint-config-recommended": "^13.0.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^24.0.0",
-    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-processor-html": "^1.0.0",
-    "stylelint-webpack-plugin": "^2",
-    "typedoc": "^0.22.9",
-    "typescript": "~4.5.2",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4"
+    "stylelint-webpack-plugin": "^4.1.1",
+    "tslib": "^2.6.0",
+    "typedoc": "^0.24.8",
+    "typescript": "^5.1.6",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.88.1"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
@@ -94,5 +96,5 @@
       "npx stylelint --fix"
     ]
   },
-  "packageManager": "yarn@3.4.1"
+  "packageManager": "yarn@3.6.1"
 }

src/assets/styles/_responsive.scss

@@ -2,13 +2,13 @@
    unconstrained. */
 
 @mixin small {
-  @media all and (max-width: 700px) {
+  @media (width <= 700px) {
     @content;
   }
 }
 
 @mixin large {
-  @media all and (min-width: 701px) {
+  @media (width > 700px) {
     @content;
   }
 }

src/components/Question/Question.vue

@@ -2,10 +2,11 @@
   <error v-class="error" v-if="error" />
 
   <div v-else class="question">
-    <i18n tag="p"
-          v-if="selectedOptionTitle"
-          path="question.breadcrumbs"
-          class="question-breadcrumbs">
+    <i18n
+      tag="p"
+      v-if="selectedOptionTitle"
+      path="question.breadcrumbs"
+      class="question-breadcrumbs">
       <template #selection>
         <strong>{{selectedOptionTitle}}</strong>
       </template>
@@ -16,15 +17,15 @@
         <multi-question :prompt="prompt">
           <p class="notes" v-for="(body, ID) in notes" :key="ID">{{body}}</p>
           <p class="regulation" v-if="regulation">
-            {{$t('question.regulation', {part: regulation})}}
+            {{$t('question.regulation', { part: regulation })}}
           </p>
         </multi-question>
       </div>
       <div v-if="!prompt.question.multi" class="question-type-transition" key="single">
         <single-question :prompt="prompt">
           <p class="notes" v-for="(body, ID) in notes" :key="ID">{{body}}</p>
           <p class="regulation" v-if="regulation">
-            {{$t('question.regulation', {part: regulation})}}
+            {{$t('question.regulation', { part: regulation })}}
           </p>
         </single-question>
       </div>

src/components/Question/multi/Checkmark.vue

@@ -1,10 +1,11 @@
 <template>
   <svg width="39" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 23c.483 1.448 2.257 1.759 4 4 7 9 7.092 13 11 13 3.826 0 5.379-8.3 10-17 5.043-9.492
+    <path
+      d="M1 23c.483 1.448 2.257 1.759 4 4 7 9 7.092 13 11 13 3.826 0 5.379-8.3 10-17 5.043-9.492
              13-19.473 13-20 0-2-1-3-3-2-1.333.667-8.667 9.333-22
              26-4.958-4.954-7.958-7.621-9-8-1.563-.568-5 1-4 4z"
-          fill="#fff"
-          fill-rule="evenodd" />
+      fill="#fff"
+      fill-rule="evenodd" />
   </svg>
 </template>
 

src/components/Question/multi/MultiOption.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="option option-multi" :class="{selected: selected}" @click.prevent.stop="clicked()">
+  <div class="option option-multi" :class="{ selected: selected }" @click.prevent.stop="clicked()">
     <checkmark />
     <div class="option-link">
-      <a href="#"
-         @click.prevent.stop="clicked()"
-         :data-cy="option.identifier">
+      <a
+        href="#"
+        @click.prevent.stop="clicked()"
+        :data-cy="option.identifier">
         {{title}}
       </a>
       <p v-if="subtitle" class="option-subtitle">{{subtitle}}</p>

src/components/Question/multi/MultiQuestion.vue

@@ -6,23 +6,25 @@
         <p class="check-all">{{$t('question.checkAll')}}</p>
 
         <div class="question-options">
-          <option-category v-for="(options, category) in optionsByCategory"
-                           :category="category"
-                           :options="options"
-                           :selections="selections"
-                           :surveyId="surveyID"
-                           :key="category"
-                           @toggle="toggle" />
-          <option-category :options="uncategorizedOptions"
-                           :selections="selections"
-                           :surveyId="surveyID"
-                           @toggle="toggle" />
+          <option-category
+            v-for="(options, category) in optionsByCategory"
+            :category="category"
+            :options="options"
+            :selections="selections"
+            :surveyId="surveyID"
+            :key="category"
+            @toggle="toggle" />
+          <option-category
+            :options="uncategorizedOptions"
+            :selections="selections"
+            :surveyId="surveyID"
+            @toggle="toggle" />
         </div>
 
         <slot />
       </div>
       <div class="question-actions">
-        <button @click="answerChosen()" data-cy="nextButton">
+        <button type="button" @click="answerChosen()" data-cy="nextButton">
           {{ nextButtonTitle }}
         </button>
       </div>