@iamproperty/components 3.1.0 → 3.2.0

package/package.json

@@ -1,108 +1,96 @@
-{
-  "name": "@iamproperty/components",
-  "description": "Component library for iamproperty",
-  "author": {
-    "name": "iamproperty"
-  },
-  "private": false,
-  "version": "3.1.0",
-  "scripts": {
-    "dev": "npm run copy && vite --host",
-    "build": "npm run compile && vue-tsc --noEmit && vite build --mode lib",
-    "prepack": "npm run build",
-    "build:docs": "npm run copy && vue-tsc --noEmit && vite build",
-    "preview": "vite preview --host",
-    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
-    "compile:ts": "node node_modules/typescript/bin/tsc --project tscompileconfig.json",
-    "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
-    "compile": "npm run compile:sass && npm run compile:ts && npm run compile:js",
-    "copy:svg": "copyfiles -u 2 assets/svg/**/* public/svg && copyfiles -u 2 assets/svg/icons.svg public/svg && copyfiles -u 2 assets/svg/logo.svg public/svg",
-    "copy:img": "copyfiles -u 2 assets/img/**/* public/img",
-    "copy:fonts": "copyfiles -u 2 assets/fonts/**/* public/fonts",
-    "copy:icons": "copyfiles -u 2 assets/favicons/**/* public/",
-    "copy": "npm run copy:svg && npm run copy:img && npm run copy:fonts && npm run copy:icons",
-    "audit": "node local_modules/audit.js",
-    "gen:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
-    "gen:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
-    "test:unit": "jest src",
-    "test:scss": "jest assets/sass/_tests",
-    "visual:components": "viteshot",
-    "visual:docs": "jest tests",
-    "visual:approve": "jest tests --updateSnapshot",
-    "pull-request": "npm run test:unit && npm run test:scss && npm run visual:approve && npm run compile && npm run audit",
-    "deploy:fonts": "copyfiles -u 2 assets/fonts/**/* dist/assets/fonts",
-    "deploy:svg": "copyfiles -u 2 assets/svg/icons.svg dist/svg && copyfiles -u 2 assets/svg/logo.svg dist/svg",
-    "deploy:404": "node local_modules/create404.js"
-  },
-  "dependencies": {
-    "@babel/preset-typescript": "^7.18.6",
-    "@fullhuman/postcss-purgecss": "^4.1.3",
-    "bootstrap": "^5.2.0",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "expect-puppeteer": "^6.1.1",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-image-snapshot": "^5.1.0",
-    "jest-puppeteer": "^6.1.1",
-    "jest-serializer-vue": "^2.0.2",
-    "path": "^0.12.7",
-    "playwright": "^1.25.0",
-    "postcss": "^8.4.16",
-    "postcss-css-variables": "^0.18.0",
-    "puppeteer": "^10.4.0",
-    "sass-true": "^6.1.0",
-    "tslib": "^2.4.0",
-    "url": "^0.11.0",
-    "viteshot": "^0.3.1",
-    "vue": "^3.2.37",
-    "vue-router": "^4.1.3"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.3.4",
-    "@types/jest": "^28.1.7",
-    "@vitejs/plugin-vue": "^3.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
-    "@vue/vue3-jest": "^28.1.0",
-    "babel-jest": "^28.1.3",
-    "jest": "^28.1.3",
-    "sass": "^1.54.3",
-    "terser": "^5.14.2",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.0",
-    "vite-plugin-md": "^0.20.2",
-    "vite-plugin-svg": "^0.7.0",
-    "vue-jest": "^5.0.0-alpha.10",
-    "vue-tsc": "^0.38.4"
-  },
-  "main": "./dist/components.umd.js",
-  "module": "./dist/components.es.js",
-  "files": [
-    "dist/components.umd.js",
-    "dist/components.es.js",
-    "dist/style.css",
-    "assets/*",
-    "src/*"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/components.js",
-      "require": "./dist/components.umd.cjs"
-    }
-  },
-  "license": "UNLICENSED",
-  "registry-url": "https://registry.npmjs.com",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/iamproperty/iamproperty-vue-component-library.git"
-  },
-  "localURL": "http://192.168.0.62:5173"
-}
+{
+  "name": "@iamproperty/components",
+  "description": "Component library for iamproperty",
+  "author": {
+    "name": "iamproperty"
+  },
+  "private": false,
+  "version": "3.2.0",
+  "scripts": {
+    "dev": "npm run copy && vite --host",
+    "build": "npm run compile && vue-tsc --noEmit && vite build --mode lib",
+    "prepack": "npm run build",
+    "build:docs": "npm run copy && vue-tsc --noEmit && vite build",
+    "preview": "vite preview --host",
+    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
+    "compile:ts": "node node_modules/typescript/bin/tsc --project tscompileconfig.json",
+    "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
+    "compile": "npm run compile:sass && npm run compile:ts && npm run compile:js",
+    "copy:svg": "copyfiles -u 2 assets/svg/**/* public/svg && copyfiles -u 2 assets/svg/icons.svg public/svg && copyfiles -u 2 assets/svg/logo.svg public/svg",
+    "copy:img": "copyfiles -u 2 assets/img/**/* public/img",
+    "copy:fonts": "copyfiles -u 2 assets/fonts/**/* public/fonts",
+    "copy:icons": "copyfiles -u 2 assets/favicons/**/* public/",
+    "copy": "npm run copy:svg && npm run copy:img && npm run copy:fonts && npm run copy:icons",
+    "audit": "node local_modules/audit.js",
+    "gen:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
+    "gen:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
+    "test:unit": "jest src",
+    "test:scss": "jest assets/sass/_tests",
+    "visual:components": "viteshot",
+    "visual:docs": "jest tests",
+    "visual:approve": "jest tests --updateSnapshot",
+    "pull-request": "npm run test:unit && npm run test:scss && npm run visual:approve && npm run compile && npm run audit",
+    "deploy:fonts": "copyfiles -u 2 assets/fonts/**/* dist/assets/fonts",
+    "deploy:svg": "copyfiles -u 2 assets/svg/icons.svg dist/svg && copyfiles -u 2 assets/svg/logo.svg dist/svg",
+    "deploy:404": "node local_modules/create404.js"
+  },
+  "dependencies": {
+    "bootstrap": "^5.2.2",
+    "vue": "^3.2.41"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-typescript": "^7.18.6",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/pluginutils": "^4.2.1",
+    "@types/jest": "^29.2.0",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "@vue/test-utils": "^2.2.0",
+    "@vue/vue3-jest": "^28.1.0",
+    "copyfiles": "^2.4.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-image-snapshot": "^5.2.0",
+    "jest-puppeteer": "^6.1.1",
+    "jest-serializer-vue": "^2.0.2",
+    "postcss-css-variables": "^0.18.0",
+    "rollup": "~2.78.0",
+    "sass": "^1.55.0",
+    "sass-true": "^6.1.0",
+    "terser": "^5.15.1",
+    "ts-jest": "^28.0.8",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.8",
+    "vite-plugin-md": "^0.20.4",
+    "vue-router": "^4.1.6",
+    "vue-tsc": "^0.38.9"
+  },
+  "main": "./dist/components.umd.js",
+  "module": "./dist/components.es.js",
+  "files": [
+    "dist/components.umd.js",
+    "dist/components.es.js",
+    "dist/style.css",
+    "assets/*",
+    "src/*"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/components.js",
+      "require": "./dist/components.umd.cjs"
+    }
+  },
+  "license": "UNLICENSED",
+  "registry-url": "https://registry.npmjs.com",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/iamproperty/iamproperty-vue-component-library.git"
+  },
+  "localURL": "http://192.168.0.62:5173"
+}

