367 site kit tables UI

[vraja-pro]

Context

• We want to create reusable components to site kit stats tables.

Summary

This PR can be summarized in the following changelog entry:

• Adds reusable component for tables widgets of the dashboard.
• [@yoast/ui-library 0.1.0] Adds variant prop to the table component.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Add dummy data and tables to the dashboard by applying this patch dashboard-table.patch:
• Go to Yoast SEO-> General
• Check the you see the test table
• Check the first column values are with weight 500 and color slate-900
• Check the SEO score values are rendered with matching bullet colors and screen reader text.
• Check the SEO score bullet is centered to the column title.

Storybook

• Check storybook for the table element has a story for the minimal variant.
• Check the table row docs contain information about table row variant striped.

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:

Impact check

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

• Edit a post
• Click on "get related keyphrases"
• Check the related keyphrase suggestion table is without any changes.
• Go to Yoast SEO -> Settings -> RSS
• Check the table for Available variables looks the same.

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/403

[igorschoester]

CR 🏗️

[coveralls]

Pull Request Test Coverage Report for Build dd8a089178f4873525ae2f4cf97d728215c35c56

Details

• 7 of 7 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall first build on 367-site-kit-tables-ui at 27.919%

---

Totals
Change from base Build 9c66956756c0900e29fb6645e4308dfb47898de1:	27.9%
Covered Lines:	3956
Relevant Lines:	13078

---

💛 - Coveralls