fix(styles): refactor Notifications component [ci visual

[InnaAtanasova]

Related Issue

Closes #5598

Description

The Notifications component has been updated to latest design; includes Breaking changes to accommodate the design changes and the a11y requirements. Removed the BTP examples and code, refactored and cleaned-up the code.

BREAKING CHANGES:

1. the status indicator is now using a normal icon with status color

Before:

<div class="fd-notification__header">
    <div class="fd-notification__indicator fd-notification__indicator--success"></div>
    <h2 class="fd-notification__title fd-notification__title--unread"></h2>
</div>

After:

<div class="fd-notification__header">
    <span class="sap-icon sap-icon--error sap-icon--color-negative"></span>
    <h4 class="fd-notification__title fd-notification__title--unread"></h4>
</div>

2. Message Strip can be added to a notification group, not to individual items
3. fd-notification--mobile modifier is removed. The responsiveness is handled automatically with media queries.
4. fd-notification--in-dialog modifier is removed.
5. fd-notification--padding modifier is removed.
6. fd-notification--group modifier is removed. Grouping is handled with different markup.
7. fd-notification--btp modifier is removed, BTP component is marked as legacy in the design.
8. fdb-notification__group-header-title is removed, BTP component is marked as legacy in the design.
9. fd-notification__unread-indicator is removed, BTP component is marked as legacy in the design.
10. fd-notification__limit is removed, BTP component is marked as legacy in the design.
11. fd-notification__group-header--collapsed modifier is removed.
12. New elements for Notification Group

Before:

<div class="fd-notification fd-notification--group">
    <ul class="fd-tabs fd-tabs--l" role="tablist">...</ul>
    <div class="fd-tabs__panel" aria-expanded="true" id="notifV550" role="tabpanel">
        <div class="fd-notification__group-header">....Group Header</div>
        <div class="fd-notification__body">....Notification</div>
        <div class="fd-notification__body">....Notification</div>
        <div class="fd-notification__body">....Notification</div>
        <div class="fd-notification__limit">
            <h1 class="fd-notification__limit--title">...</h1>
            <p class="fd-notification__limit--description">...</p>
        </div>
    </div>
</div>

After:

<div class="fd-notification-popover">
    <div class="fd-toolbar fd-toolbar--title fd-toolbar--clear"></div>
    <div class="fd-notification-message-strip"></div>
    <ul class="fd-notification-list">
        <li class="fd-notification-group">
            <div class="fd-notification-group__wrapper">
                <div class="fd-notification-group__header">
                    <span class="fd-notification-group__header-arrow"></span>
                    <span class="fd-notification-group__header-title">Group Header title...</span>
                 </div>
                 <ul class="fd-notification-group__list">
                     <li class="fd-notification">....Notification</li>
                     <li class="fd-notification">....Notification</li>
                     <li class="fd-notification">....Notification</li>
                </ul>
            </div>
        </li>
        <li class="fd-notification-group">....Notification Group</li>
        <li class="fd-notification-group">....Notification Group</li>
    </ul>
</div>

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	ab36573
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/66def68874a00d0008a163eb
😎 Deploy Preview	https://deploy-preview-5616--fundamental-styles.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.