Ribbon: Move to calypso-ui

[ockham]

This is a leaf component that doesn't have any counterpart in @wordpress/components. It might come in handy in Jetpack (to highlight paid Gutenberg blocks in the block picker).

Changes proposed in this Pull Request

Ribbon: Move to calypso-ui

Testing instructions

npm run distclean && npm ci
npm start

Verify that the ribbon still works:

• http://calypso.localhost:3000/devdocs/design/ribbon
• http://calypso.localhost:3000/themes

[matticbot]

Test live: https://calypso.live/?branch=move/ribbon-to-calypso-ui

[sirreal]

I don't see this component rendered anywhere in /themes. In devdocs it seems to work fine.

There seems to be an issue fetching the README for devdocs. I suspect that's not new from this PR but it would be nice to fix for calypso-ui in general:

Before:

After:

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~184 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                  +771 B  (+0.0%)      +92 B  (+0.0%)
entry-domains-landing       +771 B  (+0.1%)      +92 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~139 bytes removed 📉 [gzipped])

name    parsed_size           gzip_size
themes       -271 B  (-0.1%)      -51 B  (-0.0%)
theme        -271 B  (-0.1%)      -51 B  (-0.1%)
earn         -271 B  (-0.1%)      -37 B  (-0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~821 bytes added 📈 [gzipped])

name                                     parsed_size           gzip_size
async-load-design-playground                 +1289 B  (+0.1%)     +471 B  (+0.1%)
async-load-design                            +1289 B  (+0.1%)     +455 B  (+0.1%)
async-load-design-blocks                      -273 B  (-0.0%)      -54 B  (-0.0%)
async-load-signup-steps-theme-selection       -271 B  (-0.7%)      -51 B  (-0.5%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ockham]

I don't see this component rendered anywhere in /themes.

Ah, my bad. They had been there for about ~2 years to indicate certain classes of themes, e.g. 'Beginner'.

In devdocs it seems to work fine.

Yay!

There seems to be an issue fetching the README for devdocs. I suspect that's not new from this PR but it would be nice to fix for calypso-ui in general:
[...]

Ah, good spot. That's probably due to the way we import the respective components directly (from @automattic/calypso-ui/src/ribbon/docs/example). I'll look into that 👍

---

I just noticed that the devdocs example for Ribbon uses Card. That probably means I should move Card to calypso-ui first 😅

[sirreal]

Still seems to work fine 🚢