feat(core): update Notifications to latest design

[InnaAtanasova]

Related Issue(s)

closes none

Description

Updated to incorporate the latest fundamental-styles for Notifications.

NOTE: Keyboard interaction for the Notification List is currently missing and will be implemented in a future update.
NOTE: End-to-end tests for Notifications have been removed.

BREAKING CHANGES:

• Significant markup updates for both Notification and Notification Group components.
• Removed the fd-notification-indicator directive. The Icon component with color is now used for priority/status indicators.

Before:

<fd-notification-header>
    <div fd-notification-indicator type="success"></div>
    <h2 fd-notification-title [unread]="true">...</h2>
</fd-notification-header>

After:

<fd-notification-header>
    <fd-icon glyph="error" color="negative"></fd-icon>
    <h4 fd-notification-title [unread]="true">...</h4>
</fd-notification-header>

• Notification Message Strip is now placed inside a container div with the fd-notification-message-strip-container directive.

Before:

<fd-notification>
    <fd-message-strip type="warning" marginBottom="1rem"></fd-message-strip>
    ........
</fd-notification>

After:

<fd-notification>
    <div fd-notification-message-strip-container>
        <fd-message-strip type="error"> A dismissible error message strip. </fd-message-strip>
    </div>
   .....
</fd-notification>

• The mobile property has been removed from fd-notification, previously used for displaying Notifications in Popover dialogs.
• Introduced the new fd-notification-popover directive, which wraps the Notification Group content inside the Popover body.
• Notification Groups are no longer displayed in Tabs.
• The Notification Popover now includes a Toolbar for user-defined actions (e.g., clear all, settings, sort).
• Message Strip can now be placed inside the Notification Popover, wrapped in a div with the fd-notification-message-strip directive applied.
• Added the new fd-notification-list directive, applied to a ul element, for holding Notification Groups.
• Removed the expanded property from fd-notification-group-header.
• Introduced the new fd-notification-group-header-title directive for the Notification Group title.
• Removed the fd-notification-limit component. Use the new fd-notification-group-growing-item component instead.
• Removed the fd-notification-limit-title directive. Use the fd-notification-group-growing-item-title directive.
• Removed the fd-notification-limit-description directive.

Before:

<fd-notification-group>
    <fdp-icon-tab-bar>
        <fdp-icon-tab-bar-tab>
            <fd-notification-group-list>
                <fd-notification-group-header [(expanded)]="...">
                    <fd-notification-header>
                        <h2 fd-notification-title [unread]="true">...</h2>
                    </fd-notification-header>
                    <fd-notification-actions>...</fd-notification-actions>
                </fd-notification-group-header>
                <fd-notification-body>...</fd-notification-body>
                <fd-notification-limit>
                    <h1 fd-notification-limit-title>...</h1>
                    <p fd-notification-limit-description>...</p>
                </fd-notification-limit>
            </fd-notification-group-list>
        </fdp-icon-tab-bar-tab>
        ....
    </fdp-icon-tab-bar>
</fd-notification-group>

After:

<fd-popover-body>
    <div fd-notification-popover>
        <fd-toolbar>...</fd-toolbar>
        <div fd-notification-message-strip>
            <fd-message-strip type="warning">...</fd-message-strip>
        </div>
        <ul fd-notification-list>
            <fd-notification-group [expanded]="true">
                <fd-notification-group-header>
                    <span fd-notification-group-header-title>...</span>
                </fd-notification-group-header>
                <fd-notification-group-list>
                    <fd-notification>...</fd-notification>
                </fd-notification-group-list>
                <fd-notification-group-growing-item>
                    <span fd-notification-group-growing-item-title>More</span>
                </fd-notification-group-growing-item>
            </fd-notification-group>
            
            <fd-notification-group>...</fd-notification-group>
        </ul>
    </div>
</fd-popover-body>

[netlify]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	41e053b
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/66fd4ab5f1e57800088ebd30
😎 Deploy Preview	https://deploy-preview-12476--fundamental-ngx.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.

[github-actions]

Visit the preview URL for this PR (updated for commit 41e053b):

https://fundamental-ngx-gh--pr12476-feat-notifications-l-lz5yn6lx.web.app

_{(expires Sat, 05 Oct 2024 13:34:16 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 41b993ee8e451bd7c6770b342ce142dc886eacff}

[mikerodonnell89]

Looks good, couple of comments on things that need to be prepared for translations. Looks like most of the directives/components leave it to the application developer to handle all the logic so there is not much to test here. But it is a lot of breaking changes so I hope we don't have too many devs using the previous implementation

[mikerodonnell89]

This should be prepared for translation

[mikerodonnell89]

another one that needs translation

[mikerodonnell89]

another in need of translation

[dpavlenishvili]

everything looks good, just need localization changes as Mike mentioned and thats it. Just in case, i approve it.