docs(UXC Integration): update pattern & add description (#7652)

Author: Lukas742

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.
+
 <UXCIntegration/>
 
 <Footer/>

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) {
       <ShellBar
         {...rest}
         id="shellbar"
-        primaryTitle="VEGA CRM"
         notificationsCount="10"
         showNotifications
         showProductSwitch
@@ -95,7 +95,7 @@ export function NLShellBar(props: NLShellBarProps) {
             onClick={handleMenuBtnClick}
           />
         }
-        logo={<img src={SapLogoSvg} alt="SAP Logo" />}
+        branding={<ShellBarBranding logo={<img src={SapLogoSvg} alt="SAP Logo" />}>Vega CRM</ShellBarBranding>}
         content={
           <>
             <Tag design="Set2" colorScheme="7" data-hide-order="2">

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<ResponsivePopoverDomRef, Notifica
   const [notificationsToday, setTodayNotifications] = useState<Notification[]>(initialNotificationsToday);
   const [notificationsYesterday, setYesterdayNotifications] = useState<Notification[]>(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 = forwardRef<ResponsivePopoverDomRef, Notifica
               startContent={<Title level="H5">Notifications</Title>}
               endContent={
                 <>
-                  <Button
-                    onClick={() => {
-                      setShowMessageStrip(true);
-                    }}
-                    design="Emphasized"
-                  >
-                    Show M. Strip
-                  </Button>
                   <Button
                     design="Transparent"
                     accessibilityAttributes={{ hasPopup: 'dialog' }}
@@ -159,17 +149,6 @@ export const NotificationsPopover = forwardRef<ResponsivePopoverDomRef, Notifica
                 </>
               }
             />
-            {showMessageStrip && (
-              <MessageStrip
-                className="notificationsMessageStrip"
-                design="Negative"
-                onClose={() => {
-                  setShowMessageStrip(false);
-                }}
-              >
-                Something went wrong.
-              </MessageStrip>
-            )}
           </div>
         }
       >

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