Migrate ItemExtrasEditor to Wonder-Blocks

[jeremywiebe]

Summary:

While working in the Perseus Editor I took a few minutes to convert the item extras editor to use WB checkboxes. This results in much nicer layout (checkboxes all on the left, better typography).

Before	After

Issue: LEMS-1809

Test plan:

Run storybook and look at the Editor Page or Item Extras Editor stories.

I also verified that it still serializes the right data out and that nested checkboxes work.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/young-suns-beg.md, packages/perseus-editor/src/item-extras-editor.tsx, packages/perseus-editor/src/__tests__/item-extras-editor.test.tsx, packages/perseus-editor/src/styles/perseus-editor.less

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +312 B (+0.04%)

Total Size: 853 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	272 kB	+208 B (+0.08%)
packages/perseus/dist/es/index.js	413 kB	+104 B (+0.03%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.8 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.23 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[nishasy]

This is so awesome! Looks good to me. Left one small nonblocking comment.

[nishasy]

nit (probably out of scope here): I'd prefer if this (and other instances below) were named something clearer, like newValue or newCheckedValue or newCheckedState or something instead of e

[jeremywiebe]

I agree. I've updated it to match what the WB checkbox uses: newCheckedState

[nishasy]

Also! Don't forget to update the tests for the labels that no longer have the ":" in them

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (5617ef1) and published it to npm. You
can install it using the tag PR1477.

Example:

yarn add @khanacademy/perseus@PR1477

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1477

[codecov]

Codecov Report

Attention: Patch coverage is 88.88889% with 6 lines in your changes missing coverage. Please review.

Project coverage is 70.47%. Comparing base (a8aaac3) to head (5617ef1).
Report is 2 commits behind head on main.

Files	Patch %	Lines
packages/perseus-editor/src/item-extras-editor.tsx	88.88%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1477      +/-   ##
==========================================
+ Coverage   70.05%   70.47%   +0.42%     
==========================================
  Files         509      512       +3     
  Lines      105435   105532      +97     
  Branches     5351    10807    +5456     
==========================================
+ Hits        73858    74378     +520     
+ Misses      31460    31154     -306     
+ Partials      117        0     -117     

Files	Coverage Δ
packages/perseus-editor/src/item-extras-editor.tsx	85.77% <88.88%> (+0.33%)	⬆️

... and 138 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a8aaac3...5617ef1. Read the comment docs.

[nishasy]

Nit - optional: I think it's supposed to be better practice to use getByRole if possible? So I'd probably do screen.getByRole("checkbox", {name: "Include key/legend with periodic table"})