diff --git a/.eslintignore.root b/.eslintignore.root index 5e6408a26b8e6..f899bfd9d3b79 100644 --- a/.eslintignore.root +++ b/.eslintignore.root @@ -10,3 +10,4 @@ # Ignored by default, but we should check it !.github/ !.prettierrc.js +!.pnpmfile.cjs diff --git a/.github/renovate.json b/.github/renovate.json index 3b0dc7a67c25c..e0909b7e69d46 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -89,6 +89,10 @@ "extends": [ "packages:jsUnitTest" ], "groupName": "JS unit testing packages" }, + { + "groupName": "Size-limit", + "matchPackageNames": [ "size-limit", "@size-limit/preset-app" ] + }, { "matchPaths": [ "packages/codesniffer/composer.json" ], "rangeStrategy": "replace" diff --git a/.pnpmfile.cjs b/.pnpmfile.cjs new file mode 100644 index 0000000000000..656686cfea288 --- /dev/null +++ b/.pnpmfile.cjs @@ -0,0 +1,115 @@ +// Note if you change something here, you'll have to make a package.json mismatch pnpm-lock.yaml to +// get it re-run. An easy way to do that is to just edit pnpm-lock.yaml to change the version number +// of husky near the top. + +/** + * Fix package dependencies. + * + * We could generally do the same with pnpm.overrides in packages.json, but this allows for comments. + * + * @param {object} pkg - Dependency package.json contents. + * @returns {object} Modified pkg. + */ +function fixDeps( pkg ) { + // Why do they not publish new versions from their monorepo? + if ( pkg.name === '@automattic/format-currency' ) { + // 1.0.0-alpha.0 published 3 years ago + pkg.dependencies[ 'i18n-calypso' ] = '^5'; + } + if ( pkg.name === 'i18n-calypso' && pkg.dependencies[ 'interpolate-components' ] ) { + // 5.0.0 published 2 years ago + pkg.dependencies[ 'interpolate-components' ] = 'npm:@automattic/interpolate-components@^1.2.0'; + } + + // Even though Storybook works with webpack 5, they still have a bunch of deps on webpack4. + if ( pkg.name.startsWith( '@storybook/' ) ) { + if ( pkg.dependencies[ '@storybook/builder-webpack4' ] ) { + pkg.dependencies[ '@storybook/builder-webpack4' ] = 'npm:@storybook/builder-webpack5@^6'; + } + if ( pkg.dependencies[ '@storybook/manager-webpack4' ] ) { + pkg.dependencies[ '@storybook/manager-webpack4' ] = 'npm:@storybook/manager-webpack5@^6'; + } + if ( pkg.dependencies.webpack ) { + pkg.dependencies.webpack = '^5'; + } + if ( pkg.dependencies[ '@types/webpack' ] ) { + pkg.dependencies[ '@types/webpack' ] = '^5'; + } + } + + // Project is supposedly not dead, but still isn't being updated. + // For our purposes at least it seems to work fine with jest-environment-jsdom 27. + // https://github.com/enzymejs/enzyme-matchers/issues/353 + if ( pkg.name === 'jest-environment-enzyme' ) { + pkg.dependencies[ 'jest-environment-jsdom' ] = '^27'; + } + + // Unpin browserslist here. + if ( + pkg.name === 'react-dev-utils' && + pkg.dependencies.browserslist.match( /^\d+\.\d+\.\d+$/ ) + ) { + pkg.dependencies.browserslist = '^' + pkg.dependencies.browserslist; + } + + // Regular expression DOS. + if ( pkg.dependencies.trim === '0.0.1' ) { + pkg.dependencies.trim = '^0.0.3'; + } + + return pkg; +} + +/** + * Fix package peer dependencies. + * + * This can't be done with pnpm.overrides. + * + * @param {object} pkg - Dependency package.json contents. + * @returns {object} Modified pkg. + */ +function fixPeerDeps( pkg ) { + // React 17 is entirely compatible with React 16, but a lot of junk hasn't updated deps yet. + for ( const p of [ 'react', 'react-dom' ] ) { + if ( + pkg.peerDependencies?.[ p ] && + pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^16|16\.x)/ ) && + ! pkg.peerDependencies[ p ].match( /(?:^|\|\|\s*)(?:\^17|17\.x)/ ) + ) { + pkg.peerDependencies[ p ] += ' || ^17'; + } + } + + // Outdated. Looks like they're going to drop the eslint-config-wpcalypso package entirely with + // eslint-plugin-wpcalypso 5.1.0, but they haven't released that yet. + if ( pkg.name === 'eslint-config-wpcalypso' ) { + pkg.peerDependencies.eslint = '^8'; + pkg.peerDependencies[ 'eslint-plugin-inclusive-language' ] = '*'; + pkg.peerDependencies[ 'eslint-plugin-jsdoc' ] = '*'; + pkg.peerDependencies[ 'eslint-plugin-wpcalypso' ] = '*'; + } + + return pkg; +} + +/** + * Pnpm package hook. + * + * @see https://pnpm.io/pnpmfile#hooksreadpackagepkg-context-pkg--promisepkg + * @param {object} pkg - Dependency package.json contents. + * @param {object} context - Pnpm object of some sort. + * @returns {object} Modified pkg. + */ +function readPackage( pkg, context ) { + if ( pkg.name ) { + pkg = fixDeps( pkg, context ); + pkg = fixPeerDeps( pkg, context ); + } + return pkg; +} + +module.exports = { + hooks: { + readPackage, + }, +}; diff --git a/package.json b/package.json index 154996108cdb3..f8005133fdab0 100644 --- a/package.json +++ b/package.json @@ -36,21 +36,5 @@ "node": "^14.18.3 || ^16.13.2", "pnpm": "^6.23.6", "yarn": "use pnpm instead - see docs/yarn-upgrade.md" - }, - "pnpm": { - "overrides": { - "@automattic/format-currency>i18n-calypso": "^5", - "@storybook/addon-docs>@storybook/builder-webpack4": "npm:@storybook/builder-webpack5@^6", - "@storybook/core-common>webpack@4": ">= 4", - "@storybook/core-server>webpack@4": ">= 4", - "@storybook/core-server>@storybook/builder-webpack4": "npm:@storybook/builder-webpack5@^6", - "@storybook/core-server>@storybook/manager-webpack4": "npm:@storybook/manager-webpack5@^6", - "@storybook/react>webpack@4": ">= 4", - "i18n-calypso>interpolate-components": "npm:@automattic/interpolate-components@^1.2.0", - "jest-environment-enzyme>jest-environment-jsdom@^24.0.0": "^27", - "react-dev-utils>browserslist@^4": "^4", - "trim@0.0.1": "^0.0.3", - "yargs>yargs-parser@^5.0.1": "^20.0.0" - } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee99701d3b9c8..47f58d7db9e13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,19 +1,5 @@ lockfileVersion: 5.3 -overrides: - '@automattic/format-currency>i18n-calypso': ^5 - '@storybook/addon-docs>@storybook/builder-webpack4': npm:@storybook/builder-webpack5@^6 - '@storybook/core-common>webpack@4': '>= 4' - '@storybook/core-server>webpack@4': '>= 4' - '@storybook/core-server>@storybook/builder-webpack4': npm:@storybook/builder-webpack5@^6 - '@storybook/core-server>@storybook/manager-webpack4': npm:@storybook/manager-webpack5@^6 - '@storybook/react>webpack@4': '>= 4' - i18n-calypso>interpolate-components: npm:@automattic/interpolate-components@^1.2.0 - jest-environment-enzyme>jest-environment-jsdom@^24.0.0: ^27 - react-dev-utils>browserslist@^4: ^4 - trim@0.0.1: ^0.0.3 - yargs>yargs-parser@^5.0.1: ^20.0.0 - importers: .: @@ -988,7 +974,7 @@ importers: '@babel/preset-typescript': 7.16.0 '@babel/register': 7.16.0 '@babel/runtime': 7.16.3 - '@size-limit/preset-app': 4.10.2 + '@size-limit/preset-app': 5.0.3 '@testing-library/dom': 7.31.2 '@testing-library/jest-dom': 5.14.1 '@testing-library/preact': 2.0.1 @@ -1221,7 +1207,7 @@ importers: '@babel/preset-typescript': 7.16.0_@babel+core@7.16.0 '@babel/register': 7.16.0_@babel+core@7.16.0 '@babel/runtime': 7.16.3 - '@size-limit/preset-app': 4.10.2_size-limit@5.0.3 + '@size-limit/preset-app': 5.0.3_size-limit@5.0.3 '@testing-library/dom': 7.31.2 '@testing-library/jest-dom': 5.14.1 '@testing-library/preact': 2.0.1_preact@10.5.15 @@ -1547,8 +1533,8 @@ packages: /@automattic/components/1.0.0-alpha.3_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-6PgogtcbvKEM7dQDXMUBbnGkwhf+0h29p/6sd8jfNoDlSxJJylcfZCio0yWuVKiSLAm9KWozeY5cqgI0nRcuzg==} peerDependencies: - react: ^16.8 - react-dom: ^16.8 + react: ^16.8 || ^17 + react-dom: ^16.8 || ^17 dependencies: '@babel/runtime': 7.16.3 classnames: 2.3.1 @@ -1597,7 +1583,7 @@ packages: /@automattic/social-previews/1.1.1_edc9d35b6fed41a4eb185f8d2d8c0f59: resolution: {integrity: sha512-yt15yIatJcGRJKhDVGpj7i7Q6l4uQnMvzjgoOU3uUC/wwLZRji+0tRrD8xfsq12hXwnx1cEkEQeSoSozZzsAtA==} peerDependencies: - react: ^16.12.0 + react: ^16.12.0 || ^17 dependencies: '@babel/runtime': 7.16.3 '@wordpress/components': 12.0.9_edc9d35b6fed41a4eb185f8d2d8c0f59 @@ -5697,11 +5683,11 @@ packages: - supports-color dev: true - /@size-limit/file/4.10.2_size-limit@5.0.3: - resolution: {integrity: sha512-IrmEzZitNMTyGcbvIN5bMN6u8A5x8M1YVjfJnEiO3mukMtszGK2yOqVYltyyvB0Qm0Wvqcm4qXAxxRASXtDwVg==} - engines: {node: '>=10.0.0'} + /@size-limit/file/5.0.3_size-limit@5.0.3: + resolution: {integrity: sha512-tkxf5ntFdlZ1xHQAw4fYd+gIkH85S2D3Wb94upJhtOfPHwDsQoQycDFGQRwTgei07Eq5vA8Jj5f2mu/tAdoaXw==} + engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} peerDependencies: - size-limit: 4.10.2 + size-limit: 5.0.3 dependencies: semver: 7.3.5 size-limit: 5.0.3 @@ -5717,13 +5703,13 @@ packages: size-limit: 6.0.3 dev: true - /@size-limit/preset-app/4.10.2_size-limit@5.0.3: - resolution: {integrity: sha512-B/+okE4Jn/N4rqIhy+ZpgdQ72BMQwpkxIHp+rCdFDib1H7VVbgLwyei9mfIco4cKNzk/EkQ6wd4Hyit6OsY0pQ==} + /@size-limit/preset-app/5.0.3_size-limit@5.0.3: + resolution: {integrity: sha512-5lJunj5TZ+i/VPUlBmKvTcxW6Q0blKWj70CpH1z+RfrWRrnbqUJBkmjKWFp0NPUrkOnoMErqr/2EPxqmfLlSZw==} peerDependencies: - size-limit: 4.10.2 + size-limit: 5.0.3 dependencies: - '@size-limit/file': 4.10.2_size-limit@5.0.3 - '@size-limit/time': 4.10.2_size-limit@5.0.3 + '@size-limit/file': 5.0.3_size-limit@5.0.3 + '@size-limit/time': 5.0.3_size-limit@5.0.3 size-limit: 5.0.3 transitivePeerDependencies: - bufferutil @@ -5747,10 +5733,11 @@ packages: - utf-8-validate dev: true - /@size-limit/time/4.10.2_size-limit@5.0.3: - resolution: {integrity: sha512-zvpCDojR0+B1gHCAiLWCm4eLlapLMZYuNLE+SVOn0QR1/L9UwERFvXy5/sIJO62qX/MNusyhBmC2NkqB9gOtjg==} + /@size-limit/time/5.0.3_size-limit@5.0.3: + resolution: {integrity: sha512-BGBR38hPPwlHRwa+p+yVDXZYdmyLZ8DT0InMBlnbrAa/FthF34zeccIAx7lh4NGp+8rntxT3VOL59PpcLn1fxQ==} + engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} peerDependencies: - size-limit: 4.10.2 + size-limit: 5.0.3 dependencies: estimo: 2.3.3 react: 17.0.2 @@ -6806,7 +6793,7 @@ packages: '@types/node': 14.18.10 '@types/node-fetch': 2.5.12 '@types/pretty-hrtime': 1.0.1 - '@types/webpack': 4.41.32 + '@types/webpack': 5.28.0 better-opn: 2.1.1 boxen: 5.1.2 chalk: 4.1.2 @@ -6882,7 +6869,7 @@ packages: '@types/node': 14.18.10 '@types/node-fetch': 2.5.12 '@types/pretty-hrtime': 1.0.1 - '@types/webpack': 4.41.32 + '@types/webpack': 5.28.0 better-opn: 2.1.1 boxen: 5.1.2 chalk: 4.1.2 @@ -7892,29 +7879,15 @@ packages: /@types/scheduler/0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - /@types/source-list-map/0.1.2: - resolution: {integrity: sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==} - dev: true - /@types/stack-utils/2.0.1: resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==} - /@types/tapable/1.0.8: - resolution: {integrity: sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==} - dev: true - /@types/testing-library__jest-dom/5.14.2: resolution: {integrity: sha512-vehbtyHUShPxIa9SioxDwCvgxukDMH//icJG90sXQBUm5lJOHLT5kNeU9tnivhnA/TkOFMzGIXN2cTc4hY8/kg==} dependencies: '@types/jest': 27.4.0 dev: true - /@types/uglify-js/3.13.1: - resolution: {integrity: sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==} - dependencies: - source-map: 0.6.1 - dev: true - /@types/unist/2.0.6: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} dev: true @@ -7923,23 +7896,17 @@ packages: resolution: {integrity: sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==} dev: true - /@types/webpack-sources/3.2.0: - resolution: {integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==} + /@types/webpack/5.28.0: + resolution: {integrity: sha512-8cP0CzcxUiFuA9xGJkfeVpqmWTk9nx6CWwamRGCj95ph1SmlRRk9KlCZ6avhCbZd4L68LvYT6l1kpdEnQXrF8w==} dependencies: - '@types/node': 14.18.10 - '@types/source-list-map': 0.1.2 - source-map: 0.7.3 - dev: true - - /@types/webpack/4.41.32: - resolution: {integrity: sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==} - dependencies: - '@types/node': 14.18.10 - '@types/tapable': 1.0.8 - '@types/uglify-js': 3.13.1 - '@types/webpack-sources': 3.2.0 - anymatch: 3.1.2 - source-map: 0.6.1 + '@types/node': 17.0.16 + tapable: 2.2.1 + webpack: 5.65.0 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + - webpack-cli dev: true /@types/yargs-parser/20.2.1: @@ -9806,8 +9773,8 @@ packages: peerDependencies: '@wordpress/i18n': '>=3.17.0' '@wordpress/icons': '>=2.9' - react: ^16.13.1 - react-dom: ^16.13.1 + react: ^16.13.1 || ^17 + react-dom: ^16.13.1 || ^17 dependencies: '@popperjs/core': 2.11.2 '@wordpress/i18n': 3.20.0 @@ -9837,8 +9804,8 @@ packages: /@wp-g2/context/0.0.140_804a22dccc5a330b05aeb149a481f06e: resolution: {integrity: sha512-z32fxZ2tCVmYQC+wyyziyrhEvWBPFBQfUhUHF85JmTUPzQQeEPiLC3rgDAT0fUTFlJHinPJQq6871RDqFSwCUA==} peerDependencies: - react: ^16.13.1 - react-dom: ^16.13.1 + react: ^16.13.1 || ^17 + react-dom: ^16.13.1 || ^17 dependencies: '@wp-g2/styles': 0.0.140_804a22dccc5a330b05aeb149a481f06e '@wp-g2/utils': 0.0.140_react-dom@17.0.2+react@17.0.2 @@ -9856,8 +9823,8 @@ packages: peerDependencies: '@wordpress/data': '>=4.26' '@wordpress/is-shallow-equal': '>=3.0' - react: ^16.13.1 - react-dom: ^16.13.1 + react: ^16.13.1 || ^17 + react-dom: ^16.13.1 || ^17 dependencies: '@emotion/core': 10.3.1_react@17.0.2 '@emotion/is-prop-valid': 0.8.8 @@ -9880,8 +9847,8 @@ packages: /@wp-g2/styles/0.0.140_804a22dccc5a330b05aeb149a481f06e: resolution: {integrity: sha512-wAvtqQOqX2zYpfEdVK4l4abH/hUUgw/+8+E5PvPgrsvqFg8IehNSksnjNF5/IloLRGAH70d8ytjMuMnUK8PVYA==} peerDependencies: - react: ^16.13.1 - react-dom: ^16.13.1 + react: ^16.13.1 || ^17 + react-dom: ^16.13.1 || ^17 dependencies: '@wp-g2/create-styles': 0.0.140_804a22dccc5a330b05aeb149a481f06e '@wp-g2/utils': 0.0.140_react-dom@17.0.2+react@17.0.2 @@ -9896,8 +9863,8 @@ packages: /@wp-g2/utils/0.0.140_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-a4uYi/XQEDrOAIO3JUQ+L/oeSkgp+08pSy41xxQ1nIRHs7X+Du84X2EFQrvZfGBRuXuVlVuUIlN2e0IE8yUZKw==} peerDependencies: - react: ^16.13.1 - react-dom: ^16.13.1 + react: ^16.13.1 || ^17 + react-dom: ^16.13.1 || ^17 dependencies: copy-to-clipboard: 3.3.1 create-emotion: 10.0.27 @@ -10031,7 +9998,7 @@ packages: /airbnb-prop-types/2.16.0: resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==} peerDependencies: - react: ^0.14 || ^15.0.0 || ^16.0.0-alpha + react: ^0.14 || ^15.0.0 || ^16.0.0-alpha || ^17 dependencies: array.prototype.find: 2.1.2 function.prototype.name: 1.1.5 @@ -10047,7 +10014,7 @@ packages: /airbnb-prop-types/2.16.0_react@17.0.2: resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==} peerDependencies: - react: ^0.14 || ^15.0.0 || ^16.0.0-alpha + react: ^0.14 || ^15.0.0 || ^16.0.0-alpha || ^17 dependencies: array.prototype.find: 2.1.2 function.prototype.name: 1.1.5 @@ -13630,10 +13597,10 @@ packages: /eslint-config-wpcalypso/6.1.0_11dfa443dfb9bfd86a5486c959f4047a: resolution: {integrity: sha512-FMdXC+jjS4vPI2zJ6b+C0cevn75SBC35DDgOgrRd6a4KriIQAiKhXQz14d7ivFyT48nOX6rEfJQqb4keKD5z/w==} peerDependencies: - eslint: ^7.0.0 - eslint-plugin-inclusive-language: ^1.2.0 - eslint-plugin-jsdoc: ^18.0.0 - eslint-plugin-wpcalypso: ^3.4.1 || ^4.0.0 + eslint: ^8 + eslint-plugin-inclusive-language: '*' + eslint-plugin-jsdoc: '*' + eslint-plugin-wpcalypso: '*' dependencies: eslint: 8.8.0 eslint-plugin-inclusive-language: 2.2.0 @@ -15430,7 +15397,7 @@ packages: /gridicons/3.3.1_react@17.0.2: resolution: {integrity: sha512-eQsmujjLptLtyhGuu31US3mXkcptYHkgEE/s277HWv+j6c3Z2gYyjoHcBKwSFbQwxbfhToRd5uzYimR2ExWJdQ==} peerDependencies: - react: "^15.3.0 ||\_^16.0.0 " + react: "^15.3.0 ||\_^16.0.0 || ^17" dependencies: prop-types: 15.7.2 react: 17.0.2 @@ -16023,7 +15990,7 @@ packages: /i18n-calypso/5.0.0_react@17.0.2: resolution: {integrity: sha512-YgqLgshNiBOiifWxr4s33ODWQ4JIaHoBPWtgFyqcRy0+WGMX2CmTDbXaeZHkHxuIjzsGP+YrVTPNp7lfbiot4g==} peerDependencies: - react: ^16.8 + react: ^16.8 || ^17 dependencies: '@babel/runtime': 7.17.2 '@tannin/sprintf': 1.2.0 @@ -20704,8 +20671,8 @@ packages: /react-autosize-textarea/7.1.0_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==} peerDependencies: - react: ^0.14.0 || ^15.0.0 || ^16.0.0 - react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 + react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17 + react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17 dependencies: autosize: 4.0.4 line-height: 0.3.1 @@ -20716,8 +20683,8 @@ packages: /react-autosize-textarea/7.1.0_react@17.0.2: resolution: {integrity: sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==} peerDependencies: - react: ^0.14.0 || ^15.0.0 || ^16.0.0 - react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 + react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17 + react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17 dependencies: autosize: 4.0.4 line-height: 0.3.1 @@ -20769,8 +20736,8 @@ packages: resolution: {integrity: sha512-RDlerU8DdRRrlYS0MQ7Z9igPWABGLDwz6+ykBNff67RM3Sset2TDqeuOr+R5o00Ggn5U47GeLsGcSDxlZd9cHw==} peerDependencies: moment: ^2.18.1 - react: ^0.14 || ^15.5.4 || ^16.1.1 - react-dom: ^0.14 || ^15.5.4 || ^16.1.1 + react: ^0.14 || ^15.5.4 || ^16.1.1 || ^17 + react-dom: ^0.14 || ^15.5.4 || ^16.1.1 || ^17 dependencies: airbnb-prop-types: 2.16.0_react@17.0.2 consolidated-events: 2.0.2 @@ -20793,8 +20760,8 @@ packages: resolution: {integrity: sha512-RDlerU8DdRRrlYS0MQ7Z9igPWABGLDwz6+ykBNff67RM3Sset2TDqeuOr+R5o00Ggn5U47GeLsGcSDxlZd9cHw==} peerDependencies: moment: ^2.18.1 - react: ^0.14 || ^15.5.4 || ^16.1.1 - react-dom: ^0.14 || ^15.5.4 || ^16.1.1 + react: ^0.14 || ^15.5.4 || ^16.1.1 || ^17 + react-dom: ^0.14 || ^15.5.4 || ^16.1.1 || ^17 dependencies: airbnb-prop-types: 2.16.0 consolidated-events: 2.0.2 @@ -20816,8 +20783,8 @@ packages: resolution: {integrity: sha512-RDlerU8DdRRrlYS0MQ7Z9igPWABGLDwz6+ykBNff67RM3Sset2TDqeuOr+R5o00Ggn5U47GeLsGcSDxlZd9cHw==} peerDependencies: moment: ^2.18.1 - react: ^0.14 || ^15.5.4 || ^16.1.1 - react-dom: ^0.14 || ^15.5.4 || ^16.1.1 + react: ^0.14 || ^15.5.4 || ^16.1.1 || ^17 + react-dom: ^0.14 || ^15.5.4 || ^16.1.1 || ^17 dependencies: airbnb-prop-types: 2.16.0_react@17.0.2 consolidated-events: 2.0.2 @@ -20893,7 +20860,7 @@ packages: /react-dom/16.14.0_react@16.14.0: resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==} peerDependencies: - react: ^16.14.0 + react: ^16.14.0 || ^17 dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 @@ -21145,7 +21112,7 @@ packages: /react-redux/6.0.1_react@17.0.2+redux@4.0.5: resolution: {integrity: sha512-T52I52Kxhbqy/6TEfBv85rQSDz6+Y28V/pf52vDWs1YRXG19mcFOGfHnY2HsNFHyhP+ST34Aih98fvt6tqwVcQ==} peerDependencies: - react: ^16.4.0-0 + react: ^16.4.0-0 || ^17 redux: ^2.0.0 || ^3.0.0 || ^4.0.0-0 dependencies: '@babel/runtime': 7.16.3 @@ -21317,7 +21284,7 @@ packages: /react-tagsinput/3.19.0_react@17.0.2: resolution: {integrity: sha512-ni+/qnZrYrvLg83LtTFHErKy1KQHL0fi0Y6C5jgC1dNUePE9cS/OlQ4XH6JRSjv9GGoeVE0R/ujSBaS1uzCRYQ==} peerDependencies: - react: ^16.0.0 || ^15.0.0 || ^0.14.0 + react: ^16.0.0 || ^15.0.0 || ^0.14.0 || ^17 dependencies: react: 17.0.2 dev: false @@ -21370,8 +21337,8 @@ packages: /react-with-direction/1.4.0: resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==} peerDependencies: - react: ^0.14 || ^15 || ^16 - react-dom: ^0.14 || ^15 || ^16 + react: ^0.14 || ^15 || ^16 || ^17 + react-dom: ^0.14 || ^15 || ^16 || ^17 dependencies: airbnb-prop-types: 2.16.0 brcast: 2.0.2 @@ -21386,8 +21353,8 @@ packages: /react-with-direction/1.4.0_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==} peerDependencies: - react: ^0.14 || ^15 || ^16 - react-dom: ^0.14 || ^15 || ^16 + react: ^0.14 || ^15 || ^16 || ^17 + react-dom: ^0.14 || ^15 || ^16 || ^17 dependencies: airbnb-prop-types: 2.16.0_react@17.0.2 brcast: 2.0.2 @@ -21403,8 +21370,8 @@ packages: /react-with-direction/1.4.0_react@17.0.2: resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==} peerDependencies: - react: ^0.14 || ^15 || ^16 - react-dom: ^0.14 || ^15 || ^16 + react: ^0.14 || ^15 || ^16 || ^17 + react-dom: ^0.14 || ^15 || ^16 || ^17 dependencies: airbnb-prop-types: 2.16.0_react@17.0.2 brcast: 2.0.2 @@ -21590,8 +21557,8 @@ packages: /reakit-system/0.13.1_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-qglfQ53FsJh5+VSkjMtBg7eZiowj9zXOyfJJxfaXh/XYTVe/5ibzWg6rvGHyvSm6C3D7Q2sg/NPCLmCtYGGvQA==} peerDependencies: - react: ^16.8.0 - react-dom: ^16.8.0 + react: ^16.8.0 || ^17 + react-dom: ^16.8.0 || ^17 dependencies: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 @@ -21629,8 +21596,8 @@ packages: /reakit-utils/0.13.1_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-NBKgsot3tU91gZgK5MTInI/PR0T3kIsTmbU5MbGggSOcwU2dG/kbE8IrM2lC6ayCSL2W2QWkijT6kewdrIX7Gw==} peerDependencies: - react: ^16.8.0 - react-dom: ^16.8.0 + react: ^16.8.0 || ^17 + react-dom: ^16.8.0 || ^17 dependencies: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 @@ -21639,8 +21606,8 @@ packages: /reakit-utils/0.14.4_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-jDEf/NmZVJ6fs10G16ifD+RFhQikSLN7VfjRHu0CPoUj4g6lFXd5PPcRXCY81qiqc9FVHjr2d2fmsw1hs6xUxA==} peerDependencies: - react: ^16.8.0 - react-dom: ^16.8.0 + react: ^16.8.0 || ^17 + react-dom: ^16.8.0 || ^17 dependencies: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 @@ -21673,7 +21640,7 @@ packages: /reakit-warning/0.4.1_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-AgnRN6cf8DYBF/mK2JEMFVL67Sbon8fDbFy1kfm0EDibtGsMOQtsFYfozZL7TwmJ4yg68VMhg8tmPHchVQRrlg==} peerDependencies: - react: ^16.8.0 + react: ^16.8.0 || ^17 dependencies: react: 17.0.2 reakit-utils: 0.13.1_react-dom@17.0.2+react@17.0.2 @@ -21684,7 +21651,7 @@ packages: /reakit-warning/0.5.5_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-OuP1r7rlSSJZsoLuc0CPA2ACPKnWO8HDbFktiiidbT67UjuX6udYV1AUsIgMJ8ado9K5gZGjPj7IB/GDYo9Yjg==} peerDependencies: - react: ^16.8.0 + react: ^16.8.0 || ^17 dependencies: react: 17.0.2 reakit-utils: 0.14.4_react-dom@17.0.2+react@17.0.2 @@ -21725,8 +21692,8 @@ packages: /reakit/1.1.0_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-d/ERtwgBndBPsyPBPUl5jueyfFgsglIfQCnLMKuxM0PaWiIZ6Ys3XsYaNy/AaG8k46Ee5cQPMdRrR30nVcSToQ==} peerDependencies: - react: ^16.8.0 - react-dom: ^16.8.0 + react: ^16.8.0 || ^17 + react-dom: ^16.8.0 || ^17 dependencies: '@popperjs/core': 2.11.2 body-scroll-lock: 3.1.5 @@ -22942,7 +22909,7 @@ packages: /social-logos/2.3.0_react@17.0.2: resolution: {integrity: sha512-md5+ZgxAvODCQpMMhe8h7QtmmUIKLI78xjL3tfxTTqzzGIT7NaeVIiiLla/aF5kktxN1W7UGvEbse3Dn4CdYmw==} peerDependencies: - react: "^15.3.0 ||\_^16.0.0" + react: "^15.3.0 ||\_^16.0.0 || ^17" dependencies: prop-types: 15.7.2 react: 17.0.2 @@ -24567,7 +24534,7 @@ packages: /use-enhanced-state/0.0.13_react@17.0.2: resolution: {integrity: sha512-RCtUQdhfUXu/0GAQqLnKPetUt3BheYFpOTogppHe9x1XGwluiu6DQLKVNnc3yMfj0HM3IOVBgw5nVJJuZS5TWQ==} peerDependencies: - react: ^16.8.0 + react: ^16.8.0 || ^17 dependencies: '@itsjonq/is': 0.0.2 react: 17.0.2 @@ -25366,12 +25333,20 @@ packages: /yargs-parser/20.2.9: resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} engines: {node: '>=10'} + dev: true /yargs-parser/21.0.0: resolution: {integrity: sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==} engines: {node: '>=12'} dev: true + /yargs-parser/5.0.1: + resolution: {integrity: sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==} + dependencies: + camelcase: 3.0.0 + object.assign: 4.1.2 + dev: false + /yargs-unparser/2.0.0: resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==} engines: {node: '>=10'} @@ -25466,7 +25441,7 @@ packages: string-width: 1.0.2 which-module: 1.0.0 y18n: 3.2.2 - yargs-parser: 20.2.9 + yargs-parser: 5.0.1 dev: false /yauzl/2.10.0: diff --git a/projects/js-packages/components/changelog/add-link-logo-footer b/projects/js-packages/components/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..a636968e3cb56 --- /dev/null +++ b/projects/js-packages/components/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Add optional link to the Module name in the JetpackFooter component diff --git a/projects/js-packages/components/changelog/update-components-spinner b/projects/js-packages/components/changelog/update-components-spinner new file mode 100644 index 0000000000000..8afdc7b1696f7 --- /dev/null +++ b/projects/js-packages/components/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Components: replace Spinner with the core one diff --git a/projects/js-packages/components/components/action-button/index.jsx b/projects/js-packages/components/components/action-button/index.jsx index c637148f49509..29129f6f0d1ea 100644 --- a/projects/js-packages/components/components/action-button/index.jsx +++ b/projects/js-packages/components/components/action-button/index.jsx @@ -3,14 +3,13 @@ */ import React from 'react'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; +import { Button, Spinner } from '@wordpress/components'; import PropTypes from 'prop-types'; /** * Internal dependencies */ import './style.scss'; -import Spinner from '../spinner'; /** * The Jetpack Action button. diff --git a/projects/js-packages/components/components/admin-page/index.jsx b/projects/js-packages/components/components/admin-page/index.jsx index 03d92e9ecaa38..71292b8152b2b 100644 --- a/projects/js-packages/components/components/admin-page/index.jsx +++ b/projects/js-packages/components/components/admin-page/index.jsx @@ -24,7 +24,15 @@ import Col from '../layout/col'; * @returns {React.Component} AdminPage component. */ const AdminPage = props => { - const { children, moduleName, a8cLogoHref, showHeader, showFooter, showBackground } = props; + const { + children, + moduleName, + moduleNameHref, + a8cLogoHref, + showHeader, + showFooter, + showBackground, + } = props; const rootClassName = classNames( styles[ 'admin-page' ], { [ styles.background ]: showBackground, } ); @@ -44,7 +52,11 @@ const AdminPage = props => { { showFooter && ( - + ) } @@ -53,7 +65,6 @@ const AdminPage = props => { }; AdminPage.defaultProps = { - a8cLogoHref: 'https://jetpack.com', moduleName: __( 'Jetpack', 'jetpack' ), showHeader: true, showFooter: true, @@ -69,6 +80,8 @@ AdminPage.propTypes = { showHeader: PropTypes.bool, /** Whether or not to display the Footer */ showFooter: PropTypes.bool, + /** Link that the Footer Module name will link to (optional). */ + moduleNameHref: PropTypes.string, /** Whether or not to display the Background Color */ showBackground: PropTypes.bool, }; diff --git a/projects/js-packages/components/components/jetpack-footer/index.jsx b/projects/js-packages/components/components/jetpack-footer/index.jsx index ea37486a3c872..81769d9d54a16 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.jsx +++ b/projects/js-packages/components/components/jetpack-footer/index.jsx @@ -20,7 +20,7 @@ import JetpackLogo from '../jetpack-logo'; * @returns {React.Component} JetpackFooter component. */ const JetpackFooter = props => { - const { a8cLogoHref, moduleName, className, ...otherProps } = props; + const { a8cLogoHref, moduleName, className, moduleNameHref, ...otherProps } = props; return (
@@ -31,7 +31,15 @@ const JetpackFooter = props => { className="jp-dashboard-footer__jetpack-symbol" aria-label={ __( 'Jetpack logo', 'jetpack' ) } /> - { moduleName } + + { moduleNameHref ? ( + + { moduleName } + + ) : ( + moduleName + ) } +
@@ -43,9 +51,10 @@ const JetpackFooter = props => { }; JetpackFooter.defaultProps = { - a8cLogoHref: 'https://jetpack.com', + a8cLogoHref: 'https://automattic.com', moduleName: __( 'Jetpack', 'jetpack' ), className: '', + moduleNameHref: 'https://jetpack.com', }; JetpackFooter.propTypes = { @@ -55,6 +64,8 @@ JetpackFooter.propTypes = { moduleName: PropTypes.string, /** additional className of the wrapper, `jp-dashboard-footer` always included. */ className: PropTypes.string, + /** Link that the Module name will link to (optional). */ + moduleNameHref: PropTypes.string, }; export default JetpackFooter; diff --git a/projects/js-packages/components/components/jetpack-footer/style.scss b/projects/js-packages/components/components/jetpack-footer/style.scss index 6e9423d2905a1..953b76333d840 100644 --- a/projects/js-packages/components/components/jetpack-footer/style.scss +++ b/projects/js-packages/components/components/jetpack-footer/style.scss @@ -7,6 +7,11 @@ max-width: 1128px; color: #000; + + a, a:hover, a:visited { + color: #000; + text-decoration: none; + } } .jp-dashboard-footer__module-name, .jp-dashboard-footer__jetpack-symbol { diff --git a/projects/js-packages/components/components/spinner/README.md b/projects/js-packages/components/components/spinner/README.md index 3f6bb25301a98..e5a3e45c217d1 100644 --- a/projects/js-packages/components/components/spinner/README.md +++ b/projects/js-packages/components/components/spinner/README.md @@ -1,4 +1,7 @@ -# Spinner +# Spinner (DEPRECATED) + +## We encourage to use [core Spinner](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/spinner#readme) component instead +--------- Spinner is a React component for rendering a loading indicator. diff --git a/projects/js-packages/connection/changelog/add-link-logo-footer b/projects/js-packages/connection/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/connection/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/connection/changelog/update-components-spinner b/projects/js-packages/connection/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/connection/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/connection/changelog/update-connect-screen-footer b/projects/js-packages/connection/changelog/update-connect-screen-footer new file mode 100644 index 0000000000000..26c7b2f9d2c59 --- /dev/null +++ b/projects/js-packages/connection/changelog/update-connect-screen-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Connection: Add footer prop for ConnectScreen diff --git a/projects/js-packages/connection/components/connect-screen/basic/index.jsx b/projects/js-packages/connection/components/connect-screen/basic/index.jsx index 1afb248f2f411..77eaa0654bb93 100644 --- a/projects/js-packages/connection/components/connect-screen/basic/index.jsx +++ b/projects/js-packages/connection/components/connect-screen/basic/index.jsx @@ -30,6 +30,7 @@ const ConnectScreen = props => { children, assetBaseUrl, autoTrigger, + footer, } = props; const { @@ -62,6 +63,7 @@ const ConnectScreen = props => { handleButtonClick={ handleRegisterSite } displayButtonError={ displayButtonError } buttonIsLoading={ buttonIsLoading } + footer={ footer } > { children } diff --git a/projects/js-packages/connection/components/connect-screen/basic/stories/index.jsx b/projects/js-packages/connection/components/connect-screen/basic/stories/index.jsx index 59ed74f2570bb..fe3db499ff7dc 100644 --- a/projects/js-packages/connection/components/connect-screen/basic/stories/index.jsx +++ b/projects/js-packages/connection/components/connect-screen/basic/stories/index.jsx @@ -57,3 +57,9 @@ Errored.args = { ...DefaultArgs, displayButtonError: true, }; + +export const Footer = Template.bind( {} ); +Footer.args = { + ...DefaultArgs, + footer:
Hi I'm a Footer
, +}; diff --git a/projects/js-packages/connection/components/connect-screen/basic/style.scss b/projects/js-packages/connection/components/connect-screen/basic/style.scss index ecdfd0a2a3403..acc0b67a6e168 100644 --- a/projects/js-packages/connection/components/connect-screen/basic/style.scss +++ b/projects/js-packages/connection/components/connect-screen/basic/style.scss @@ -27,4 +27,8 @@ } } } + + &__footer { + margin-top: 32px; + } } diff --git a/projects/js-packages/connection/components/connect-screen/basic/visual.jsx b/projects/js-packages/connection/components/connect-screen/basic/visual.jsx index 08c5f47cc9303..70cfae7d38d4b 100644 --- a/projects/js-packages/connection/components/connect-screen/basic/visual.jsx +++ b/projects/js-packages/connection/components/connect-screen/basic/visual.jsx @@ -48,6 +48,7 @@ const ConnectScreenVisual = props => { handleButtonClick, displayButtonError, buttonIsLoading, + footer, } = props; return ( @@ -75,6 +76,8 @@ const ConnectScreenVisual = props => {
{ ToS }
) } + + { footer &&
{ footer }
}
); @@ -99,6 +102,8 @@ ConnectScreenVisual.propTypes = { displayButtonError: PropTypes.bool, /** Whether the button is loading or not. */ buttonIsLoading: PropTypes.bool, + /** Node that will be rendered after ToS */ + footer: PropTypes.node, }; ConnectScreenVisual.defaultProps = { @@ -107,6 +112,7 @@ ConnectScreenVisual.defaultProps = { buttonIsLoading: false, displayButtonError: false, handleButtonClick: () => {}, + footer: null, }; export default ConnectScreenVisual; diff --git a/projects/js-packages/idc/changelog/add-link-logo-footer b/projects/js-packages/idc/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/idc/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/idc/changelog/update-components-spinner b/projects/js-packages/idc/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/idc/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/licensing/changelog/add-link-logo-footer b/projects/js-packages/licensing/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/licensing/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/licensing/changelog/update-components-spinner b/projects/js-packages/licensing/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/licensing/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/partner-coupon/changelog/add-link-logo-footer b/projects/js-packages/partner-coupon/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/partner-coupon/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/partner-coupon/changelog/update-components-spinner b/projects/js-packages/partner-coupon/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/partner-coupon/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/js-packages/partner-coupon/changelog/update-connect-screen-footer b/projects/js-packages/partner-coupon/changelog/update-connect-screen-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/js-packages/partner-coupon/changelog/update-connect-screen-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/connection-ui/changelog/add-link-logo-footer b/projects/packages/connection-ui/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/connection-ui/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/connection-ui/changelog/update-components-spinner b/projects/packages/connection-ui/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/connection-ui/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/connection-ui/changelog/update-connect-screen-footer b/projects/packages/connection-ui/changelog/update-connect-screen-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/connection-ui/changelog/update-connect-screen-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/identity-crisis/changelog/add-link-logo-footer b/projects/packages/identity-crisis/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/identity-crisis/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/identity-crisis/changelog/update-components-spinner b/projects/packages/identity-crisis/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/identity-crisis/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/my-jetpack/_inc/components/connected-product-card/index.jsx b/projects/packages/my-jetpack/_inc/components/connected-product-card/index.jsx new file mode 100644 index 0000000000000..57c280a21a398 --- /dev/null +++ b/projects/packages/my-jetpack/_inc/components/connected-product-card/index.jsx @@ -0,0 +1,61 @@ +/** + * External dependencies + */ +import React, { useCallback } from 'react'; +import PropTypes from 'prop-types'; + +/** + * Internal dependencies + */ +import ProductCard from '../product-card'; +import { useProduct } from '../../hooks/use-product'; +import { getIconBySlug } from '../icons'; +import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; + +const ConnectedProductCard = ( { admin, slug, showDeactivate } ) => { + const { detail, status, activate, deactivate, isFetching } = useProduct( slug ); + const { name, description, manageUrl } = detail; + + const navigateToConnectionPage = useMyJetpackNavigate( '/connection' ); + const navigateToAddProductPage = useMyJetpackNavigate( `add-${ slug }` ); + + /* + * Redirect to manage URL + */ + const onManage = useCallback( () => { + window.location = manageUrl; + }, [ manageUrl ] ); + + const Icon = getIconBySlug( slug ); + + return ( + } + admin={ admin } + isFetching={ isFetching } + onDeactivate={ deactivate } + slug={ slug } + onActivate={ activate } + onAdd={ navigateToAddProductPage } + onFixConnection={ navigateToConnectionPage } + onManage={ onManage } + showDeactivate={ showDeactivate } + /> + ); +}; + +ConnectedProductCard.propTypes = { + admin: PropTypes.bool.isRequired, + onLearn: PropTypes.func, + slug: PropTypes.string.isRequired, + showDeactivate: PropTypes.bool, +}; +ConnectedProductCard.defaultProps = { + onLearn: () => {}, + showDeactivate: true, +}; + +export default ConnectedProductCard; diff --git a/projects/packages/my-jetpack/_inc/components/connected-product-card/stories/index.jsx b/projects/packages/my-jetpack/_inc/components/connected-product-card/stories/index.jsx new file mode 100644 index 0000000000000..233376ff652a1 --- /dev/null +++ b/projects/packages/my-jetpack/_inc/components/connected-product-card/stories/index.jsx @@ -0,0 +1,50 @@ +/* eslint-disable react/react-in-jsx-scope */ + +/** + * External dependencies + */ +import React from 'react'; + +import { HashRouter, Routes, Route } from 'react-router-dom'; +import withMock from 'storybook-addon-mock'; + +/** + * Internal dependencies + */ +import ConnectedProductCard from '../'; +import { initStore } from '../../../state/store'; +import { getAllMockData, getProductSlugs } from '../../product-detail-card/stories/utils.js'; + +// Set myJetpackRest global var. +window.myJetpackRest = {}; + +const mockData = getAllMockData(); + +initStore(); + +export default { + title: 'Packages/My Jetpack/Connected Product Card', + component: ConnectedProductCard, + decorators: [ withMock ], + argTypes: { + slug: { + options: getProductSlugs(), + control: { type: 'select' }, + }, + }, +}; + +const Template = args => ( + + + } /> + + +); + +export const Default = Template.bind( {} ); +Default.parameters = { mockData }; +Default.args = { + admin: false, + slug: 'backup', +}; diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/apple.png b/projects/packages/my-jetpack/_inc/components/connection-screen/apple.png new file mode 100644 index 0000000000000..ef00fd337ab7f Binary files /dev/null and b/projects/packages/my-jetpack/_inc/components/connection-screen/apple.png differ diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/google.png b/projects/packages/my-jetpack/_inc/components/connection-screen/google.png new file mode 100644 index 0000000000000..5ac5d08c8f30d Binary files /dev/null and b/projects/packages/my-jetpack/_inc/components/connection-screen/google.png differ diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/connection-screen/index.jsx index 81c3cc6ec9c0c..503f0bf498859 100644 --- a/projects/packages/my-jetpack/_inc/components/connection-screen/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/connection-screen/index.jsx @@ -4,20 +4,52 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { ConnectScreen } from '@automattic/jetpack-connection'; -import { Container, Col, AdminPage } from '@automattic/jetpack-components'; +import { Container, Col, AdminPage, getRedirectUrl } from '@automattic/jetpack-components'; +import { Icon, external } from '@wordpress/icons'; /** * Internal dependencies */ import CloseLink from '../close-link'; import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection'; +import wordpressLogo from './wordpress.png'; +import googleLogo from './google.png'; +import appleLogo from './apple.png'; import connectImage from './connect.png'; import styles from './styles.module.scss'; +const ConnectionScreenFooter = () => { + return ( + <> + { /* not using p here since connect screen apply styles for all p down the tree */ } + { /* https://github.com/Automattic/jetpack/blob/master/projects/js-packages/connection/components/connect-screen/layout/style.scss#L49-L54 */ } +
+ { __( + 'You can use your existing account on any of these services:', + 'jetpack-my-jetpack' + ) } +
+ + { + { + { + + + ); +}; + const ConnectionScreen = () => { const { apiRoot, apiNonce } = useMyJetpackConnection(); return ( - + @@ -32,6 +64,7 @@ const ConnectionScreen = () => { apiRoot={ apiRoot } apiNonce={ apiNonce } images={ [ connectImage ] } + footer={ } > diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss index bee5efb8353ba..62dff6f2d7a21 100644 --- a/projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss @@ -8,3 +8,29 @@ top: 32px; z-index: 1; } + +.account-description { + color: var(--jp-gray-50); + font-size: 13px; + margin-bottom: 16px; + width: 60%; +} + +.account-images { + display: flex; + align-items: center; +} + +.wordpress { + margin-right: 8px; +} + +.apple { + margin-left: 8px; + height: 18px; +} + +.all-features { + display: inline-flex; + align-items: center; +} diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/wordpress.png b/projects/packages/my-jetpack/_inc/components/connection-screen/wordpress.png new file mode 100644 index 0000000000000..6e63a7d83ecd1 Binary files /dev/null and b/projects/packages/my-jetpack/_inc/components/connection-screen/wordpress.png differ diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx index 4559254d133e6..e9775389e549d 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx @@ -66,7 +66,7 @@ export default function MyJetpackScreen() { } return ( - + diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-card/index.jsx index 183d09d1b7155..7cca01513d7e9 100644 --- a/projects/packages/my-jetpack/_inc/components/product-card/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-card/index.jsx @@ -95,6 +95,9 @@ const ActionButton = ( { { __( 'Activate', 'jetpack-my-jetpack' ) } ); + + default: + return null; } }; diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/anti-spam-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/anti-spam-card.jsx index 36d59f60caa3b..c4b28b42d8919 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/anti-spam-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/anti-spam-card.jsx @@ -1,38 +1,21 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import { AntiSpamIcon } from '../icons'; +import ProductCard from '../connected-product-card'; import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; const AntiSpamCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'anti-spam' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - return ( } admin={ admin } - isFetching={ isFetching } - onDeactivate={ deactivate } - slug={ slug } - onActivate={ activate } + slug="anti-spam" onAdd={ useMyJetpackNavigate( '/add-anti-spam' ) } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } /> ); }; diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card.jsx index f591409bfc710..9b2b6ae737bac 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card.jsx @@ -1,41 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; -import { BackupIcon } from '../icons'; +import ProductCard from '../connected-product-card'; const BackupCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'backup' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - isFetching={ isFetching } - admin={ admin } - onDeactivate={ deactivate } - slug={ slug } - onActivate={ activate } - showDeactivate={ false } - onAdd={ useMyJetpackNavigate( '/add-backup' ) } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - /> - ); + return ; }; BackupCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card.jsx index a518b701faa73..6be6a25f2e825 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card.jsx @@ -1,40 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import { BoostIcon } from '../icons'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; +import ProductCard from '../connected-product-card'; const BoostCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'boost' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - admin={ admin } - isFetching={ isFetching } - onDeactivate={ deactivate } - onActivate={ activate } - slug={ slug } - onAdd={ useMyJetpackNavigate( '/add-boost' ) } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - /> - ); + return ; }; BoostCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/crm-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/crm-card.jsx index 05c986a960bb7..f6afd3a17446a 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/crm-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/crm-card.jsx @@ -1,40 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import { CrmIcon } from '../icons'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; +import ProductCard from '../connected-product-card'; const CrmCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'crm' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - isFetching={ isFetching } - admin={ admin } - onDeactivate={ deactivate } - onActivate={ activate } - slug={ slug } - onAdd={ useMyJetpackNavigate( '/add-crm' ) } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - /> - ); + return ; }; CrmCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/extras-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/extras-card.jsx index 3931e29b1257c..ed0bbd1890258 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/extras-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/extras-card.jsx @@ -1,42 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import { ExtrasIcon } from '../icons'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; +import ProductCard from '../connected-product-card'; const ExtrasCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'extras' ); - const { name, description, slug, manageUrl } = detail; - - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - admin={ admin } - isFetching={ isFetching } - onDeactivate={ deactivate } - slug={ slug } - onActivate={ activate } - showDeactivate={ false } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - onAdd={ useMyJetpackNavigate( '/add-extras' ) } - /> - ); + return ; }; ExtrasCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/scan-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/scan-card.jsx index c4ebdb971ef71..98f0b10cac288 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/scan-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/scan-card.jsx @@ -1,41 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import { ScanIcon } from '../icons'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; +import ProductCard from '../connected-product-card'; const ScanCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'scan' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - admin={ admin } - isFetching={ isFetching } - onDeactivate={ deactivate } - slug={ slug } - onActivate={ activate } - onAdd={ useMyJetpackNavigate( '/add-scan' ) } - showDeactivate={ false } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - /> - ); + return ; }; ScanCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/search-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/search-card.jsx index ce7f1d1ffbbf1..b9b53c28add77 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/search-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/search-card.jsx @@ -1,40 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; -import { SearchIcon } from '../icons'; +import ProductCard from '../connected-product-card'; const SearchCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'search' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - admin={ admin } - isFetching={ isFetching } - onDeactivate={ deactivate } - onActivate={ activate } - onAdd={ useMyJetpackNavigate( '/add-search' ) } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - slug={ slug } - /> - ); + return ; }; SearchCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx index e14f30fdacb7d..e92f4e65f4aa4 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx @@ -1,40 +1,16 @@ /** * External dependencies */ -import React, { useCallback } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import ProductCard from '../product-card'; -import { useProduct } from '../../hooks/use-product'; -import { VideopressIcon } from '../icons'; -import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate'; +import ProductCard from '../connected-product-card'; const VideopressCard = ( { admin } ) => { - const { status, activate, deactivate, detail, isFetching } = useProduct( 'videopress' ); - const { name, description, slug, manageUrl } = detail; - const onManage = useCallback( () => { - window.location = manageUrl; - }, [ manageUrl ] ); - - return ( - } - admin={ admin } - isFetching={ isFetching } - onDeactivate={ deactivate } - onActivate={ activate } - slug={ slug } - onAdd={ useMyJetpackNavigate( '/add-videopress' ) } - onFixConnection={ useMyJetpackNavigate( '/connection' ) } - onManage={ onManage } - /> - ); + return ; }; VideopressCard.propTypes = { diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/button.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-button/index.js similarity index 63% rename from projects/packages/my-jetpack/_inc/components/product-detail-card/button.jsx rename to projects/packages/my-jetpack/_inc/components/product-detail-button/index.js index df9b708c43c4a..a335059e31ec0 100644 --- a/projects/packages/my-jetpack/_inc/components/product-detail-card/button.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-detail-button/index.js @@ -2,8 +2,8 @@ * External dependencies */ import React from 'react'; -import { Button } from '@wordpress/components'; -import { Spinner } from '@automattic/jetpack-components'; +import PropTypes from 'prop-types'; +import { Button, Spinner } from '@wordpress/components'; const ProductDetailButton = ( { children, className, href, isLoading, onClick, isPrimary } ) => { return ( @@ -12,14 +12,22 @@ const ProductDetailButton = ( { children, className, href, isLoading, onClick, i className={ className } href={ href } variant={ isPrimary ? 'primary' : 'secondary' } + disabled={ isLoading } > { isLoading ? : children } ); }; +ProductDetailButton.propTypes = { + className: PropTypes.string, + isLoading: PropTypes.bool, + isPrimary: PropTypes.bool, +}; + ProductDetailButton.defaultProps = { isLoading: false, + isPrimary: true, }; export default ProductDetailButton; diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-button/stories/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-button/stories/index.jsx new file mode 100644 index 0000000000000..30e85ced554a3 --- /dev/null +++ b/projects/packages/my-jetpack/_inc/components/product-detail-button/stories/index.jsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import React from 'react'; + +/** + * Internal dependencies + */ +import ProductDetailButton from '../'; + +export default { + title: 'Packages/My Jetpack/Product Detail Button', + component: ProductDetailButton, +}; + +const DetaiilButton = args => ; + +export const Default = DetaiilButton.bind( {} ); +Default.args = { + children: 'Add Jetpack Site Search', +}; diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx index 58f43570a4278..d4fde8341be59 100644 --- a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx @@ -22,7 +22,7 @@ import { AntiSpamIcon, CheckmarkIcon, } from '../icons'; -import ProductDetailButton from './button'; +import ProductDetailButton from '../product-detail-button'; /** * Simple react component to render the product icon, diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/stories/utils.js b/projects/packages/my-jetpack/_inc/components/product-detail-card/stories/utils.js index 4f113f7863d53..2db675ca74998 100644 --- a/projects/packages/my-jetpack/_inc/components/product-detail-card/stories/utils.js +++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/stories/utils.js @@ -35,7 +35,7 @@ export function getMockData( product ) { const isArray = product.constructor === Array; const productSlugs = isArray ? product : [ product ]; - return productSlugs.map( productSlug => { + const getRequests = productSlugs.map( productSlug => { return { url: `my-jetpack/v1/site/products/${ productSlug }?_locale=user`, method: 'GET', @@ -43,6 +43,20 @@ export function getMockData( product ) { response: mapResponse[ productSlug ], }; } ); + + const postRequests = productSlugs.map( productSlug => { + return { + url: `my-jetpack/v1/site/products/${ productSlug }?_locale=user`, + method: 'POST', + status: 200, + response: { + ...mapResponse[ productSlug ], + status: mapResponse[ productSlug ].status === 'active' ? 'inactive' : 'active', + }, + }; + } ); + + return [ ...getRequests, ...postRequests ]; } /** @@ -51,15 +65,14 @@ export function getMockData( product ) { * @returns {Array} All products mocked data. */ export function getAllMockData() { - return getMockData( [ - 'anti-spam', - 'backup', - 'boost', - 'crm', - 'extras', - 'scan', - 'search', - 'security', - 'videopress', - ] ); + return getMockData( [ ...Object.keys( mapResponse ) ] ); +} + +/** + * Return product slugs list + * + * @returns {Array} product slugs list. + */ +export function getProductSlugs() { + return [ 'anti-spam', 'backup', 'boost', 'crm', 'extras', 'scan', 'search', 'videopress' ]; } diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss index fa2cc3364c274..03e1f25a22c7b 100644 --- a/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss +++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss @@ -112,10 +112,15 @@ white-space: pre-line; height: auto; + .components-spinner { + margin: 0; + } + &.is-bundle:hover { background: var(--jp-black); color: var(--jp-white); } + } // Product Icon diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx index 6b2640e125ef1..775eb006326c5 100644 --- a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx @@ -91,7 +91,7 @@ export default function ProductInterstitial( { }, [ recordEvent, slug ] ); return ( - + diff --git a/projects/packages/my-jetpack/changelog/add-link-logo-footer b/projects/packages/my-jetpack/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..989757ceedf51 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +Add link to jetpack.com in the footer diff --git a/projects/packages/my-jetpack/changelog/add-link-logo-footer#2 b/projects/packages/my-jetpack/changelog/add-link-logo-footer#2 new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/add-link-logo-footer#2 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/my-jetpack/changelog/update-components-spinner b/projects/packages/my-jetpack/changelog/update-components-spinner new file mode 100644 index 0000000000000..4882040d82e5c --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +My Jetpack: update Spinner in checkout button diff --git a/projects/packages/my-jetpack/changelog/update-components-spinner#2 b/projects/packages/my-jetpack/changelog/update-components-spinner#2 new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-components-spinner#2 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/my-jetpack/changelog/update-connect-screen-footer b/projects/packages/my-jetpack/changelog/update-connect-screen-footer new file mode 100644 index 0000000000000..2573cf752f6ef --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-connect-screen-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +My Jetpack: Add connection screen footer diff --git a/projects/packages/my-jetpack/changelog/update-connect-screen-footer#2 b/projects/packages/my-jetpack/changelog/update-connect-screen-footer#2 new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-connect-screen-footer#2 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/my-jetpack/changelog/update-connection-screen-features-list b/projects/packages/my-jetpack/changelog/update-connection-screen-features-list new file mode 100644 index 0000000000000..d2332dce44873 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-connection-screen-features-list @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +My Jetpack: Add jetpack features link on connection screen diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-add-stories-for-connected-product-card b/projects/packages/my-jetpack/changelog/update-my-jetpack-add-stories-for-connected-product-card new file mode 100644 index 0000000000000..116fe1e0fe26a --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-my-jetpack-add-stories-for-connected-product-card @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +My Jetpack: Add Connected Product Card stories diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-product-card-janitorial b/projects/packages/my-jetpack/changelog/update-my-jetpack-product-card-janitorial new file mode 100644 index 0000000000000..aa61aeafbc51b --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-my-jetpack-product-card-janitorial @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +My Jetpack: tidy Product card component diff --git a/projects/packages/search/changelog/add-link-logo-footer b/projects/packages/search/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/search/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/search/changelog/fix-customize-autoloader b/projects/packages/search/changelog/fix-customize-autoloader new file mode 100644 index 0000000000000..aeac679446e79 --- /dev/null +++ b/projects/packages/search/changelog/fix-customize-autoloader @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Ensure the Customizer classes are loaded. diff --git a/projects/packages/search/changelog/update-components-spinner b/projects/packages/search/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/packages/search/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/packages/search/changelog/update-more-search-stuff b/projects/packages/search/changelog/update-more-search-stuff new file mode 100644 index 0000000000000..6191244c1bcdf --- /dev/null +++ b/projects/packages/search/changelog/update-more-search-stuff @@ -0,0 +1,5 @@ +Significance: patch +Type: fixed +Comment: Another class extend issue + + diff --git a/projects/packages/search/changelog/update-search-move-record-meter b/projects/packages/search/changelog/update-search-move-record-meter new file mode 100644 index 0000000000000..8fec49a4a0df3 --- /dev/null +++ b/projects/packages/search/changelog/update-search-move-record-meter @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +search: move record meter location on dashboard diff --git a/projects/packages/search/src/customizer/customize-controls/class-excluded-post-types-control.php b/projects/packages/search/src/customizer/customize-controls/class-excluded-post-types-control.php index f1422507cc49c..54f27a3a4cf5e 100644 --- a/projects/packages/search/src/customizer/customize-controls/class-excluded-post-types-control.php +++ b/projects/packages/search/src/customizer/customize-controls/class-excluded-post-types-control.php @@ -8,11 +8,16 @@ namespace Automattic\Jetpack\Search; use Automattic\Jetpack\Assets; +use WP_Customize_Control; + +if ( ! class_exists( 'WP_Customize_Control' ) ) { + return; +} /** * Label Control class. */ -class Excluded_Post_Types_Control extends \WP_Customize_Control { +class Excluded_Post_Types_Control extends WP_Customize_Control { /** * Control type. * diff --git a/projects/packages/search/src/customizer/customize-controls/class-label-control.php b/projects/packages/search/src/customizer/customize-controls/class-label-control.php index 7c17c218e6569..c6b67775ab061 100644 --- a/projects/packages/search/src/customizer/customize-controls/class-label-control.php +++ b/projects/packages/search/src/customizer/customize-controls/class-label-control.php @@ -8,10 +8,15 @@ namespace Automattic\Jetpack\Search; +use WP_Customize_Control; + +if ( ! class_exists( 'WP_Customize_Control' ) ) { + return; +} /** * Label Control class. */ -class Label_Control extends \WP_Customize_Control { +class Label_Control extends WP_Customize_Control { /** * Override rendering for custom class name; omit element ID. */ diff --git a/projects/packages/search/src/dashboard/components/dashboard/index.jsx b/projects/packages/search/src/dashboard/components/dashboard/index.jsx index 3cadee65ff5e1..d9342697874ee 100644 --- a/projects/packages/search/src/dashboard/components/dashboard/index.jsx +++ b/projects/packages/search/src/dashboard/components/dashboard/index.jsx @@ -191,7 +191,6 @@ export default function SearchDashboard() { { renderHeader() } { renderMockedSearchInterface() } - { renderModuleControl() } { isRecordMeterEnabled && ( ) } + { renderModuleControl() } { renderFooter() } ) } diff --git a/projects/packages/search/src/dashboard/components/record-meter/index.jsx b/projects/packages/search/src/dashboard/components/record-meter/index.jsx index 583b174645abe..0469bb8c0ee6f 100644 --- a/projects/packages/search/src/dashboard/components/record-meter/index.jsx +++ b/projects/packages/search/src/dashboard/components/record-meter/index.jsx @@ -19,6 +19,7 @@ export default function RecordMeter( { postCount, postTypeBreakdown, tierMaximum return (
+