package/src/components/Accordion/Accordion.screenshot.vue

@@ -1,57 +1,57 @@
-<template>
-
-  <Accordion class="visualtest">
-
-    <AccordionItem title="How long does the auction last?">
-      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-    </AccordionItem>
-
-    <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
-      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-    </AccordionItem>
-
-    <button class="btn btn-secondary mx-auto">View all FAQs</button>
-
-  </Accordion>
-
-  <div class="darkmode">
-    <Accordion class="visualtest">
-
-      <AccordionItem title="How long does the auction last?">
-        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-      </AccordionItem>
-
-      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
-        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-      </AccordionItem>
-
-      <button class="btn btn-secondary mx-auto">View all FAQs</button>
-
-    </Accordion>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import Accordion from './Accordion.vue'
-import AccordionItem from "./AccordionItem.vue";
-
-import "../../../assets/sass/main.scss"
-
-export default defineComponent({
-  name: "AccordionDarkScreenshot",
-  components: {
-    Accordion,
-    AccordionItem
-  }
-});
-</script>
-
-<style lang="scss">
-@use "../../../assets/sass/func" as *;
-
-.darkmode {
-  @include invert-colours();
-  background: var(--colour-primary);
-}
-</style>
+<template>
+
+  <Accordion class="visualtest">
+
+    <AccordionItem title="How long does the auction last?">
+      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+    </AccordionItem>
+
+    <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+    </AccordionItem>
+
+    <button class="btn btn-secondary mx-auto">View all FAQs</button>
+
+  </Accordion>
+
+  <div class="darkmode">
+    <Accordion class="visualtest">
+
+      <AccordionItem title="How long does the auction last?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+
+      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+
+      <button class="btn btn-secondary mx-auto">View all FAQs</button>
+
+    </Accordion>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Accordion from './Accordion.vue'
+import AccordionItem from "./AccordionItem.vue";
+
+import "../../../assets/sass/main.scss"
+
+export default defineComponent({
+  name: "AccordionDarkScreenshot",
+  components: {
+    Accordion,
+    AccordionItem
+  }
+});
+</script>
+
+<style lang="scss">
+@use "../../../assets/sass/func" as *;
+
+.darkmode {
+  @include invert-colours();
+  background: var(--colour-primary);
+}
+</style>

