From 3868f12e483c3db9f5d09d190ee1ed9fd5d8ff10 Mon Sep 17 00:00:00 2001 From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org> Date: Mon, 22 Jul 2024 10:03:17 -0500 Subject: [PATCH 1/4] feat: update emulsify core to official npm release --- config/emulsify-core/eslintrc.config.json | 2 +- config/emulsify-core/storybook/main.js | 30 + .../{example.preview.js => preview.js} | 2 +- config/emulsify-core/stylelintrc.config.json | 2 +- package-lock.json | 569 ++++++++++-------- package.json | 21 +- 6 files changed, 369 insertions(+), 257 deletions(-) create mode 100644 config/emulsify-core/storybook/main.js rename config/emulsify-core/storybook/{example.preview.js => preview.js} (55%) diff --git a/config/emulsify-core/eslintrc.config.json b/config/emulsify-core/eslintrc.config.json index 36abe04..8c43050 100644 --- a/config/emulsify-core/eslintrc.config.json +++ b/config/emulsify-core/eslintrc.config.json @@ -1,6 +1,6 @@ { "extends": [ - "../../node_modules/emulsify-core/config/eslintrc.config.json" + "../../node_modules/@emulsify/core/config/eslintrc.config.json" ], "globals": { "Drupal": true, diff --git a/config/emulsify-core/storybook/main.js b/config/emulsify-core/storybook/main.js new file mode 100644 index 0000000..e18b2ab --- /dev/null +++ b/config/emulsify-core/storybook/main.js @@ -0,0 +1,30 @@ +// Pass an empty configOverrides by default. +const configOverrides = {}; + +// Uncomment the following section to override the default Emulsify Core configuration. +// Doing so is a complete override so no configuration from Emulsify Core's main.js will be inherited. +// See https://storybook.js.org/docs/7/configure for details. +// const configOverrides = { +// stories: [ +// '../../../../components/**/*.stories.@(js|jsx|ts|tsx)', +// ], +// addons: [ +// '../../../@storybook/addon-a11y', +// '../../../@storybook/addon-links', +// '../../../@storybook/addon-essentials', +// '../../../@storybook/addon-themes', +// '../../../@storybook/addon-styling-webpack' +// ], +// core: { +// builder: 'webpack5', +// }, +// framework: { +// name: '@storybook/html-webpack5', +// options: {}, +// }, +// docs: { +// autodocs: true, +// }, +// }; + +module.exports = {configOverrides}; \ No newline at end of file diff --git a/config/emulsify-core/storybook/example.preview.js b/config/emulsify-core/storybook/preview.js similarity index 55% rename from config/emulsify-core/storybook/example.preview.js rename to config/emulsify-core/storybook/preview.js index 48a8bda..8e12585 100644 --- a/config/emulsify-core/storybook/example.preview.js +++ b/config/emulsify-core/storybook/preview.js @@ -1,2 +1,2 @@ // Import additional stylesheets just for storybook. -import '../../../dist/css/cl-style.css'; \ No newline at end of file +// import '../../../dist/css/cl-style.css'; \ No newline at end of file diff --git a/config/emulsify-core/stylelintrc.config.json b/config/emulsify-core/stylelintrc.config.json index 0880a4b..f4c7901 100644 --- a/config/emulsify-core/stylelintrc.config.json +++ b/config/emulsify-core/stylelintrc.config.json @@ -1,5 +1,5 @@ { "extends": [ - "../../node_modules/emulsify-core/config/.stylelintrc.json" + "../../node_modules/@emulsify/core/config/.stylelintrc.json" ] } diff --git a/package-lock.json b/package-lock.json index 59ce6a4..9e36047 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "0.0.0-development", "license": "ISC", "dependencies": { + "@emulsify/core": "^1.2.0", "@percy/cli": "^1.28.2", - "@percy/storybook": "^5.0.1", - "emulsify-core": "github:emulsify-ds/emulsify-core" + "@percy/storybook": "^5.0.1" }, "devDependencies": { "@commitlint/cli": "^19.2.0", @@ -2326,9 +2326,9 @@ } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz", - "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==", + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz", + "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==", "funding": [ { "type": "github", @@ -2343,13 +2343,13 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.2.4" + "@csstools/css-tokenizer": "^2.4.1" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz", - "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz", + "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==", "funding": [ { "type": "github", @@ -2365,9 +2365,9 @@ } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.9", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.9.tgz", - "integrity": "sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==", + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz", + "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==", "funding": [ { "type": "github", @@ -2382,14 +2382,14 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.6.1", - "@csstools/css-tokenizer": "^2.2.4" + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1" } }, "node_modules/@csstools/selector-specificity": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", - "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz", + "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==", "funding": [ { "type": "github", @@ -2415,6 +2415,15 @@ "node": ">=10.0.0" } }, + "node_modules/@dual-bundle/import-meta-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", @@ -2532,6 +2541,130 @@ "node": ">=8" } }, + "node_modules/@emulsify/core": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emulsify/core/-/core-1.2.0.tgz", + "integrity": "sha512-kWMMYn+Wg5KXuePdHJbGeP/xbr/G0Z1jltOIYnkOkSk7FygHLPo3rxPgvA8EMElyTBgu/Tr+102XwLj5sjugSw==", + "dependencies": { + "@babel/core": "^7.24.0", + "@babel/eslint-parser": "^7.23.10", + "@emulsify/cli": "^1.6.0", + "@storybook/addon-a11y": "^7.6.17", + "@storybook/addon-actions": "^7.6.17", + "@storybook/addon-essentials": "^7.6.17", + "@storybook/addon-links": "^7.6.17", + "@storybook/addon-styling-webpack": "^1.0.0", + "@storybook/addon-themes": "^7.6.17", + "@storybook/html": "^7.6.17", + "@storybook/html-webpack5": "^7.6.17", + "add-attributes-twig-extension": "^0.1.0", + "autoprefixer": "^10.4.19", + "babel-loader": "^9.1.3", + "babel-preset-minify": "^0.5.2", + "bem-twig-extension": "^0.1.1", + "breakpoint-sass": "^3.0.0", + "chalk": "^5.2.0", + "clean-webpack-plugin": "^4.0.0", + "concurrently": "^8.2.2", + "css-loader": "^7.1.1", + "eslint": "^8.57.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-security": "^2.1.1", + "eslint-plugin-storybook": "^0.8.0", + "eslint-webpack-plugin": "^4.1.0", + "file-loader": "^6.2.0", + "fs-extra": "^11.2.0", + "glob": "^10.3.12", + "graceful-fs": "^4.2.11", + "html-webpack-plugin": "^5.6.0", + "imagemin-webpack-plugin": "^2.4.2", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "js-yaml": "^4.1.0", + "js-yaml-loader": "^1.2.2", + "lint-staged": "^15.2.2", + "mini-css-extract-plugin": "^2.9.0", + "node-sass-glob-importer": "^5.3.3", + "normalize.css": "^8.0.1", + "open-cli": "^8.0.0", + "pa11y": "^7.0.0", + "postcss": "^8.4.38", + "postcss-loader": "^8.1.1", + "postcss-scss": "^4.0.9", + "ramda": "^0.30.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "regenerator-runtime": "^0.14.1", + "sass": "^1.75.0", + "sass-loader": "^14.2.1", + "storybook": "^7.6.17", + "style-dictionary": "^3.9.2", + "stylelint": "^16.3.1", + "stylelint-config-standard-scss": "^13.1.0", + "stylelint-prettier": "^5.0.0", + "stylelint-selector-bem-pattern": "^4.0.0", + "stylelint-webpack-plugin": "^5.0.1", + "svg-sprite-loader": "^6.0.11", + "token-transformer": "^0.0.33", + "twig-drupal-filters": "^3.2.0", + "twig-loader": "github:fourkitchens/twig-loader", + "twig-testing-library": "^1.2.0", + "webpack": "^5.91.0", + "webpack-cli": "^5.1.4", + "webpack-merge": "^5.10.0", + "yaml": "^2.4.1" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@emulsify/core/node_modules/css-loader": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz", + "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==", + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.33", + "postcss-modules-extract-imports": "^3.1.0", + "postcss-modules-local-by-default": "^4.0.5", + "postcss-modules-scope": "^3.2.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.5.4" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || 1.x", + "webpack": "^5.27.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/@emulsify/core/node_modules/ramda": { + "version": "0.30.1", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.30.1.tgz", + "integrity": "sha512-tEF5I22zJnuclswcZMc8bDIrwRHRzf+NqVEmqg50ShAZMP7MWeR/RGDthfM/p+BlqvF2fXAzpn8i+SJcYD3alw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ramda" + } + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -8954,10 +9087,10 @@ "acorn-walk": "^8.0.2" } }, - "node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "node_modules/acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "peerDependencies": { "acorn": "^8" } @@ -9497,9 +9630,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.18", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz", - "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==", + "version": "10.4.19", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", + "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", "funding": [ { "type": "opencollective", @@ -9516,7 +9649,7 @@ ], "dependencies": { "browserslist": "^4.23.0", - "caniuse-lite": "^1.0.30001591", + "caniuse-lite": "^1.0.30001599", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -10930,11 +11063,11 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -12599,9 +12732,9 @@ } }, "node_modules/css-functions-list": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz", - "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz", + "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==", "engines": { "node": ">=12 || >=16" } @@ -13970,84 +14103,6 @@ "node": ">= 4" } }, - "node_modules/emulsify-core": { - "version": "1.0.4", - "resolved": "git+ssh://git@github.com/emulsify-ds/emulsify-core.git#1852e576454d74619941300aed072de29d746355", - "license": "ISC", - "dependencies": { - "@babel/core": "^7.24.0", - "@babel/eslint-parser": "^7.23.10", - "@emulsify/cli": "^1.6.0", - "@storybook/addon-a11y": "^7.6.17", - "@storybook/addon-actions": "^7.6.17", - "@storybook/addon-essentials": "^7.6.17", - "@storybook/addon-links": "^7.6.17", - "@storybook/addon-styling-webpack": "^1.0.0", - "@storybook/addon-themes": "^7.6.17", - "@storybook/html": "^7.6.17", - "@storybook/html-webpack5": "^7.6.17", - "add-attributes-twig-extension": "^0.1.0", - "autoprefixer": "^10.4.18", - "babel-loader": "^9.1.3", - "babel-preset-minify": "^0.5.2", - "bem-twig-extension": "^0.1.1", - "breakpoint-sass": "^3.0.0", - "chalk": "^5.2.0", - "clean-webpack-plugin": "^4.0.0", - "concurrently": "^8.2.2", - "css-loader": "^6.10.0", - "eslint": "^8.57.0", - "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jest": "^27.9.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-security": "^2.1.1", - "eslint-plugin-storybook": "^0.8.0", - "eslint-webpack-plugin": "^4.1.0", - "file-loader": "^6.2.0", - "fs-extra": "^11.2.0", - "glob": "^10.3.10", - "graceful-fs": "^4.2.11", - "html-webpack-plugin": "^5.6.0", - "imagemin-webpack-plugin": "^2.4.2", - "jest": "^29.7.0", - "jest-environment-jsdom": "^29.7.0", - "js-yaml": "^4.1.0", - "js-yaml-loader": "^1.2.2", - "lint-staged": "^15.2.2", - "mini-css-extract-plugin": "^2.8.1", - "node-sass-glob-importer": "^5.3.3", - "normalize.css": "^8.0.1", - "open-cli": "^8.0.0", - "pa11y": "^7.0.0", - "postcss": "^8.4.36", - "postcss-loader": "^8.1.1", - "postcss-scss": "^4.0.9", - "ramda": "^0.29.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "regenerator-runtime": "^0.14.1", - "sass": "^1.72.0", - "sass-loader": "^14.1.1", - "storybook": "^7.6.17", - "style-dictionary": "^3.9.2", - "stylelint": "^16.2.1", - "stylelint-config-standard-scss": "^13.0.0", - "stylelint-prettier": "^5.0.0", - "stylelint-selector-bem-pattern": "^4.0.0", - "stylelint-webpack-plugin": "^5.0.0", - "svg-sprite-loader": "^6.0.11", - "token-transformer": "^0.0.33", - "twig-drupal-filters": "^3.2.0", - "twig-loader": "github:fourkitchens/twig-loader", - "twig-testing-library": "^1.2.0", - "webpack": "^5.90.3", - "webpack-cli": "^5.1.4", - "webpack-merge": "^5.10.0", - "yaml": "^2.4.1" - } - }, "node_modules/encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -14065,9 +14120,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", - "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "version": "5.17.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz", + "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -15775,9 +15830,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dependencies": { "to-regex-range": "^5.0.1" }, @@ -16698,22 +16753,20 @@ "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==" }, "node_modules/glob": { - "version": "10.3.10", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz", - "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==", + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "dependencies": { "foreground-child": "^3.1.0", - "jackspeak": "^2.3.5", - "minimatch": "^9.0.1", - "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0", - "path-scurry": "^1.10.1" + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" }, - "engines": { - "node": ">=16 || 14 >=14.17" - }, "funding": { "url": "https://github.com/sponsors/isaacs" } @@ -16743,9 +16796,9 @@ } }, "node_modules/glob/node_modules/minimatch": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", - "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dependencies": { "brace-expansion": "^2.0.1" }, @@ -19309,15 +19362,12 @@ } }, "node_modules/jackspeak": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz", - "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", "dependencies": { "@isaacs/cliui": "^8.0.2" }, - "engines": { - "node": ">=14" - }, "funding": { "url": "https://github.com/sponsors/isaacs" }, @@ -22236,9 +22286,9 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz", - "integrity": "sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.0.tgz", + "integrity": "sha512-Zs1YsZVfemekSZG+44vBsYTLQORkPMwnlv+aehcxK/NLKC+EGhDB39/YePYYqx/sTk6NnYpuqikhSn7+JIevTA==", "dependencies": { "schema-utils": "^4.0.0", "tapable": "^2.2.1" @@ -22274,9 +22324,9 @@ } }, "node_modules/minipass": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz", - "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "engines": { "node": ">=16 || 14 >=14.17" } @@ -26256,6 +26306,11 @@ "node": ">= 14" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", + "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==" + }, "node_modules/pako": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz", @@ -26480,27 +26535,24 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "node_modules/path-scurry": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz", - "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", "dependencies": { - "lru-cache": "^9.1.1 || ^10.0.0", + "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" }, "engines": { - "node": ">=16 || 14 >=14.17" + "node": ">=16 || 14 >=14.18" }, "funding": { "url": "https://github.com/sponsors/isaacs" } }, "node_modules/path-scurry/node_modules/lru-cache": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz", - "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==", - "engines": { - "node": "14 || >=16.14" - } + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, "node_modules/path-to-regexp": { "version": "6.2.1", @@ -26548,9 +26600,9 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==" }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -26907,9 +26959,9 @@ } }, "node_modules/postcss": { - "version": "8.4.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz", - "integrity": "sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==", + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "funding": [ { "type": "opencollective", @@ -26926,8 +26978,8 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.1.0" + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -26981,9 +27033,9 @@ "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==" }, "node_modules/postcss-modules-extract-imports": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz", + "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==", "engines": { "node": "^10 || ^12 || >= 14" }, @@ -26992,9 +27044,9 @@ } }, "node_modules/postcss-modules-local-by-default": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz", - "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz", + "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==", "dependencies": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^6.0.2", @@ -27008,9 +27060,9 @@ } }, "node_modules/postcss-modules-scope": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz", - "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz", + "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==", "dependencies": { "postcss-selector-parser": "^6.0.4" }, @@ -27099,9 +27151,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.16", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", - "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", + "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -27639,15 +27691,6 @@ "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz", "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==" }, - "node_modules/ramda": { - "version": "0.29.1", - "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz", - "integrity": "sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/ramda" - } - }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -28527,9 +28570,9 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "node_modules/sass": { - "version": "1.72.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz", - "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==", + "version": "1.77.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", + "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -28543,9 +28586,9 @@ } }, "node_modules/sass-loader": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.1.1.tgz", - "integrity": "sha512-QX8AasDg75monlybel38BZ49JP5Z+uSKfKwF2rO7S74BywaRmGQMUBw9dtkS+ekyM/QnP+NOrRYq8ABMZ9G8jw==", + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz", + "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==", "dependencies": { "neo-async": "^2.6.2" }, @@ -29546,9 +29589,9 @@ } }, "node_modules/source-map-js": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz", - "integrity": "sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -30399,47 +30442,58 @@ } }, "node_modules/stylelint": { - "version": "16.2.1", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", - "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", - "dependencies": { - "@csstools/css-parser-algorithms": "^2.5.0", - "@csstools/css-tokenizer": "^2.2.3", - "@csstools/media-query-list-parser": "^2.1.7", - "@csstools/selector-specificity": "^3.0.1", + "version": "16.7.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.7.0.tgz", + "integrity": "sha512-Q1ATiXlz+wYr37a7TGsfvqYn2nSR3T/isw3IWlZQzFzCNoACHuGBb6xBplZXz56/uDRJHIygxjh7jbV/8isewA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "dependencies": { + "@csstools/css-parser-algorithms": "^2.7.1", + "@csstools/css-tokenizer": "^2.4.1", + "@csstools/media-query-list-parser": "^2.1.13", + "@csstools/selector-specificity": "^3.1.1", + "@dual-bundle/import-meta-resolve": "^4.1.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", "cosmiconfig": "^9.0.0", - "css-functions-list": "^3.2.1", + "css-functions-list": "^3.2.2", "css-tree": "^2.3.1", - "debug": "^4.3.4", + "debug": "^4.3.5", "fast-glob": "^3.3.2", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^8.0.0", + "file-entry-cache": "^9.0.0", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.3.0", + "ignore": "^5.3.1", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", - "known-css-properties": "^0.29.0", + "known-css-properties": "^0.34.0", "mathml-tag-names": "^2.1.3", - "meow": "^13.1.0", - "micromatch": "^4.0.5", + "meow": "^13.2.0", + "micromatch": "^4.0.7", "normalize-path": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.4.33", + "picocolors": "^1.0.1", + "postcss": "^8.4.39", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.0.15", + "postcss-selector-parser": "^6.1.0", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", "strip-ansi": "^7.1.0", "supports-hyperlinks": "^3.0.0", "svg-tags": "^1.0.0", - "table": "^6.8.1", + "table": "^6.8.2", "write-file-atomic": "^5.0.1" }, "bin": { @@ -30447,10 +30501,6 @@ }, "engines": { "node": ">=18.12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/stylelint" } }, "node_modules/stylelint-config-recommended": { @@ -30501,9 +30551,9 @@ } }, "node_modules/stylelint-config-standard-scss": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.0.0.tgz", - "integrity": "sha512-WaLvkP689qSYUpJQPCo30TFJSSc3VzvvoWnrgp+7PpVby5o8fRUY1cZcP0sePZfjrFl9T8caGhcKg0GO34VDiQ==", + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz", + "integrity": "sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==", "dependencies": { "stylelint-config-recommended-scss": "^14.0.0", "stylelint-config-standard": "^36.0.0" @@ -30513,7 +30563,7 @@ }, "peerDependencies": { "postcss": "^8.3.3", - "stylelint": "^16.1.0" + "stylelint": "^16.3.1" }, "peerDependenciesMeta": { "postcss": { @@ -30572,9 +30622,9 @@ } }, "node_modules/stylelint-webpack-plugin": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/stylelint-webpack-plugin/-/stylelint-webpack-plugin-5.0.0.tgz", - "integrity": "sha512-f56OmfvIYfZpL5+TKg3LZ+Ehzoar5GAwytUtsdti+W6WhR3UpQC36vmXHsKxx9ibj7dKXCIKea6w0U+LdVSBmg==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/stylelint-webpack-plugin/-/stylelint-webpack-plugin-5.0.1.tgz", + "integrity": "sha512-07lpo1uVoFctKv0EOOg/YSrUppcLMjNBSMRqgooNnlbfAOgQfMzvLK+EbXz0HQiEgZobr+XQX9md/TgwTGdzbw==", "dependencies": { "globby": "^11.1.0", "jest-worker": "^29.7.0", @@ -30618,32 +30668,48 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==" }, + "node_modules/stylelint/node_modules/debug": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", + "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/stylelint/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" }, "node_modules/stylelint/node_modules/file-entry-cache": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", - "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz", + "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==", "dependencies": { - "flat-cache": "^4.0.0" + "flat-cache": "^5.0.0" }, "engines": { - "node": ">=16.0.0" + "node": ">=18" } }, "node_modules/stylelint/node_modules/flat-cache": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", - "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz", + "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==", "dependencies": { - "flatted": "^3.2.9", + "flatted": "^3.3.1", "keyv": "^4.5.4" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/stylelint/node_modules/global-modules": { @@ -30710,6 +30776,11 @@ "node": ">=0.10.0" } }, + "node_modules/stylelint/node_modules/known-css-properties": { + "version": "0.34.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz", + "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==" + }, "node_modules/stylelint/node_modules/meow": { "version": "13.2.0", "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", @@ -30721,6 +30792,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stylelint/node_modules/micromatch": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", + "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, "node_modules/stylelint/node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -31355,9 +31438,9 @@ } }, "node_modules/table": { - "version": "6.8.1", - "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", - "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", + "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", "dependencies": { "ajv": "^8.0.1", "lodash.truncate": "^4.4.2", @@ -33011,25 +33094,25 @@ } }, "node_modules/webpack": { - "version": "5.90.3", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz", - "integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==", + "version": "5.93.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz", + "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==", "dependencies": { "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.17.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", @@ -33037,7 +33120,7 @@ "schema-utils": "^3.2.0", "tapable": "^2.1.1", "terser-webpack-plugin": "^5.3.10", - "watchpack": "^2.4.0", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" }, "bin": { diff --git a/package.json b/package.json index 95f6218..8785137 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,8 @@ }, "homepage": "https://github.com/emulsify-ds/compound#readme", "scripts": { - "a11y": "npm run storybook-build && node_modules/emulsify-core/scripts/a11y.js -r", - "build": "webpack --config node_modules/emulsify-core/config/webpack/webpack.prod.js", - "build-storybook": "npm run storybook-build", + "a11y": "npm run storybook-build && node_modules/@emulsify/core/scripts/a11y.js -r", + "build": "webpack --config node_modules/@emulsify/core/config/webpack/webpack.prod.js", "coverage": "npm run test && open-cli .coverage/lcov-report/index.html", "develop": "concurrently --raw \"npm run webpack\" \"npm run storybook\"", "format": "npm run lint-fix; npm run prettier-fix", @@ -31,25 +30,25 @@ "husky:pre-commit": "lint-staged", "lint": "npm run lint-js; npm run lint-styles", "lint-fix": "npm run lint-js -- --fix; npm run lint-styles -- --fix", - "lint-js": "eslint --config config/emulsify-core/eslintrc.config.json --no-eslintrc --no-error-on-unmatched-pattern ./components", + "lint-js": "eslint --config config/@emulsify/core/eslintrc.config.json --no-eslintrc --no-error-on-unmatched-pattern ./components", "lint-staged": "lint-staged", - "lint-styles": "stylelint --config config/emulsify-core/stylelintrc.config.json './components/**/*.scss'", - "prettier": "prettier --config config/emulsify-core/prettierrc.config.json --ignore-path config/emulsify-core/.prettierignore --ignore-unknown \"./components/**/*.{js,yml,scss,md}\"", - "prettier-fix": "prettier --config config/emulsify-core/prettierrc.config.json --ignore-path config/emulsify-core/.prettierignore --write --ignore-unknown \"./components**/*.{js,yml,scss,md}\"", + "lint-styles": "stylelint --config config/@emulsify/core/stylelintrc.config.json './components/**/*.scss'", + "prettier": "prettier --config config/@emulsify/core/prettierrc.config.json --ignore-path config/@emulsify/core/.prettierignore --ignore-unknown \"./components/**/*.{js,yml,scss,md}\"", + "prettier-fix": "prettier --config config/@emulsify/core/prettierrc.config.json --ignore-path config/@emulsify/core/.prettierignore --write --ignore-unknown \"./components**/*.{js,yml,scss,md}\"", "semantic-release": "semantic-release", - "storybook": "npm run build; storybook dev -c node_modules/emulsify-core/.storybook --ci -s ../../../dist,../../../assets/images,../../../assets/icons -p 6006", - "storybook-build": "npm run build; storybook build -c node_modules/emulsify-core/.storybook -s ./dist,./assets/images,./assets/icons -o .out", + "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -s ../../../../dist,../../../../assets/images,../../../../assets/icons -p 6006", + "storybook-build": "storybook build -c node_modules/@emulsify/core/.storybook -s ./dist,./assets/images,./assets/icons -o .out", "storybook-deploy": "storybook-to-ghpages -o .out", "test": "jest --coverage --config ./config/jest.config.js", "twatch": "jest --no-coverage --watch --verbose", "visreg": "percy storybook http://localhost:6006", "visreg-ci": "percy storybook .out", - "webpack": "webpack --watch --config ./node_modules/emulsify-core/config/webpack/webpack.dev.js" + "webpack": "webpack --watch --config node_modules/@emulsify/core/config/webpack/webpack.dev.js" }, "dependencies": { "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", - "emulsify-core": "github:emulsify-ds/emulsify-core" + "@emulsify/core": "^1.2.0" }, "devDependencies": { "@commitlint/cli": "^19.2.0", From 6e6a3760c0f9f5250d2af90850708b1766ddd0c3 Mon Sep 17 00:00:00 2001 From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org> Date: Mon, 22 Jul 2024 11:21:20 -0500 Subject: [PATCH 2/4] feat: fix various SASS deprecation warnings --- .../00-base/00-defaults/_03-mixins.scss | 24 +++++--- components/00-base/01-colors/colors.js | 12 ++-- components/00-base/03-site/_base.scss | 4 +- components/01-atoms/buttons/_buttons.scss | 12 ++-- components/01-atoms/lists/_list.scss | 8 ++- .../02-molecules/accordion/_accordion.scss | 4 +- components/02-molecules/alert/alert.js | 60 ++++++++++--------- components/02-molecules/card/_card.scss | 4 +- .../menus/inline/_inline-menu.scss | 12 ++-- .../menus/main-menu/_00-main-menu.scss | 8 ++- .../menus/main-menu/_03-main-menu-toggle.scss | 18 +++--- components/02-molecules/pager/_pager.scss | 4 +- components/02-molecules/status/_status.scss | 4 +- components/02-molecules/tabs/_tabs.scss | 4 +- .../site/site-footer/_site-footer.scss | 12 ++-- .../site/site-header/_site-header.scss | 36 +++++------ components/04-templates/_default.scss | 8 ++- components/style.scss | 57 ++---------------- config/emulsify-core/stylelintrc.config.json | 5 +- package.json | 8 +-- 20 files changed, 154 insertions(+), 150 deletions(-) diff --git a/components/00-base/00-defaults/_03-mixins.scss b/components/00-base/00-defaults/_03-mixins.scss index 6d72350..d22cee1 100644 --- a/components/00-base/00-defaults/_03-mixins.scss +++ b/components/00-base/00-defaults/_03-mixins.scss @@ -11,9 +11,11 @@ */ @mixin body-copy { - font-family: $font-body; - font-size: 1rem; - line-height: 1.6; + & { + font-family: $font-body; + font-size: 1rem; + line-height: 1.6; + } } @mixin clearfix { @@ -55,15 +57,21 @@ // Mixin - Standard Margin @mixin margin { - margin-bottom: 1em; + & { + margin-bottom: 1em; + } } @mixin no-bottom { - margin-bottom: 0; + & { + margin-bottom: 0; + } } @mixin list-reset { - list-style: none; - margin: 0; - padding: 0; + & { + list-style: none; + margin: 0; + padding: 0; + } } diff --git a/components/00-base/01-colors/colors.js b/components/00-base/01-colors/colors.js index 5dd58e5..bf5577c 100644 --- a/components/00-base/01-colors/colors.js +++ b/components/00-base/01-colors/colors.js @@ -4,7 +4,7 @@ Drupal.behaviors.displayColorDefinitions = { * Converts a number to a two-digit hexadecimal string. * * @param {number} x The number to convert. - * @returns {string} Two-digit hexadecimal representation of the number. + * @return {string} Two-digit hexadecimal representation of the number. */ function hex(x) { return `0${parseInt(x, 10).toString(16)}`.slice(-2); @@ -14,21 +14,21 @@ Drupal.behaviors.displayColorDefinitions = { * Converts an rgb color string to a hex color string. * * @param {string} color The RGB color string (e.g., 'rgb(255, 255, 255)'). - * @returns {string} The hexadecimal color string (e.g., '#ffffff'). + * @return {string} The hexadecimal color string (e.g., '#ffffff'). */ function rgb2hex(color) { const rgb = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`; } - const swatches = document.querySelectorAll('.cl-colors__item'); + const swatches = document.querySelectorAll(".cl-colors__item"); if (swatches) { swatches.forEach((swatch) => { const color = window - .getComputedStyle(swatch.querySelector('.cl-colors__swatch'), null) - .getPropertyValue('background-color'); + .getComputedStyle(swatch.querySelector(".cl-colors__swatch"), null) + .getPropertyValue("background-color"); - const definition = swatch.querySelector('.cl-colors__definition'); + const definition = swatch.querySelector(".cl-colors__definition"); definition.textContent = rgb2hex(color); }); } diff --git a/components/00-base/03-site/_base.scss b/components/00-base/03-site/_base.scss index 97335b6..f65929b 100644 --- a/components/00-base/03-site/_base.scss +++ b/components/00-base/03-site/_base.scss @@ -21,7 +21,9 @@ body { .main { @include wrapper; - display: block; /* Fix for IE weirdness */ + & { + display: block; + } } .visually-hidden { diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.scss index e8f7906..61a148f 100644 --- a/components/01-atoms/buttons/_buttons.scss +++ b/components/01-atoms/buttons/_buttons.scss @@ -83,13 +83,17 @@ $button-colors: ( // Button size variations @mixin button-medium { - line-height: 1.4; - padding: $space-one-half $space; + & { + line-height: 1.4; + padding: $space-one-half $space; + } } @mixin button-large { - line-height: 2; - padding: $space $space-double; + & { + line-height: 2; + padding: $space $space-double; + } } .button { diff --git a/components/01-atoms/lists/_list.scss b/components/01-atoms/lists/_list.scss index b05ba6f..c6288b7 100644 --- a/components/01-atoms/lists/_list.scss +++ b/components/01-atoms/lists/_list.scss @@ -4,13 +4,17 @@ ul { @include list-reset; - list-style-type: disc; + & { + list-style-type: disc; + } } ol { @include list-reset; - list-style-type: decimal; + & { + list-style-type: decimal; + } } .text-field { diff --git a/components/02-molecules/accordion/_accordion.scss b/components/02-molecules/accordion/_accordion.scss index 092996c..e4f6851 100644 --- a/components/02-molecules/accordion/_accordion.scss +++ b/components/02-molecules/accordion/_accordion.scss @@ -10,7 +10,9 @@ .accordion__controls { @include list-reset; - display: flex; + & { + display: flex; + } } .accordion__controls__item { diff --git a/components/02-molecules/alert/alert.js b/components/02-molecules/alert/alert.js index 2b4e6fe..e0d18c7 100644 --- a/components/02-molecules/alert/alert.js +++ b/components/02-molecules/alert/alert.js @@ -1,37 +1,39 @@ Drupal.behaviors.alert = { attach(context) { // Selectors - const alerts = context.querySelectorAll('.alert'); - const alertToggle = '.alert__toggle'; + const body = context.querySelector("body"); + const alerts = context.querySelectorAll(".alert"); + const alertToggle = ".alert__toggle"; // Classes and States - const alertId = 'data-alert-id'; - const alertState = 'data-alert-state'; - const buttonState = 'aria-expanded'; + const alertId = "data-alert-id"; + const alertState = "data-alert-state"; + const buttonState = "aria-expanded"; // Function to expand an alert. const expand = (item, toggle, id) => { - item.setAttribute(alertState, 'expanded'); - toggle.setAttribute(buttonState, 'true'); - localStorage.setItem(id, 'expanded'); + item.setAttribute(alertState, "expanded"); + toggle.setAttribute(buttonState, "true"); + localStorage.setItem(id, "expanded"); }; // Function to collapse an alert. const collapse = (item, toggle, id) => { - item.setAttribute(alertState, 'collapsed'); - toggle.setAttribute(buttonState, 'false'); - localStorage.setItem(id, 'collapsed'); + item.setAttribute(alertState, "collapsed"); + toggle.setAttribute(buttonState, "false"); + localStorage.setItem(id, "collapsed"); }; // Function to dismiss an alert. const dismiss = (item, id) => { - item.setAttribute(alertState, 'dismissed'); - localStorage.setItem(id, 'dismissed'); + item.setAttribute(alertState, "dismissed"); + body.classList.remove(id); + localStorage.setItem(id, "dismissed"); }; // Function to remove old alerts from storage. const resetAlerts = () => { Object.keys(localStorage).forEach((key) => { - if (key.includes('alert-id-')) { + if (key.substring(0, 12) === "smith-alert-id-") { localStorage.removeItem(key); } }); @@ -39,11 +41,11 @@ Drupal.behaviors.alert = { // Function to check whether localStorage is both supported and available. // See: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#testing_for_availability - const storageAvailable = (type) => { + function storageAvailable(type) { let storage; try { - storage = window[`${type}`]; - const x = '__storage_test__'; + storage = window[String(type)]; + const x = "__storage_test__"; storage.setItem(x, x); storage.removeItem(x); return true; @@ -56,20 +58,20 @@ Drupal.behaviors.alert = { e.code === 1014 || // test name field too, because code might not be present // everything except Firefox - e.name === 'QuotaExceededError' || + e.name === "QuotaExceededError" || // Firefox - e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && + e.name === "NS_ERROR_DOM_QUOTA_REACHED") && // acknowledge QuotaExceededError only if there's something already stored storage && storage.length !== 0 ); } - }; + } - if (storageAvailable('localStorage')) { + if (storageAvailable("localStorage")) { alerts.forEach((alert) => { const id = alert.getAttribute(alertId); - const type = alert.getAttribute('data-alert-type'); + const type = alert.getAttribute("data-alert-type"); const toggle = alert.querySelector(alertToggle); // Get the alert state if previously interacted with by the user. @@ -78,21 +80,25 @@ Drupal.behaviors.alert = { // If the current alert has no state, clear other values from storage. if (state == null) { resetAlerts(); + body.classList.add(id); } // If the alert was dismissed, keep it dismissed. - if (state === 'dismissed') { + if (state === "dismissed") { dismiss(alert, id); + body.classList.remove(id); // If the alert was collapsed, load it in the collapsed state. - } else if (state === 'collapsed') { + } else if (state === "collapsed") { collapse(alert, toggle, id); + } else { + expand(alert, toggle, id); } // Toggle alert state - toggle.addEventListener('click', () => { - if (type === 'emergency') { + toggle.addEventListener("click", () => { + if (type === "emergency") { // For emergency alerts, toggle the "expanded/collapsed" state. - return alert.getAttribute(alertState) === 'expanded' + return alert.getAttribute(alertState) === "expanded" ? collapse(alert, toggle, id) : expand(alert, toggle, id); } diff --git a/components/02-molecules/card/_card.scss b/components/02-molecules/card/_card.scss index feb697a..6c4d149 100644 --- a/components/02-molecules/card/_card.scss +++ b/components/02-molecules/card/_card.scss @@ -18,7 +18,9 @@ @include heading-medium($font-size: 1rem); @include no-bottom; - color: clr(text); + & { + color: clr(text); + } } .card__body { diff --git a/components/02-molecules/menus/inline/_inline-menu.scss b/components/02-molecules/menus/inline/_inline-menu.scss index aaea61b..6130a1a 100644 --- a/components/02-molecules/menus/inline/_inline-menu.scss +++ b/components/02-molecules/menus/inline/_inline-menu.scss @@ -24,9 +24,11 @@ .inline-menu__link { @include link; - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 1.5px; - text-decoration: none; - text-transform: uppercase; + & { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 1.5px; + text-decoration: none; + text-transform: uppercase; + } } diff --git a/components/02-molecules/menus/main-menu/_00-main-menu.scss b/components/02-molecules/menus/main-menu/_00-main-menu.scss index ac4eabf..aa7bed2 100644 --- a/components/02-molecules/menus/main-menu/_00-main-menu.scss +++ b/components/02-molecules/menus/main-menu/_00-main-menu.scss @@ -39,9 +39,11 @@ $main-menu-medium: $medium; .main-menu { @include list-reset; - position: relative; - z-index: 10; - border-bottom: 1px solid; + & { + position: relative; + z-index: 10; + border-bottom: 1px solid; + } @include breakpoint("medium") { border-bottom: none; diff --git a/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss b/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss index 23cd381..5f2c478 100644 --- a/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss +++ b/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss @@ -7,14 +7,16 @@ .toggle-expand { @include link; - position: absolute; - top: 1rem; - display: inline-block; - margin-left: -1rem; - margin-top: -1rem; - padding: $space; - width: 100vw; - text-decoration: none; + & { + position: absolute; + top: 1rem; + display: inline-block; + margin-left: -1rem; + margin-top: -1rem; + padding: $space; + width: 100vw; + text-decoration: none; + } /* See main-menu.js */ &--open { diff --git a/components/02-molecules/pager/_pager.scss b/components/02-molecules/pager/_pager.scss index 5cad0d6..69f9d13 100644 --- a/components/02-molecules/pager/_pager.scss +++ b/components/02-molecules/pager/_pager.scss @@ -10,7 +10,9 @@ .pager__items { @include list-reset; - text-align: center; + & { + text-align: center; + } } .pager__item { diff --git a/components/02-molecules/status/_status.scss b/components/02-molecules/status/_status.scss index 2bb4523..1a1c5c8 100644 --- a/components/02-molecules/status/_status.scss +++ b/components/02-molecules/status/_status.scss @@ -5,7 +5,9 @@ .status__list { @include list-reset; - margin-bottom: $space; + & { + margin-bottom: $space; + } } .status { diff --git a/components/02-molecules/tabs/_tabs.scss b/components/02-molecules/tabs/_tabs.scss index 27b1197..7fed0a8 100644 --- a/components/02-molecules/tabs/_tabs.scss +++ b/components/02-molecules/tabs/_tabs.scss @@ -7,7 +7,9 @@ .tabs__nav { @include list-reset; - border-bottom: 1px solid clr(highlight, bright); + & { + border-bottom: 1px solid clr(highlight, bright); + } @include breakpoint("large") { border-left: 1px solid clr(highlight, bright); diff --git a/components/03-organisms/site/site-footer/_site-footer.scss b/components/03-organisms/site/site-footer/_site-footer.scss index b45a7c8..e76e9ec 100644 --- a/components/03-organisms/site/site-footer/_site-footer.scss +++ b/components/03-organisms/site/site-footer/_site-footer.scss @@ -6,17 +6,19 @@ .footer { background-color: clr(neutral, n100); padding: $space 0; +} - &__inner { - @include wrapper; +.footer__inner { + @include wrapper; + & { display: flex; flex-flow: column nowrap; gap: 1rem; + } - @include breakpoint("large") { - flex-direction: row; - } + @include breakpoint("large") { + flex-direction: row; } } diff --git a/components/03-organisms/site/site-header/_site-header.scss b/components/03-organisms/site/site-header/_site-header.scss index 3e0c68e..9a1e3d0 100644 --- a/components/03-organisms/site/site-header/_site-header.scss +++ b/components/03-organisms/site/site-header/_site-header.scss @@ -5,31 +5,33 @@ .header { margin-bottom: $space-quadruple; +} - &__inner { - @include wrapper; +.header__inner { + @include wrapper; + & { display: flex; flex-flow: column nowrap; } +} - &__primary { - @include breakpoint("medium") { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - padding: $space 0; - } +.header__primary { + @include breakpoint("medium") { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + padding: $space 0; } +} - &__branding { - max-width: 190px; - padding: 1rem 0; +.header__branding { + max-width: 190px; + padding: 1rem 0; - @include breakpoint("medium") { - margin-right: $space; - max-width: 300px; - padding: 0; - } + @include breakpoint("medium") { + margin-right: $space; + max-width: 300px; + padding: 0; } } diff --git a/components/04-templates/_default.scss b/components/04-templates/_default.scss index 48179cb..9c48c0f 100644 --- a/components/04-templates/_default.scss +++ b/components/04-templates/_default.scss @@ -19,7 +19,9 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter})); .main { @include wrapper; - margin-bottom: 4em; + & { + margin-bottom: 4em; + } @include breakpoint("large") { display: flex; @@ -27,7 +29,9 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter})); } .main-sidebar { - margin-bottom: $space-double; + & { + margin-bottom: $space-double; + } @include breakpoint("large") { order: 2; diff --git a/components/style.scss b/components/style.scss index 18218f6..9d6348d 100644 --- a/components/style.scss +++ b/components/style.scss @@ -2,55 +2,8 @@ @use "~normalize.css/normalize"; // Components. -// Base. -@forward "00-base/01-colors/color-properties"; -@forward "00-base/01-colors/colors-component-library"; -@forward "00-base/01-colors/colors"; -@forward "00-base/02-motion/motion"; -@forward "00-base/03-site/base"; -@forward "00-base/04-spacing/spacing"; - -// Atoms. -@forward "01-atoms/buttons/buttons"; -@forward "01-atoms/forms/checkbox/checkbox"; -@forward "01-atoms/forms/radio/radio"; -@forward "01-atoms/forms/select/select"; -@forward "01-atoms/forms/textfields/textfields"; -@forward "01-atoms/images/image/image"; -@forward "01-atoms/images/icons/icons"; -@forward "01-atoms/links/link/link"; -@forward "01-atoms/lists/list"; -@forward "01-atoms/tables/tables"; -@forward "01-atoms/text/headings/headings"; -@forward "01-atoms/text/text/text"; -@forward "01-atoms/tooltip/tooltip"; -@forward "01-atoms/videos/video"; - -// Molecules. -@forward "02-molecules/accordion/accordion"; -@forward "02-molecules/alert/alert"; -@forward "02-molecules/card/card"; -@forward "02-molecules/cta/cta"; -@forward "02-molecules/logo/logo"; -@forward "02-molecules/menus/breadcrumbs/breadcrumbs"; -@forward "02-molecules/menus/inline/inline-menu"; -@forward "02-molecules/menus/main-menu/00-main-menu"; -@forward "02-molecules/menus/main-menu/01-main-menu-item"; -@forward "02-molecules/menus/main-menu/02-main-menu-link"; -@forward "02-molecules/menus/main-menu/03-main-menu-toggle"; -@forward "02-molecules/menus/social-menu/social-menu"; -@forward "02-molecules/pager/pager"; -@forward "02-molecules/pull-quote/pull-quote"; -@forward "02-molecules/status/status"; -@forward "02-molecules/tabs/tabs"; -@forward "02-molecules/text-with-media/text-with-media"; - -// Organisms. -@forward "03-organisms/grid/grid"; -@forward "03-organisms/grid/grid-item"; -@forward "03-organisms/site/site-footer/site-footer"; -@forward "03-organisms/site/site-header/site-header"; - -// Templates. -@forward "04-templates/default"; -@forward "04-templates/placeholder/place-holder"; +@use "00-base/base"; +@use "01-atoms/atoms"; +@use "02-molecules/molecules"; +@use "03-organisms/organisms"; +@use "04-templates/templates"; diff --git a/config/emulsify-core/stylelintrc.config.json b/config/emulsify-core/stylelintrc.config.json index f4c7901..7bad9d6 100644 --- a/config/emulsify-core/stylelintrc.config.json +++ b/config/emulsify-core/stylelintrc.config.json @@ -1,5 +1,8 @@ { "extends": [ "../../node_modules/@emulsify/core/config/.stylelintrc.json" - ] + ], + "rules": { + "no-duplicate-selectors": null + } } diff --git a/package.json b/package.json index 8785137..9208c3e 100644 --- a/package.json +++ b/package.json @@ -30,11 +30,11 @@ "husky:pre-commit": "lint-staged", "lint": "npm run lint-js; npm run lint-styles", "lint-fix": "npm run lint-js -- --fix; npm run lint-styles -- --fix", - "lint-js": "eslint --config config/@emulsify/core/eslintrc.config.json --no-eslintrc --no-error-on-unmatched-pattern ./components", + "lint-js": "eslint --config config/emulsify-core/eslintrc.config.json --no-eslintrc --no-error-on-unmatched-pattern ./components", "lint-staged": "lint-staged", - "lint-styles": "stylelint --config config/@emulsify/core/stylelintrc.config.json './components/**/*.scss'", - "prettier": "prettier --config config/@emulsify/core/prettierrc.config.json --ignore-path config/@emulsify/core/.prettierignore --ignore-unknown \"./components/**/*.{js,yml,scss,md}\"", - "prettier-fix": "prettier --config config/@emulsify/core/prettierrc.config.json --ignore-path config/@emulsify/core/.prettierignore --write --ignore-unknown \"./components**/*.{js,yml,scss,md}\"", + "lint-styles": "stylelint --config config/emulsify-core/stylelintrc.config.json './components/**/*.scss'", + "prettier": "prettier --config config/emulsify-core/prettierrc.config.json --ignore-path config/emulsify-core/.prettierignore --ignore-unknown \"./components/**/*.{js,yml,scss,md}\"", + "prettier-fix": "prettier --config config/emulsify-core/prettierrc.config.json --ignore-path config/emulsify-core/.prettierignore --write --ignore-unknown \"./components**/*.{js,yml,scss,md}\"", "semantic-release": "semantic-release", "storybook": "storybook dev -c node_modules/@emulsify/core/.storybook --ci -s ../../../../dist,../../../../assets/images,../../../../assets/icons -p 6006", "storybook-build": "storybook build -c node_modules/@emulsify/core/.storybook -s ./dist,./assets/images,./assets/icons -o .out", From 7dd561ab5688bf628f0455a315517017d0bf164e Mon Sep 17 00:00:00 2001 From: Callin Mullaney <57088-callinmullaney@users.noreply.drupalcode.org> Date: Mon, 22 Jul 2024 11:28:12 -0500 Subject: [PATCH 3/4] chore: stylint fixes and added various component dependencies --- .../00-base/01-colors/colors.stories.js | 8 ++--- .../00-base/02-motion/motion.stories.js | 6 ++-- .../00-base/04-spacing/spacing.stories.js | 6 ++-- .../01-atoms/buttons/buttons.stories.js | 8 ++--- components/01-atoms/forms/forms.stories.js | 16 ++++----- components/01-atoms/images/images.stories.js | 16 ++++----- .../01-atoms/links/link/links.stories.js | 6 ++-- components/01-atoms/lists/list.stories.js | 16 ++++----- components/01-atoms/tables/tables.stories.js | 6 ++-- components/01-atoms/text/text.stories.js | 20 +++++------ components/01-atoms/tooltip/tooltip.js | 26 +++++++------- .../01-atoms/tooltip/tooltip.stories.js | 14 ++++---- components/01-atoms/videos/video-embed.js | 8 ++--- components/01-atoms/videos/videos.stories.js | 10 +++--- .../02-molecules/accordion/accordion.js | 28 +++++++-------- .../accordion/accordion.stories.js | 16 ++++----- components/02-molecules/card/cards.stories.js | 8 ++--- components/02-molecules/cta/ctas.stories.js | 6 ++-- components/02-molecules/logo/logo.stories.js | 4 +-- .../02-molecules/menus/main-menu/main-menu.js | 18 +++++----- .../02-molecules/menus/menus.stories.js | 20 +++++------ .../02-molecules/pager/pager.stories.js | 14 ++++---- .../pull-quote/pull-quote.stories.js | 36 +++++++++---------- .../02-molecules/status/status.stories.js | 6 ++-- components/02-molecules/tabs/tabs.js | 18 +++++----- components/02-molecules/tabs/tabs.stories.js | 8 ++--- .../text-with-media.stories.js | 22 ++++++------ components/03-organisms/grid/grids.stories.js | 6 ++-- components/03-organisms/site/site.stories.js | 18 +++++----- components/04-templates/layouts.stories.js | 14 ++++---- .../placeholder/place-holder.stories.js | 4 +-- .../content-types/content-types.stories.js | 20 +++++------ .../landing-pages/landing-pages.stories.js | 20 +++++------ system.emulsify.json | 10 +++--- 34 files changed, 232 insertions(+), 230 deletions(-) diff --git a/components/00-base/01-colors/colors.stories.js b/components/00-base/01-colors/colors.stories.js index a476cca..5d0d6e4 100644 --- a/components/00-base/01-colors/colors.stories.js +++ b/components/00-base/01-colors/colors.stories.js @@ -1,13 +1,13 @@ -import colors from './colors.twig'; +import colors from "./colors.twig"; -import colorsData from './colors.yml'; -import './colors'; +import colorsData from "./colors.yml"; +import "./colors"; /** * Storybook Definition. */ export default { - title: 'Base/Colors', + title: "Base/Colors", }; export const Palettes = () => colors(colorsData); diff --git a/components/00-base/02-motion/motion.stories.js b/components/00-base/02-motion/motion.stories.js index 476bc0f..c59a912 100644 --- a/components/00-base/02-motion/motion.stories.js +++ b/components/00-base/02-motion/motion.stories.js @@ -1,10 +1,10 @@ -import motion from './motion.twig'; +import motion from "./motion.twig"; -import motionData from './motion.yml'; +import motionData from "./motion.yml"; /** * Add storybook definition for Animations. */ -export default { title: 'Base/Motion' }; +export default { title: "Base/Motion" }; export const Usage = () => motion(motionData); diff --git a/components/00-base/04-spacing/spacing.stories.js b/components/00-base/04-spacing/spacing.stories.js index 8f61268..b147961 100644 --- a/components/00-base/04-spacing/spacing.stories.js +++ b/components/00-base/04-spacing/spacing.stories.js @@ -1,8 +1,8 @@ -import spacingTwig from './spacing.twig'; -import spacingData from './spacing.yml'; +import spacingTwig from "./spacing.twig"; +import spacingData from "./spacing.yml"; export default { - title: 'Base/Spacing', + title: "Base/Spacing", }; export const Spacing = () => spacingTwig(spacingData); diff --git a/components/01-atoms/buttons/buttons.stories.js b/components/01-atoms/buttons/buttons.stories.js index dbc9dc8..276c331 100644 --- a/components/01-atoms/buttons/buttons.stories.js +++ b/components/01-atoms/buttons/buttons.stories.js @@ -1,13 +1,13 @@ // Buttons Stories -import button from './button.twig'; +import button from "./button.twig"; -import buttonData from './button.yml'; -import buttonAltData from './button-alt.yml'; +import buttonData from "./button.yml"; +import buttonAltData from "./button-alt.yml"; /** * Storybook Definition. */ -export default { title: 'Atoms/Button' }; +export default { title: "Atoms/Button" }; export const twig = () => button(buttonData); diff --git a/components/01-atoms/forms/forms.stories.js b/components/01-atoms/forms/forms.stories.js index 0105aa0..3f963c7 100644 --- a/components/01-atoms/forms/forms.stories.js +++ b/components/01-atoms/forms/forms.stories.js @@ -1,16 +1,16 @@ -import checkbox from './checkbox/checkbox.twig'; -import radio from './radio/radio.twig'; -import select from './select/select.twig'; -import textfields from './textfields/textfields.twig'; +import checkbox from "./checkbox/checkbox.twig"; +import radio from "./radio/radio.twig"; +import select from "./select/select.twig"; +import textfields from "./textfields/textfields.twig"; -import checkboxData from './checkbox/checkbox.yml'; -import radioData from './radio/radio.yml'; -import selectOptionsData from './select/select.yml'; +import checkboxData from "./checkbox/checkbox.yml"; +import radioData from "./radio/radio.yml"; +import selectOptionsData from "./select/select.yml"; /** * Storybook Definition. */ -export default { title: 'Atoms/Forms' }; +export default { title: "Atoms/Forms" }; export const checkboxes = () => checkbox(checkboxData); diff --git a/components/01-atoms/images/images.stories.js b/components/01-atoms/images/images.stories.js index 4e4e051..2e39b16 100644 --- a/components/01-atoms/images/images.stories.js +++ b/components/01-atoms/images/images.stories.js @@ -1,21 +1,21 @@ -import image from './image/responsive-image.twig'; -import figure from './image/figure.twig'; -import iconTwig from './icons/icons.twig'; +import image from "./image/responsive-image.twig"; +import figure from "./image/figure.twig"; +import iconTwig from "./icons/icons.twig"; -import imageData from './image/image.yml'; -import figureData from './image/figure.yml'; +import imageData from "./image/image.yml"; +import figureData from "./image/figure.yml"; -const svgIcons = require.context('../../../assets/icons/', true, /\.svg$/); +const svgIcons = require.context("../../../assets/icons/", true, /\.svg$/); const icons = []; svgIcons.keys().forEach((key) => { - const icon = key.split('./')[1].split('.')[0]; + const icon = key.split("./")[1].split(".")[0]; icons.push(icon); }); /** * Storybook Definition. */ -export default { title: 'Atoms/Images' }; +export default { title: "Atoms/Images" }; export const images = () => image(imageData); diff --git a/components/01-atoms/links/link/links.stories.js b/components/01-atoms/links/link/links.stories.js index 6538e51..f9302ef 100644 --- a/components/01-atoms/links/link/links.stories.js +++ b/components/01-atoms/links/link/links.stories.js @@ -1,10 +1,10 @@ -import link from './link.twig'; +import link from "./link.twig"; -import linkData from './link.yml'; +import linkData from "./link.yml"; /** * Storybook Definition. */ -export default { title: 'Atoms/Links' }; +export default { title: "Atoms/Links" }; export const links = () => link(linkData); diff --git a/components/01-atoms/lists/list.stories.js b/components/01-atoms/lists/list.stories.js index c5e2bdb..65e10dd 100644 --- a/components/01-atoms/lists/list.stories.js +++ b/components/01-atoms/lists/list.stories.js @@ -1,13 +1,13 @@ -import listTwig from './list.twig'; -import dlTwig from './dl.twig'; +import listTwig from "./list.twig"; +import dlTwig from "./dl.twig"; -import listData from './list.yml'; -import dlData from './dl.yml'; +import listData from "./list.yml"; +import dlData from "./dl.yml"; /** * Storybook Definition. */ -export default { title: 'Atoms/Lists' }; +export default { title: "Atoms/Lists" }; export const UnorderedList = () => `
@@ -16,15 +16,15 @@ export const UnorderedList = () => ` `; export const OrderedList = () => `
- ${listTwig({ list__items: listData.ordered__list__items, list__type: 'ol' })} + ${listTwig({ list__items: listData.ordered__list__items, list__type: "ol" })}
`; export const DescriptionList = () => `
${dlTwig({ dl__items: dlData.dl__items, - list__type: 'dl', - list__base_class: 'description', + list__type: "dl", + list__base_class: "description", })}
`; diff --git a/components/01-atoms/tables/tables.stories.js b/components/01-atoms/tables/tables.stories.js index 2ebff39..de1c179 100644 --- a/components/01-atoms/tables/tables.stories.js +++ b/components/01-atoms/tables/tables.stories.js @@ -1,9 +1,9 @@ -import tableTwig from './tables.twig'; -import tableData from './tables.yml'; +import tableTwig from "./tables.twig"; +import tableData from "./tables.yml"; /** * Storybook Definition. */ -export default { title: 'Atoms/Tables' }; +export default { title: "Atoms/Tables" }; export const tables = () => tableTwig(tableData); diff --git a/components/01-atoms/text/text.stories.js b/components/01-atoms/text/text.stories.js index 9d4454b..987b636 100644 --- a/components/01-atoms/text/text.stories.js +++ b/components/01-atoms/text/text.stories.js @@ -1,20 +1,20 @@ -import heading from './headings/_heading.twig'; -import blockquote from './text/02-blockquote.twig'; -import pre from './text/05-pre.twig'; -import paragraph from './text/03-inline-elements.twig'; -import code from './text/07-code.twig'; +import heading from "./headings/_heading.twig"; +import blockquote from "./text/02-blockquote.twig"; +import pre from "./text/05-pre.twig"; +import paragraph from "./text/03-inline-elements.twig"; +import code from "./text/07-code.twig"; -import blockquoteData from './text/blockquote.yml'; -import headingData from './headings/headings.yml'; -import codeData from './text/code.yml'; +import blockquoteData from "./text/blockquote.yml"; +import headingData from "./headings/headings.yml"; +import codeData from "./text/code.yml"; /** * Storybook Definition. */ -export default { title: 'Atoms/Text' }; +export default { title: "Atoms/Text" }; // Loop over items in headingData to show each one in the example below. -const headings = headingData.map((d) => heading(d)).join(''); +const headings = headingData.map((d) => heading(d)).join(""); export const headingsExamples = () => headings; diff --git a/components/01-atoms/tooltip/tooltip.js b/components/01-atoms/tooltip/tooltip.js index 8372253..b79428f 100644 --- a/components/01-atoms/tooltip/tooltip.js +++ b/components/01-atoms/tooltip/tooltip.js @@ -1,6 +1,6 @@ Drupal.behaviors.tooltip = { attach(context) { - const tooltips = context.querySelectorAll('.js-tooltip'); + const tooltips = context.querySelectorAll(".js-tooltip"); /** * clickOutside @@ -10,9 +10,9 @@ Drupal.behaviors.tooltip = { * @param {HTMLElement} tip The tooltip content to close */ function clickOutside(tooltip, tip) { - document.addEventListener('click', (event) => { + document.addEventListener("click", (event) => { if (!tooltip.contains(event.target)) { - tip.classList.remove('tooltip__content--visible'); + tip.classList.remove("tooltip__content--visible"); } }); } @@ -25,15 +25,15 @@ Drupal.behaviors.tooltip = { * @param {HTMLElement} tooltipButton The button controlling display */ function toggleTip(tooltip, tooltipButton) { - const tip = tooltip.querySelector('.js-tooltip__content'); - const hasTip = tip.classList.contains('tooltip__content--visible'); + const tip = tooltip.querySelector(".js-tooltip__content"); + const hasTip = tip.classList.contains("tooltip__content--visible"); if (!hasTip) { - tooltipButton.setAttribute('aria-expanded', 'true'); - tip.classList.add('tooltip__content--visible'); + tooltipButton.setAttribute("aria-expanded", "true"); + tip.classList.add("tooltip__content--visible"); } else { - tooltipButton.setAttribute('aria-expanded', 'false'); - tip.classList.remove('tooltip__content--visible'); + tooltipButton.setAttribute("aria-expanded", "false"); + tip.classList.remove("tooltip__content--visible"); } clickOutside(tooltip, tip); @@ -46,14 +46,14 @@ Drupal.behaviors.tooltip = { * to each of the tooltips. */ tooltips.forEach((tip) => { - const tipButton = tip.querySelector('.tooltip__icon'); - tipButton.addEventListener('click', () => { + const tipButton = tip.querySelector(".tooltip__icon"); + tipButton.addEventListener("click", () => { toggleTip(tip, tipButton); }); // Keyboard controls for closing the modal - tipButton.addEventListener('keyup', (e) => { - if (e.key === 'Escape') { + tipButton.addEventListener("keyup", (e) => { + if (e.key === "Escape") { toggleTip(tip, tipButton); } }); diff --git a/components/01-atoms/tooltip/tooltip.stories.js b/components/01-atoms/tooltip/tooltip.stories.js index 22da1b4..88e77a6 100644 --- a/components/01-atoms/tooltip/tooltip.stories.js +++ b/components/01-atoms/tooltip/tooltip.stories.js @@ -1,17 +1,17 @@ -import tooltip from './tooltip.twig'; -import tooltipData from './tooltip.yml'; -import './tooltip'; +import tooltip from "./tooltip.twig"; +import tooltipData from "./tooltip.yml"; +import "./tooltip"; /** * Storybook Definition. */ export default { - title: 'Atoms/Tooltip', + title: "Atoms/Tooltip", argTypes: { direction: { - name: 'Direction', - options: ['top', 'right', 'bottom', 'left'], - type: 'select', + name: "Direction", + options: ["top", "right", "bottom", "left"], + type: "select", defaultValue: tooltipData.tooltip__direction, }, }, diff --git a/components/01-atoms/videos/video-embed.js b/components/01-atoms/videos/video-embed.js index f10480d..708bf07 100644 --- a/components/01-atoms/videos/video-embed.js +++ b/components/01-atoms/videos/video-embed.js @@ -11,16 +11,16 @@ Drupal.behaviors.responsiveEmbeddedVideos = { // Loop through videos Array.from(players).forEach((player) => { // Get Video Information - const width = player.getAttribute('width'); - const height = player.getAttribute('height'); + const width = player.getAttribute("width"); + const height = player.getAttribute("height"); const aspectRatio = `${width} / ${height}`; const parentDiv = player.parentNode; parentDiv.style.aspectRatio = aspectRatio; // Clear static height/width attributes for responsive styles - player.removeAttribute('height'); - player.removeAttribute('width'); + player.removeAttribute("height"); + player.removeAttribute("width"); }); } }, diff --git a/components/01-atoms/videos/videos.stories.js b/components/01-atoms/videos/videos.stories.js index d6427af..d5e3a7a 100644 --- a/components/01-atoms/videos/videos.stories.js +++ b/components/01-atoms/videos/videos.stories.js @@ -1,14 +1,14 @@ -import video from './video.twig'; +import video from "./video.twig"; -import videoEmbedData from './video-embed.yml'; -import videoHTML5Data from './video-html5.yml'; +import videoEmbedData from "./video-embed.yml"; +import videoHTML5Data from "./video-html5.yml"; -import './video-embed'; +import "./video-embed"; /** * Storybook Definition. */ -export default { title: 'Atoms/Videos' }; +export default { title: "Atoms/Videos" }; export const embed = () => video(videoEmbedData); export const html5 = () => video(videoHTML5Data); diff --git a/components/02-molecules/accordion/accordion.js b/components/02-molecules/accordion/accordion.js index 6f42400..3909369 100644 --- a/components/02-molecules/accordion/accordion.js +++ b/components/02-molecules/accordion/accordion.js @@ -1,23 +1,23 @@ Drupal.behaviors.accordion = { attach(context) { // Selectors - const items = context.querySelectorAll('.js-accordion-item'); - const controls = context.querySelectorAll('.js-accordion__controls'); + const items = context.querySelectorAll(".js-accordion-item"); + const controls = context.querySelectorAll(".js-accordion__controls"); // Classes - const itemToggle = '.js-accordion-item__toggle'; - const itemState = 'data-accordion-expanded'; - const buttonState = 'aria-expanded'; + const itemToggle = ".js-accordion-item__toggle"; + const itemState = "data-accordion-expanded"; + const buttonState = "aria-expanded"; // Function to expand an accordion item. const expand = (item, button) => { - item.setAttribute(itemState, 'true'); - button.setAttribute(buttonState, 'true'); + item.setAttribute(itemState, "true"); + button.setAttribute(buttonState, "true"); }; // Function to collapse an accordion item. const collapse = (item, button) => { - item.setAttribute(itemState, 'false'); - button.setAttribute(buttonState, 'false'); + item.setAttribute(itemState, "false"); + button.setAttribute(buttonState, "false"); }; // Toggle accordion content when toggle is activated. @@ -27,9 +27,9 @@ Drupal.behaviors.accordion = { // Hide all accordion content sections if JavaScript is enabled. collapse(item, button); - button.addEventListener('click', () => { + button.addEventListener("click", () => { // Toggle the item's state. - return button.getAttribute(buttonState) === 'true' + return button.getAttribute(buttonState) === "true" ? collapse(item, button) : expand(item, button); }); @@ -38,13 +38,13 @@ Drupal.behaviors.accordion = { controls.forEach((control) => { // Get all items relevant to the control. const allItems = - control.parentNode.querySelectorAll('.js-accordion-item'); + control.parentNode.querySelectorAll(".js-accordion-item"); // Add click listener on the parent