{ __( 'Your search records', 'jetpack-search-pkg' ) }

{ tierMaximumRecords && ( diff --git a/projects/plugins/backup/changelog/add-link-logo-footer b/projects/plugins/backup/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/plugins/backup/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/plugins/backup/changelog/update-components-spinner b/projects/plugins/backup/changelog/update-components-spinner new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/plugins/backup/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/plugins/backup/changelog/update-connect-screen-footer b/projects/plugins/backup/changelog/update-connect-screen-footer new file mode 100644 index 0000000000000..c47cb18e82997 --- /dev/null +++ b/projects/plugins/backup/changelog/update-connect-screen-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated package dependencies. diff --git a/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS.php b/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS.php index eb4642723eeb5..338a1cd283f93 100644 --- a/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS.php +++ b/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS.php @@ -80,6 +80,16 @@ public function display_critical_css() { // Get the Critical CSS to show. $critical_css = $this->paths->get_current_request_css(); if ( ! $critical_css ) { + $source_providers = new Source_Providers(); + $keys = $source_providers->get_current_request_css_keys(); + $state = new Critical_CSS_State( 'cloud' ); + $pending = $state->has_pending_provider( $keys ); + + // If Cloud CSS is still generating and the user is logged in, render the status information in a comment. + if ( $pending && is_user_logged_in() ) { + $display = new Display_Critical_CSS( '/* ' . __( 'Jetpack Boost is currently generating critical css for this page', 'jetpack-boost' ) . ' */' ); + add_action( 'wp_head', array( $display, 'display_critical_css' ), 0 ); + } return; } diff --git a/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS_Request.php b/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS_Request.php index 183b998d978be..dabf7ba6aac95 100644 --- a/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS_Request.php +++ b/projects/plugins/boost/app/features/optimizations/cloud-css/Cloud_CSS_Request.php @@ -40,9 +40,6 @@ public function request_generate() { private function reset_existing_css() { $storage = new Critical_CSS_Storage(); - - foreach ( $this->state->get_provider_urls() as $provider => $urls ) { - $storage->store_css( $provider, '/* ' . __( 'Jetpack Boost is currently generating critical css for this page', 'jetpack-boost' ) . ' */' ); - } + $storage->clear(); } } diff --git a/projects/plugins/boost/app/features/speed-score/Speed_Score.php b/projects/plugins/boost/app/features/speed-score/Speed_Score.php index e89618f65db5e..61da7b2d87cf8 100644 --- a/projects/plugins/boost/app/features/speed-score/Speed_Score.php +++ b/projects/plugins/boost/app/features/speed-score/Speed_Score.php @@ -94,11 +94,7 @@ public function dispatch_speed_score_request( $request ) { $score_request->store( 1800 ); // Keep the request for 30 minutes even if no one access the results. // Send the request. - $response = $score_request->execute(); - - if ( is_wp_error( $response ) ) { - return $response; - } + $score_request->execute(); } $score_request_no_boost = $this->maybe_dispatch_no_boost_score_request( $url ); @@ -196,11 +192,7 @@ private function maybe_dispatch_no_boost_score_request( $url ) { $score_request->store( 3600 ); // Keep the request for 1 hour even if no one access the results. The value is persisted for 1 hour in wp.com from initial request. // Send the request. - $response = $score_request->execute(); - - if ( is_wp_error( $response ) ) { - return $response; - } + $score_request->execute(); } remove_filter( 'jetpack_boost_excluded_query_parameters', array( $this, 'allow_jb_disable_module' ) ); diff --git a/projects/plugins/boost/app/features/speed-score/Speed_Score_Request.php b/projects/plugins/boost/app/features/speed-score/Speed_Score_Request.php index 139072e8192ce..74f844eafe356 100644 --- a/projects/plugins/boost/app/features/speed-score/Speed_Score_Request.php +++ b/projects/plugins/boost/app/features/speed-score/Speed_Score_Request.php @@ -167,6 +167,10 @@ public function execute() { ); if ( is_wp_error( $response ) ) { + $this->status = 'error'; + $this->error = $response->get_error_message(); + $this->store(); + return $response; } @@ -222,7 +226,7 @@ public function poll_update() { switch ( $response->status ) { case 'pending': - // The initial job probalby failed, dispatch again if so. + // The initial job probably failed, dispatch again if so. if ( $this->created <= strtotime( '-15 mins' ) ) { return $this->restart(); } diff --git a/projects/plugins/boost/app/lib/critical-css/Critical_CSS_State.php b/projects/plugins/boost/app/lib/critical-css/Critical_CSS_State.php index ebde56b3baa18..b42531d8df5cc 100644 --- a/projects/plugins/boost/app/lib/critical-css/Critical_CSS_State.php +++ b/projects/plugins/boost/app/lib/critical-css/Critical_CSS_State.php @@ -297,6 +297,18 @@ protected function get_provider_sources( $providers ) { return $sources; } + public function has_pending_provider( $providers ) { + $state = $this->get_state_transient(); + $pending = false; + foreach ( $state['sources'] as $name => $source_state ) { + if ( in_array( $name, $providers, true ) && self::REQUESTING === $source_state['status'] ) { + $pending = true; + break; + } + } + return $pending; + } + /** * Get providers errors. * diff --git a/projects/plugins/boost/changelog/fix-no-boost-score-error b/projects/plugins/boost/changelog/fix-no-boost-score-error new file mode 100644 index 0000000000000..238b02c1e9499 --- /dev/null +++ b/projects/plugins/boost/changelog/fix-no-boost-score-error @@ -0,0 +1,5 @@ +Significance: patch +Type: fixed +Comment: Fix minor bug on AT + + diff --git a/projects/plugins/boost/changelog/fix-pending-cloud-css-load b/projects/plugins/boost/changelog/fix-pending-cloud-css-load new file mode 100644 index 0000000000000..3c9ce91941ed0 --- /dev/null +++ b/projects/plugins/boost/changelog/fix-pending-cloud-css-load @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Disable asynchronize stylesheet on pending Cloud CSS. diff --git a/projects/plugins/jetpack/changelog/add-link-logo-footer b/projects/plugins/jetpack/changelog/add-link-logo-footer new file mode 100644 index 0000000000000..1eaea6a769e84 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-link-logo-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Updated package dependencies. diff --git a/projects/plugins/jetpack/changelog/fix-wrong-version-peer-deps b/projects/plugins/jetpack/changelog/fix-wrong-version-peer-deps new file mode 100644 index 0000000000000..1926e0102ecd7 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-wrong-version-peer-deps @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Update `@size-limit/preset-app` dependency to match `size-limit`. diff --git a/projects/plugins/jetpack/changelog/update-components-spinner b/projects/plugins/jetpack/changelog/update-components-spinner new file mode 100644 index 0000000000000..1eaea6a769e84 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-components-spinner @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Updated package dependencies. diff --git a/projects/plugins/jetpack/changelog/update-connect-screen-footer b/projects/plugins/jetpack/changelog/update-connect-screen-footer new file mode 100644 index 0000000000000..1eaea6a769e84 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-connect-screen-footer @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Updated package dependencies. diff --git a/projects/plugins/jetpack/changelog/update-desktop-switcher b/projects/plugins/jetpack/changelog/update-desktop-switcher new file mode 100644 index 0000000000000..0e2860ce3e429 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-desktop-switcher @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Masterbar: Makes Desktop Switcher look the same between Calypso and wp-admin. diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/blue/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/blue/colors.scss index 5088715af12c4..54994ac84a59c 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/blue/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/blue/colors.scss @@ -26,5 +26,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: $studio-blue-60; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/coffee/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/coffee/colors.scss index 5ff3da00977fe..6addae2db8897 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/coffee/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/coffee/colors.scss @@ -25,5 +25,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: $studio-orange-60; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ectoplasm/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ectoplasm/colors.scss index 24e720c4b83dc..4e434aa89034b 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ectoplasm/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ectoplasm/colors.scss @@ -25,5 +25,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: rgb(100, 125, 0); @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/fresh/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/fresh/colors.scss index 98c3c377bb87f..4d68e1aefb2d9 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/fresh/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/fresh/colors.scss @@ -25,6 +25,7 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: $studio-pink-60; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/light/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/light/colors.scss index 02ed8ab5cd7a4..91ddb9d2e41b3 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/light/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/light/colors.scss @@ -32,5 +32,6 @@ $menu-nudge-cta-background-hover: $studio-blue-60; } @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/midnight/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/midnight/colors.scss index e53d71657a13f..bee281e65d1ef 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/midnight/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/midnight/colors.scss @@ -25,5 +25,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: #00417d; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/modern/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/modern/colors.scss index 15af5774fec58..c05bd10d52f62 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/modern/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/modern/colors.scss @@ -25,5 +25,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: #2145e6; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ocean/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ocean/colors.scss index 53872c375342c..443f6c5f141d1 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ocean/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/ocean/colors.scss @@ -25,5 +25,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: $studio-celadon-60; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/sunrise/colors.scss b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/sunrise/colors.scss index ffe79711706ad..f72c5a6572e2b 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/sunrise/colors.scss +++ b/projects/plugins/jetpack/modules/masterbar/admin-color-schemes/colors/sunrise/colors.scss @@ -25,5 +25,6 @@ $menu-nudge-cta-color: $studio-white; $menu-nudge-cta-background-hover: $studio-orange-60; @import "../_core-overrides"; +@import "../_gutenberg"; @import "../_inline-help"; @import "../_upsell-banner"; diff --git a/projects/plugins/jetpack/modules/masterbar/admin-menu/admin-menu.css b/projects/plugins/jetpack/modules/masterbar/admin-menu/admin-menu.css index 92b762cbd22da..72ddaf39847a1 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-menu/admin-menu.css +++ b/projects/plugins/jetpack/modules/masterbar/admin-menu/admin-menu.css @@ -456,33 +456,75 @@ } } -/* Fixes the order of screen options, - * showing the dashboard switcher button always first. -*/ -#adv-settings { - display: flex; - flex-direction: column; +/* Dashboard Switcher */ +#view-link-wrap { + float: left; + margin: 0 0 0 6px; +} + +.screen-options-tab__wrapper { + position:relative +} + +.screen-options-tab__dropdown { + background-color: #fff; + border: 1px solid var(--color-neutral-5); + border-radius: 4px; + box-shadow: 0 4px 10px #0000001a; + padding: 3px; + position: absolute; + right: 20px; + top: 37px; + width:215px; + z-index: 9999; +} + +@media screen and (max-width: 782px) { + .screen-options-tab__dropdown { + right: 10px; + top: 47px; + } } -/* Switcher should always be in the top */ -#adv-settings #dashboard-switcher { - order: 0; +@media screen and (max-width: 600px) { + .screen-options-tab__dropdown { + top: 93px; + } } -#adv-settings .dashboard-switcher-text { - margin-top: 0; +.screen-switcher:not(:hover) .screen-switcher__button:nth-child(2) > strong { + color:var(--wp-admin-theme-color) } -#adv-settings .dashboard-switcher-button { - padding: 3px 16px; +.screen-switcher__button, a.screen-switcher__button { + background: transparent; + border: 1px solid #0000; + border-radius: 4px; + color: var(--color-text); + cursor: pointer; + display: inline-block; + font-size: .75rem; + line-height: normal; + text-decoration: none; + padding: 8px; + text-align:left } -/* Core registered options should be after the switcher */ -#adv-settings fieldset { - order: 1; +.screen-switcher__button:nth-child(2), a.screen-switcher__button:nth-child(2) { + border-color: var(--wp-admin-theme-color); + margin-bottom:4px +} + +.screen-switcher__button:last-child, a.screen-switcher__button:last-child { + margin-bottom:0 +} + +.screen-switcher__button strong, a.screen-switcher__button strong { + display: block; + font-size: 13px; + margin-bottom:4px } -/* Submit button should always be in the bottom */ -#adv-settings .submit { - order: 2; +.screen-switcher__button:focus > strong, .screen-switcher__button:hover > strong, a.screen-switcher__button:focus > strong, a.screen-switcher__button:hover > strong { + color:var(--wp-admin-theme-color) } diff --git a/projects/plugins/jetpack/modules/masterbar/admin-menu/class-admin-menu.php b/projects/plugins/jetpack/modules/masterbar/admin-menu/class-admin-menu.php index 46b7f8bf38d07..3fac4d3b8333a 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-menu/class-admin-menu.php +++ b/projects/plugins/jetpack/modules/masterbar/admin-menu/class-admin-menu.php @@ -508,35 +508,4 @@ public function add_woocommerce_installation_menu( $current_plan = null ) { add_menu_page( esc_attr__( 'WooCommerce', 'jetpack' ), esc_attr__( 'WooCommerce', 'jetpack' ), 'activate_plugins', $menu_url, null, $icon_url, 55 ); } } - - /** - * Prepend a dashboard swithcer to the "Screen Options" box of the current page. - * Callback for the 'screen_settings' filter (available in WP 3.0 and up). - * - * @param string $current The currently added panels in screen options. - * - * @return string The HTML code to append to "Screen Options" - */ - public function register_dashboard_switcher( $current ) { - $menu_mappings = require __DIR__ . '/menu-mappings.php'; - $screen = $this->get_current_screen(); - - // Let's show the switcher only in screens that we have a Calypso mapping to switch to. - if ( ! isset( $menu_mappings[ $screen ] ) ) { - return; - } - - $contents = sprintf( - '
%s

%s

%s
', - __( 'Screen features', 'jetpack' ), - __( 'Currently you are seeing the classic WP-Admin view of this page. Would you like to see the default WordPress.com view?', 'jetpack' ), - add_query_arg( 'preferred-view', 'default' ), - __( 'Use WordPress.com view', 'jetpack' ) - ); - - // Prepend the Dashboard swither to the other custom panels. - $current = $contents . $current; - - return $current; - } } diff --git a/projects/plugins/jetpack/modules/masterbar/admin-menu/class-base-admin-menu.php b/projects/plugins/jetpack/modules/masterbar/admin-menu/class-base-admin-menu.php index 5f3b1f517f8ce..a35e2ed3948ed 100644 --- a/projects/plugins/jetpack/modules/masterbar/admin-menu/class-base-admin-menu.php +++ b/projects/plugins/jetpack/modules/masterbar/admin-menu/class-base-admin-menu.php @@ -76,7 +76,8 @@ protected function __construct() { add_filter( 'admin_menu', array( $this, 'override_svg_icons' ), 99999 ); add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ), 11 ); add_action( 'admin_head', array( $this, 'set_site_icon_inline_styles' ) ); - add_filter( 'screen_settings', array( $this, 'register_dashboard_switcher' ), 99999 ); + add_action( 'in_admin_header', array( $this, 'add_dashboard_switcher' ) ); + add_action( 'admin_footer', array( $this, 'dashboard_switcher_scripts' ) ); add_action( 'admin_menu', array( $this, 'handle_preferred_view' ), 99997 ); add_filter( 'admin_body_class', array( $this, 'admin_body_class' ) ); } @@ -543,6 +544,65 @@ public function is_item_visible( $item ) { return ! isset( $item[4] ) || false === strpos( $item[4], self::HIDE_CSS_CLASS ); } + /** + * Adds a dashboard switcher to the list of screen meta links of the current page. + */ + public function add_dashboard_switcher() { + $menu_mappings = require __DIR__ . '/menu-mappings.php'; + $screen = $this->get_current_screen(); + + // Let's show the switcher only in screens that we have a Calypso mapping to switch to. + if ( empty( $menu_mappings[ $screen ] ) ) { + return; + } + ?> + + + register_dashboard_switcher( '' ); - $this->assertNull( $output ); - - $screens = array( - 'edit.php' => 'https://wordpress.com/posts/', - 'edit.php?post_type=page' => 'https://wordpress.com/pages/', - 'edit.php?post_type=jetpack-portfolio' => 'https://wordpress.com/types/jetpack-portfolio/', - 'edit-tags.php?taxonomy=category' => 'https://wordpress.com/settings/taxonomies/category/', - ); - - foreach ( $screens as $screen => $mapping ) { - $pagenow = $screen; - $output = static::$admin_menu->register_dashboard_switcher( '' ); - $expected = sprintf( - '
%s

%s

%s
', - __( 'Screen features', 'jetpack' ), - __( 'Currently you are seeing the classic WP-Admin view of this page. Would you like to see the default WordPress.com view?', 'jetpack' ), - '?preferred-view=default', - __( 'Use WordPress.com view', 'jetpack' ) - ); - - $this->assertEquals( $expected, $output ); - } - } } diff --git a/tools/check-development-environment.sh b/tools/check-development-environment.sh index 17e40530a1666..a323147100425 100755 --- a/tools/check-development-environment.sh +++ b/tools/check-development-environment.sh @@ -282,6 +282,24 @@ else version_range 'Composer' "$BIN" 'composer' "$VER" "$VX.0" "$COMPOSER_VERSION" "$VX.9999999" true fi +checking 'Required extensions are installed' +MISSING_EXTENSIONS=() +BIN="$(command -v php)" +if [[ -z "$BIN" ]]; then + failure "no php found, skipping check" 'php' +else + for extension in mbstring xml libxml; do + if php -r "exit( in_array( '$extension', get_loaded_extensions() ) ? 1 : 0 );"; then + MISSING_EXTENSIONS+=( "$extension" ) + fi + done + if [[ ${#MISSING_EXTENSIONS[@]} -gt 0 ]]; then + failure 'no' '' "The following extensions are not installed: ${MISSING_EXTENSIONS[*]}" + else + success 'yes' + fi +fi + echo "" echo "JavaScript tools" echo "================" diff --git a/tools/docker/Dockerfile b/tools/docker/Dockerfile index 4e73d72ec9a93..e4474c0c29086 100644 --- a/tools/docker/Dockerfile +++ b/tools/docker/Dockerfile @@ -31,6 +31,7 @@ RUN \ sudo \ unzip \ vim \ + zip \ && rm -rf /var/lib/apt/lists/* # Enable mod_rewrite in Apache.