diff --git a/docs/Patterns.mdx b/docs/Patterns.mdx
index 91e32b1accb..d26552e48e7 100644
--- a/docs/Patterns.mdx
+++ b/docs/Patterns.mdx
@@ -6,6 +6,23 @@ import UXCIntegration from "./UXCIntegration.js"
# UXC Integration
+This code sample demonstrates full adherence to the UXC Product Consistency standards currently available within SAP. It serves as a comprehensive reference implementation, showcasing the integration of all mandatory and some optional UI elements and interaction patterns required for a consistent user experience across SAP products.
+
+**Key features illustrated in this example include:**
+
+- **Side Navigation**: An organized layout presenting a clear hierarchical structure.
+- **Shell Bar**: Incorporates all required elements, such as:
+ - Side Navigation access
+ - Branding element
+ - ShellBar action help
+ - User profile with access to the user menu
+ - Optional components like notifications or settings
+- **ShellBar Search**: Provides search functionality fully aligned with SAP's usability guidelines.
+- **User Settings**: Offers personalization options for users to tailor their experience, such as theming and language preferences.
+- **Notification Experience**: Delivers real-time alerts and updates, complete with badge indicators and intuitive interaction patterns.
+
+This example is ideal for developers and designers looking to align their applications with SAP's UXC standards, ensuring consistency, usability, and compliance across the SAP ecosystem.
+
diff --git a/patterns/navigation-layout/src/NLShellBar.tsx b/patterns/navigation-layout/src/NLShellBar.tsx
index 37a33c8522a..5cd1f52abb6 100644
--- a/patterns/navigation-layout/src/NLShellBar.tsx
+++ b/patterns/navigation-layout/src/NLShellBar.tsx
@@ -17,6 +17,7 @@ import {
SearchItem,
SearchScope,
ShellBar,
+ ShellBarBranding,
ShellBarItem,
ShellBarSearch,
ShellBarSpacer,
@@ -80,7 +81,6 @@ export function NLShellBar(props: NLShellBarProps) {
}
- logo={
}
+ branding={}>Vega CRM}
content={
<>
diff --git a/patterns/navigation-layout/src/NotificationsPopover.tsx b/patterns/navigation-layout/src/NotificationsPopover.tsx
index 1b5f8272eb8..a2ba1400f34 100644
--- a/patterns/navigation-layout/src/NotificationsPopover.tsx
+++ b/patterns/navigation-layout/src/NotificationsPopover.tsx
@@ -18,7 +18,6 @@ import {
IllustratedMessage,
Menu,
MenuItem,
- MessageStrip,
NotificationList,
NotificationListGroupItem,
NotificationListItem,
@@ -51,7 +50,6 @@ export const NotificationsPopover = forwardRef(initialNotificationsToday);
const [notificationsYesterday, setYesterdayNotifications] = useState(initialNotificationsYesterday);
const [groupLoading, setGroupLoading] = useState(false);
- const [showMessageStrip, setShowMessageStrip] = useState(false);
const [clearAllOpen, setClearAllOpen] = useState(false);
const [sortMenuOpen, setSortMenuOpen] = useState(false);
@@ -129,14 +127,6 @@ export const NotificationsPopover = forwardRefNotifications}
endContent={
<>
-
}
/>
- {showMessageStrip && (
- {
- setShowMessageStrip(false);
- }}
- >
- Something went wrong.
-
- )}
}
>
diff --git a/patterns/navigation-layout/src/index.css b/patterns/navigation-layout/src/index.css
index 32248070a2c..06ca73b17c9 100644
--- a/patterns/navigation-layout/src/index.css
+++ b/patterns/navigation-layout/src/index.css
@@ -50,11 +50,6 @@ body {
box-shadow: none;
}
-.notificationsMessageStrip {
- margin: 0.5rem;
- width: auto;
-}
-
/* End notifications */
/* User Settings Dialog */