Add new Banner component to Wonder Blocks

[nishasy]

Summary:

This is the base implementation of the Banner component. It is mostly taken from the existing implementation of Banner in mobile Wonder Blocks.

Updates to come in future PRs:

• Updating the icon to be an Icon with IconAsset instead of an img
• Changing the buttons to be small (not adding this in the current PR so that I can keep my branches consistent)
• Comprehensive accessibility features and testing
  • This includes role and aria-live

Updated Storybook publish: https://5e1bf4b385e3fb0020b7073c-meqidgklni.chromatic.com/?path=/story/banner--default

Old Storybook publishes: https://5e1bf4b385e3fb0020b7073c-aclcwsrtdq.chromatic.com/ https://5e1bf4b385e3fb0020b7073c-eytllurxkb.chromatic.com/ https://5e1bf4b385e3fb0020b7073c-gnzcmyyvts.chromatic.com/

Issue: https://khanacademy.atlassian.net/browse/WB-1384

Test plan:

Storybook

• Open Banner in storybook.
• Check that all the controls in the control panel work.
• Check that all the descriptions make sense.
• Check that the banner looks correct using the Storybook ruler and outline tools.

Unit tests

• Run yarn jest packages/wonder-blocks-banner/src/components/__tests__/banner.test.js

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d99c1aadcc825c52fc3408f722c0de63286816e9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@khanacademy/wonder-blocks-banner	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

Size Change: +1.28 kB (+2%)

Total Size: 76 kB

Filename	Size	Change
packages/wonder-blocks-banner/dist/es/index.js	1.33 kB	+1.28 kB (+2327%)	🆘

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.52 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	894 B
packages/wonder-blocks-button/dist/es/index.js	2.82 kB
packages/wonder-blocks-cell/dist/es/index.js	1.92 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.07 kB
packages/wonder-blocks-color/dist/es/index.js	1.01 kB
packages/wonder-blocks-core/dist/es/index.js	3.29 kB
packages/wonder-blocks-data/dist/es/index.js	6.17 kB
packages/wonder-blocks-dropdown/dist/es/index.js	11.5 kB
packages/wonder-blocks-form/dist/es/index.js	4.88 kB
packages/wonder-blocks-grid/dist/es/index.js	1.37 kB
packages/wonder-blocks-i18n/dist/es/index.js	4.46 kB
packages/wonder-blocks-icon-button/dist/es/index.js	1.75 kB
packages/wonder-blocks-icon/dist/es/index.js	2.63 kB
packages/wonder-blocks-layout/dist/es/index.js	1.74 kB
packages/wonder-blocks-link/dist/es/index.js	1.62 kB
packages/wonder-blocks-modal/dist/es/index.js	4.82 kB
packages/wonder-blocks-popover/dist/es/index.js	4.14 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.24 kB
packages/wonder-blocks-spacing/dist/es/index.js	158 B
packages/wonder-blocks-testing/dist/es/index.js	3.64 kB
packages/wonder-blocks-timing/dist/es/index.js	1.61 kB
packages/wonder-blocks-toolbar/dist/es/index.js	855 B
packages/wonder-blocks-tooltip/dist/es/index.js	4.76 kB
packages/wonder-blocks-typography/dist/es/index.js	1.24 kB

_{compressed-size-action}

[codecov[bot]]

Codecov Report

Merging #1615 (d99c1aa) into feature/banner (6a9cc81) will decrease coverage by 0.49%. The diff coverage is 57.14%.

Additional details and impacted files

@@                Coverage Diff                 @@
##           feature/banner    #1615      +/-   ##
==================================================
- Coverage           97.68%   97.19%   -0.50%     
==================================================
  Files                 210      212       +2     
  Lines                4541     4597      +56     
  Branches             1349     1371      +22     
==================================================
+ Hits                 4436     4468      +32     
- Misses                105      129      +24     

Impacted Files	Coverage Δ
...-banner/src/components/__docs__/banner.argtypes.js	0.00% <0.00%> (ø)
...ages/wonder-blocks-banner/src/components/banner.js	66.66% <66.66%> (ø)

---

Continue to review full report at Codecov.

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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/strong-fireants-clean.md, flow-typed/aphrodite.flow.js, static/critical.svg, static/info.svg, static/success.svg, static/warning.svg, packages/wonder-blocks-banner/src/index.js, packages/wonder-blocks-banner/src/components/banner.js, packages/wonder-blocks-banner/src/components/__docs__/banner.argtypes.js, packages/wonder-blocks-banner/src/components/__docs__/banner.stories.js, packages/wonder-blocks-banner/src/components/__tests__/banner.test.js

---

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

[lillialexis]

Is this PR ready to be looked at again?

[lillialexis]

Is this PR ready to be looked at again?

[nishasy]

@lillialexis yes please!

[nishasy]

@lillialexis sorry, I forgot to update the storybook publish in the description after pushing the fix for that yesterday! Does it still look wrong to you?