Add Notification Inline

[amelako]

Addresses #792.

Purpose

Introduces the new NotificationInline component.
The Notification Inline component non-disruptively provides quick and contextual inline notification and it is integrated within the content section.

It comes in 4 variants, "info", "confirm", "notify" and "alert".
To communicate a message always provide a body copy, and if needed an optional headline can be included above the body copy and an action button.
Inline notifications are part of the content and should be placed near their related part of the content.
Inline notifications can be dismissed by clicking on a close button in the top-right corner.

Approach and changes

Refer to the Storybook for further implementation and usage guidelines, and to the threads below for more details and discussion on the implementation.

Definition of done

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

[changeset-bot]

🦋 Changeset detected

Latest commit: f771c33

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	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

[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!

[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/bhVhkXNAtvVck9yNAqFhaDtY613A
✅ Preview: https://oss-circuit-ui-git-notification-inline-sumup.vercel.app

[codecov]

Codecov Report

Merging #1332 (f771c33) into main (bec9460) will decrease coverage by 0.02%.
The diff coverage is 92.15%.

@@            Coverage Diff             @@
##             main    #1332      +/-   ##
==========================================
- Coverage   92.23%   92.20%   -0.03%     
==========================================
  Files         190      191       +1     
  Lines        3787     3838      +51     
  Branches     1209     1224      +15     
==========================================
+ Hits         3493     3539      +46     
- Misses        275      279       +4     
- Partials       19       20       +1     

Impacted Files	Coverage Δ
...components/NotificationToast/NotificationToast.tsx	88.88% <ø> (ø)
...mponents/NotificationInline/NotificationInline.tsx	92.15% <92.15%> (ø)
...mponents/NotificationBanner/NotificationBanner.tsx	81.96% <0.00%> (-1.64%)	⬇️

[robinmetral]

I like the direction this is going!

Added a few general comments on the component and the docs for now, I'll also re-review later.

For docs I'm kind of missing something that explains what the difference between the toast and this component is, in terms of behavior, a11y etc. They're pretty similar and I expect that some developers will find it confusing. Could we add this somewhere (in the intro maybe)?

[robinmetral]

Can we share some of these props between the toast and this component? There should be few differences

[robinmetral]

Oops I submitted the previous review by mistake and didn't have time to finish writing my thoughts down

[robinmetral]

Just a few extra thoughts about docs, thanks for addressing my previous review's more general comments 🙌

[robinmetral]

Nice! Let's release this and I might add a bit more to the docs separately 👀 The new component looks great!