Add Popover menu component

[amelako]

Addresses #723.

Purpose

Introduces the new Popover component.
Popover menus are a common pattern to display a list of subsequent action options, when interacting with an actionable component.

Approach and changes

• The Popover Item component was added as an action item represented by an appropriate HTML element (button or a) with an optional leading icon and label.
• The new Popover component takes isOpen and onClose as props to control the open Popover, actions to distinguish PopoverItem and Divider.
• The Popover is powered by React Popper which means you can easily change the Popover placement by simply passing the placement prop.
• The triggers or the reference elements of the Popover can be primary, secondary, tertiary buttons, an overflow icons, or components with embedded buttons such as image upload component.
• The states of the popover are added and can be Default, Hover, Active, Focus.
• The Destructive variant is added that changes the color of label and icon from blue to red to signal to the user that the action is irreversible or otherwise dangerous.

Note: some things have been left out of this PR's scope and will be addressed in later versions:

• the focus of the popover item (focus needs to be moved to the menu once it has been opened)
• accessibility keyboard implementation
• add disabled state

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[changeset-bot]

🦋 Changeset detected

Latest commit: fcad3d8

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

This PR includes changesets to release 1 package

Name	Type
@sumup/circuit-ui	Major

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

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/BLrof6J89BDx9L52aGgBTwwZ9EFh
✅ Preview: https://oss-circuit-ui-git-popover-menu-sumup.vercel.app

[sumup-clark]

Hey @amelako,
we are super excited that you are contributing! 🎉There's one more thing you need to do. Please accept our Contributor License Agreement. It helps you and us to collaborate on clear terms and focus on what we love most: code.

Thanks!

[robinmetral]

Nice! 🙌

Just a high-level initial review, let me know if you have questions or need support 🙂 I'll also take a look at the docs and stories after they're ready for review

[robinmetral]

(also a small note: this PR should target next)

[codecov]

Codecov Report

Merging #944 (fcad3d8) into next (9548803) will decrease coverage by 0.04%.
The diff coverage is 93.54%.

@@            Coverage Diff             @@
##             next     #944      +/-   ##
==========================================
- Coverage   91.67%   91.62%   -0.05%     
==========================================
  Files         165      164       -1     
  Lines        3063     3069       +6     
  Branches      754      752       -2     
==========================================
+ Hits         2808     2812       +4     
  Misses        227      227              
- Partials       28       30       +2     

Impacted Files	Coverage Δ
packages/circuit-ui/styles/style-mixins.ts	97.61% <85.71%> (-1.10%)	⬇️
packages/circuit-ui/components/Popover/Popover.tsx	94.54% <94.54%> (ø)
packages/circuit-ui/components/Portal/Portal.js	0.00% <0.00%> (-5.72%)	⬇️

[robinmetral]

🐩