Add the Site Kit consent modal

[igorschoester]

Context

• UI only

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/ui-library 0.0.1] Exposes the Modal.Panel' close button as Modal.CloseButton. For easier styling overrides via the className prop.

Relevant technical choices:

• Extracted the close button to prevent having to import the introduction.css for the button styling override. As there is no way to target that in JS before this patch
• Added the modal itself, and tested with 364 add the integration card for google site kit #21946 -- but now pointing to trunk because of force pushes and things. So lets get that merged before testing this.
• The image in the design is just a placeholder, real image coming soon ™️
• The shortlink should be: http://yoa.st/sitekit-consent-learn-more -- actual query params need to be added later
• Granting of consent in the backend is coming soon ™️ -- will need adjustment here
• The install flow in the widget will need to tie this together later too

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

UI library: Modal.CloseButton

• Start the storybook: yarn workspace @yoast/ui-library storybook
• Go to the modal story
• Check the new stories
  • With panel and adjusted close button -- this is the situation the consent modal uses it for
  • With panel and custom close button -- this is just some extra documentation on an already pre-existing possibility
• Regression: verify the old stories work the same, especially the With panel.

Consent modal

• Not being able to test the actual granting of consent yet, awaiting backend
• Please verify against the design as per the issue.
  • Note that the image in the design is just a placeholder, hence me skipping that
  • Verify the learn more link without params is: http://yoa.st/sitekit-consent-learn-more

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

• No need to test this PR separately. This is the initial implementation of the UI for the consent of the Site kit.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/415

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[coveralls]

Pull Request Test Coverage Report for Build 54891c5d24c873783c71f7cd3d349b7926b66457

Details

• 2 of 2 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.003%) to 54.586%

---

Totals
Change from base Build 765f7f778b84c64ea04ab41c833b3174add85dad:	0.003%
Covered Lines:	30152
Relevant Lines:	55657

---

💛 - Coveralls

[thijsoo]

CR + ACC 👍