diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 0047b60a68..c6af069854 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,20 +1,17 @@ # Changelog -## \[10.8.6\] - 13.09.2023 +## \[10.8.7\] - 07.11.2023 ## Bug Fixes ## Component changes -### Non breaking UI changes +- Topbar - v2 experimental stage - disabled by default (migration involves breaking changes) -- add possibility to disable rotation of the dropdown toggle icon on active state -- add possibility to style bank-id button as secondary +### Non breaking UI changes ## Testing -- E2E tests for dropdown component - ## Design System website -- expand components preview containers to full screen (only in Topbar component for now) +- Add the new Playbook section in Identity diff --git a/package-lock.json b/package-lock.json index 3380519da6..91c014a62f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@swedbankpay/design-guide", - "version": "10.8.6", + "version": "10.8.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@swedbankpay/design-guide", - "version": "10.8.6", + "version": "10.8.7", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -63,11 +63,11 @@ "node-fetch": "^3.3.0", "postcss-less": "^6.0.0", "postcss-loader": "^7.0.2", - "postcss-preset-env": "^8.0.1", - "prettier": "2.8.8", + "postcss-preset-env": "^8.5.1", + "prettier": "^3.0.1", "react-test-renderer": "^18.2.0", "style-loader": "^3.3.1", - "stylelint": "^15.5.0", + "stylelint": "^15.9.0", "stylelint-config-recommended-less": "^1.0.4", "stylelint-config-standard": "^33.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.6.0", @@ -2212,26 +2212,101 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "node_modules/@csstools/cascade-layer-name-parser": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.1.tgz", - "integrity": "sha512-SAAi5DpgJJWkfTvWSaqkgyIsTawa83hMwKrktkj6ra2h+q6ZN57vOGZ6ySHq6RSo+CbP64fA3aPChPBRDDUgtw==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz", + "integrity": "sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" + } + }, + "node_modules/@csstools/color-helpers": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz", + "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/css-calc": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.3.tgz", + "integrity": "sha512-7mJZ8gGRtSQfQKBQFi5N0Z+jzNC0q8bIkwojP1W0w+APzEqHu5wJoGVsvKxVnVklu9F8tW1PikbBRseYnAdv+g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" + } + }, + "node_modules/@csstools/css-color-parser": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.3.1.tgz", + "integrity": "sha512-cehc/DQCyb4hL4fspvyL7WiY+uAy8Iuaz0yTyndC/AyBmxkNpgtSgCSsr0aR4vkaSFVZfNNVlKbjHFwOsPGB1Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/color-helpers": "^3.0.2", + "@csstools/css-calc": "^1.1.3" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz", - "integrity": "sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", + "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", "dev": true, "funding": [ { @@ -2247,26 +2322,32 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.1.1" + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz", - "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz", + "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz", - "integrity": "sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz", + "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==", "dev": true, "funding": [ { @@ -2282,8 +2363,8 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.3.0", - "@csstools/css-tokenizer": "^2.1.1" + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/postcss-cascade-layers": { @@ -2307,29 +2388,65 @@ } }, "node_modules/@csstools/postcss-color-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.0.1.tgz", - "integrity": "sha512-d7379loVBgIiKTQMOUduUctq3CWMeqNpGkLhzuejvuGyA+bWYT1p7n2GzmIwgXwP0CF8DIFtDgvrsvHn3i+tWw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.2.3.tgz", + "integrity": "sha512-b1ptNkr1UWP96EEHqKBWWaV5m/0hgYGctgA/RVZhONeP1L3T/8hwoqDm9bB23yVCfOgE9U93KI9j06+pEkJTvw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-color-mix-function": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-1.0.3.tgz", + "integrity": "sha512-QGXjGugTluqFZWzVf+S3wCiRiI0ukXlYqCi7OnpDotP/zaVTyl/aqZujLFzTOXy24BoWnu89frGMc79ohY5eog==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-font-format-keywords": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.1.tgz", - "integrity": "sha512-NRwT5g/L+lDkridDiHfjNGyHvdSHJOdcXPPZXZOpSfr/AwRxTJ+wsbKAzyBb1stalkr9KjICDr+ofpkk96r0Wg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.2.tgz", + "integrity": "sha512-iKYZlIs6JsNT7NKyRjyIyezTCHLh4L4BBB3F5Nx7Dc4Z/QmBgX+YJFuUSar8IM6KclGiAUFGomXFdYxAwJydlA==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2345,50 +2462,102 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-hwb-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.0.1.tgz", - "integrity": "sha512-IYoJZ/lDgbXr5iRxlIYdTirWRerrcpezfpP6Xr+bfu8KJRgSMQVOxmXpfJwEXQuTBiX+DyVcAz+IbDdOexHq9g==", + "node_modules/@csstools/postcss-gradients-interpolation-method": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-3.0.6.tgz", + "integrity": "sha512-rBOBTat/YMmB0G8VHwKqDEx+RZ4KCU9j42K8LwS0IpZnyThalZZF7BCSsZ6TFlZhcRZKlZy3LLFI2pLqjNVGGA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-hwb-function": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.2.2.tgz", + "integrity": "sha512-W5Y5oaJ382HSlbdGfPf60d7dAK6Hqf10+Be1yZbd/TNNrQ/3dDdV1c07YwOXPQ3PZ6dvFMhxbIbn8EC3ki3nEg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-ic-unit": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.1.tgz", - "integrity": "sha512-718aUIKZJDkbQrINOv6B0I70EZpTB9LzPykGVE/U3gnlXc4tjgvr6/r/G3Hopyn1D5R4BJYcMPI06tVzAgLSMQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.4.tgz", + "integrity": "sha512-9W2ZbV7whWnr1Gt4qYgxMWzbevZMOvclUczT5vk4yR6vS53W/njiiUhtm/jh/BKYwQ1W3PECZjgAd2dH4ebJig==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-is-pseudo-class": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.0.1.tgz", - "integrity": "sha512-N0GC8eRkHDsI8Y3AZ6HLJol1YANNk8PFWsUHOzuDkQW0zbrPL9arYpPTw4cr8yq0rkY/9TRaBDU74QA4ULmKHQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.2.1.tgz", + "integrity": "sha512-AtANdV34kJl04Al62is3eQRk/BfOfyAvEmRJvbt+nx5REqImLC+2XhuE6skgkcPli1l8ONS67wS+l1sBzySc3Q==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "@csstools/selector-specificity": "^2.0.0", "postcss-selector-parser": "^6.0.10" @@ -2396,10 +2565,6 @@ "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } @@ -2440,12 +2605,12 @@ } }, "node_modules/@csstools/postcss-logical-viewport-units": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.2.tgz", - "integrity": "sha512-nnKFywBqRMYjv5jyjSplD/nbAnboUEGFfdxKw1o34Y1nvycgqjQavhKkmxbORxroBBIDwC5y6SfgENcPPUcOxQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.3.tgz", + "integrity": "sha512-6zqcyRg9HSqIHIPMYdt6THWhRmE5/tyHKJQLysn2TeDf/ftq7Em9qwMTx98t2C/7UxIsYS8lOiHHxAVjWn2WUg==", "dev": true, "dependencies": { - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-tokenizer": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" @@ -2458,31 +2623,65 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.1.tgz", - "integrity": "sha512-V9yQqXdje6OfqDf6EL5iGOpi6N0OEczwYK83rql9UapQwFEryXlAehR5AqH8QqLYb6+y31wUXK6vMxCp0920Zg==", + "node_modules/@csstools/postcss-media-minmax": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.0.7.tgz", + "integrity": "sha512-5LGLdu8cJgRPmvkjUNqOPKIKeHbyQmoGKooB5Rh0mp5mLaNI9bl+IjFZ2keY0cztZYsriJsGf6Lu8R5XetuwoQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/css-calc": "^1.1.3", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", + "@csstools/media-query-list-parser": "^2.1.4" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.4.tgz", + "integrity": "sha512-IwyTbyR8E2y3kh6Fhrs251KjKBJeUPV5GlnUKnpU70PRFEN2DolWbf2V4+o/B9+Oj77P/DullLTulWEQ8uFtAA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-nested-calc": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.1.tgz", - "integrity": "sha512-6C5yoF99zFb/C2Sa9Y5V0Y/2dnrjK5xe+h59L0LfdVhfanmJPrttwmfTua9etFRA1TGV46aoVMLEZ1NoHjWikg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.2.tgz", + "integrity": "sha512-jbwrP8rN4e7LNaRcpx3xpMUjhtt34I9OV+zgbcsYAAk6k1+3kODXJBf95/JMYWhu9g1oif7r06QVUgfWsKxCFw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2518,48 +2717,90 @@ } }, "node_modules/@csstools/postcss-oklab-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.0.1.tgz", - "integrity": "sha512-MTj3w6G1TYW0k43sXjw25fY/S+LHXpFIym5NW0oO/hjHFzuz5Uwz93aUvdo/UrrFmxSQeQAYCxmq6NlH3Pf1Hw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.2.3.tgz", + "integrity": "sha512-AgJ2rWMnLCDcbSMTHSqBYn66DNLBym6JpBpCaqmwZ9huGdljjDRuH3DzOYzkgQ7Pm2K92IYIq54IvFHloUOdvA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-progressive-custom-properties": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.0.1.tgz", - "integrity": "sha512-ImgaFLEOhH/EdcrqDF8GSYSlsVR8EQBJ1p9ZhzoHgDkL7/uuzvSZOlRw5dFGFGnjdi7EXK4gsUjy2HU7ChHh3w==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.3.0.tgz", + "integrity": "sha512-Zd8ojyMlsL919TBExQ1I0CTpBDdyCpH/yOdqatZpuC3sd22K4SwC7+Yez3Q/vmXMWSAl+shjNeFZ7JMyxMjK+Q==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-relative-color-syntax": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz", + "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-scope-pseudo-class": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.1.tgz", - "integrity": "sha512-wf2dcsqSQlBHc4HMMqdXdxDx4uYuqH+L08kKj+pmT+743C06STcUEu7ORFFEnqGWlOJ1kmA5BJ3pQU0EdMuA+w==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.2.tgz", + "integrity": "sha512-6Pvo4uexUCXt+Hz5iUtemQAcIuCYnL+ePs1khFR6/xPgC92aQLJ0zGHonWoewiBE+I++4gXK3pr+R1rlOFHe5w==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -2576,12 +2817,14 @@ } }, "node_modules/@csstools/postcss-stepped-value-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.0.1.tgz", - "integrity": "sha512-VimD+M69GsZF/XssivjUwo6jXLgi86ar/gRSH7bautnCULSLxCr/HuY32N4rLRUr7qWF8oF/JTv06ceb66Q1jA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.1.1.tgz", + "integrity": "sha512-YCvdF0GCZK35nhLgs7ippcxDlRVe5QsSht3+EghqTjnYnyl3BbWIN6fYQ1dKWYTJ+7Bgi41TgqQFfJDcp9Xy/w==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" @@ -2595,31 +2838,59 @@ } }, "node_modules/@csstools/postcss-text-decoration-shorthand": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.1.0.tgz", - "integrity": "sha512-ARU7Oh9nplxt99cDONVrDt/c1osWRCtgAzegtvmkn6ed7wfmjeNOlXogK1SlAIfHl6X116kPTuFL7vuyDmlPQw==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.2.4.tgz", + "integrity": "sha512-zPN56sQkS/7YTCVZhOBVCWf7AiNge8fXDl7JVaHLz2RyT4pnyK2gFjckWRLpO0A2xkm1lCgZ0bepYZTwAVd/5A==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { + "@csstools/color-helpers": "^2.1.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-text-decoration-shorthand/node_modules/@csstools/color-helpers": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-2.1.0.tgz", + "integrity": "sha512-OWkqBa7PDzZuJ3Ha7T5bxdSVfSCfTq6K1mbAhbO1MD+GSULGjrp45i5RudyJOedstSarN/3mdwu9upJE7gDXfw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, "node_modules/@csstools/postcss-trigonometric-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.0.1.tgz", - "integrity": "sha512-uGmmVWGHozyWe6+I4w321fKUC034OB1OYW0ZP4ySHA23n+r9y93K+1yrmW+hThpSfApKhaWySoD4I71LLlFUYQ==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.1.1.tgz", + "integrity": "sha512-XcXmHEFfHXhvYz40FtDlA4Fp4NQln2bWTsCwthd2c+MCnYArUYU3YaMqzR5CrKP3pMoGYTBnp5fMqf1HxItNyw==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" @@ -5156,6 +5427,43 @@ "node": ">=0.8" } }, + "node_modules/autoprefixer": { + "version": "10.4.15", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", + "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001520", + "fraction.js": "^4.2.0", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -5574,9 +5882,9 @@ "dev": true }, "node_modules/browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.21.10", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz", + "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==", "dev": true, "funding": [ { @@ -5586,13 +5894,17 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001517", + "electron-to-chromium": "^1.4.477", + "node-releases": "^2.0.13", + "update-browserslist-db": "^1.0.11" }, "bin": { "browserslist": "cli.js" @@ -5734,9 +6046,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001547", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz", - "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==", + "version": "1.0.30001561", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz", + "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==", "dev": true, "funding": [ { @@ -6433,9 +6745,9 @@ } }, "node_modules/css-blank-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.1.tgz", - "integrity": "sha512-uEWT+613bR0lxUAz7BDdk4yZJ1BfzIJ9rmyOFj+p53ZP8rm0BC3nA2YsyswyxjFZsrfRDxe2WERDfKiEZNSXag==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.2.tgz", + "integrity": "sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -6485,9 +6797,9 @@ } }, "node_modules/css-has-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.1.tgz", - "integrity": "sha512-zhsGCKVkBohliMlcsZsv5WF/i4FQ3pkVMtl4yYa7Qpv/PVQebTjh7cjMoT5grW+DBZzunmgHe6skdWawgCYuPQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.2.tgz", + "integrity": "sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==", "dev": true, "dependencies": { "@csstools/selector-specificity": "^2.0.1", @@ -6603,9 +6915,9 @@ } }, "node_modules/css-prefers-color-scheme": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.1.tgz", - "integrity": "sha512-RPRyqJsk5KIjP2+WGhcGCaAJB8ojLbX1mVE8fG9127jQmnp1FNMfNMkERk/w6c4smgC/i5KxcY+Rtaa6/bMdKQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.2.tgz", + "integrity": "sha512-OvFghizHJ45x7nsJJUSYLyQNTzsCU8yWjxAc/nhPQg1pbs18LMoET8N3kOweFDPy0JV0OSXN2iqRFhPBHYOeMA==", "dev": true, "engines": { "node": "^14 || ^16 || >=18" @@ -6666,14 +6978,20 @@ "dev": true }, "node_modules/cssdb": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.4.1.tgz", - "integrity": "sha512-0Q8NOMpXJ3iTDDbUv9grcmQAfdDx4qz+fN/+Md2FGbevT+6+bJNQ2LjB2YIUlLbpBTM32idU1Sb+tb/uGt6/XQ==", + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.7.2.tgz", + "integrity": "sha512-pQPYP7/kch4QlkTcLuUNiNL2v/E+O+VIdotT+ug62/+2B2/jkzs5fMM6RHCzGCZ9C82pODEMSIzRRUzJOrl78g==", "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + } + ] }, "node_modules/cssesc": { "version": "3.0.0", @@ -7273,9 +7591,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", + "version": "1.4.519", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.519.tgz", + "integrity": "sha512-kqs9oGYL4UFVkLKhqCTgBCYZv+wZ374yABDMqlDda9HvlkQxvSr7kgf4hfWVjMieDbX+1MwPHFBsOGCMIBaFKg==", "dev": true }, "node_modules/emittery": { @@ -8822,16 +9140,16 @@ } }, "node_modules/fraction.js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz", + "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==", "dev": true, "engines": { "node": "*" }, "funding": { "type": "patreon", - "url": "https://www.patreon.com/infusion" + "url": "https://github.com/sponsors/rawify" } }, "node_modules/fresh": { @@ -12130,9 +12448,9 @@ "dev": true }, "node_modules/node-releases": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", - "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==", + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", + "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", "dev": true }, "node_modules/nopt": { @@ -12209,7 +12527,7 @@ "node_modules/normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -12801,9 +13119,9 @@ } }, "node_modules/postcss-attribute-case-insensitive": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.1.tgz", - "integrity": "sha512-XNVoIdu/Pskb5OhkM+iHicEVuASeqAjOTCaW8Wcbrd1UVwRukOJr5+zWzFjYxJj55Z/67ViVm9n/1hwF7MGByQ==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz", + "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -12848,28 +13166,35 @@ } }, "node_modules/postcss-color-functional-notation": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.0.1.tgz", - "integrity": "sha512-Q9YDNQddKrl6YBs3229v+ckQINLyAaPfjJqG3jp5NUlP0UMm9+JeuLO1IMpeZy0l+rIE64y4OjUq0o+xhrnnrA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.1.0.tgz", + "integrity": "sha512-w2R4py6zrVE1U7FwNaAc76tNQlG9GLkrBbcFw+VhUjyDDiV28vfZG+l4LyPmpoQpeSJVtu8VgNjE8Jv5SpC7dQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-color-hex-alpha": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.1.tgz", - "integrity": "sha512-1ZTJvmOZXTCsedKeY+Puqwx6AgoyB1KnzSD/CGDIl1NWvDfxi1jYky4R9konw2SAYw0SOeU33EU27ihE59Fp8Q==", + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz", + "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -12886,9 +13211,9 @@ } }, "node_modules/postcss-color-rebeccapurple": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.1.tgz", - "integrity": "sha512-bzZYxBDx/uUGW9HeldOA7J69GdymOZJNz3pG8av27YSgJt9dobl4l+hI/3KAosoRJml/iWceT97pJQj3O/dQDw==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.2.tgz", + "integrity": "sha512-xWf/JmAxVoB5bltHpXk+uGRoGFwu4WDAR7210el+iyvTdqiKpDhtcT8N3edXMoVJY0WHFMrKMUieql/wRNiXkw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -12938,75 +13263,93 @@ } }, "node_modules/postcss-custom-media": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.1.tgz", - "integrity": "sha512-veQwzQkHgBkizxYCV/EBsiK8sFIJA0oQMQL9mpQ3gqFGc2dWlNWURHk4J44i9Q0dFeFCK81vV/Xpj7fyfNQKSA==", + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz", + "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/cascade-layer-name-parser": "^1.0.2", + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-custom-properties": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.1.1.tgz", - "integrity": "sha512-FK4dBiHdzWOosLu3kEAHaYpfcrnMfVV4nP6PT6EFIfWXrtHH9LY8idfTYnEDpq/vgE33mr8ykhs7BjlgcT9agg==", + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.0.tgz", + "integrity": "sha512-q4VgtIKSy5+KcUvQ0WxTjDy9DZjQ5VCXAZ9+tT9+aPMbA0z6s2t1nMw0QHszru1ib5ElkXl9JUpYYU37VVUs7g==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", + "@csstools/cascade-layer-name-parser": "^1.0.4", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-custom-selectors": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.1.tgz", - "integrity": "sha512-CPs3BSdQfKqdrJ3d+3In9ppBPA8GpRy4Bd50jU+BDD6WEZOx8TTIB9i67BfRc2AVEAbRZwDMesreF95598dwhw==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.4.tgz", + "integrity": "sha512-TU2xyUUBTlpiLnwyE2ZYMUIYB41MKMkBZ8X8ntkqRDQ8sdBLhFFsPgNcOliBd5+/zcK51C9hRnSE7hKUJMxQSw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "postcss-selector-parser": "^6.0.4" + "@csstools/cascade-layer-name-parser": "^1.0.3", + "@csstools/css-parser-algorithms": "^2.3.0", + "@csstools/css-tokenizer": "^2.1.1", + "postcss-selector-parser": "^6.0.13" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-dir-pseudo-class": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.1.tgz", - "integrity": "sha512-VjiqVOTz1op7bsiw7qd5CjZ0txA5yJY/oo1wb3f37qdleRTZQ9hzhAtLDqXimn0ZKh9XbtYawc4pmVBnV+LyMA==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.2.tgz", + "integrity": "sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -13071,29 +13414,35 @@ } }, "node_modules/postcss-double-position-gradients": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.1.tgz", - "integrity": "sha512-XE+eKvX96E9cmldwKeRmK8AMxfQfuuHN9Yjerymau5i+fgC/vEY+B+Ke2vnEv4E8EXu8MKdLxi4DzmodusW19Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.4.tgz", + "integrity": "sha512-nUAbUXURemLXIrl4Xoia2tiu5z/n8sY+BVDZApoeT9BlpByyrp02P/lFCRrRvZ/zrGRE+MOGLhk8o7VcMCtPtQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-focus-visible": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.1.tgz", - "integrity": "sha512-azd1NMrLBe5bfKyomui9AMcgIR2zzlqXCTnKjshNDSClmmSO5MauTyflJUqmIwjIhD16+FbPyGV8Nxsly87BjA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.2.tgz", + "integrity": "sha512-f/Vd+EC/GaKElknU59esVcRYr/Y3t1ZAQyL4u2xSOgkDy4bMCmG7VP5cGvj3+BTLNE9ETfEuz2nnt4qkZwTTeA==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -13110,9 +13459,9 @@ } }, "node_modules/postcss-focus-within": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.1.tgz", - "integrity": "sha512-iSpk018Yqn0xwltFR7NHjagyt+e/6u8w50uEnGOcFOddLay5zQFjpJBg6euEZu7wY5WDq83DPpdO99eL+8Er8g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.2.tgz", + "integrity": "sha512-AHAJ89UQBcqBvFgQJE9XasGuwMNkKsGj4D/f9Uk60jFmEBHpAL14DrnSk3Rj+SwZTr/WUG+mh+Rvf8fid/346w==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -13154,9 +13503,9 @@ } }, "node_modules/postcss-image-set-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.1.tgz", - "integrity": "sha512-JnmN9Wo7WjlvM7fg00wzC4d/1kOqau+6v6hteLLqEyBjCuzoFZUU0Te3JphDyxc65RtPNsCujDwYbbs6+vYxCQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.2.tgz", + "integrity": "sha512-Sszjwo0ubETX0Fi5MvpYzsONwrsjeabjMoc5YqHvURFItXgIu3HdCjcVuVKGMPGzKRhgaknmdM5uVWInWPJmeg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -13182,21 +13531,29 @@ } }, "node_modules/postcss-lab-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.0.1.tgz", - "integrity": "sha512-TuvrxsRIA3oWjjjI9T1ZEAolrtrLzYwYDw14GFivy0BkRqUTi4IithbM1aZkZGbAxV4lLwD6rL7MHhfDslUEzg==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.2.3.tgz", + "integrity": "sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } @@ -13269,36 +13626,30 @@ "dev": true }, "node_modules/postcss-logical": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.1.tgz", - "integrity": "sha512-0LIzRgbT42n0q8txcM9SrLkYLjr1LTbRTy80bnKiYXY8tnYGdjkBymwb5XE87o4csW1z8dhKD1VRI6cHBQBQtw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.2.0.tgz", + "integrity": "sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, - "node_modules/postcss-media-minmax": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", @@ -13468,10 +13819,20 @@ } }, "node_modules/postcss-nesting": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.1.0.tgz", - "integrity": "sha512-TVBCeKlUmMyX3sNeSg10yATb2XmAoosp0E1zdlpjrD+L2FrQPmrRTxlRFQh/R0Y4WlQ0butfDwRhzlYuj7y/TA==", + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz", + "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "@csstools/selector-specificity": "^2.0.0", "postcss-selector-parser": "^6.0.10" @@ -13479,10 +13840,6 @@ "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } @@ -13626,9 +13983,9 @@ } }, "node_modules/postcss-opacity-percentage": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz", - "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz", + "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==", "dev": true, "funding": [ { @@ -13641,7 +13998,7 @@ } ], "engines": { - "node": "^12 || ^14 || >=16" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.2" @@ -13711,113 +14068,89 @@ } }, "node_modules/postcss-preset-env": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.0.1.tgz", - "integrity": "sha512-IUbymw0JlUbyVG+I85963PNWgPp3KhnFa1sxU7M/2dGthxV8e297P0VV5W9XcyypoH4hirH2fp1c6fmqh6YnSg==", - "dev": true, - "dependencies": { - "@csstools/postcss-cascade-layers": "^3.0.0", - "@csstools/postcss-color-function": "^2.0.0", - "@csstools/postcss-font-format-keywords": "^2.0.0", - "@csstools/postcss-hwb-function": "^2.0.0", - "@csstools/postcss-ic-unit": "^2.0.0", - "@csstools/postcss-is-pseudo-class": "^3.0.0", - "@csstools/postcss-logical-float-and-clear": "^1.0.0", - "@csstools/postcss-logical-resize": "^1.0.0", - "@csstools/postcss-logical-viewport-units": "^1.0.0", - "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", - "@csstools/postcss-nested-calc": "^2.0.0", - "@csstools/postcss-normalize-display-values": "^2.0.0", - "@csstools/postcss-oklab-function": "^2.0.0", - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "@csstools/postcss-scope-pseudo-class": "^2.0.0", - "@csstools/postcss-stepped-value-functions": "^2.0.0", - "@csstools/postcss-text-decoration-shorthand": "^2.0.0", - "@csstools/postcss-trigonometric-functions": "^2.0.0", - "@csstools/postcss-unset-value": "^2.0.0", - "autoprefixer": "^10.4.13", - "browserslist": "^4.21.4", - "css-blank-pseudo": "^5.0.0", - "css-has-pseudo": "^5.0.0", - "css-prefers-color-scheme": "^8.0.0", - "cssdb": "^7.4.0", - "postcss-attribute-case-insensitive": "^6.0.0", - "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^5.0.0", - "postcss-color-hex-alpha": "^9.0.0", - "postcss-color-rebeccapurple": "^8.0.0", - "postcss-custom-media": "^9.1.0", - "postcss-custom-properties": "^13.1.0", - "postcss-custom-selectors": "^7.1.0", - "postcss-dir-pseudo-class": "^7.0.0", - "postcss-double-position-gradients": "^4.0.0", - "postcss-focus-visible": "^8.0.0", - "postcss-focus-within": "^7.0.0", - "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^4.0.0", - "postcss-image-set-function": "^5.0.0", - "postcss-initial": "^4.0.1", - "postcss-lab-function": "^5.0.0", - "postcss-logical": "^6.0.0", - "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^11.0.0", - "postcss-opacity-percentage": "^1.1.3", - "postcss-overflow-shorthand": "^4.0.0", - "postcss-page-break": "^3.0.4", - "postcss-place": "^8.0.0", - "postcss-pseudo-class-any-link": "^8.0.0", - "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^7.0.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/postcss-preset-env/node_modules/autoprefixer": { - "version": "10.4.13", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", - "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.1.tgz", + "integrity": "sha512-qhWnJJjP6ArLUINWJ38t6Aftxnv9NW6cXK0NuwcLCcRilbuw72dSFLkCVUJeCfHGgJiKzX+pnhkGiki0PEynWg==", "dev": true, "funding": [ { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" + "type": "github", + "url": "https://github.com/sponsors/csstools" }, { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" + "type": "opencollective", + "url": "https://opencollective.com/csstools" } ], "dependencies": { - "browserslist": "^4.21.4", - "caniuse-lite": "^1.0.30001426", - "fraction.js": "^4.2.0", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", + "@csstools/postcss-cascade-layers": "^3.0.1", + "@csstools/postcss-color-function": "^2.2.3", + "@csstools/postcss-color-mix-function": "^1.0.3", + "@csstools/postcss-font-format-keywords": "^2.0.2", + "@csstools/postcss-gradients-interpolation-method": "^3.0.6", + "@csstools/postcss-hwb-function": "^2.2.2", + "@csstools/postcss-ic-unit": "^2.0.4", + "@csstools/postcss-is-pseudo-class": "^3.2.1", + "@csstools/postcss-logical-float-and-clear": "^1.0.1", + "@csstools/postcss-logical-resize": "^1.0.1", + "@csstools/postcss-logical-viewport-units": "^1.0.3", + "@csstools/postcss-media-minmax": "^1.0.4", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.4", + "@csstools/postcss-nested-calc": "^2.0.2", + "@csstools/postcss-normalize-display-values": "^2.0.1", + "@csstools/postcss-oklab-function": "^2.2.3", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", + "@csstools/postcss-relative-color-syntax": "^1.0.2", + "@csstools/postcss-scope-pseudo-class": "^2.0.2", + "@csstools/postcss-stepped-value-functions": "^2.1.1", + "@csstools/postcss-text-decoration-shorthand": "^2.2.4", + "@csstools/postcss-trigonometric-functions": "^2.1.1", + "@csstools/postcss-unset-value": "^2.0.1", + "autoprefixer": "^10.4.14", + "browserslist": "^4.21.9", + "css-blank-pseudo": "^5.0.2", + "css-has-pseudo": "^5.0.2", + "css-prefers-color-scheme": "^8.0.2", + "cssdb": "^7.6.0", + "postcss-attribute-case-insensitive": "^6.0.2", + "postcss-clamp": "^4.1.0", + "postcss-color-functional-notation": "^5.1.0", + "postcss-color-hex-alpha": "^9.0.2", + "postcss-color-rebeccapurple": "^8.0.2", + "postcss-custom-media": "^9.1.5", + "postcss-custom-properties": "^13.2.0", + "postcss-custom-selectors": "^7.1.3", + "postcss-dir-pseudo-class": "^7.0.2", + "postcss-double-position-gradients": "^4.0.4", + "postcss-focus-visible": "^8.0.2", + "postcss-focus-within": "^7.0.2", + "postcss-font-variant": "^5.0.0", + "postcss-gap-properties": "^4.0.1", + "postcss-image-set-function": "^5.0.2", + "postcss-initial": "^4.0.1", + "postcss-lab-function": "^5.2.3", + "postcss-logical": "^6.2.0", + "postcss-nesting": "^11.3.0", + "postcss-opacity-percentage": "^2.0.0", + "postcss-overflow-shorthand": "^4.0.1", + "postcss-page-break": "^3.0.4", + "postcss-place": "^8.0.1", + "postcss-pseudo-class-any-link": "^8.0.2", + "postcss-replace-overflow-wrap": "^4.0.0", + "postcss-selector-not": "^7.0.1", "postcss-value-parser": "^4.2.0" }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, "engines": { - "node": "^10 || ^12 || >=14" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "postcss": "^8.1.0" + "postcss": "^8.4" } }, "node_modules/postcss-pseudo-class-any-link": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.1.tgz", - "integrity": "sha512-CYcLGofbGDhx6BmNFQGFH0cqW+qlXVk9PR4LZ8Y7g24m6TopYKt6FSwhMGAIyme6lQxgB32XMhpYRwZAcPnMXA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.2.tgz", + "integrity": "sha512-FYTIuRE07jZ2CW8POvctRgArQJ43yxhr5vLmImdKUvjFCkR09kh8pIdlCwdx/jbFm7MiW4QP58L4oOUv3grQYA==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -14002,15 +14335,15 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -17178,9 +17511,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz", + "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==", "dev": true, "funding": [ { @@ -17190,6 +17523,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { @@ -17197,7 +17534,7 @@ "picocolors": "^1.0.0" }, "bin": { - "browserslist-lint": "cli.js" + "update-browserslist-db": "cli.js" }, "peerDependencies": { "browserslist": ">= 4.21.0" @@ -19765,29 +20102,52 @@ } }, "@csstools/cascade-layer-name-parser": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.1.tgz", - "integrity": "sha512-SAAi5DpgJJWkfTvWSaqkgyIsTawa83hMwKrktkj6ra2h+q6ZN57vOGZ6ySHq6RSo+CbP64fA3aPChPBRDDUgtw==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz", + "integrity": "sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==", + "dev": true, + "requires": {} + }, + "@csstools/color-helpers": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz", + "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q==", + "dev": true + }, + "@csstools/css-calc": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.3.tgz", + "integrity": "sha512-7mJZ8gGRtSQfQKBQFi5N0Z+jzNC0q8bIkwojP1W0w+APzEqHu5wJoGVsvKxVnVklu9F8tW1PikbBRseYnAdv+g==", "dev": true, "requires": {} }, + "@csstools/css-color-parser": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.3.1.tgz", + "integrity": "sha512-cehc/DQCyb4hL4fspvyL7WiY+uAy8Iuaz0yTyndC/AyBmxkNpgtSgCSsr0aR4vkaSFVZfNNVlKbjHFwOsPGB1Q==", + "dev": true, + "requires": { + "@csstools/color-helpers": "^3.0.2", + "@csstools/css-calc": "^1.1.3" + } + }, "@csstools/css-parser-algorithms": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz", - "integrity": "sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", + "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", "dev": true, "requires": {} }, "@csstools/css-tokenizer": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz", - "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz", + "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==", "dev": true }, "@csstools/media-query-list-parser": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz", - "integrity": "sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz", + "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==", "dev": true, "requires": {} }, @@ -19802,47 +20162,75 @@ } }, "@csstools/postcss-color-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.0.1.tgz", - "integrity": "sha512-d7379loVBgIiKTQMOUduUctq3CWMeqNpGkLhzuejvuGyA+bWYT1p7n2GzmIwgXwP0CF8DIFtDgvrsvHn3i+tWw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.2.3.tgz", + "integrity": "sha512-b1ptNkr1UWP96EEHqKBWWaV5m/0hgYGctgA/RVZhONeP1L3T/8hwoqDm9bB23yVCfOgE9U93KI9j06+pEkJTvw==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + } + }, + "@csstools/postcss-color-mix-function": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-1.0.3.tgz", + "integrity": "sha512-QGXjGugTluqFZWzVf+S3wCiRiI0ukXlYqCi7OnpDotP/zaVTyl/aqZujLFzTOXy24BoWnu89frGMc79ohY5eog==", + "dev": true, + "requires": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" } }, "@csstools/postcss-font-format-keywords": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.1.tgz", - "integrity": "sha512-NRwT5g/L+lDkridDiHfjNGyHvdSHJOdcXPPZXZOpSfr/AwRxTJ+wsbKAzyBb1stalkr9KjICDr+ofpkk96r0Wg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.2.tgz", + "integrity": "sha512-iKYZlIs6JsNT7NKyRjyIyezTCHLh4L4BBB3F5Nx7Dc4Z/QmBgX+YJFuUSar8IM6KclGiAUFGomXFdYxAwJydlA==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, + "@csstools/postcss-gradients-interpolation-method": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-3.0.6.tgz", + "integrity": "sha512-rBOBTat/YMmB0G8VHwKqDEx+RZ4KCU9j42K8LwS0IpZnyThalZZF7BCSsZ6TFlZhcRZKlZy3LLFI2pLqjNVGGA==", + "dev": true, + "requires": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + } + }, "@csstools/postcss-hwb-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.0.1.tgz", - "integrity": "sha512-IYoJZ/lDgbXr5iRxlIYdTirWRerrcpezfpP6Xr+bfu8KJRgSMQVOxmXpfJwEXQuTBiX+DyVcAz+IbDdOexHq9g==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.2.2.tgz", + "integrity": "sha512-W5Y5oaJ382HSlbdGfPf60d7dAK6Hqf10+Be1yZbd/TNNrQ/3dDdV1c07YwOXPQ3PZ6dvFMhxbIbn8EC3ki3nEg==", "dev": true, "requires": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" } }, "@csstools/postcss-ic-unit": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.1.tgz", - "integrity": "sha512-718aUIKZJDkbQrINOv6B0I70EZpTB9LzPykGVE/U3gnlXc4tjgvr6/r/G3Hopyn1D5R4BJYcMPI06tVzAgLSMQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.4.tgz", + "integrity": "sha512-9W2ZbV7whWnr1Gt4qYgxMWzbevZMOvclUczT5vk4yR6vS53W/njiiUhtm/jh/BKYwQ1W3PECZjgAd2dH4ebJig==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" } }, "@csstools/postcss-is-pseudo-class": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.0.1.tgz", - "integrity": "sha512-N0GC8eRkHDsI8Y3AZ6HLJol1YANNk8PFWsUHOzuDkQW0zbrPL9arYpPTw4cr8yq0rkY/9TRaBDU74QA4ULmKHQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.2.1.tgz", + "integrity": "sha512-AtANdV34kJl04Al62is3eQRk/BfOfyAvEmRJvbt+nx5REqImLC+2XhuE6skgkcPli1l8ONS67wS+l1sBzySc3Q==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.0", @@ -19866,29 +20254,41 @@ } }, "@csstools/postcss-logical-viewport-units": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.2.tgz", - "integrity": "sha512-nnKFywBqRMYjv5jyjSplD/nbAnboUEGFfdxKw1o34Y1nvycgqjQavhKkmxbORxroBBIDwC5y6SfgENcPPUcOxQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.3.tgz", + "integrity": "sha512-6zqcyRg9HSqIHIPMYdt6THWhRmE5/tyHKJQLysn2TeDf/ftq7Em9qwMTx98t2C/7UxIsYS8lOiHHxAVjWn2WUg==", + "dev": true, + "requires": { + "@csstools/css-tokenizer": "^2.1.1" + } + }, + "@csstools/postcss-media-minmax": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.0.7.tgz", + "integrity": "sha512-5LGLdu8cJgRPmvkjUNqOPKIKeHbyQmoGKooB5Rh0mp5mLaNI9bl+IjFZ2keY0cztZYsriJsGf6Lu8R5XetuwoQ==", "dev": true, "requires": { - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-calc": "^1.1.3", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", + "@csstools/media-query-list-parser": "^2.1.4" } }, "@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.1.tgz", - "integrity": "sha512-V9yQqXdje6OfqDf6EL5iGOpi6N0OEczwYK83rql9UapQwFEryXlAehR5AqH8QqLYb6+y31wUXK6vMxCp0920Zg==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.4.tgz", + "integrity": "sha512-IwyTbyR8E2y3kh6Fhrs251KjKBJeUPV5GlnUKnpU70PRFEN2DolWbf2V4+o/B9+Oj77P/DullLTulWEQ8uFtAA==", "dev": true, "requires": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" } }, "@csstools/postcss-nested-calc": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.1.tgz", - "integrity": "sha512-6C5yoF99zFb/C2Sa9Y5V0Y/2dnrjK5xe+h59L0LfdVhfanmJPrttwmfTua9etFRA1TGV46aoVMLEZ1NoHjWikg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.2.tgz", + "integrity": "sha512-jbwrP8rN4e7LNaRcpx3xpMUjhtt34I9OV+zgbcsYAAk6k1+3kODXJBf95/JMYWhu9g1oif7r06QVUgfWsKxCFw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -19904,58 +20304,85 @@ } }, "@csstools/postcss-oklab-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.0.1.tgz", - "integrity": "sha512-MTj3w6G1TYW0k43sXjw25fY/S+LHXpFIym5NW0oO/hjHFzuz5Uwz93aUvdo/UrrFmxSQeQAYCxmq6NlH3Pf1Hw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.2.3.tgz", + "integrity": "sha512-AgJ2rWMnLCDcbSMTHSqBYn66DNLBym6JpBpCaqmwZ9huGdljjDRuH3DzOYzkgQ7Pm2K92IYIq54IvFHloUOdvA==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" } }, "@csstools/postcss-progressive-custom-properties": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.0.1.tgz", - "integrity": "sha512-ImgaFLEOhH/EdcrqDF8GSYSlsVR8EQBJ1p9ZhzoHgDkL7/uuzvSZOlRw5dFGFGnjdi7EXK4gsUjy2HU7ChHh3w==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.3.0.tgz", + "integrity": "sha512-Zd8ojyMlsL919TBExQ1I0CTpBDdyCpH/yOdqatZpuC3sd22K4SwC7+Yez3Q/vmXMWSAl+shjNeFZ7JMyxMjK+Q==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, + "@csstools/postcss-relative-color-syntax": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz", + "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==", + "dev": true, + "requires": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + } + }, "@csstools/postcss-scope-pseudo-class": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.1.tgz", - "integrity": "sha512-wf2dcsqSQlBHc4HMMqdXdxDx4uYuqH+L08kKj+pmT+743C06STcUEu7ORFFEnqGWlOJ1kmA5BJ3pQU0EdMuA+w==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.2.tgz", + "integrity": "sha512-6Pvo4uexUCXt+Hz5iUtemQAcIuCYnL+ePs1khFR6/xPgC92aQLJ0zGHonWoewiBE+I++4gXK3pr+R1rlOFHe5w==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" } }, "@csstools/postcss-stepped-value-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.0.1.tgz", - "integrity": "sha512-VimD+M69GsZF/XssivjUwo6jXLgi86ar/gRSH7bautnCULSLxCr/HuY32N4rLRUr7qWF8oF/JTv06ceb66Q1jA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.1.1.tgz", + "integrity": "sha512-YCvdF0GCZK35nhLgs7ippcxDlRVe5QsSht3+EghqTjnYnyl3BbWIN6fYQ1dKWYTJ+7Bgi41TgqQFfJDcp9Xy/w==", "dev": true, "requires": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" } }, "@csstools/postcss-text-decoration-shorthand": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.1.0.tgz", - "integrity": "sha512-ARU7Oh9nplxt99cDONVrDt/c1osWRCtgAzegtvmkn6ed7wfmjeNOlXogK1SlAIfHl6X116kPTuFL7vuyDmlPQw==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.2.4.tgz", + "integrity": "sha512-zPN56sQkS/7YTCVZhOBVCWf7AiNge8fXDl7JVaHLz2RyT4pnyK2gFjckWRLpO0A2xkm1lCgZ0bepYZTwAVd/5A==", "dev": true, "requires": { + "@csstools/color-helpers": "^2.1.0", "postcss-value-parser": "^4.2.0" + }, + "dependencies": { + "@csstools/color-helpers": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-2.1.0.tgz", + "integrity": "sha512-OWkqBa7PDzZuJ3Ha7T5bxdSVfSCfTq6K1mbAhbO1MD+GSULGjrp45i5RudyJOedstSarN/3mdwu9upJE7gDXfw==", + "dev": true + } } }, "@csstools/postcss-trigonometric-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.0.1.tgz", - "integrity": "sha512-uGmmVWGHozyWe6+I4w321fKUC034OB1OYW0ZP4ySHA23n+r9y93K+1yrmW+hThpSfApKhaWySoD4I71LLlFUYQ==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.1.1.tgz", + "integrity": "sha512-XcXmHEFfHXhvYz40FtDlA4Fp4NQln2bWTsCwthd2c+MCnYArUYU3YaMqzR5CrKP3pMoGYTBnp5fMqf1HxItNyw==", "dev": true, "requires": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" } }, "@csstools/postcss-unset-value": { @@ -21980,6 +22407,20 @@ "integrity": "sha1-0IiFvmubv5Q5/gh8dihyRfCoFFA=", "dev": true }, + "autoprefixer": { + "version": "10.4.15", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", + "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", + "dev": true, + "requires": { + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001520", + "fraction.js": "^4.2.0", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + } + }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -22300,15 +22741,15 @@ "dev": true }, "browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.21.10", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz", + "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001517", + "electron-to-chromium": "^1.4.477", + "node-releases": "^2.0.13", + "update-browserslist-db": "^1.0.11" } }, "bser": { @@ -22411,9 +22852,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001547", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz", - "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==", + "version": "1.0.30001561", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz", + "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==", "dev": true }, "chalk": { @@ -22970,9 +23411,9 @@ } }, "css-blank-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.1.tgz", - "integrity": "sha512-uEWT+613bR0lxUAz7BDdk4yZJ1BfzIJ9rmyOFj+p53ZP8rm0BC3nA2YsyswyxjFZsrfRDxe2WERDfKiEZNSXag==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.2.tgz", + "integrity": "sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -23000,9 +23441,9 @@ "dev": true }, "css-has-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.1.tgz", - "integrity": "sha512-zhsGCKVkBohliMlcsZsv5WF/i4FQ3pkVMtl4yYa7Qpv/PVQebTjh7cjMoT5grW+DBZzunmgHe6skdWawgCYuPQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.2.tgz", + "integrity": "sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.1", @@ -23067,9 +23508,9 @@ } }, "css-prefers-color-scheme": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.1.tgz", - "integrity": "sha512-RPRyqJsk5KIjP2+WGhcGCaAJB8ojLbX1mVE8fG9127jQmnp1FNMfNMkERk/w6c4smgC/i5KxcY+Rtaa6/bMdKQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.2.tgz", + "integrity": "sha512-OvFghizHJ45x7nsJJUSYLyQNTzsCU8yWjxAc/nhPQg1pbs18LMoET8N3kOweFDPy0JV0OSXN2iqRFhPBHYOeMA==", "dev": true, "requires": {} }, @@ -23109,9 +23550,9 @@ "dev": true }, "cssdb": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.4.1.tgz", - "integrity": "sha512-0Q8NOMpXJ3iTDDbUv9grcmQAfdDx4qz+fN/+Md2FGbevT+6+bJNQ2LjB2YIUlLbpBTM32idU1Sb+tb/uGt6/XQ==", + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.7.2.tgz", + "integrity": "sha512-pQPYP7/kch4QlkTcLuUNiNL2v/E+O+VIdotT+ug62/+2B2/jkzs5fMM6RHCzGCZ9C82pODEMSIzRRUzJOrl78g==", "dev": true }, "cssesc": { @@ -23580,9 +24021,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", + "version": "1.4.519", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.519.tgz", + "integrity": "sha512-kqs9oGYL4UFVkLKhqCTgBCYZv+wZ374yABDMqlDda9HvlkQxvSr7kgf4hfWVjMieDbX+1MwPHFBsOGCMIBaFKg==", "dev": true }, "emittery": { @@ -24695,9 +25136,9 @@ "dev": true }, "fraction.js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz", + "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==", "dev": true }, "fresh": { @@ -27167,9 +27608,9 @@ "dev": true }, "node-releases": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", - "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==", + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", + "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", "dev": true }, "nopt": { @@ -27227,7 +27668,7 @@ "normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", "dev": true }, "normalize-url": { @@ -27645,9 +28086,9 @@ } }, "postcss-attribute-case-insensitive": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.1.tgz", - "integrity": "sha512-XNVoIdu/Pskb5OhkM+iHicEVuASeqAjOTCaW8Wcbrd1UVwRukOJr5+zWzFjYxJj55Z/67ViVm9n/1hwF7MGByQ==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz", + "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -27673,27 +28114,28 @@ } }, "postcss-color-functional-notation": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.0.1.tgz", - "integrity": "sha512-Q9YDNQddKrl6YBs3229v+ckQINLyAaPfjJqG3jp5NUlP0UMm9+JeuLO1IMpeZy0l+rIE64y4OjUq0o+xhrnnrA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.1.0.tgz", + "integrity": "sha512-w2R4py6zrVE1U7FwNaAc76tNQlG9GLkrBbcFw+VhUjyDDiV28vfZG+l4LyPmpoQpeSJVtu8VgNjE8Jv5SpC7dQ==", "dev": true, "requires": { + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" } }, "postcss-color-hex-alpha": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.1.tgz", - "integrity": "sha512-1ZTJvmOZXTCsedKeY+Puqwx6AgoyB1KnzSD/CGDIl1NWvDfxi1jYky4R9konw2SAYw0SOeU33EU27ihE59Fp8Q==", + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz", + "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, "postcss-color-rebeccapurple": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.1.tgz", - "integrity": "sha512-bzZYxBDx/uUGW9HeldOA7J69GdymOZJNz3pG8av27YSgJt9dobl4l+hI/3KAosoRJml/iWceT97pJQj3O/dQDw==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.2.tgz", + "integrity": "sha512-xWf/JmAxVoB5bltHpXk+uGRoGFwu4WDAR7210el+iyvTdqiKpDhtcT8N3edXMoVJY0WHFMrKMUieql/wRNiXkw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -27721,45 +28163,45 @@ } }, "postcss-custom-media": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.1.tgz", - "integrity": "sha512-veQwzQkHgBkizxYCV/EBsiK8sFIJA0oQMQL9mpQ3gqFGc2dWlNWURHk4J44i9Q0dFeFCK81vV/Xpj7fyfNQKSA==", + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz", + "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==", "dev": true, "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/cascade-layer-name-parser": "^1.0.2", + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" } }, "postcss-custom-properties": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.1.1.tgz", - "integrity": "sha512-FK4dBiHdzWOosLu3kEAHaYpfcrnMfVV4nP6PT6EFIfWXrtHH9LY8idfTYnEDpq/vgE33mr8ykhs7BjlgcT9agg==", + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.0.tgz", + "integrity": "sha512-q4VgtIKSy5+KcUvQ0WxTjDy9DZjQ5VCXAZ9+tT9+aPMbA0z6s2t1nMw0QHszru1ib5ElkXl9JUpYYU37VVUs7g==", "dev": true, "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", + "@csstools/cascade-layer-name-parser": "^1.0.4", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" } }, "postcss-custom-selectors": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.1.tgz", - "integrity": "sha512-CPs3BSdQfKqdrJ3d+3In9ppBPA8GpRy4Bd50jU+BDD6WEZOx8TTIB9i67BfRc2AVEAbRZwDMesreF95598dwhw==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.4.tgz", + "integrity": "sha512-TU2xyUUBTlpiLnwyE2ZYMUIYB41MKMkBZ8X8ntkqRDQ8sdBLhFFsPgNcOliBd5+/zcK51C9hRnSE7hKUJMxQSw==", "dev": true, "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "postcss-selector-parser": "^6.0.4" + "@csstools/cascade-layer-name-parser": "^1.0.3", + "@csstools/css-parser-algorithms": "^2.3.0", + "@csstools/css-tokenizer": "^2.1.1", + "postcss-selector-parser": "^6.0.13" } }, "postcss-dir-pseudo-class": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.1.tgz", - "integrity": "sha512-VjiqVOTz1op7bsiw7qd5CjZ0txA5yJY/oo1wb3f37qdleRTZQ9hzhAtLDqXimn0ZKh9XbtYawc4pmVBnV+LyMA==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.2.tgz", + "integrity": "sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -27794,28 +28236,28 @@ "requires": {} }, "postcss-double-position-gradients": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.1.tgz", - "integrity": "sha512-XE+eKvX96E9cmldwKeRmK8AMxfQfuuHN9Yjerymau5i+fgC/vEY+B+Ke2vnEv4E8EXu8MKdLxi4DzmodusW19Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.4.tgz", + "integrity": "sha512-nUAbUXURemLXIrl4Xoia2tiu5z/n8sY+BVDZApoeT9BlpByyrp02P/lFCRrRvZ/zrGRE+MOGLhk8o7VcMCtPtQ==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" } }, "postcss-focus-visible": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.1.tgz", - "integrity": "sha512-azd1NMrLBe5bfKyomui9AMcgIR2zzlqXCTnKjshNDSClmmSO5MauTyflJUqmIwjIhD16+FbPyGV8Nxsly87BjA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.2.tgz", + "integrity": "sha512-f/Vd+EC/GaKElknU59esVcRYr/Y3t1ZAQyL4u2xSOgkDy4bMCmG7VP5cGvj3+BTLNE9ETfEuz2nnt4qkZwTTeA==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" } }, "postcss-focus-within": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.1.tgz", - "integrity": "sha512-iSpk018Yqn0xwltFR7NHjagyt+e/6u8w50uEnGOcFOddLay5zQFjpJBg6euEZu7wY5WDq83DPpdO99eL+8Er8g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.2.tgz", + "integrity": "sha512-AHAJ89UQBcqBvFgQJE9XasGuwMNkKsGj4D/f9Uk60jFmEBHpAL14DrnSk3Rj+SwZTr/WUG+mh+Rvf8fid/346w==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -27836,9 +28278,9 @@ "requires": {} }, "postcss-image-set-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.1.tgz", - "integrity": "sha512-JnmN9Wo7WjlvM7fg00wzC4d/1kOqau+6v6hteLLqEyBjCuzoFZUU0Te3JphDyxc65RtPNsCujDwYbbs6+vYxCQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.2.tgz", + "integrity": "sha512-Sszjwo0ubETX0Fi5MvpYzsONwrsjeabjMoc5YqHvURFItXgIu3HdCjcVuVKGMPGzKRhgaknmdM5uVWInWPJmeg==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -27852,13 +28294,15 @@ "requires": {} }, "postcss-lab-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.0.1.tgz", - "integrity": "sha512-TuvrxsRIA3oWjjjI9T1ZEAolrtrLzYwYDw14GFivy0BkRqUTi4IithbM1aZkZGbAxV4lLwD6rL7MHhfDslUEzg==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.2.3.tgz", + "integrity": "sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" } }, "postcss-less": { @@ -27906,21 +28350,14 @@ } }, "postcss-logical": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.1.tgz", - "integrity": "sha512-0LIzRgbT42n0q8txcM9SrLkYLjr1LTbRTy80bnKiYXY8tnYGdjkBymwb5XE87o4csW1z8dhKD1VRI6cHBQBQtw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.2.0.tgz", + "integrity": "sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, - "postcss-media-minmax": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true, - "requires": {} - }, "postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", @@ -28031,9 +28468,9 @@ } }, "postcss-nesting": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.1.0.tgz", - "integrity": "sha512-TVBCeKlUmMyX3sNeSg10yATb2XmAoosp0E1zdlpjrD+L2FrQPmrRTxlRFQh/R0Y4WlQ0butfDwRhzlYuj7y/TA==", + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz", + "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.0", @@ -28126,9 +28563,9 @@ } }, "postcss-opacity-percentage": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz", - "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz", + "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==", "dev": true, "requires": {} }, @@ -28168,86 +28605,73 @@ } }, "postcss-preset-env": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.0.1.tgz", - "integrity": "sha512-IUbymw0JlUbyVG+I85963PNWgPp3KhnFa1sxU7M/2dGthxV8e297P0VV5W9XcyypoH4hirH2fp1c6fmqh6YnSg==", - "dev": true, - "requires": { - "@csstools/postcss-cascade-layers": "^3.0.0", - "@csstools/postcss-color-function": "^2.0.0", - "@csstools/postcss-font-format-keywords": "^2.0.0", - "@csstools/postcss-hwb-function": "^2.0.0", - "@csstools/postcss-ic-unit": "^2.0.0", - "@csstools/postcss-is-pseudo-class": "^3.0.0", - "@csstools/postcss-logical-float-and-clear": "^1.0.0", - "@csstools/postcss-logical-resize": "^1.0.0", - "@csstools/postcss-logical-viewport-units": "^1.0.0", - "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", - "@csstools/postcss-nested-calc": "^2.0.0", - "@csstools/postcss-normalize-display-values": "^2.0.0", - "@csstools/postcss-oklab-function": "^2.0.0", - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "@csstools/postcss-scope-pseudo-class": "^2.0.0", - "@csstools/postcss-stepped-value-functions": "^2.0.0", - "@csstools/postcss-text-decoration-shorthand": "^2.0.0", - "@csstools/postcss-trigonometric-functions": "^2.0.0", - "@csstools/postcss-unset-value": "^2.0.0", - "autoprefixer": "^10.4.13", - "browserslist": "^4.21.4", - "css-blank-pseudo": "^5.0.0", - "css-has-pseudo": "^5.0.0", - "css-prefers-color-scheme": "^8.0.0", - "cssdb": "^7.4.0", - "postcss-attribute-case-insensitive": "^6.0.0", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.1.tgz", + "integrity": "sha512-qhWnJJjP6ArLUINWJ38t6Aftxnv9NW6cXK0NuwcLCcRilbuw72dSFLkCVUJeCfHGgJiKzX+pnhkGiki0PEynWg==", + "dev": true, + "requires": { + "@csstools/postcss-cascade-layers": "^3.0.1", + "@csstools/postcss-color-function": "^2.2.3", + "@csstools/postcss-color-mix-function": "^1.0.3", + "@csstools/postcss-font-format-keywords": "^2.0.2", + "@csstools/postcss-gradients-interpolation-method": "^3.0.6", + "@csstools/postcss-hwb-function": "^2.2.2", + "@csstools/postcss-ic-unit": "^2.0.4", + "@csstools/postcss-is-pseudo-class": "^3.2.1", + "@csstools/postcss-logical-float-and-clear": "^1.0.1", + "@csstools/postcss-logical-resize": "^1.0.1", + "@csstools/postcss-logical-viewport-units": "^1.0.3", + "@csstools/postcss-media-minmax": "^1.0.4", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.4", + "@csstools/postcss-nested-calc": "^2.0.2", + "@csstools/postcss-normalize-display-values": "^2.0.1", + "@csstools/postcss-oklab-function": "^2.2.3", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", + "@csstools/postcss-relative-color-syntax": "^1.0.2", + "@csstools/postcss-scope-pseudo-class": "^2.0.2", + "@csstools/postcss-stepped-value-functions": "^2.1.1", + "@csstools/postcss-text-decoration-shorthand": "^2.2.4", + "@csstools/postcss-trigonometric-functions": "^2.1.1", + "@csstools/postcss-unset-value": "^2.0.1", + "autoprefixer": "^10.4.14", + "browserslist": "^4.21.9", + "css-blank-pseudo": "^5.0.2", + "css-has-pseudo": "^5.0.2", + "css-prefers-color-scheme": "^8.0.2", + "cssdb": "^7.6.0", + "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^5.0.0", - "postcss-color-hex-alpha": "^9.0.0", - "postcss-color-rebeccapurple": "^8.0.0", - "postcss-custom-media": "^9.1.0", - "postcss-custom-properties": "^13.1.0", - "postcss-custom-selectors": "^7.1.0", - "postcss-dir-pseudo-class": "^7.0.0", - "postcss-double-position-gradients": "^4.0.0", - "postcss-focus-visible": "^8.0.0", - "postcss-focus-within": "^7.0.0", + "postcss-color-functional-notation": "^5.1.0", + "postcss-color-hex-alpha": "^9.0.2", + "postcss-color-rebeccapurple": "^8.0.2", + "postcss-custom-media": "^9.1.5", + "postcss-custom-properties": "^13.2.0", + "postcss-custom-selectors": "^7.1.3", + "postcss-dir-pseudo-class": "^7.0.2", + "postcss-double-position-gradients": "^4.0.4", + "postcss-focus-visible": "^8.0.2", + "postcss-focus-within": "^7.0.2", "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^4.0.0", - "postcss-image-set-function": "^5.0.0", + "postcss-gap-properties": "^4.0.1", + "postcss-image-set-function": "^5.0.2", "postcss-initial": "^4.0.1", - "postcss-lab-function": "^5.0.0", - "postcss-logical": "^6.0.0", - "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^11.0.0", - "postcss-opacity-percentage": "^1.1.3", - "postcss-overflow-shorthand": "^4.0.0", + "postcss-lab-function": "^5.2.3", + "postcss-logical": "^6.2.0", + "postcss-nesting": "^11.3.0", + "postcss-opacity-percentage": "^2.0.0", + "postcss-overflow-shorthand": "^4.0.1", "postcss-page-break": "^3.0.4", - "postcss-place": "^8.0.0", - "postcss-pseudo-class-any-link": "^8.0.0", + "postcss-place": "^8.0.1", + "postcss-pseudo-class-any-link": "^8.0.2", "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^7.0.0", + "postcss-selector-not": "^7.0.1", "postcss-value-parser": "^4.2.0" - }, - "dependencies": { - "autoprefixer": { - "version": "10.4.13", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", - "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", - "dev": true, - "requires": { - "browserslist": "^4.21.4", - "caniuse-lite": "^1.0.30001426", - "fraction.js": "^4.2.0", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - } - } } }, "postcss-pseudo-class-any-link": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.1.tgz", - "integrity": "sha512-CYcLGofbGDhx6BmNFQGFH0cqW+qlXVk9PR4LZ8Y7g24m6TopYKt6FSwhMGAIyme6lQxgB32XMhpYRwZAcPnMXA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.2.tgz", + "integrity": "sha512-FYTIuRE07jZ2CW8POvctRgArQJ43yxhr5vLmImdKUvjFCkR09kh8pIdlCwdx/jbFm7MiW4QP58L4oOUv3grQYA==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -28365,9 +28789,9 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, "prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true }, "pretty-error": { @@ -30763,9 +31187,9 @@ "dev": true }, "update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz", + "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==", "dev": true, "requires": { "escalade": "^3.1.1", diff --git a/package.json b/package.json index 2eb9a0ecb1..e1101591bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@swedbankpay/design-guide", - "version": "10.8.6", + "version": "10.8.7", "description": "Swedbank Pay Design Guide", "main": "src/scripts/main/index.js", "scripts": { @@ -92,11 +92,11 @@ "node-fetch": "^3.3.0", "postcss-less": "^6.0.0", "postcss-loader": "^7.0.2", - "postcss-preset-env": "^8.0.1", - "prettier": "2.8.8", + "postcss-preset-env": "^8.5.1", + "prettier": "^3.0.1", "react-test-renderer": "^18.2.0", "style-loader": "^3.3.1", - "stylelint": "^15.5.0", + "stylelint": "^15.9.0", "stylelint-config-recommended-less": "^1.0.4", "stylelint-config-standard": "^33.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.6.0", diff --git a/src/App/AppHeader/index.js b/src/App/AppHeader/index.js index 0a13f812ed..592b7eb7cd 100644 --- a/src/App/AppHeader/index.js +++ b/src/App/AppHeader/index.js @@ -9,46 +9,110 @@ import SearchBox from "../utils/SearchBox"; const basename = process.env.basename; const brand = process.env.brand; +// feature toggle. Switch once we switch default to topbar v2 (and update rest of docs and code) +// other corresponding feature toggle for topbar at "src/App/utils/SelectPanel/index.js" +const useTopbarLegacy = true; + // mobile & tablet topbar and hamburger menu -const AppHeader = () => ( -
- - - - {"\n"} - {`${brand}-logo`}{" "} - {"\n"} - - - -
-); + + ) : ( +
+ + + + {"\n"} + {`${brand}-logo`}{" "} + {"\n"} + + + +
+ ); export default AppHeader; diff --git a/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap index 68d389bdea..5324428e71 100644 --- a/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`ComponentsDocumentation: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide – v. - 10.8.6 + 10.8.7 `; diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png index cbdb9cafa5..b3ba3e5dfb 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png index ba2d5ad38b..db7d873cf6 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png index 0f83c264ae..541f85e6d9 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap index 74d557872b..f3f020458d 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap @@ -161,6 +161,8 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = ` + + @@ -370,6 +374,12 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = ` 31 + 32 + + + 33 + + + + @@ -799,6 +1002,126 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = ` 33 + 34 + + + 35 + + + 36 + + + 37 + + + 38 + + + 39 + + + 40 + + + 41 + + + 42 + + + 43 + + + 44 + + + 45 + + + 46 + + + 47 + + + 48 + + + 49 + + + 50 + + + 51 + + + 52 + + + 53 + + + 54 + + + 55 + + + 56 + + + 57 + + + 58 + + + 59 + + + 60 + + + 61 + + + 62 + + + 63 + + + 64 + + + 65 + + + 66 + + + 67 + + + 68 + + + 69 + + + 70 + + + 71 + + + 72 + + + 73 + + +
+

+ Migrating to the new Topbar ( ⚠️experimental🧪 ) +

+

+ A future version of the topbar can be used. It is in experimental state. Things can be modified and depending of your use some features might still be missing. +
+ This is done by appending the class + + + .experimental + + to the element with class + + .topbar + + . +

+

+ There is several breaking changes (details are following lower down) +

+ +

+ To do the migration please follow instructions on + + + the migration page + + . +

+

Javascript methods diff --git a/src/App/ComponentsDocumentation/components/Topbar/constants.js b/src/App/ComponentsDocumentation/components/Topbar/constants.js index 76f876a962..191930391d 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/constants.js +++ b/src/App/ComponentsDocumentation/components/Topbar/constants.js @@ -1,9 +1,71 @@ -import React from "react"; +import React, { useEffect } from "react"; import TopbarComponent from "@components/Topbar"; +import { topbar } from "@src/scripts/main"; import CodeTags from "@components/CodeTags"; -const menu = { +export const menu = { + items: [ + { + name: "Home", + pinned: true, + }, + { + name: "Merchant details", + selected: true, + pinned: true, + }, + { + name: "Transactions", + }, + { + name: "User profile", + }, + { + name: "Statistics", + }, + { + name: "Transactions", + }, + { + name: "User profile", + }, + { + name: "Statistics", + }, + { + name: "Transactions", + }, + { + name: "User profile", + }, + { + name: "Statistics", + }, + { + name: "Users", + pinned: true, + }, + { + name: "Access tokens", + }, + { + name: "Contact us", + }, + { + name: "Switch to acquiring", + icon: "sync_alt", + pinned: true, + firstPushRight: true, + }, + { + name: "Change company", + icon: "arrow_forward", + }, + ], +}; + +export const menuLegacy = { btn: { name: "Menu", icon: "menu", @@ -24,18 +86,25 @@ const menu = { ], }; -const Topbar = ({ sticky, wide, logout }) => ( -
- -
-
-); +const Topbar = ({ sticky, wide, logout, legacy }) => { + useEffect(() => { + topbar.init(); + }, [legacy]); + + return ( +
+ +
+
+ ); +}; export const topbarShowcase = { id: "overviewTopbar", @@ -44,7 +113,7 @@ export const topbarShowcase = { elements: [ { tab: "Desktop", - component: , + component: , title: "Desktop", description: (

@@ -58,7 +127,7 @@ export const topbarShowcase = { }, { tab: "Mobile/tablet", - component: , + component: , title: "Mobile/tablet", description: ( <> @@ -78,5 +147,27 @@ export const topbarShowcase = { ), }, + { + tab: "🧪 experimental Desktop", + component: , + title: "Desktop", + description: ( +

+ The experimental desktop topbar involves breaking changes. Make sure + to check them out before switching. +

+ ), + }, + { + tab: "🧪 experimental Mobile/tablet", + component: , + title: "Mobile/tablet", + description: ( + <> + The experimental desktop topbar involves breaking changes. Make sure + to check them out before switching. + + ), + }, ], }; diff --git a/src/App/ComponentsDocumentation/components/Topbar/index.js b/src/App/ComponentsDocumentation/components/Topbar/index.js index 93b17934c5..f3e7971d4a 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/index.js +++ b/src/App/ComponentsDocumentation/components/Topbar/index.js @@ -4,33 +4,12 @@ import { Link } from "react-router-dom"; import { ComponentPreview, DocContainer } from "@docutils"; import TopbarComponent from "@components/Topbar"; import CodeTags from "@components/CodeTags"; -import { topbarShowcase } from "./constants"; +import { menu, menuLegacy, topbarShowcase } from "./constants"; import { topbar, sidebar } from "@src/scripts/main"; import NpmInformation from "@docutils/NpmInformation"; const basename = process.env.basename; -const menu = { - btn: { - name: "Menu", - icon: "menu", - }, - items: [ - { - name: "Home", - icon: "home", - }, - { - name: "Purchases", - icon: "shopping_cart", - }, - { - name: "Settings", - icon: "settings", - }, - ], -}; - const Overview = () => (

Overview

@@ -104,7 +83,7 @@ const DeveloperDocumentation = () => (
@@ -128,6 +107,37 @@ const DeveloperDocumentation = () => (
+
+

Migrating to the new Topbar ( ⚠️experimental🧪 )

+

+ A future version of the topbar can be used. It is in experimental state. + Things can be modified and depending of your use some features might + still be missing. +
+ This is done by appending the class{" "} + to the element with + class . +

+

+ There is several breaking changes (details are following lower down) +

+
    +
  • order of elements in the topbar
    • +
  • + container links content is modified (added a header & footer to the + topbar, and links are grouped in a specific container) +
    • +
  • logo used in the topbar is different
    • +
  • + links need to have a `.pinned` class to be visible in the topbar +
    • +
+

+ To do the migration please follow instructions on{" "} + the migration page. +

+
+

Javascript methods

diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js index 9612da40a2..aacfcd08ca 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js +++ b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js @@ -8,9 +8,9 @@ test("Topbar page exist", async ({ page }) => { name: "Components Find all currently available components here", }) .click(); - await expect(page.getByRole("link", { name: "Topbar" })).toHaveCount( - page.viewportSize().width < 991 ? 1 : 2 - ); + await expect( + page.getByRole("link", { name: "Topbar", exact: true }) + ).toHaveCount(page.viewportSize().width < 991 ? 1 : 2); await page.getByText("call_to_actionTopbararrow_forward").click(); await expect(page).toHaveTitle(/Topbar/); await expect( diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png index ab2736b89f..9cac506809 100644 Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js new file mode 100644 index 0000000000..d1d70fd7af --- /dev/null +++ b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js @@ -0,0 +1,471 @@ +import React from "react"; + +import { EditableComponentPreview, DocContainer } from "@docutils"; +import CodeTags from "@components/CodeTags"; + +export const Overview = () => ( +

+

Intro

+
    +
  • + The migration should be part of a larger effort to rethink the + information structure. Try to simplify the navigation. Projects with an + allocated designer should collaborate with them to achieve this.{" "} +
    • +
  • + the new topbar is opt-in. By default nothing changes. The new style will + only be applied if you add the + class{" "} +
    • +
  • + There is several breaking changes (details are following lower down){" "} +
    • +
      +
    • order of elements in the topbar
      • +
    • + container links content is modified (added a header & footer to the + topbar, and links are grouped in a specific container){" "} +
      • +
    • logo used in the topbar is different
      • +
    • + links need to have a + class to be visible in + the topbar{" "} +
      • +
    +
  • + no change JS wise needed (no new method to call, etc). Things should + keep working{" "} +
    • +
  • + This is still an experimental phase. Please rise up any issue + you're finding out. +
    • +
+
+); + +export const Migration = () => ( +
+

Migrating to Topbar v2

+

Experimental

+
    +
  • + this is an opt-in. By default, if you do not modify + anything, things should remain as they were 😉 +
    • +
  • + to enable the new topbar you need to add the CSS class `experimental` to + the Topbar +
    • +
  • + e.g.{" "} + +
    • +
+

Breaking changes

+

Order of the elements inside the topbar

+

the order of the topbar is modified:

+
    +
  • +

    + BEFORE +

    + +
    + {"\n"} +
    + {"\n"} + {"// open/close menu button "} + {"\n"} + + {"\n"} + + {"\n"} + {"// logo link to homepage "} + {"\n"} + + {"\n"} + {"// topbar/modal content "} + {"\n"} + + {"\n"} +
    + {"\n"} +
    +     +
    • +
  • +

    + NOW +

    + + +
    + {"\n"} +
    + {"\n"} + {"// logo link to homepage "} + {"\n"} + + {"\n"} + + {"// topbar/modal content "} + {"\n"} + + {"\n"} + + {"// open menu button "} + {"\n"} + + {"\n"} +
    + {"\n"} +
    +     +
    • + +

    Logo/link to homepage

    +

    + we switch the SwedbankPay logo from the vertical version to the + horizontal one +

    +
      +
    • +

      + BEFORE +

      + + + swedbankpay logo + +
      • +
    • +

      + NOW +

      + + + swedbankpay logo + +
      • +
    + +

    the button to open the menu

    +

    + we used to have two buttons, one top open the menu modal & the other one + to close it. We now only have the one to open it. The button to close it + is inside the modal (in + ) +

    +

    + buttons are NOT modified. The only change is that we + remove the close button +

    +
      +
    • +

      + BEFORE +

      + + + + {"\n"} + + {"\n"} + +
      • +
    • +

      + NOW +

      + + + + +
      • +
    + +

    the structure of the “`.topbar-link-container`” is modified:

    +

    +

    +
      +
    • +

      + BEFORE +

      + +
        +
      • it used to have all links as direct children
        • +
      +
      • +
    • +

      + NOW +

      +
        +
      • it now contains only 3 direct children
        • +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        + +
      • + all links should be contained inside + +
        • +
      • + so far only normal links can be contained inside it (no nesting, + no dropdowns, no sidebar) +
        • +
      +
        +
      • + in the future we plan to support nested links (2-3 levels of + nesting) +
        • +
      • + in the future we plan to replace the language dropdown by a + language button displaying a specific language selection modal +
        • +
      +
      • +
    +

    Links in topbar

    +
      +
    • + max 5 short/medium length links in topbar (or less if long words). No + dynamic hiding, you're responsible to select which links you want + to keep “pinned” to the topbar on desktop and which ones can be + visible only in modal when it's opened +
      • +
    • still no links visible on mobile view (no breaking change)
      • +
    • + new +
      • +
        +
      • + add the CSS class + to the links you want + to keep “pinned” to the topbar +
        • +
      • + any links without the + class will be hidden on + the topbar but visible inside the modal +
        • +
      +
    +

    Topbar modal header

    + +
    + {"\n"} + + {"\n"} +
    +     +
      +
    • + mandatory to be used +
      • +
    • for now it contains only the close button (to close the modal)
      • +
    • + in the future it will eventually contain a header for the modal. (i.e. + for the language modal) +
      • +
    + +

    Topbar modal footer

    + + +
    + {"\n"} + + {"\n"} +
    +     +
      +
    • initially it will be mandatory to be used BUT it can be empty:
      • +
    • + +
      • +
    • in the future we'll make it optional
      • +
    +
+
+); + +export const CurrentState = () => ( +
+

Current state of experimental

+

For now:

+
    +
  • + No plan of supporting dropdown and or custom items in the topbar/modal +
    • +
  • Not ready for production yet
    • +
+
+); + +export const Roadmap = () => ( +
+

Roadmap

+

Future iterations:

+
    +
  • language selector (button visible in topbar + display a modal)
    • +
  • nested levels (2-3 levels nesting)
    • +
+
+); + +export const MigratingToNewTopbar = () => ( + +
+

+ How to migrate to the new Topbar (under experimental stage) +

+ + + + +
+ +); + +export default MigratingToNewTopbar; diff --git a/src/App/Home/constants.js b/src/App/Home/constants.js index 44c5af138a..712537d1bc 100644 --- a/src/App/Home/constants.js +++ b/src/App/Home/constants.js @@ -5,6 +5,22 @@ const basename = process.env.basename; export const changeLogs = [ { + version: "10.8.7", + title: "The one with the Playbook 📕 & a new experimental Topbar 🧪", + text: ( + <> +

+ + Get ready for a release that's as charming as a storybook! + +

+

📖 Introducing the Playbook: We're thrilled to unveil our new Playbook section, designed to present our comprehensive Design System. It's your ultimate guide to demystify the world of design and UI. Explore it here

+

🏗️ The New Topbar (Experimental Release): We're rolling out the first partial release of the new Topbar version, currently in its experimental phase. By default, there won't be any changes, but you have the opportunity to opt-in and join the experimental Topbar experience. We've also set up a dedicated page to guide you through the migration process: Topbar Migration to v2. +
We encourage you to report any bugs you encounter. The Topbar is a complex component, and your unique use cases provide invaluable feedback. Your input is greatly appreciated! 😉

+ + ), + } + ,{ version: "10.8.6", title: "The one with little handy UI helpers", text: ( @@ -55,7 +71,7 @@ export const changeLogs = [

We're getting ready for summer break, and we're bringing you a new UI for the expandable to play with during the holidays when - you're on the beach 🎾🏄‍♂️🌊🌞. + you're on the beach 🎾🏄‍♂️🌊🌞.

Some small things are also tagging along for the ride. Consistent diff --git a/src/App/Home/index.js b/src/App/Home/index.js index 0f64918a3f..098bd7b5c6 100644 --- a/src/App/Home/index.js +++ b/src/App/Home/index.js @@ -8,6 +8,7 @@ import Alert from "../components/Alert"; const basename = process.env.basename; const brandTitle = process.env.brandTitle; +const isSwedbankPay = process.env.isSwedbankPay; const Home = () => { useEffect(() => { @@ -39,61 +40,67 @@ const Home = () => {

- {routes.map((route) => ( - -
- + isSwedbankPay + ? !route.title.toLowerCase().includes("patterns") + : !route.title.toLowerCase().includes("playbook") + ) + .map((route) => ( + +
- {route.wideCard ? ( -
- - {route.entryCardText} - -
- ) : ( -
-
+ + {route.wideCard ? ( +
+ {route.entryCardText} +
-
- {route.title} - {route.entryCardText} + ) : ( +
+
+ +
+
+ {route.title} + {route.entryCardText} +
+
- -
- )} - -
- - ))} + )} + +
+ + ))}
diff --git a/src/App/Identity/__snapshots__/index.test.js.snap b/src/App/Identity/__snapshots__/index.test.js.snap index ed14a41156..e9220d54e1 100644 --- a/src/App/Identity/__snapshots__/index.test.js.snap +++ b/src/App/Identity/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Core: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide – v. - 10.8.6 + 10.8.7
`; diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js b/src/App/Identity/identity/Typography/typography.e2e.spec.js index 5946b17f0d..3d98b54311 100644 --- a/src/App/Identity/identity/Typography/typography.e2e.spec.js +++ b/src/App/Identity/identity/Typography/typography.e2e.spec.js @@ -8,16 +8,30 @@ test("Typography page exist", async ({ page }) => { name: "Identity Learn about our fundamental principles", }) .click(); - await expect( - page.getByRole("link", { - name: "Typography", - }) - ).toHaveCount(page.viewportSize().width < 991 ? 1 : 2); - await page - .getByRole("link", { - name: "Typography See our fronts and sizing arrow_forward", - }) - .click(); + + if (page.viewportSize().width > 991) { + await expect( + page.getByRole("link", { + name: "Typography", + }) + ).toHaveCount(1); + await page.getByRole("link", { name: "Typography" }).click(); + } else { + await expect( + page.getByRole("link", { + name: "Typography", + }) + ).toHaveCount(0); + await page.getByLabel("Open menu").click(); + await page.getByRole("button", { name: "Identity" }).click(); + + await expect( + page.getByRole("link", { + name: "Typography", + }) + ).toHaveCount(1); + await page.getByRole("link", { name: "Typography" }).click(); + } }); const viewportsVariants = [ diff --git a/src/App/Identity/index.js b/src/App/Identity/index.js index 2b91a626df..fff8f2897c 100644 --- a/src/App/Identity/index.js +++ b/src/App/Identity/index.js @@ -3,7 +3,7 @@ import React from "react"; import { RenderPage } from "../utils"; const Core = () => ( - + ); export default Core; diff --git a/src/App/Patterns/__snapshots__/index.test.js.snap b/src/App/Patterns/__snapshots__/index.test.js.snap index f5da3d4b72..915a69790d 100644 --- a/src/App/Patterns/__snapshots__/index.test.js.snap +++ b/src/App/Patterns/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Patterns: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide – v. - 10.8.6 + 10.8.7
`; diff --git a/src/App/Playbook/content/DesignVision/index.js b/src/App/Playbook/content/DesignVision/index.js new file mode 100644 index 0000000000..b4bb630bc3 --- /dev/null +++ b/src/App/Playbook/content/DesignVision/index.js @@ -0,0 +1,443 @@ +import React from "react"; +import { DocContainer } from "@docutils"; + +const basename = process.env.basename; + +const VisionStatement = () => ( +
+

Vision statement

+

+ To create simple, intuitive design that wows you with an unbeatable + experience. +

+
+
+
+

Contextual

+

+ Relevant and guiding experience for each visitor, on every platform. +

+
+
+

Easy

+

Easy to use, administrate, navigate and convert.

+
+
+

Fast

+

Designed and built for optimal experience and performance.

+
+
+
+
+

Impactful

+

Generating business breakthroughs and strong brand presence.

+
+
+

Scalable

+

Growing the product portfolio of Swedbank Pay.

+
+
+
+
+); + +const VisionBoard = () => ( +
+

Vision board

+

Scalable Growing the product portfolio of Swedbank Pay.

+ +
+ +
+
+); + +const ChunkyFriendly = () => ( +
+

Chunky and friendly

+

+ By turning up the size on elements in the design as well as increasing + white space and padding, we allow for a more visually prominent and easily + tappable or clickable interface. It conveys a sense of space in the + design, enhancing usability and readability. +

+ +
+
+
+ Playbook illustration +
+
+ Playbook illustration +
+
+ Playbook illustration +
+
+
+
+ Playbook illustration +
+
+ Playbook illustration +
+
+
+
+); + +const BoldTypography = () => ( +
+

+ Bold typography with personality +

+

+ We like to play with the size and placement of a headline or main message + to create a more engaging expression, making the user more likely to read + the text. It creates a visual anchor to the page when we have this large + and highly contrasting title. +

+ +
+
+
+ Playbook illustration +
+
+ Playbook illustration +
+
+ Playbook illustration +
+
+ Playbook illustration +
+
+
+
+); + +const DelicateLines = () => ( +
+

Delicate lines

+

+ Together with the bold typography and solid colors, we use thin lines for + illustrations. When we want the illustration to blend into the background + and not be in focus, we only use the thin lines. When we want it to stand + out, we combine it with larger solid shapes or type. +

+
+
+ Playbook illustration + Playbook illustration + Playbook illustration + Playbook illustration + Playbook illustration + Playbook illustration +
+
+
+); + +const Rounded = () => ( +
+

Rounded

+

+ Swedbank Pay is your best friend in handling finances, curating + information and serving you what you need. The UI should reflect this + friendliness, and does so with rounded corners and soft shapes. +

+
+
+
+ illustration swedbankpay playbook rounded +
+
+ illustration swedbankpay playbook rounded +
+
+ illustration swedbankpay playbook rounded +
+
+ illustration swedbankpay playbook rounded +
+
+
+
+
+
+ illustration swedbankpay playbook rounded +
+
+ illustration swedbankpay playbook rounded +
+
+ illustration swedbankpay playbook rounded +
+
+ illustration swedbankpay playbook rounded +
+
+
+
+); + +const Colors = () => ( +
+

Colors

+

+ Primary brand and brand accent colors: The primary color + of Swedbank Pay is yellow, which is used to create a unified appearance + and visual recognition. Yellow is an energetic and vibrant color and this + matches the brand of Swedbank Pay. In addition, we use a selection of + colors from Swedbank's color palette. +

+

+ Functional, text, background and system colors: These are + supplementary colors that contrast or complement the primary ones. We aim + to stay monochromatic, keeping a view within one hue. But on occasion we + combine the hues by bringing in a yellow or orange item to hint at the + Swedbank Pay brand. +

+

+ Color pool: Pick from this pool when more colors are + needed, rather than making up new ones. +

+
+
+
+ illustration swedbankpay playbook colors +
+
+ illustration swedbankpay playbook colors +
+
+ illustration swedbankpay playbook colors +
+
+
+
+ illustration swedbankpay playbook colors +
+
+ illustration swedbankpay playbook colors +
+
+ illustration swedbankpay playbook colors +
+
+
+
+ illustration swedbankpay playbook colors +
+
+ illustration swedbankpay playbook colors +
+
+ illustration swedbankpay playbook colors +
+
+
+
+); + +const DesignVision = () => ( + +

+ Design is more than just looks – it's our shared language of + experience and function. Every piece matters, and together, they form our + product's story. We're here to make design clear and relatable + for everyone in our team. By understanding and embracing it, we all + contribute to a unified and standout product journey. +

+ + + + + + + + +); + +export default DesignVision; diff --git a/src/App/Playbook/content/Playbook/index.js b/src/App/Playbook/content/Playbook/index.js new file mode 100644 index 0000000000..60c1468651 --- /dev/null +++ b/src/App/Playbook/content/Playbook/index.js @@ -0,0 +1,103 @@ +import React from "react"; +import { DocContainer } from "@docutils"; +import { Link } from "react-router-dom"; +import overviewList from "@src/App/routes/playbook"; + +const basename = process.env.basename; +const brandTitle = process.env.brandTitle; + +const WhyNeedPlaybook = () => ( +
+

Why do we need a Playbook?

+

+ We’ve created this playbook so that every interface and element will tell + a part of our story. Whether you’re designing a new interface or crafting + a digital campaign, let it be your guide to creating experiences that + resonate. +

+
+
+
+

A north star for visual design

+

+ When new products are created and new designers onboarded, we want a + natural evolution while staying true to our spirit. By creating a + vision board with the look and feel of Swedbank Pay, we always have + a source of truth and consistency. +

+
+
+

Principles that inspire content

+

+ Our design principles are rooted in understanding human behavior, + evoking emotions and guiding actions. As such, they can be used as a + fresh lens through which to view campaigns, content and strategy. +

+
+
+ +
+
+

Dynamic design

+

+ A static design system can be limiting when creating a branch of + products. By making certain aspects of the system dynamic, we allow + for a broader spectrum of products while still monitoring the + “geist” – our spirit. +

+
+
+

Fostering the evolution of creativity

+

+ By defining and locking in the spirit of the company, we make it + easier to comfortably push our ideas forward. When you know the + outer frame, it’s easier to design and be creative within that + frame. +

+
+
+
+
+); + +const Index = () => ( +
+

Index

+
+ {overviewList[0].routes.slice(1).map((card, i) => ( + +
+ {card.title} + {card.text} +
+ arrow_forward + + ))} +
+
+); + +const Playbook = () => ( + +

+ Every touchpoint, every interaction and visual element plays a role in + shaping our narrative and relationship with our customers. Welcome to our + Playbook – a guide that demystifies the world of design and UI. +

+
+ Playbook illustration with the Swedbankpay branding +
+ + + +); + +export default Playbook; diff --git a/src/App/Playbook/content/Principles/index.js b/src/App/Playbook/content/Principles/index.js new file mode 100644 index 0000000000..779cd122f7 --- /dev/null +++ b/src/App/Playbook/content/Principles/index.js @@ -0,0 +1,331 @@ +import React from "react"; +import { DocContainer } from "@docutils"; + +const basename = process.env.basename; + +const Simplicity = () => ( +
+

Always strive for simplicity

+

+ By streamlining design elements and interactions and removing unnecessary + complexity, we empower users to effortlessly find information and + accomplish tasks. “Perfection is not reached when there is nothing left to + add, but when there is nothing left to take away.” +

+

Clarity and focus

+
+
+
+

+ How many focus points are visible on screen? +

+

+ Distill complex ideas into elegant solutions. Our goal is for the + user to find information easily and complete tasks with minimal + effort. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Consistency

+
+
+
+

+ What components can be reused? +

+

+ No need to reinvent the wheel – use existing components as often as + possible. Consistency enhances familiarity and allows users to + navigate our ecosystem confidently. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Deliberate reduction

+
+
+
+

+ Does every element on screen add value? +

+

+ Reduce unnecessary elements, features, and interactions that may + overwhelm or confuse. Keep the design streamlined and lightweight, + providing the user with precisely what they need, exactly when they + need it. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+
+); + +const FriendlyGuide = () => ( +
+

Be a friendly guide

+

+ Guide users and make every interaction effortless. When elements are + scaled, placed, and contrasted based on their importance, we pave an + intuitive path for our users. Always champion their success. +

+

Information order

+
+
+
+

+ Is vital information and action well-organized? +

+

+ Arrange content hierarchically and group it smartly. Simplify + complex data to foster visual clarity, aiding user comprehension. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Visual hierarchy

+
+
+
+

+ Is the right element emphasized? +

+

+ Use scale, placement and color based on their importance and + relevance. Create visual cues that guide users to prioritize and + understand information effortlessly. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Reveal as needed

+
+
+
+

+ Do we really need this piece of info on this screen? +

+

+ Use progressive disclosure to present core content, letting users + delve deeper as they wish, avoiding information overload. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+
+); + +const DelightUnexpected = () => ( +
+

Delight with the unexpected

+

+ Create interfaces that go beyond usability and aim to spark joy. Enhance + the overall experience and strengthen the brand personality. We want to + leave room to push expressive design, while still staying true to the + Swedbank Pay look and feel. +

+

Surprise and engage

+
+
+
+

+ Dare to be different. Surprise users with unique design elements, be + it an animation or a splash of color. Balance visuals based on what + you want to convey. Asymmetry is dynamic and engaging, creating a + sense of energy and movement. Symmetry is quiet and static. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Unified creative vision

+
+
+
+

+ While our design system ensures brand consistency, individual + products can have their creative flair. That said, they should + always feel part of the Swedbank Pay family. Refer to our Vision + board for guidance. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Thoughtful motion design

+
+
+
+

+ Integrate subtle, meaningful micro-interactions. These tiny, + animated touches can elevate user engagement, adding responsiveness + and character. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+
+); + +const Inclusive = () => ( +
+

Inclusive by design

+

+ Prioritize accessibility and inclusivity. By reducing cognitive effort, + enhancing visual clarity, and ensuring compatibility with assistive tools, + we craft experiences for everyone. +

+

Simplicity is key

+
+
+
+

+ How quickly does the user understand a screen? +

+

+ Less is more. Minimize clutter and cognitive effort, enabling users + to absorb and remember information effortlessly. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Visual contrast and distinction

+
+
+
+

+ Does the design meet accessibility standards? +

+

+ Ensure elements are discernible, with strong color contrasts, + legible fonts, and a well-defined visual hierarchy. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+

Assistive tech-friendly

+
+
+
+

+ Are interfaces compatible with assistive tools? +

+

+ Make sure your interface can be easily used with screen readers, + voice commands, keyboard and other assistive devices. +

+
+
+ illustration swedbankpay playbook principles +
+
+
+
+); + +const Principles = () => ( + +

+ Our design principles have been created with design and UI in mind, but + their essence is universal. They exist to make sure that the message is + not just heard, but felt. +
+
+ The 4 design principles of Swedbank Pay: +

+ + + + + +); + +export default Principles; diff --git a/src/App/Playbook/content/Profiles/index.js b/src/App/Playbook/content/Profiles/index.js new file mode 100644 index 0000000000..77f09320bc --- /dev/null +++ b/src/App/Playbook/content/Profiles/index.js @@ -0,0 +1,379 @@ +import React from "react"; +import { DocContainer } from "@docutils"; +import { Link } from "react-router-dom"; + +const basename = process.env.basename; + +const HowToUse = () => ( +
+

How to use the design profiles

+
    +
  1. +

    Reflect:

    +
      +
    • + Who is the user? Are they a customer already or are they having + their first meeting with the brand? +
      • +
    • + In what mode are they when entering the view you’re designing? Are + they trying to complete a task or just getting to know the service? +
      • +
    +
    2. +
  2. +

    Identify:

    +
      +
    • + Does the product or message fit just one profile, or different ones + depending on screen or section? +
      • +
    +
    3. +
  3. +

    Become inspired:

    +
      +
    • + Look at the examples provided below and in our{" "} + showroom and become inspired. Think + of the profiles like moodboards if you like. +
      • +
    +
    4. +
+
+); + +const DesignProfiles = () => ( +
+

The design profiles:

+
+
+
+ content +
+
+ Light UI +
+
+ Expert UI +
+
+
+
+); + +const Content = () => ( +
+

Content

+

+ Here, our focus is on sparking curiosity and engagement. We aim to inspire + users to explore and discover through communication jam-packed with + expressive design and delightful motion, making every interaction an + adventure. +
+ User persona: Curious explorers, seeking inspiration. +
+ UI objective: Spark curiosity, engage users, and invite + exploration. +
+ Design approach: Expressive and visually engaging UI with + a focus on personality. Utilize delightful motion design elements to + surprise and captivate users. +

+
+
+
+
+ illustration swedbankpay playbook profiles +
+
+ +
+
+
+ An exploration of marketing material for the terminal, summer 2023. +
+
+
+
+
+ illustration swedbankpay playbook profiles +
+
+ illustration swedbankpay playbook profiles +
+
+
+ Concept work & Presentation MEX +
+
+
+
+); + +const LightUI = () => ( +
+

Light UI

+

+ Designed to assist and guide novice users with ease. We prioritize + simplicity, clarity, and user-friendly features to ensure that everyone, + regardless of their experience level, feels supported. +
+ User persona: Novice user or someone with limited time + and cognitive load. +
+ UI objective: Provide clear assistance, support, and + guidance. +
+ Design approach: Present bite-sized information, keeping + things simple and highly focused. Promote clarity and user-friendly + features. +

+
+
+
+ +
+
+ The terminal design should be easy and quick to use. +
+
+
+
+
+ + + illustration swedbankpay playbook profiles + +
+
+ + + illustration swedbankpay playbook profiles + +
+
+ + + illustration swedbankpay playbook profiles + +
+
+ + + illustration swedbankpay playbook profiles + +
+
+
+ A new day is a ‘pocket app’ for business owners on-the-go, providing + glanceable data and insights. +
+
+
+
+); + +const ExpertUI = () => ( +
+

Expert UI

+

+ Made for task-oriented, experienced users. Emphasis is placed on + efficiency and utility, with streamlined actions and information in good + order, making it a powerful tool for experts to get things done. +
+ User persona: Experts who are task-oriented and focused. +
+ UI objective: Enable efficient task completion and + utility. +
+ Design approach: Prioritize clear and actionable + interfaces with an emphasis on efficient information density. Streamline + actions and workflows for experienced users. +

+
+
+
+
+ illustration swedbankpay playbook profiles +
+
+
Merchant portal
+
+
+
+
+
+
+ illustration swedbankpay playbook profiles +
+
+ illustration swedbankpay playbook profiles +
+
+ illustration swedbankpay playbook profiles +
+
+ illustration swedbankpay playbook profiles +
+
+
PaybyLink
+
+
+
+); + +const Profiles = () => ( + +

+ To help navigate our diverse product ecosystem, we’ve created three design + profiles. Catering to different personas and needs, these profiles ensure + consistency while also allowing flexibility. They are key to improving + usability, efficiency, and scalability. Lastly, they make sure that each + product speaks the language of its users while still keeping with the + Swedbank Pay identity. +

+ illustration swedbankpay playbook profiles + + + + + + +); + +export default Profiles; diff --git a/src/App/Playbook/content/Showroom/index.js b/src/App/Playbook/content/Showroom/index.js new file mode 100644 index 0000000000..4f922fc7b8 --- /dev/null +++ b/src/App/Playbook/content/Showroom/index.js @@ -0,0 +1,530 @@ +import React from "react"; +import { DocContainer } from "@docutils"; + +const basename = process.env.basename; + +const Showroom = () => ( +
+
+
+
+ +
+
+
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+
+
+ +
+
+
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ +
+
+
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+ + {/* */} + illustration swedbankpay playbook showroom + +
+
+
+
+); + +const Profiles = () => ( + + + +); + +export default Profiles; + +export {}; diff --git a/src/App/Playbook/index.js b/src/App/Playbook/index.js new file mode 100644 index 0000000000..9d5885c12c --- /dev/null +++ b/src/App/Playbook/index.js @@ -0,0 +1,9 @@ +import React from "react"; + +import { RenderPage } from "../utils"; + +const Core = () => ( + +); + +export default Core; diff --git a/src/App/Utilities/__snapshots__/index.test.js.snap b/src/App/Utilities/__snapshots__/index.test.js.snap index 5b9fa49ca9..1593907650 100644 --- a/src/App/Utilities/__snapshots__/index.test.js.snap +++ b/src/App/Utilities/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Utilities: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide - v. - 10.8.6 + 10.8.7
+ +
@@ -580,6 +584,8 @@ exports[`Component: Topbar - props topbarContent renders a topbar menu without m + +
@@ -709,6 +711,8 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c + +
@@ -853,6 +859,8 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a + + @@ -1019,6 +1029,8 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a + + diff --git a/src/App/components/Topbar/index.js b/src/App/components/Topbar/index.js index fc6e997ce9..dd1050458e 100644 --- a/src/App/components/Topbar/index.js +++ b/src/App/components/Topbar/index.js @@ -1,18 +1,27 @@ import React, { Fragment } from "react"; import PropTypes from "prop-types"; -import swedbankpayLogo from "@src/img/swedbankpay/logo/swedbankpay-logo-v.svg"; +import swedbankpayLogoHorizontal from "@src/img/swedbankpay/logo/swedbankpay-logo-h.svg"; +import swedbankpayLogoVertical from "@src/img/swedbankpay/logo/swedbankpay-logo-v.svg"; import payexLogo from "@src/img/payex/logo/payex-logo.svg"; import SidebarComponent from "@components/Sidebar"; import { SidebarNavList } from "../../ComponentsDocumentation/components/Sidebar/constants"; +import ButtonComponent from "@components/Button"; const brand = process.env.brand; -const devLogo = brand === "swedbankpay" ? swedbankpayLogo : payexLogo; - const isDev = process.env.version === "LOCAL_DEV"; +const getDevLogo = (legacy) => { + if (brand === "swedbankpay" && !legacy) { + return swedbankpayLogoHorizontal; + } else if (brand === "swedbankpay" && legacy) { + return swedbankpayLogoVertical; + } else { + return payexLogo; + } +}; -const TopbarBtn = () => ( +const TopbarBtn = ({ legacy = true }) => ( <> - + {legacy && ( + + )} ); -const TopbarMenu = ({ menu, logout, sidebar }) => { +const ConditionalWrapper = ({ condition, wrapper, children }) => + condition ? wrapper(children) : children; + +const TopbarMenu = ({ menu, logout, sidebar, legacy }) => { const { items } = menu; return ( ); }; const TopbarLogout = () => ( +
+ {"\n"} + + {"\n"} +
+); + +const TopbarLogoutLegacy = () => ( <> ( ); -const TopbarLogo = ({ png }) => ( +const TopbarLogo = ({ png, legacy }) => ( <> ( {brand === "swedbankpay" && png ? ( {`${brand} ) : ( {`${brand} )} {"\n"} @@ -119,26 +197,51 @@ const TopbarLogo = ({ png }) => ( ); -const Topbar = ({ topbarContent, wide, logout, id, png, sticky, sidebar }) => ( +const Topbar = ({ + topbarContent, + wide, + logout, + id, + png, + sticky, + sidebar, + legacy = true, +}) => (
{"\n"} {topbarContent ? (
+ {legacy && ( + <> + {"\n"} + + + )} {"\n"} - + {"\n"} - - + + {!legacy && ( + <> + {"\n"} + + + )}
) : ( <> - - {logout ? : null} + + {logout ? legacy ? : : null} )}
@@ -151,6 +254,7 @@ Topbar.propTypes = { png: PropTypes.bool, sticky: PropTypes.bool, sidebar: PropTypes.bool, + legacy: PropTypes.bool, }; export default Topbar; diff --git a/src/App/docutils/DocContainer/index.js b/src/App/docutils/DocContainer/index.js index b2c5b70a80..488fd6129f 100644 --- a/src/App/docutils/DocContainer/index.js +++ b/src/App/docutils/DocContainer/index.js @@ -10,11 +10,13 @@ const DocContainer = ({ children }) => { ); useEffect(() => { - sidebar.populateSidebarTertiary( - "doc-sidebar", - document.querySelector(".doc-body").querySelectorAll("h2[id]") - ); - sidebar.initScrollListener("doc-sidebar", "doc-body", "h2"); + if (document?.querySelector(".doc-body")) { + sidebar.populateSidebarTertiary( + "doc-sidebar", + document.querySelector(".doc-body").querySelectorAll("h2[id]"), + ); + sidebar.initScrollListener("doc-sidebar", "doc-body", "h2"); + } }, []); return ( diff --git a/src/App/index.js b/src/App/index.js index 4a112d3c7c..81b926334c 100644 --- a/src/App/index.js +++ b/src/App/index.js @@ -19,33 +19,37 @@ const basename = removeTrailingSlash(process.env.basename) || "/"; const brand = process.env.brand; const Home = React.lazy(() => - import(/* webpackChunkName: "home.chunk" */ "./Home/index.js") + import(/* webpackChunkName: "home.chunk" */ "./Home/index.js"), ); const GetStarted = React.lazy(() => - import(/* webpackChunkName: "get-started.chunk" */ "./GetStarted/index.js") + import(/* webpackChunkName: "get-started.chunk" */ "./GetStarted/index.js"), ); const Components = React.lazy(() => import( /* webpackChunkName: "components.chunk" */ "./ComponentsDocumentation/index.js" - ) + ), ); const Identity = React.lazy(() => - import(/* webpackChunkName: "core.chunk" */ "./Identity/index.js") + import(/* webpackChunkName: "core.chunk" */ "./Identity/index.js"), ); const Patterns = React.lazy(() => - import(/* webpackChunkName: "patterns.chunk" */ "./Patterns/index.js") + import(/* webpackChunkName: "patterns.chunk" */ "./Patterns/index.js"), +); + +const Playbook = React.lazy(() => + import(/* webpackChunkName: "patterns.chunk" */ "./Playbook/index.js"), ); const ErrorPage404 = React.lazy(() => - import(/* webpackChunkName: "404.chunk" */ "./ErrorPage404/index.js") + import(/* webpackChunkName: "404.chunk" */ "./ErrorPage404/index.js"), ); const Utilities = React.lazy(() => - import(/* webpackChunkName: "utilities.chunk" */ "./Utilities/index.js") + import(/* webpackChunkName: "utilities.chunk" */ "./Utilities/index.js"), ); const ScrollToTop = ({ children }) => { @@ -68,7 +72,7 @@ export const VersionTopBanner = () => { .then((data) => data.json()) .then((data) => setVersion(data.latestVersion)) .catch((error) => - console.warn("Could not fetch latest version from Azure:", error) + console.warn("Could not fetch latest version from Azure:", error), ); }, []); @@ -107,7 +111,6 @@ const App = () => {
{" "} - {/* desktop sidebar nav */}
@@ -117,6 +120,7 @@ const App = () => { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/App/routes/all.js b/src/App/routes/all.js index 326f9eba41..b27c0552b1 100644 --- a/src/App/routes/all.js +++ b/src/App/routes/all.js @@ -2,10 +2,20 @@ const componentsRoutes = require("./components"); const identityRoutes = require("./identity"); const getStartedRoutes = require("./get-started"); const patternsRoutes = require("./patterns"); +const playbookRoutes = require("./playbook"); -module.exports = [ - ...getStartedRoutes, - ...identityRoutes, - ...componentsRoutes, - ...patternsRoutes, -]; +// remove Playbook routes if PayEx side +module.exports = process.env.isSwedbankPay + ? [ + ...getStartedRoutes, + ...playbookRoutes, + ...identityRoutes, + ...componentsRoutes, + ...patternsRoutes, + ] + : [ + ...getStartedRoutes, + ...identityRoutes, + ...componentsRoutes, + ...patternsRoutes, + ]; diff --git a/src/App/routes/all.test.js b/src/App/routes/all.test.js index b18797a44c..4a63007d87 100644 --- a/src/App/routes/all.test.js +++ b/src/App/routes/all.test.js @@ -1,7 +1,10 @@ import allRoutes from "./all"; describe("Routes: all", () => { - const pathFormat = new RegExp("^([a-z]+([-a-z]+)?)+$"); + // match any string that starts with a lowercase letter, + // followed by zero or more lowercase letters or digits, + // followed by an optional hyphen and one or more lowercase letters or digits + const pathFormat = new RegExp("^[a-z][a-z0-9]*([-a-z0-9]+)?$"); it("is defined", () => { expect(allRoutes).toBeDefined(); diff --git a/src/App/routes/components.js b/src/App/routes/components.js index 425de950bd..20ae397927 100644 --- a/src/App/routes/components.js +++ b/src/App/routes/components.js @@ -331,7 +331,16 @@ module.exports = [ componentPath: "components/Topbar", icon: "call_to_action", outlined: true, - statusBadges: ["javascript"], + statusBadges: ["javascript", "updated"], + }, + { + title: "Topbar Migrating to v2", + path: "topbar-migrating-to-v2", + rootPath: "/components/TopbarMigratingToV2", + componentPath: "components/TopbarMigratingToV2", + icon: "call_to_action", + outlined: true, + statusBadges: ["javascript", "new"], }, ], }, diff --git a/src/App/routes/components.test.js b/src/App/routes/components.test.js index 55c30f748e..234318b90a 100644 --- a/src/App/routes/components.test.js +++ b/src/App/routes/components.test.js @@ -1,7 +1,7 @@ import componentRoutes from "./components"; describe("Routes: components", () => { - const pathFormat = new RegExp("^([a-z]+([-a-z]+)?)+$"); + const pathFormat = new RegExp("^[a-z][a-z0-9]*([-a-z0-9]+)?$"); it("is defined", () => { expect(componentRoutes).toBeDefined(); diff --git a/src/App/routes/identity.js b/src/App/routes/identity.js index 59e0990fae..c35880939c 100644 --- a/src/App/routes/identity.js +++ b/src/App/routes/identity.js @@ -12,12 +12,6 @@ module.exports = [ redirect: "identity", appFolder: "Identity", routes: [ - { - title: "Overview", - path: "identity", - rootPath: "/identity/identity", - componentPath: "identity/Identity", - }, { title: "Accessibility", path: "accessibility", diff --git a/src/App/routes/playbook.js b/src/App/routes/playbook.js new file mode 100644 index 0000000000..fcc095336e --- /dev/null +++ b/src/App/routes/playbook.js @@ -0,0 +1,51 @@ +module.exports = [ + /** + * Playbook + */ + { + title: "Playbook", + icon: { + name: "casino", + }, + path: "playbook", + entryCardText: "Discover our visual language and principles", + redirect: "playbook", + appFolder: "Playbook", + routes: [ + { + title: "Overview", + path: "playbook", + rootPath: "/playbook/playbook", + componentPath: "content/Playbook", + }, + { + title: "Design Vision", + path: "design-vision", + rootPath: "/playbook/design-vision", + componentPath: "content/DesignVision", + text: "A high-level north star for all new products created in the Swedbank Pay portfolio", + }, + { + title: "Principles", + path: "principles", + rootPath: "/playbook/principles", + componentPath: "content/Principles", + text: "Best practices mainly for product design that are clear and easy to follow. Free advice, if you will", + }, + { + title: "Profiles", + path: "profiles", + rootPath: "/playbook/profiles", + componentPath: "content/Profiles", + text: "The profiles are UI/UX styles that speak to different products, contexts and user groups", + }, + { + title: "Showroom", + path: "showroom", + rootPath: "/playbook/showroom", + componentPath: "content/Showroom", + text: "See examples from our visual language", + }, + ], + }, +]; diff --git a/src/App/utils/SelectPanel/index.js b/src/App/utils/SelectPanel/index.js index 8eafee8371..aa4ae39a24 100644 --- a/src/App/utils/SelectPanel/index.js +++ b/src/App/utils/SelectPanel/index.js @@ -15,7 +15,7 @@ const MobileNavGroup = ({ route, index, sidebarId }) => { const location = useLocation(); const [isActive, setIsActive] = useState( - location.pathname.includes(route.path) + location.pathname.includes(route.path), ); useEffect(() => { @@ -25,7 +25,7 @@ const MobileNavGroup = ({ route, index, sidebarId }) => { childRoute: childRoute.path, })) .filter((childRouteObject) => - location.pathname.includes(childRouteObject.childRoute) + location.pathname.includes(childRouteObject.childRoute), ); isActive && @@ -89,24 +89,37 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => { const _activeSecondaryLi = (secondaryRoute) => location.pathname.includes(secondaryRoute.path); + const useLegacyTopbar = true; + return ( <> {topbarId ? ( - // mobile & tablet hamburger menu sidebar -
- -
+ !useLegacyTopbar ? ( + // mobile & tablet hamburger menu sidebar + routes.map((route, i) => ( + + )) + ) : ( +
+ +
+ ) ) : ( // desktop
@@ -208,9 +221,9 @@ SelectPanel.propTypes = { title: PropTypes.string.isRequired, path: PropTypes.string.isRequired, componentPath: PropTypes.string.isRequired, - }) + }), ).isRequired, - }) + }), ).isRequired, id: PropTypes.string.isRequired, topbarId: PropTypes.string, diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-1.png new file mode 100644 index 0000000000..a6719c3604 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-2.png new file mode 100644 index 0000000000..5a19fdb370 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-3.png new file mode 100644 index 0000000000..7a743c5152 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-4.png new file mode 100644 index 0000000000..b9531a4630 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-1.png new file mode 100644 index 0000000000..4e5d9b22e1 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-2.png new file mode 100644 index 0000000000..6b83092059 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-3.png new file mode 100644 index 0000000000..7b8935a440 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.avif new file mode 100644 index 0000000000..a8fed9af87 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png new file mode 100644 index 0000000000..5265bd7ae0 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.avif new file mode 100644 index 0000000000..f317414a31 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png new file mode 100644 index 0000000000..fbe60e71db Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-1.png new file mode 100644 index 0000000000..78d4f5735f Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-2.png new file mode 100644 index 0000000000..1a90f52c36 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-3.png new file mode 100644 index 0000000000..096fc5bbee Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-4.png new file mode 100644 index 0000000000..fd51d12498 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-5.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-5.png new file mode 100644 index 0000000000..eded253260 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-5.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-6.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-6.png new file mode 100644 index 0000000000..cb4c99eb6f Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-6.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-7.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-7.png new file mode 100644 index 0000000000..d1707f7ffb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-7.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-8.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-8.png new file mode 100644 index 0000000000..e2bf3a2942 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-8.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-9.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-9.png new file mode 100644 index 0000000000..69e674e358 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-9.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-1.png new file mode 100644 index 0000000000..2600cdc4d1 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-2.png new file mode 100644 index 0000000000..b25485020a Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-3.png new file mode 100644 index 0000000000..b2f9e88cd4 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-4.png new file mode 100644 index 0000000000..554332894b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-5.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-5.png new file mode 100644 index 0000000000..f5f51c54c9 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-5.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-6.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-6.png new file mode 100644 index 0000000000..a2da1a5700 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-6.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-1.png new file mode 100644 index 0000000000..079daa89f5 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-2.png new file mode 100644 index 0000000000..144fc3dcb4 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-3.png new file mode 100644 index 0000000000..2a42c087e9 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-4.png new file mode 100644 index 0000000000..7eab61f838 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.avif new file mode 100644 index 0000000000..53e6cae79c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.png new file mode 100644 index 0000000000..2db5aea2b9 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.avif new file mode 100644 index 0000000000..a4530275fa Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.png new file mode 100644 index 0000000000..42a43daf33 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.avif new file mode 100644 index 0000000000..c0b3146581 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.png new file mode 100644 index 0000000000..ee282c6990 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.avif new file mode 100644 index 0000000000..e51d27ac7a Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.png new file mode 100644 index 0000000000..5ba7d9ad62 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.av1.mp4 new file mode 100644 index 0000000000..ccdd427c19 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.mp4 new file mode 100644 index 0000000000..054ad9f481 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.png new file mode 100644 index 0000000000..21b6e32069 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg b/src/img/swedbankpay/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg new file mode 100644 index 0000000000..cb0da4584a Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png new file mode 100644 index 0000000000..04c2bcfe04 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png new file mode 100644 index 0000000000..0883b8f43c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png new file mode 100644 index 0000000000..17d58ff0f7 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png new file mode 100644 index 0000000000..b4db79747c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png new file mode 100644 index 0000000000..06fcd30f93 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png new file mode 100644 index 0000000000..2da7b37db7 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png new file mode 100644 index 0000000000..feba059115 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png new file mode 100644 index 0000000000..6a30ac2ff8 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png new file mode 100644 index 0000000000..d81c49bf5f Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png new file mode 100644 index 0000000000..3fd075b6f2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png new file mode 100644 index 0000000000..e1097177dd Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png new file mode 100644 index 0000000000..8164adb6fb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-1.png new file mode 100644 index 0000000000..7f8ab70aa1 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2-av1.mp4 new file mode 100644 index 0000000000..f59474320e Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.mp4 new file mode 100644 index 0000000000..1cef85be35 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.png new file mode 100644 index 0000000000..6939c9c14d Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-3.png new file mode 100644 index 0000000000..8dd07eb8b7 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-4.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-4.png new file mode 100644 index 0000000000..6f7289f25b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-expert-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-expert-1.png new file mode 100644 index 0000000000..96517a5714 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-expert-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-intro.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-intro.png new file mode 100644 index 0000000000..ec0b0c43a6 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-intro.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.avif new file mode 100644 index 0000000000..854d71a67c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.png new file mode 100644 index 0000000000..424870152b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.avif new file mode 100644 index 0000000000..b5ec4b250e Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.png new file mode 100644 index 0000000000..baca7435da Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.avif new file mode 100644 index 0000000000..57d183dc41 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.png new file mode 100644 index 0000000000..eb4d69f3c2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.avif new file mode 100644 index 0000000000..2d218fcb1c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.png new file mode 100644 index 0000000000..aaa257d857 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-5.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-5.png new file mode 100644 index 0000000000..7008d8f2f3 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-5.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.avif new file mode 100644 index 0000000000..32e8d80c5d Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.png new file mode 100644 index 0000000000..2f5b7a9ce0 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.avif new file mode 100644 index 0000000000..1133e4b2a5 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.png new file mode 100644 index 0000000000..7ebb60b9cb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.avif new file mode 100644 index 0000000000..a64627d987 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.png new file mode 100644 index 0000000000..c9a2aef22a Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.avif new file mode 100644 index 0000000000..492d9edd66 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.png new file mode 100644 index 0000000000..80ee1128cb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-1.png new file mode 100644 index 0000000000..725c1bdf87 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-2.png new file mode 100644 index 0000000000..816dc6342c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-3.png new file mode 100644 index 0000000000..cf0cac1b6f Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1-av1.mp4 new file mode 100644 index 0000000000..baea4736fb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif new file mode 100644 index 0000000000..5cc53c67cc Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 new file mode 100644 index 0000000000..b66a74f6a0 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.png new file mode 100644 index 0000000000..edb0e7819b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10-av1.mp4 new file mode 100644 index 0000000000..ee558d4967 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.avif new file mode 100644 index 0000000000..0834f772e6 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.mp4 new file mode 100644 index 0000000000..7fd32e697a Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.png new file mode 100644 index 0000000000..bcf132e8f1 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.av1.mp4 new file mode 100644 index 0000000000..c764934dbb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.avif new file mode 100644 index 0000000000..88823370a7 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.mp4 new file mode 100644 index 0000000000..2b161f49f3 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.png new file mode 100644 index 0000000000..6c1ee1428e Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.av1.mp4 new file mode 100644 index 0000000000..50c9998ae1 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.avif new file mode 100644 index 0000000000..80847be267 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.mp4 new file mode 100644 index 0000000000..cc01462f07 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.png new file mode 100644 index 0000000000..62a3dda03e Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.av1.mp4 new file mode 100644 index 0000000000..314bbce658 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.avif new file mode 100644 index 0000000000..f7de4e43ff Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.mp4 new file mode 100644 index 0000000000..3ad12633d2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.png new file mode 100644 index 0000000000..749320c076 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.avif new file mode 100644 index 0000000000..d174905da3 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.png new file mode 100644 index 0000000000..29dff9897b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.avif new file mode 100644 index 0000000000..ec98267aa6 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.png new file mode 100644 index 0000000000..488fcaa2e4 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16-av1.mp4 new file mode 100644 index 0000000000..53169c202c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.avif new file mode 100644 index 0000000000..6d9dbe2cf3 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.mp4 new file mode 100644 index 0000000000..dc62a314e2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.png new file mode 100644 index 0000000000..374c695252 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.avif new file mode 100644 index 0000000000..a6209b2cb2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.png new file mode 100644 index 0000000000..97ff2b1d77 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif new file mode 100644 index 0000000000..20ea848958 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.png new file mode 100644 index 0000000000..9fdef57de2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.avif new file mode 100644 index 0000000000..12dec836cf Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.png new file mode 100644 index 0000000000..7f7a0ec6f5 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2-av1.mp4 new file mode 100644 index 0000000000..3cc53a75ed Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2.mp4 new file mode 100644 index 0000000000..07bc422df1 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.avif new file mode 100644 index 0000000000..62e51b3a62 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.png new file mode 100644 index 0000000000..7107c09f30 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.avif new file mode 100644 index 0000000000..00d1995314 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.png new file mode 100644 index 0000000000..f2253ad4e6 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.avif new file mode 100644 index 0000000000..bf025f0ea5 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.png new file mode 100644 index 0000000000..0be6a45c1c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.avif new file mode 100644 index 0000000000..3961fff6f5 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.png new file mode 100644 index 0000000000..99b6e074ff Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.avif new file mode 100644 index 0000000000..a854419322 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.png new file mode 100644 index 0000000000..5e4c9d7b1b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21-av1.mp4 new file mode 100644 index 0000000000..0c88029a3a Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.avif new file mode 100644 index 0000000000..205333b313 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.mp4 new file mode 100644 index 0000000000..515241adc6 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.png new file mode 100644 index 0000000000..f1de067045 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.avif new file mode 100644 index 0000000000..e81eef91d0 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.png new file mode 100644 index 0000000000..7a655204b3 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.avif new file mode 100644 index 0000000000..39941b1867 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.png new file mode 100644 index 0000000000..e26b11dc3e Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.av1.mp4 new file mode 100644 index 0000000000..c4487cfd50 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.avif new file mode 100644 index 0000000000..5a47e99ca9 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.mp4 new file mode 100644 index 0000000000..b2b0f071f3 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.png new file mode 100644 index 0000000000..bf85580214 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.avif new file mode 100644 index 0000000000..6479dc8d88 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.png new file mode 100644 index 0000000000..35bff22f2d Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.avif new file mode 100644 index 0000000000..0181b5f987 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.png new file mode 100644 index 0000000000..43dc1c0d55 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6-av1.mp4 new file mode 100644 index 0000000000..c0c17706cf Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.avif new file mode 100644 index 0000000000..0378ad7d54 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.mp4 new file mode 100644 index 0000000000..16b872fe65 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.png new file mode 100644 index 0000000000..1556657dbf Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7-av1.mp4 new file mode 100644 index 0000000000..f59474320e Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.avif new file mode 100644 index 0000000000..f093352fe2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.mp4 new file mode 100644 index 0000000000..1cef85be35 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.png new file mode 100644 index 0000000000..42f1f8e60b Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8-av1.mp4 new file mode 100644 index 0000000000..556c92cf97 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.avif new file mode 100644 index 0000000000..9d4a1e9776 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.mp4 new file mode 100644 index 0000000000..54357f54a4 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.png new file mode 100644 index 0000000000..803e335c5f Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.png differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9-av1.mp4 new file mode 100644 index 0000000000..b1db907180 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9-av1.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.avif new file mode 100644 index 0000000000..4f7da45fdb Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.avif differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.mp4 new file mode 100644 index 0000000000..9a221b02a2 Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.mp4 differ diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.png new file mode 100644 index 0000000000..dc4117f54c Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.png differ diff --git a/src/less/components/button.less b/src/less/components/button.less index f5d384170e..c1e7d59d15 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -2,6 +2,7 @@ .btn { display: inline-flex; + justify-content: center; align-items: center; position: relative; font-weight: var(--font-weight-normal); diff --git a/src/less/components/sidebar.less b/src/less/components/sidebar.less index c8c893682e..bd9ceeabf6 100644 --- a/src/less/components/sidebar.less +++ b/src/less/components/sidebar.less @@ -126,6 +126,7 @@ position: absolute; top: 0; left: 100%; + text-align: left; &:hover { overflow-y: auto; diff --git a/src/less/components/topbar-experimental.less b/src/less/components/topbar-experimental.less new file mode 100644 index 0000000000..40cdfff640 --- /dev/null +++ b/src/less/components/topbar-experimental.less @@ -0,0 +1,522 @@ +@import "../global.less"; + +.topbar.experimental { + --topbar-height: 60px; + --topbar-border-width: 0.5rem; + --topbar-opened-padding: 24px; + --topbar-opened-padding-body: 30px; + --topbar-spacing-horizontal: 32px; + --topbar-links-container-spacing: 60px; + --topbar-max-width: 960px; + --border-radius-topbar: 24px; + --border-radius-topbar-nav: 32px; + + // TODO: once color-mix get enough support we can replace this by CSS var. Postcss does not parse a color-mix fallback if css-var (since cannot predict ahead of time the dynamic aspect of it) + height: var(--topbar-height); + width: calc(100% - 2 * var(--topbar-spacing-horizontal, 32px)); + max-width: var(--topbar-max-width, 960px); + z-index: calc(var(--topbar-z-index, 400) - 1); + display: flex; + justify-content: center; + align-items: center; + padding: 0 1.5rem; + position: relative; + border-radius: 0 0 var(--border-radius-topbar, 24px) + var(--border-radius-topbar, 24px); + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + backdrop-filter: blur(10px) brightness(1.1); + z-index: -1; + background-color: color-mix(in srgb, @brand-bg-gray, transparent 35%); + border-radius: 0 0 var(--border-radius-topbar, 24px) + var(--border-radius-topbar, 24px); + } + + .nav-container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + } + + &.topbar-sticky { + position: sticky; + top: 0; + } + + .topbar-nav-closing + :is(.topbar-modal-header, .topbar-link-container, .topbar-modal-footer) { + visibility: hidden; + } + + // LESS func to generate classes for triggering sticky starting from a breakpoints + each(@grid-breakpoints, .(@min-width, @infix) { + &.topbar-min-@{infix}-sticky { + @media screen and (min-width: @min-width) { + .topbar-sticky(); + } + } + }); + + // LESS func to generate classes for triggering sticky ending at a breakpoint + each(@grid-breakpoints-max, .(@max-width, @infix) { + &.topbar-max-@{infix}-sticky { + @media screen and (max-width: @max-width) { + .topbar-sticky(); + } + } + }); + + .topbar-logo { + background-size: cover; + border: none; + display: flex; + + & img { + height: 32px; + width: 67px; + } + } + + & .topbar-btn { + user-select: none; + background: none; + padding: 0; + border: 0; + align-self: center; + font-weight: bold; + + &:focus { + border-radius: 0.125rem; + box-shadow: 0 0 0 2px @black; + outline: none; + } + } + + // once :has() is supported, we can remove the script that add inline-style display: none/flex to .topbar-btn when open & close + &:has(.topbar-nav-open) .topbar-btn { + display: none; + } + + // hamburger menu btn to open the topbar-nav dialog + .topbar-btn { + display: flex; + outline: 1px solid transparent; + + &:hover { + cursor: pointer; + } + } + + // topbar-link-right is the class for the first link aligned on the right side + > .topbar-link-right { + display: none; + } + + // topbar-nav is the container for links in both topbar up top and when dialog opened + .topbar-nav { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + background: transparent; + display: none; + + &.topbar-nav-closing { + animation: fade-out ease-in-out 0.3s forwards; + } + + // topbar when dialog is opened + &.topbar-nav-open { + animation: fade-in ease-in-out 0.3s forwards; + position: fixed; + display: flex; + justify-content: flex-end; + + .topbar-link-container { + animation-name: slide-in-from-right; + animation-duration: 0.4s; + animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); + position: relative; + padding: 0; + border-width: 0; + display: flex; + flex-direction: column; + align-items: stretch; + width: calc(100% - var(--topbar-links-container-spacing, 60px)); + + > .topbar-modal-body { + background-color: var(--white, #ffffff); + flex-direction: column; + align-items: stretch; + padding: var(--topbar-opened-padding, 24px) + calc(var(--topbar-opened-padding-body, 30px) - 10px) + var(--topbar-opened-padding, 24px) + var(--topbar-opened-padding-body, 30px); + flex: 1; + border-top: 1px solid var(--gray); + border-bottom: 1px solid var(--gray); + + .topbar-link-right { + margin: initial; + + .material-icons { + margin: 0; + } + } + + // links in open modal + > a { + font-size: 1.125rem; + padding: 1rem 0; + border-bottom: 1px solid + color-mix(in srgb, @brand-secondary, transparent 60%); + + &:first-of-type { + padding-top: 0; + } + } + + > button { + margin-top: 0.75rem; + + &:first-of-type { + margin-top: auto; + } + } + } + + > :is(.topbar-modal-header, .topbar-modal-footer) { + display: flex; + background-color: var(--white, #ffffff); + padding: var(--topbar-opened-padding, 24px); + } + + .topbar-modal-header { + justify-content: flex-end; + border-radius: var(--border-radius-topbar-nav, 32px) 0 0 0; + + & > button.topbar-close { + height: var(--topbar-spacing-horizontal, 32px); + width: var(--topbar-spacing-horizontal, 32px); + background-color: var(--gray); + border: transparent; + + > i { + font-size: 24px; + } + } + } + + .topbar-modal-footer { + justify-content: center; + border-radius: 0 0 0 var(--border-radius-topbar-nav, 32px); + + > button { + width: 220px; + } + } + } + } + + .topbar-link-container { + z-index: var(--topbar-z-index, 400); + width: 100%; + + .topbar-modal-body { + display: flex; + justify-items: center start; + top: 0; + bottom: 0; + background-color: var(--white); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + + > a { + font-size: 1rem; + color: @brand-secondary; + cursor: pointer; + text-decoration: none; + display: flex; + gap: 0.5rem; + line-height: 1; + align-items: center; + + > span { + font-family: var(--brand-headline); + font-weight: var(--font-weight-normal); + + // for :before underline effect + position: relative; + + // :before underline effect + &:before { + content: ""; + position: absolute; + background-color: currentcolor; + height: 3px; + bottom: -4px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 0; + } + } + + // :hover underline expand width effects in non-opened topbar links + &:hover { + > span { + &:before { + display: block; + width: 100%; + transition: width 0.4s; + } + + text-decoration: none; + } + } + + // :active underline permanently displayed primary color + &.active { + > span { + &:before { + width: 100%; + background-color: var(--brand-primary); + } + + text-decoration: none; + color: @black; + } + } + + &:last-of-type { + border-bottom: none; + } + } + + @supports not selector(:has(a)) { + > .topbar-link-right { + margin-left: auto; + } + } + + @supports selector(:has(a)) { + > .topbar-link-right, + &:not(&:has(.topbar-link-right)) button:first-of-type { + margin-left: auto; + } + } + } + } + } + + /* + LESS mixin function scoped for the topbar on wider viewport, generated by the topbar mixin + 1. Create a mixin called .topbar-@{infix}-wide + 2. For each breakpoint in @grid-breakpoints, create a selector called .topbar-@{infix}-wide + 3. For each selector, create a media query for the breakpoint + 4. Inside each media query, call the mixin .topbar-wide() + */ + // TODO: try to refactor it to make it more readable and not use LESS mixin, but native CSS + + each(@grid-breakpoints, .(@min-width, @infix) { + &.topbar-@{infix}-wide:not(.legacy) { + @media screen and (min-width: @min-width) { + .topbar-wide(); + } + } + }); + + .topbar-wide { + --topbar-height: 88px; + --modal-nav-width: 480px; + + padding: 0 var(--topbar-spacing-horizontal); + + .topbar-logo img { + height: var(--topbar-spacing-horizontal); + width: auto; + } + + .topbar-nav { + display: flex; + position: static; + flex-grow: 1; + height: 100%; + + &.topbar-nav-open { + width: 100vw; + height: 100vh; + position: fixed; + justify-content: center; + align-items: center; + + .topbar-link-container { + width: var(--modal-nav-width, 480px); + height: max-content; + max-height: calc( + 100% - 2 * var(--topbar-links-container-spacing, 60px) + ); + margin: var(--topbar-links-container-spacing, 60px); + padding: 0; + + .topbar-modal-body { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--brown-soft) transparent; + scrollbar-gutter: stable; + + &::-webkit-scrollbar { + background-color: transparent; + width: 10px; + } + + &::-webkit-scrollbar-thumb { + background: var(--brown-soft); + border-radius: 5rem; + } + + > a, + > a:not(.pinned) { + display: flex; + font-size: 1.25rem; + padding: 1.5rem 0; + + &:first-of-type { + padding-top: 0; + } + &:last-of-type { + padding-bottom: 0; + } + } + } + + :is(.topbar-modal-header, .topbar-modal-footer) { + } + + .topbar-modal-header { + border-radius: var(--border-radius-topbar-nav, 32) + var(--border-radius-topbar-nav, 32) 0 0; + } + + .topbar-modal-footer { + border-radius: 0 0 var(--border-radius-topbar-nav, 32) + var(--border-radius-topbar-nav, 32); + } + } + } + + // links container when in topbar only, not opened in dialog + &:not(.topbar-nav-open) .topbar-link-container { + .topbar-modal-body { + position: static; + background-color: transparent; + width: 100%; + display: flex; + justify-content: flex-start; + gap: 2rem; + padding: 0 2rem 0 3rem; + overflow: visible; + + :is(a, button):not(.pinned) { + display: none; + } + } + + :is(.topbar-modal-header, .topbar-modal-footer) { + display: none; + } + } + } + } + + @keyframes fade-in { + 0% { + backdrop-filter: blur(0); + background-color: transparent; + } + + 33% { + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + } + + 100% { + backdrop-filter: blur(20px); + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + } + } + + @keyframes fade-out { + 0% { + backdrop-filter: blur(20px); + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + } + + 1% { + backdrop-filter: blur(20px); + } + + 33% { + backdrop-filter: blur(20px); + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + } + + 99% { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + background: transparent; + } + + 100% { + backdrop-filter: blur(0); + background-color: transparent; + } + } + + @keyframes slide-in-from-right { + from { + transform: translateX(100%); + } + + to { + transform: translateX(0); + } + } + + @media (prefers-reduced-motion) { + // TODO: once finish animations / transition -> go through each & disable any animation/transition here + .topbar:not(.legacy) + nav.topbar-nav:is(.topbar-nav-open, .topbar-nav-closing) { + animation-duration: 0ms; + + & > .topbar-link-container { + animation-duration: 0ms; + } + } + } + + @media (forced-colors: active) { + a { + border-bottom: 1px solid; + + &:focus, + &:hover, + &.active { + border-bottom: 4px solid; + } + } + } +} diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less index 6b461b6765..bffc0a3e00 100644 --- a/src/less/components/topbar.less +++ b/src/less/components/topbar.less @@ -1,4 +1,5 @@ @import "../global.less"; +@import "./topbar-experimental.less"; @topbar-height: 80px; @topbar-border-width: 0.5rem; @@ -6,7 +7,7 @@ @topbar-border-top: @topbar-border-width solid @brand-primary; @topbar-link-container-width: 288px; -.topbar { +.topbar:not(.experimental) { border-top: @topbar-border-top; background-color: @white; margin: 0 auto; @@ -356,11 +357,11 @@ } &.topbar-nav-open { - animation: fade-in 0.5s forwards; + animation: fade-in-legacy 0.5s forwards; border-top: solid 1px @brand-bg-gray; .topbar-link-container { - animation: slide-in 0.5s ease forwards; + animation: slide-in-legacy 0.5s ease forwards; .sidebar { display: block; @@ -399,10 +400,10 @@ } &.topbar-nav-closing { - animation: fade-out 0.3s forwards; + animation: fade-out-legacy 0.3s forwards; .topbar-link-container { - animation: slide-out 0.3s ease alternate; + animation: slide-out-legacy 0.3s ease alternate; > a:first-of-type { margin-top: 1rem; @@ -486,235 +487,234 @@ &.topbar-xl-wide { padding: 0 1.5rem; } -} - -.topbar-wide { - .topbar-btn { - display: none; - } - - .topbar-logo { - margin-top: 0; - margin-right: 2rem; - } - - .topbar-link-right { - margin-left: auto; - padding: 0; - align-items: center; - font-family: var(--brand-headline); - font-weight: var(--font-weight-normal); - color: var(--brand-secondary); - cursor: pointer; - text-decoration: none; - display: flex; - } + .topbar-wide { + .topbar-btn { + display: none; + } - .topbar-nav { - display: flex; - position: static; - flex-grow: 1; - height: 100%; + .topbar-logo { + margin-top: 0; + margin-right: 2rem; + } - .topbar-close { - display: none; + .topbar-link-right { + margin-left: auto; + padding: 0; + align-items: center; + font-family: var(--brand-headline); + font-weight: var(--font-weight-normal); + color: var(--brand-secondary); + cursor: pointer; + text-decoration: none; + display: flex; } - .topbar-link-container { - position: static; - background-color: transparent; - width: 100%; + .topbar-nav { display: flex; - padding: 0; - overflow: visible; - transform: translateX(0%); + position: static; + flex-grow: 1; + height: 100%; - > a:not(.close-topbar-nav) { - margin-top: 8px; + .topbar-close { + display: none; + } - &:hover { - > span { - &:before { - display: block; - width: 100%; - transition: width 0.4s; + .topbar-link-container { + position: static; + background-color: transparent; + width: 100%; + display: flex; + padding: 0; + overflow: visible; + transform: translateX(0%); + + > a:not(.close-topbar-nav) { + margin-top: 8px; + + &:hover { + > span { + &:before { + display: block; + width: 100%; + transition: width 0.4s; + } + + text-decoration: none; } + } + + &.active { + > span { + &:before { + width: 100%; + } - text-decoration: none; + text-decoration: none; + color: @black; + } } - } - &.active { > span { + position: relative; + &:before { - width: 100%; + content: ""; + position: absolute; + background-color: @brand-primary; + height: 4px; + bottom: -4px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 0; } - - text-decoration: none; - color: @black; } - } - > span { - position: relative; - - &:before { - content: ""; - position: absolute; - background-color: @brand-primary; - height: 4px; - bottom: -4px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 0; + &:not(.topbar-link-right) { + .material-icons, + &.material-icons { + display: none; + } } } - &:not(.topbar-link-right) { - .material-icons, - &.material-icons { - display: none; - } + > *:not(.close-topbar-nav):not(.topbar-link-right) { + text-decoration: none; + margin-left: 1rem; + margin-right: 1rem; } - } - - > *:not(.close-topbar-nav):not(.topbar-link-right) { - text-decoration: none; - margin-left: 1rem; - margin-right: 1rem; - } - .close-topbar-nav { - display: none; + .close-topbar-nav { + display: none; + } } } } -} -each(@grid-breakpoints, .(@min-width, @infix) { - .topbar-@{infix}-wide { - @media screen and (min-width: @min-width) { - .topbar-wide(); - } - } -}); + each(@grid-breakpoints, .(@min-width, @infix) { + &.topbar-@{infix}-wide { + @media screen and (min-width: @min-width) { + .topbar-wide(); + } + } + }); -// Keyframe animations -@keyframes slide-in { - 100% { - transform: translateX(0%); + // Keyframe animations + @keyframes slide-in-legacy { + 100% { + transform: translateX(0%); + } } -} -@keyframes slide-out { - 0% { - transform: translateX(0%); - } + @keyframes slide-out-legacy { + 0% { + transform: translateX(0%); + } - 100% { - transform: translateX(-100%); + 100% { + transform: translateX(-100%); + } } -} -@keyframes fade-in { - 0% { - background: transparent; - } + @keyframes fade-in-legacy { + 0% { + background: transparent; + } - 100% { - background: fade(@black, 50%); + 100% { + background: fade(@black, 50%); + } } -} -@keyframes fade-out { - 0% { - background: fade(@black, 50%); - } + @keyframes fade-out-legacy { + 0% { + background: fade(@black, 50%); + } - 100% { - background: transparent; + 100% { + background: transparent; + } } -} -@media (prefers-reduced-motion) { - .topbar { - .topbar-nav { - .sidebar { - .sidebar-nav { - .main-nav-ul { - .nav-group { - .nav-ul-active() { - > .nav-ul { - transition: max-height 0s ease-in-out; + @media (prefers-reduced-motion) { + .topbar { + .topbar-nav { + .sidebar { + .sidebar-nav { + .main-nav-ul { + .nav-group { + .nav-ul-active() { + > .nav-ul { + transition: max-height 0s ease-in-out; + } } } } } } - } - &.topbar-nav-open { - animation: fade-in 0s forwards; + &.topbar-nav-open { + animation: fade-in-legacy 0s forwards; - .topbar-link-container { - animation: slide-in 0s ease forwards; + .topbar-link-container { + animation: slide-in-legacy 0s ease forwards; + } } - } - &.topbar-nav-closing { - animation: fade-out 0s forwards; + &.topbar-nav-closing { + animation: fade-out-legacy 0s forwards; - .topbar-link-container { - animation: slide-out 0s ease alternate; + .topbar-link-container { + animation: slide-out-legacy 0s ease alternate; + } } } } } -} - -@media (forced-colors: active) { - #dg-topbar { - border-bottom: 3px solid; - } - .topbar-link-container { - border: 10px solid; - } + @media (forced-colors: active) { + #dg-topbar { + border-bottom: 3px solid; + } - .topbar { - .topbar-close { - outline: 2px solid; + .topbar-link-container { + border: 10px solid; + } - &:hover, - &:focus, - &.focus { + .topbar { + .topbar-close { outline: 2px solid; - } - &[active], - &:active, - &.active { - outline: 2px solid; - } + &:hover, + &:focus, + &.focus { + outline: 2px solid; + } - &:focus, - &.focus { - outline: 2px solid; + &[active], + &:active, + &.active { + outline: 2px solid; + } + + &:focus, + &.focus { + outline: 2px solid; + } } } - } - .nav-group { - .nav-leaf { - a { - border-bottom: 1px solid; + .nav-group { + .nav-leaf { + a { + border-bottom: 1px solid; - &:focus, - &:hover, - &.active { - border-bottom: 4px solid; + &:focus, + &:hover, + &.active { + border-bottom: 4px solid; + } } } } diff --git a/src/less/core/grid.less b/src/less/core/grid.less index 7db51bb58c..40676b0207 100644 --- a/src/less/core/grid.less +++ b/src/less/core/grid.less @@ -165,10 +165,6 @@ .container-fluid { .make-container(); - - > .topbar { - padding: 0; - } } .grid-guide { diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less index e8b0f30a1e..988fecfe13 100644 --- a/src/less/documentation-swedbankpay.less +++ b/src/less/documentation-swedbankpay.less @@ -720,6 +720,183 @@ } } + .container.playbook { + .row { + gap: 8px; + + img { + border-radius: 2px; + } + } + } + + .playbook-overview { + a.cards-secondary i { + color: var(--brand-turquoise); + } + } + + .playbook-mozaic { + --gap: 10px; + --radius: 0; + + .row { + gap: var(--gap); + + > div { + padding-left: 0; + padding-right: 0; + } + + img, + video { + width: 100%; + object-fit: cover; + border-radius: var(--radius, 0); + } + + img { + height: 100%; + } + + video { + max-width: 100%; + max-height: 100%; + + @media (max-width: @screen-sm-min) { + height: auto; + width: 100%; + } + } + } + } + + .playbook-showroom-portrait-phones-19 { + background-color: var(--brand-primary-light-3); + } + + .playbook-glued-grid { + .row { + padding-left: 1px; + padding-right: 1px; + + img { + margin: -2px; + } + } + } + + #bold-typography .playbook .row { + @media (max-width: @screen-sm-min) { + & > div:nth-child(1) { + flex: 1; + + img { + height: 100%; + object-fit: fill; + } + } + + & > div:nth-child(2) { + width: 35.5%; + } + } + } + + .ratio-responsive-row { + @media (min-width: @screen-sm-min) { + aspect-ratio: var(--row-width) / var(--row-height); + height: calc(678px * var(--row-height) / var(--row-width)); + + > div.col-sm { + height: 100%; + + > img { + max-height: 100%; + } + } + + .col-sm { + flex-basis: initial; + flex-grow: initial; + max-width: initial; + position: static; + width: unset; + min-height: unset; + padding-right: unset; + padding-left: unset; + + .w-100 { + width: auto; + } + } + } + } + + .grid-row { + &.delicate-lines { + display: grid; + grid-template: + "one three four five" 1fr + "two three four six" 2fr + / 1fr 1fr 1fr 1fr; + gap: 10px; + + @media (max-width: @screen-sm-min) { + grid-template: + "one one" auto + "two two" auto + "three four" auto + "five five" auto + "six six" auto + / 1fr 1fr; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 3px; + } + + img:nth-child(1) { + grid-area: one; + } + + img:nth-child(2) { + grid-area: two; + } + + img:nth-child(3) { + grid-area: three; + } + + img:nth-child(4) { + grid-area: four; + } + + img:nth-child(5) { + grid-area: five; + } + + img:nth-child(6) { + grid-area: six; + } + } + } + + figure figcaption { + color: var(--text-muted); + } + + .shift-right-1 { + margin-right: -1px; + } + + .shift-left-1 { + margin-left: -1px; + } + section { margin-bottom: 2rem; @@ -993,11 +1170,16 @@ right: 56px; // width of options-open icon height: 39px; } + + &:has(.options-open.d-none):after { + right: 0; // no need to shift left when options sidebar button is not displayed + } } &.tabs-fade-left { &:before { height: 39px; + left: 0; } } @@ -1052,6 +1234,21 @@ } } } + + // TODO: delete once support for has() is good enough + // which means probably around mid-January 2024 for FF support on FF v.120 (Nov 2023) + 2 versions + @supports not selector(:has(a, b)) { + + div.d-flex > div.d-flex { + max-width: 100%; + } + } + + // prevents components inside doc component preview to overflow outside the component-preview container + @supports selector(:has(a, b)) { + + div > div:has(> .component-preview) { + max-width: 100%; + } + } } .component-preview { @@ -1825,11 +2022,15 @@ } .topbar { - z-index: calc(var(--sidebar-z-index, 400) - 1); + z-index: calc(var(--sidebar-z-index, 400)); - + main { - height: 10rem; - background-color: @light-gray; + &:not(.experimental) { + z-index: calc(var(--sidebar-z-index, 400) - 1); + + & + main { + height: 10rem; + background-color: @light-gray; + } } } } diff --git a/src/less/global.less b/src/less/global.less index dd7be51ff6..86b98e7bc9 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -165,6 +165,9 @@ --base-padding-xl: calc(var(--base-padding) * 2); --base-padding-xxl: calc(var(--base-padding) * 4); + // misc paddings + --vscroll-padding-right: 17px; + /* Forms spacing */ --input-padding-x: 16px; --input-padding-y: 12px; @@ -243,14 +246,10 @@ body { overflow: hidden; @media screen and (min-width: @screen-sm-min) { - padding-right: 17px; + padding-right: var(--vscroll-padding-right, 17px); .dialog { - padding-right: 17px; - } - - .topbar { - padding: 0 20px; + padding-right: var(--vscroll-padding-right, 17px); } } } diff --git a/src/less/utilities/images.less b/src/less/utilities/images.less index 25ec8eaf89..23ad2bbf5b 100644 --- a/src/less/utilities/images.less +++ b/src/less/utilities/images.less @@ -19,3 +19,7 @@ max-width: 100%; height: auto; } + +.object-fit-cover { + object-fit: cover; +} diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less index 1d0b68ef79..3abaffb627 100644 --- a/src/less/variables-swedbankpay.less +++ b/src/less/variables-swedbankpay.less @@ -172,6 +172,7 @@ --brand-turquoise-light: #8acdc3; /* Main Brand Color Variants */ + --brand-primary-light-3: #fff3d5; --brand-secondary-light-1: var(--brown-medium, #72605e); --brand-secondary-light-2: var(--brown-soft, #a38b80); --brand-secondary-light-3: var(--brown-light, #d4c4bc); @@ -189,6 +190,7 @@ --text-disabled: #c0bebe; // Background colors + --brand-bg-gray: var(--gray, #ebe7e2); // System colors --brand-error: #b5111a; diff --git a/src/scripts/main/sidebar/index.js b/src/scripts/main/sidebar/index.js index 42dfd21b15..af7eddf96e 100644 --- a/src/scripts/main/sidebar/index.js +++ b/src/scripts/main/sidebar/index.js @@ -24,20 +24,20 @@ class TopbarSidebar { navGroup .querySelector(".nav-group-heading") .addEventListener("click", () => - this._setActiveStatus(navGroup, SELECTORS.NAVGROUP) - ) + this._setActiveStatus(navGroup, SELECTORS.NAVGROUP), + ), ); [...navSubGroups].map((navSubGroup) => navSubGroup .querySelector(".nav-subgroup-heading") .addEventListener("click", () => - this._setActiveStatus(navSubGroup, SELECTORS.NAVSUBGROUP) - ) + this._setActiveStatus(navSubGroup, SELECTORS.NAVSUBGROUP), + ), ); [...navLeaves].map((navLeaf) => navLeaf.addEventListener("click", () => - this._setActiveStatus(navLeaf, SELECTORS.NAVLEAF) - ) + this._setActiveStatus(navLeaf, SELECTORS.NAVLEAF), + ), ); } @@ -45,18 +45,18 @@ class TopbarSidebar { element.classList.remove("active"); const activeSubGroups = element.querySelectorAll( - SELECTORS.NAVSUBGROUP + SELECTORS.ACTIVE + SELECTORS.NAVSUBGROUP + SELECTORS.ACTIVE, ); activeSubGroups.length > 0 && [...activeSubGroups].map((activeSubGroup) => - activeSubGroup.classList.remove("active") + activeSubGroup.classList.remove("active"), ); } _setActiveStatus(element, selector) { const activeElements = this.el.querySelectorAll( - selector + SELECTORS.ACTIVE + selector + SELECTORS.ACTIVE, ); element.classList.add("active"); @@ -67,7 +67,7 @@ class TopbarSidebar { } else { activeElement !== element && [...activeElement.querySelectorAll(SELECTORS.NAVSUBGROUP)].filter( - (activeElementChild) => activeElementChild === element + (activeElementChild) => activeElementChild === element, ).length === 0 && activeElement.classList.remove("active"); } @@ -82,13 +82,13 @@ class TopbarSidebar { return () => { const scrollNumber = [...headers].filter( - (header) => header.offsetTop <= content.scrollTop + scrollBuffer + (header) => header.offsetTop <= content.scrollTop + scrollBuffer, ).length - 1; const activeLeaf = this.el.querySelector( - SELECTORS.NAVLEAF + SELECTORS.ACTIVE + SELECTORS.NAVLEAF + SELECTORS.ACTIVE, ); const leaves = activeLeaf.parentElement.querySelectorAll( - SELECTORS.NAVLEAF + SELECTORS.NAVLEAF, ); if (scrollNumber === -1) { @@ -143,24 +143,24 @@ class Sidebar { window.addEventListener("popstate", this._popStateListener); [...liList].map((li) => - li.querySelector("a").addEventListener("click", () => this._activate(li)) + li.querySelector("a").addEventListener("click", () => this._activate(li)), ); Array.from(this.el.querySelectorAll("ul")).map((ul) => ul.parentElement.classList.contains("active") ? ul.setAttribute("aria-expanded", "true") - : ul.setAttribute("aria-expanded", "false") + : ul.setAttribute("aria-expanded", "false"), ); [...previousNavs].map((previousNav) => previousNav.addEventListener("click", () => - this._setPreviousNav(previousNav) - ) + this._setPreviousNav(previousNav), + ), ); [...secondaryNavLI].map((secNavLi) => secNavLi.addEventListener("keyup", (e) => { if (e.keyCode === 13) { skipLink.focus(); } - }) + }), ); } @@ -218,7 +218,7 @@ class Sidebar { _setActiveStatus(element, selector) { const activeElements = this.el.querySelectorAll( - selector + SELECTORS.ACTIVE + selector + SELECTORS.ACTIVE, ); element.classList.add("active"); @@ -254,10 +254,10 @@ class Sidebar { _contentScrollListener() { const scrollNumber = [...this.headers].filter( - (header) => header.offsetTop <= window.pageYOffset + (header) => header.offsetTop <= window.pageYOffset, ).length - 1; const activeSecondaryNavLi = this.el.querySelector( - `.secondary-nav-li${SELECTORS.ACTIVE}` + `.secondary-nav-li${SELECTORS.ACTIVE}`, ); const leaves = activeSecondaryNavLi ? activeSecondaryNavLi.querySelectorAll(SELECTORS.NAVLEAF) @@ -301,7 +301,7 @@ const setActiveState = (id, group, subGroup, leaf) => { subGroup < activeGroup.querySelectorAll(SELECTORS.NAVSUBGROUP).length ) { const activeSubGroup = activeGroup.querySelectorAll( - SELECTORS.NAVSUBGROUP + SELECTORS.NAVSUBGROUP, )[subGroup]; activeSubGroup.classList.add("active"); @@ -318,7 +318,7 @@ const setActiveState = (id, group, subGroup, leaf) => { return active; } else { console.warn( - "sidebar.setActiveState: The group parameter must be provided" + "sidebar.setActiveState: The group parameter must be provided", ); return null; @@ -331,7 +331,7 @@ const removeActiveState = (id, group, subGroup, leaf) => { if (!sidebar) { console.warn( - `sidebar.removeActiveState: No sidebar with id ${id} found.` + `sidebar.removeActiveState: No sidebar with id ${id} found.`, ); return null; @@ -343,7 +343,7 @@ const removeActiveState = (id, group, subGroup, leaf) => { if (subGroup !== null) { const activeSubGroup = activeGroup.querySelectorAll( - SELECTORS.NAVSUBGROUP + SELECTORS.NAVSUBGROUP, )[subGroup]; active = activeSubGroup; @@ -355,7 +355,7 @@ const removeActiveState = (id, group, subGroup, leaf) => { active.classList.remove("active"); } else { console.warn( - "sidebar.removeActiveState: The group parameter must be provided" + "sidebar.removeActiveState: The group parameter must be provided", ); return null; @@ -367,6 +367,14 @@ const initScrollListener = (id, contentId, headerType) => { const sidebar = _sidebars.filter((sidebar) => sidebar.id === id)[0]; + if (!sidebar) { + console.warn( + `sidebar.initScrollListener: Cannot find sidebar with id ${id}`, + ); + + return false; + } + const content = document.getElementById(contentId); if (content) { @@ -382,12 +390,15 @@ const initScrollListener = (id, contentId, headerType) => { .querySelectorAll(SELECTORS.NAVLEAF); [...leaves].map((leaf, i) => - leaf.addEventListener("click", sidebar._navLeafScrollListener(headers[i])) + leaf.addEventListener( + "click", + sidebar._navLeafScrollListener(headers[i]), + ), ); sidebar._contentScrollListener(); } else { console.warn( - `sidebar.initScrollListener: Cannot find main content with id ${contentId}` + `sidebar.initScrollListener: Cannot find main content with id ${contentId}`, ); } }; @@ -395,6 +406,14 @@ const initScrollListener = (id, contentId, headerType) => { const removeScrollListener = (id) => { const sidebar = _sidebars.filter((sidebar) => sidebar.id === id)[0]; + if (!sidebar) { + console.warn( + `sidebar.removeScrollListener: Cannot find sidebar with id ${id}`, + ); + + return false; + } + window.removeEventListener("scroll", sidebar._contentScrollListener); }; @@ -403,7 +422,7 @@ const _createTopbarSidebar = (sidebarQuery) => { _sidebars.filter((sidebar) => sidebar.id === sidebarQuery.id).length > 0 ) { const updatedSidebarObject = _sidebars.filter( - (sidebar) => sidebar.id === sidebarQuery.id + (sidebar) => sidebar.id === sidebarQuery.id, )[0]; updatedSidebarObject.constructSidebar(sidebarQuery); @@ -423,7 +442,7 @@ const _createSidebar = (sidebarQuery) => { _sidebars.filter((sidebar) => sidebar.id === sidebarQuery.id).length > 0 ) { const updatedSidebarObject = _sidebars.filter( - (sidebar) => sidebar.id === sidebarQuery.id + (sidebar) => sidebar.id === sidebarQuery.id, )[0]; updatedSidebarObject.constructSidebar(sidebarQuery); @@ -441,7 +460,17 @@ const _createSidebar = (sidebarQuery) => { const populateSidebarTertiary = (id, leafList) => { const sidebar = document.getElementById(id); - const activeTertiaryUl = sidebar.querySelector(".secondary-nav-li.active ul"); + const activeTertiaryUl = sidebar?.querySelector( + ".secondary-nav-li.active ul", + ); + + if (!sidebar) { + console.warn( + `sidebar.populateSidebarTertiary: Cannot find sidebar with id ${id}`, + ); + + return false; + } activeTertiaryUl.innerHTML = ""; @@ -486,7 +515,7 @@ const init = (id, topbarSidebar) => { } const sidebarObjects = [...sidebars].map((sidebar) => - _createSidebar(sidebar) + _createSidebar(sidebar), ); return sidebarObjects; diff --git a/src/scripts/main/topbar/NavMenu.js b/src/scripts/main/topbar/NavMenu.js index db9d24ad45..c116769a7d 100644 --- a/src/scripts/main/topbar/NavMenu.js +++ b/src/scripts/main/topbar/NavMenu.js @@ -4,6 +4,7 @@ const SELECTORS = { BTN: ".topbar-btn", ICON: ".topbar-btn-icon", OPEN: "topbar-nav-open", + CLOSING: "topbar-nav-closing", }; const FOCUSELEMENTS = @@ -16,6 +17,9 @@ export default class NavMenu { this._closeHandlerNavMenuElement = this._closeHandlerNavMenuElement.bind(this); this.close = this.close.bind(this); + this._removesNavClosing = this._removesNavClosing.bind(this); + this._safetyClosingCleanIfDidNotReachEnd = + this._safetyClosingCleanIfDidNotReachEnd.bind(this); this.constructNavMenu(topbarComponent, navMenu); } @@ -102,9 +106,12 @@ export default class NavMenu { window.removeEventListener("resize", this.resizeEvent, { passive: true }); this.navMenuElement.classList.remove("topbar-nav-open"); - this.navMenuElement.style.display = "none"; - this.btnElement.style.display = "flex"; - this.closeNavIcon.style.display = "none"; + + if (this._isLegacyMenu(this.navMenuElement)) { + this.navMenuElement.style.display = "none"; + this.closeNavIcon.style.display = "none"; + this.btnElement.style.display = "flex"; + } } _setFirstTabStop(index) { @@ -120,9 +127,12 @@ export default class NavMenu { this.resizeEvent = this._resizeListener.bind(this); window.addEventListener("resize", this.resizeEvent, { passive: true }); this.navMenuElement.classList.add("topbar-nav-open"); - this.navMenuElement.style.display = "block"; - this.btnElement.style.display = "none"; - this.closeNavIcon.style.display = "flex"; + + if (this._isLegacyMenu(this.navMenuElement)) { + this.navMenuElement.style.display = "block"; + this.btnElement.style.display = "none"; + this.closeNavIcon.style.display = "flex"; + } this.btnElement.setAttribute("aria-expanded", "true"); @@ -135,16 +145,15 @@ export default class NavMenu { this.isOpen = false; window.removeEventListener("resize", this.resizeEvent, { passive: true }); - this.navMenuElement.classList.remove("topbar-nav-open"); this.navMenuElement.classList.add("topbar-nav-closing"); - setTimeout(() => { - this.focusedElementBeforeNav ? this.focusedElemBeforeNav.focus() : null; + this.navMenuElement.classList.remove("topbar-nav-open"); - this.navMenuElement.classList.remove("topbar-nav-closing"); - this.navMenuElement.style.display = "none"; - this.btnElement.style.display = "flex"; - this.closeNavIcon.style.display = "none"; - }, 300); + this.navMenuElement.addEventListener( + "animationend", + this._removesNavClosing + ); + + this._safetyClosingCleanIfDidNotReachEnd(); this.btnElement.setAttribute("aria-expanded", "false"); @@ -154,4 +163,35 @@ export default class NavMenu { _containsPoint(x, y) { return isWithinBoundingBox(x, y, this.linkContainer); } + + _removesNavClosing() { + this.focusedElementBeforeNav ? this.focusedElemBeforeNav.focus() : null; + + this.navMenuElement.classList.remove("topbar-nav-closing"); + + if (this._isLegacyMenu(this.navMenuElement)) { + this.navMenuElement.style.display = "none"; + this.btnElement.style.display = "flex"; + this.closeNavIcon.style.display = "none"; + } + + this.navMenuElement.removeEventListener( + "animationend", + this._removesNavClosing + ); + } + + _safetyClosingCleanIfDidNotReachEnd() { + setTimeout(() => { + this.navMenuElement.classList.contains(SELECTORS.CLOSING) + ? this._removesNavClosing() + : null; + }, 600); + } + + _isLegacyMenu(navMenu) { + return Boolean( + !navMenu?.closest(".topbar")?.classList.contains("experimental") + ); + } } diff --git a/tools/generate-routes-copy-array.js b/tools/generate-routes-copy-array.js index 24f4048b31..430fd6c0ae 100644 --- a/tools/generate-routes-copy-array.js +++ b/tools/generate-routes-copy-array.js @@ -3,6 +3,7 @@ const componentsRoutes = require("../src/App/routes/components"); const identityRoutes = require("../src/App/routes/identity"); const getStartedRoutes = require("../src/App/routes/get-started"); const patternsRoutes = require("../src/App/routes/patterns"); +const playbookRoutes = require("../src/App/routes/playbook"); const getRoutes = () => { const ROUTES = [...ROOTROUTES]; @@ -12,6 +13,7 @@ const getRoutes = () => { ...identityRoutes, ...getStartedRoutes, ...patternsRoutes, + ...playbookRoutes, ].forEach((route) => { ROUTES.push(route.path); route.routes.forEach((r) => ROUTES.push(r.rootPath)); diff --git a/webpack.config.js b/webpack.config.js index 16ff4700f3..17a758b26b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,6 +16,11 @@ const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); module.exports = (env, argv) => { const brand = argv.env.brand || "swedbankpay"; const brandTitle = brand === "swedbankpay" ? "Swedbank Pay" : "PayEx"; // <-- Used with the HTML plugin for titles etc... + /** + * Checks if the brand is Swedbank Pay + * @type {boolean} + */ + const isSwedbankPay = Boolean(brand.toLowerCase().includes("swedbank")); const isProd = argv.mode === "production"; const isDevServer = !!argv.env.WEBPACK_SERVE; const isAnalyze = !!argv.env.analyze; @@ -194,6 +199,7 @@ module.exports = (env, argv) => { google: isRelease, brand: JSON.stringify(brand), brandTitle: JSON.stringify(brandTitle), + isSwedbankPay: JSON.stringify(isSwedbankPay), }, }), // Ignores moments locale folder which doubles the size of the package, moment is a dependency of chart.js [EH] @@ -357,6 +363,10 @@ module.exports = (env, argv) => { source: `./src/img/${brand}/documentation/topbar/*.png`, destination: `./dist${basename}img/documentation/topbar`, }, + { + source: `./src/img/${brand}/documentation/playbook/*.{png,jpg,avif,mp4}`, + destination: `./dist${basename}img/documentation/playbook`, + }, { source: "./src/img/background/*.svg", destination: `./dist${basename}img/background/`,