package/src/components/Accordion/Accordion.spec.js

@@ -1,63 +1,63 @@
-import { mount } from '@vue/test-utils'
-import Accordion from './Accordion.vue'
-import AccordionItem from './AccordionItem.vue'
-
-describe('Accordion component', () => {
-  it('renders two details', () => {
-
-    const test = mount(Accordion, {
-      propsData: {
-      },
-      global: {
-        stubs: {
-          'AccordionItem': AccordionItem
-        }
-      },
-      slots: {
-        default: `<AccordionItem title="How long does the auction last?" open>
-        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-      </AccordionItem>
-      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
-        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-      </AccordionItem>`
-      }
-    })
-
-    expect(test.findAll('details').length).toBe(2)
-  })
-
-
-  it('closes the other items when one opens', async () => {
-    const test = mount(Accordion, {
-      propsData: {
-
-      },
-      global: {
-        stubs: {
-          'AccordionItem': AccordionItem
-        }
-      },
-      slots: {
-        default: `<AccordionItem title="How long does the auction last?" open>
-        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-      </AccordionItem>
-      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
-        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
-      </AccordionItem>`
-      }
-    })
-
-    const details = test.findAll('details')
-
-    const firstDetail = details.at(0)
-    const secondDetail = details.at(1)
-    const detailButton = secondDetail?.find('summary');
-
-    expect(firstDetail.attributes('open')).toBe('')
-
-    await detailButton.trigger('click')
-
-    expect(firstDetail.attributes('open')).toBe(undefined)
-  })
-
-})
+import { mount } from '@vue/test-utils'
+import Accordion from './Accordion.vue'
+import AccordionItem from './AccordionItem.vue'
+
+describe('Accordion component', () => {
+  it('renders two details', () => {
+
+    const test = mount(Accordion, {
+      propsData: {
+      },
+      global: {
+        stubs: {
+          'AccordionItem': AccordionItem
+        }
+      },
+      slots: {
+        default: `<AccordionItem title="How long does the auction last?" open>
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>`
+      }
+    })
+
+    expect(test.findAll('details').length).toBe(2)
+  })
+
+
+  it('closes the other items when one opens', async () => {
+    const test = mount(Accordion, {
+      propsData: {
+
+      },
+      global: {
+        stubs: {
+          'AccordionItem': AccordionItem
+        }
+      },
+      slots: {
+        default: `<AccordionItem title="How long does the auction last?" open>
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>`
+      }
+    })
+
+    const details = test.findAll('details')
+
+    const firstDetail = details.at(0)
+    const secondDetail = details.at(1)
+    const detailButton = secondDetail?.find('summary');
+
+    expect(firstDetail.attributes('open')).toBe('')
+
+    await detailButton.trigger('click')
+
+    expect(firstDetail.attributes('open')).toBe(undefined)
+  })
+
+})

package/src/components/Accordion/Accordion.vue

@@ -1,22 +1,22 @@
-<template>
-  <div class="container accordion" ref="wrapper">
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/accordion.scss";
-</style>
-
-<script>
-import accordion from '../../../assets/js/modules/accordion.js'
-
-export default {
-  name: 'Accordion',
-  props: {
-  },
-  mounted(){
-    accordion(this.$refs.wrapper);
-  }
-}
-</script>
+<template>
+  <div class="container accordion" ref="wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/accordion.scss";
+</style>
+
+<script>
+import accordion from '../../../assets/js/modules/accordion.js'
+
+export default {
+  name: 'Accordion',
+  props: {
+  },
+  mounted(){
+    accordion(this.$refs.wrapper);
+  }
+}
+</script>