Forms: Update Landing page to About page

[dhasilva]

Fixes JETPACK-384

Proposed changes:

• Adds typescript support on Forms package
• Updates SASS
• Creates a new About page
• Replaces the Landing page with the About page

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

• Go to the Feedback page
• Open the About tab
• Check that it matches the Figma file (see issue)
• Change the viewport to mobile and check that nothing is broken
• Change the viewport to tablet and check that nothing is broken

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/forms-dashboard-about branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/forms-dashboard-about

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/forms-dashboard-about

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[jp-launch-control]

Code Coverage Summary

8 files are newly checked for coverage. Only the first 5 are listed here.

File	Coverage
projects/packages/forms/src/dashboard/about/index.tsx	0/7 (0.00%) 💔
projects/packages/forms/src/dashboard/about/svg/akismet-svg.tsx	0/2 (0.00%) 💔
projects/packages/forms/src/dashboard/about/svg/check-svg.tsx	0/2 (0.00%) 💔
projects/packages/forms/src/dashboard/about/svg/close-svg.tsx	0/2 (0.00%) 💔
projects/packages/forms/src/dashboard/about/svg/export-svg.tsx	0/2 (0.00%) 💔

Full summary · PHP report · JS report

_{Coverage check overridden by Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR .}

[edanzer]

Apart from other questions above, the new page looks great! I tried to compare tightly against figma designs. Only things I noted:

• There are very minor differences in fonts/spacing in several places
• The button at the top is smaller, black, and spacing seems off. I suspect we're using a core button as is, so there are some questions about if we'd want to override styling. I think there was some discussion about this elsewhere.
• We could add Jetpack and Akismet icons to the Connect with apps section.

Many of these are quite minor. For my own part, I'd be fine deploying this and then handling tweaks, if needed, in follow ups if you'd prefer. The one change I'd consider making is doing the TS setup in a different PR just to trim down the size of this one and reduce risk.

Screenshots

[simison]

Please remember to test mobile version as well, thanks!

[dhasilva]

I'm assuming the same tracking event is used for all instances of the button, at least for now.

[edanzer]

Curious why we need the package.json changes for this PR?

I think this change is also causing changes to the root pnpm-lock.yaml file. Changes to core dependency or build files can make me nervous because there's so much going on with Jetpack's build environment and processes, and because of the risk of affecting builds for other packages/plugins.

If we don't need this or could put it in a different PR, I might prefer that. If we do need it here, that's fine too, of course.

[edanzer]

Same question here as I posed on the form package.json file....

[dhasilva]

@edanzer The Sass update is required for the use of CSS's native round function. Sass had its own round function and it tries to compile this and fails. I updated to the nearest version that fixes this:

https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1670

Now for why I'm using round there, it is to avoid the image being resized to a sub-pixel width depending on the monitor resolution, making the image a bit blurry. That is normally not an issue, but it is perceptible in this case because the images are screenshot of forms with text.

[edanzer]

Are we comfortable / confident that updating the project-wide dependencies won't cause build issues for any other packages/plugins in the monorepo?

[edanzer]

As with other question about Akisment, I wonder if it would make sense to use existing jetpack svg icon. Example here.

I noticed the salesforce png is a bit blurry. I have a separate PR that adds a salesforce svg icon. Once merged we could update that here too in a follow up.