New header redesigned

apps/website/pages/_app.tsx

@@ -14,6 +14,7 @@ import Link from "next/link";
 import { GroupItem, Item, Section } from "../../../packages/lib/src/base-menu/types";
 import { isGroupItem } from "../../../packages/lib/src/base-menu/utils";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
+import { dxcLogo } from "@/common/images/dxc_logo";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (_page: ReactElement) => ReactNode;
@@ -99,6 +100,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
       <DxcApplicationLayout
+        header={
+          <DxcApplicationLayout.Header
+            branding={{ logo: { src: dxcLogo, alt: "DXC Technology" }, appTitle: "Halstack react" }}
+          />
+        }
         sidenav={
           <DxcApplicationLayout.Sidenav
             navItems={filteredSections}

apps/website/screens/common/images/dxc_logo.tsx

@@ -0,0 +1,19 @@
+export const dxcLogo = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
+    <title>DXC Logo</title>
+    <g transform="translate(0)">
+      <g>
+        <path
+          d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
+          transform="translate(-21.028 65.555)"
+          fill="#010101"
+        />
+        <path
+          d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
+          transform="translate(-21.049 88.739)"
+          fill="#603494"
+        />
+      </g>
+    </g>
+  </svg>
+);

apps/website/screens/components/header/code/HeaderCodePage.tsx

@@ -1,14 +1,34 @@
-import { DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import Link from "next/link";
 import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
 
-const logoTypeString = `{
-  href?: string;
-  src: string;
-  title?: string;
+const brandingTypeString = `{
+  logo : {
+    src: string | SVG;
+    alt: string;
+    href?: string;
+    onClick?: () => void;
+  };
+  appTitle?: string;
+}`;
+
+const navItemsTypeString = `(GroupItem | Item)[]`;
+
+const itemTypeString = `{
+  badge?: ReactElement;
+  icon?: string | SVG;
+  label: string;
+  onSelect?: () => void;
+  selected?: boolean;
+}`;
+
+const groupItemTypeString = `{
+  badge?: ReactElement;
+  icon?: string | SVG;
+  label: string;
+  items: (Item)[];
 }`;
 
 const sections = [
@@ -25,124 +45,90 @@ const sections = [
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>content</td>
-            <td>
-              <TableCode>React.ReactNode</TableCode>
-            </td>
-            <td>
-              Content shown in the header. Take into account that the component applies styles for the first child in
-              the content, so we recommend the use of <Code>React.Fragment</Code> to be applied correctly. Otherwise,
-              the styles can be modified.
-            </td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
-                logo
+                <StatusBadge status="required" />
+                branding
               </DxcFlex>
             </td>
             <td>
-              <td>
-                <TableCode>{"Logo"}</TableCode>
-                <p>
-                  being <Code>Logo</Code> an object with the following properties:
-                </p>
-                <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
-              </td>
+              <ExtendedTableCode>{brandingTypeString}</ExtendedTableCode>
             </td>
-            <td>Logo to be displayed inside the header.</td>
+            <td>Object used to configure the header branding, including logo and application title.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
+            <td>navItems</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
+              <TableCode>{navItemsTypeString}</TableCode>
             </td>
-            <td>Size of the bottom margin to be applied to the header.</td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>onClick</td>
             <td>
-              <TableCode>{"() => void"}</TableCode>
+              Array of navigation items to be displayed in the header navigation menu. Each item can be a single/simple
+              item or a group item.
+              <p>
+                Being <Code>Item</Code> an object with the following properties:
+              </p>
+              <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
+              <p>
+                and <Code>GroupItem</Code> an object with the following properties:
+              </p>
+              <ExtendedTableCode>{groupItemTypeString}</ExtendedTableCode>
+              Group items will ignore any nested group items to maintain a maximum of two levels in the navigation menu.
+              When responsive, navigation items will be displayed in a vertical menu below the header in a vertical
+              layout.
             </td>
-            <td>This function will be called when the user clicks the header logo.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>responsiveContent</td>
+            <td>responsiveBottomContent</td>
             <td>
-              <TableCode>{"(closeHandler: () => void) => React.ReactNode"}</TableCode>
+              <TableCode>React.ReactNode</TableCode>
             </td>
             <td>
-              Content shown in responsive version. It receives the close menu handler that can be used to add that
-              functionality when a element is clicked.
+              The content rendered in the bottom part of the header menu under the navigation items when in responsive
+              mode.
             </td>
             <td>-</td>
           </tr>
           <tr>
-            <td>tabIndex</td>
-            <td>
-              <TableCode>number</TableCode>
-            </td>
-            <td>Value of the tabindex for all interactive elements, except those inside the custom area.</td>
-            <td>
-              <TableCode>0</TableCode>
-            </td>
-          </tr>
-          <tr>
-            <td>underlined</td>
+            <td>sideContent</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>{"React.ReactNode | (isResponsive: boolean) => React.ReactNode"}</TableCode>
             </td>
-            <td>Whether a contrast line should appear at the bottom of the header.</td>
             <td>
-              <TableCode>false</TableCode>
+              Content to be displayed on the right side of the header. It can be a ReactNode or a function that receives
+              a boolean indicating if the header is in responsive mode and returns a ReactNode.
             </td>
           </tr>
         </tbody>
       </DxcTable>
     ),
   },
-  {
-    title: "DxcHeader.Dropdown",
-    content: (
-      <DxcParagraph>
-        Everything between the tags will be displayed as a dropdown. If you want to show a{" "}
-        <Link href="/components/dropdown" passHref legacyBehavior>
-          <DxcLink>DxcDropdown</DxcLink>
-        </Link>
-        , as a shortcut, you can also use it as a direct child of the DxcHeader without the tags, but we recommend to
-        use it with the tags since some styles will be applied for a better fit in the header.
-      </DxcParagraph>
-    ),
-  },
-  {
-    title: "Examples",
-    subSections: [
-      {
-        title: "Header in application layout",
-        content: (
-          <iframe
-            src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
-            style={{
-              width: "100%",
-              minHeight: "500px",
-              border: "0",
-              borderRadius: "4px",
-              overflow: "hidden",
-            }}
-            title="Footer and header"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-          />
-        ),
-      },
-    ],
-  },
+  // UPDATE to new sandbox link when available
+  // {
+  //   title: "Examples",
+  //   subSections: [
+  //     {
+  //       title: "Header in application layout",
+  //       content: (
+  //         <iframe
+  //           src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
+  //           style={{
+  //             width: "100%",
+  //             minHeight: "500px",
+  //             border: "0",
+  //             borderRadius: "4px",
+  //             overflow: "hidden",
+  //           }}
+  //           title="Footer and header"
+  //           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  //           allowFullScreen
+  //         />
+  //       ),
+  //     },
+  //   ],
+  // },
 ];
 
 const HeaderCodePage = () => {

apps/website/screens/components/header/overview/HeaderOverviewPage.tsx

@@ -1,27 +1,23 @@
 import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import anatomy from "./images/header_anatomy.png";
-import variants from "./images/header_variants.png";
 
 const sections = [
   {
     title: "Introduction",
     content: (
       <DxcParagraph>
         The Header serves as the primary navigation and identity element for an application. It includes branding, quick
-        access to key sections via navigation links, and a user account menu. Its consistent presence reinforces brand
-        recognition and improves usability by offering easy navigation and access to user-related actions.
+        access to key sections via navigation links, and a customizable side content. Its consistent presence reinforces
+        brand recognition and improves usability by offering easy navigation and access to quick actions.
       </DxcParagraph>
     ),
   },
   {
     title: "Anatomy",
     content: (
       <>
-        <Image src={anatomy} alt="Header anatomy" />
+        {/* <Image src={anatomy} alt="Header anatomy" /> */}
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>
             <strong>Container:</strong> a layout structure that wraps all Header elements, ensuring consistent
@@ -40,41 +36,13 @@ const sections = [
             <strong>Navigation Links</strong> <em>(Optional)</em>: key links to main sections of the application.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Header Dropdown</strong> <em>(Optional)</em>: a dropdown menu for user-specific actions such as
+            <strong>Side Content</strong> <em>(Optional)</em>: a customizable area for user-specific actions such as
             profile, settings, or logout, triggered by click or keyboard focus.
           </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Divider</strong> <em>(Optional)</em>: horizontal line that visually separates the Header from the
-            page content below, enhancing layout clarity.
-          </DxcBulletedList.Item>
         </DxcBulletedList>
       </>
     ),
   },
-  {
-    title: "Variants",
-    content: (
-      <>
-        <DxcParagraph>
-          To maintain consistency with the way variants are structured across components, the Header offers two primary
-          styles: <strong>default</strong> and <strong>underlined</strong>.
-        </DxcParagraph>
-        <DxcBulletedList>
-          <DxcBulletedList.Item>
-            The <strong>default</strong> variant features a clean header without a visual separation from the page
-            content, ideal for minimalistic or immersive layouts.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            The <strong>underlined</strong> variant includes a subtle bottom divider, creating a clear visual boundary
-            between the header and the rest of the page content, enhancing structure and clarity.
-          </DxcBulletedList.Item>
-        </DxcBulletedList>
-        <Figure caption="Header variants">
-          <Image src={variants} alt="Header variants" />
-        </Figure>
-      </>
-    ),
-  },
   {
     title: "Responsive version",
     content: (
@@ -87,7 +55,7 @@ const sections = [
         </DxcParagraph>
         <DxcParagraph>
           "On smaller screens, the header content is replaced by a button. Triggering this button opens a menu that
-          displays custom content."
+          displays navigation links and a bottom section."
         </DxcParagraph>
       </>
     ),
@@ -100,25 +68,21 @@ const sections = [
           <strong>Keep the Header minimal and functional:</strong> include only essential elements.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
-          <strong>Select the correct variant according to visual needs:</strong> Use the <strong>default</strong>{" "}
-          variant for simple pages and underlined variant to visually separate the Header from the content when
-          necessary.
-        </DxcBulletedList.Item>
-        <DxcBulletedList.Item>
-          <strong>Use dropdowns correctly for complex navigation:</strong> Only use Header dropdowns when necessary to
-          organize multiple links logically without overwhelming the top navigation.
+          <strong>Use navigation links correctly:</strong> Only use navigation groups when necessary to organize
+          multiple links logically without overwhelming the top navigation.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Avoid overcrowding the Header:</strong> Limit the number of top-level navigation links. Group
-          secondary links inside dropdowns if needed to maintain a clean and user-friendly interface.
+          secondary links inside navigation groups if needed to maintain a clean and user-friendly interface.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Display the application name clearly and concisely:</strong> The application name should be readable,
           short, and not overpower the brand logo. It reinforces brand identity and provides immediate context to users.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Design the Header to respond gracefully to smaller screens:</strong> When adapting the Header to
-          mobile or tablet layouts, restructure the content to preserve both visual clarity and functional hierarchy.
+          mobile or tablet layouts, restructure the side content to preserve both visual clarity and functional
+          hierarchy.
         </DxcBulletedList.Item>
       </DxcBulletedList>
     ),