Logo prop moved to the application layout

apps/website/pages/_app.tsx

@@ -88,9 +88,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
   const navItems: Section[] = useMemo(() => {
     return LinksSections.map((section) => {
       const baseItems = normalizeNavTabs(section.links);
-
       const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems;
-
       return {
         title: section.label,
         items,
@@ -104,11 +102,12 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
       <DxcApplicationLayout
-        header={<DxcApplicationLayout.Header logo={{ src: dxcLogo, alt: "DXC Technology" }} />}
+        logo={{ src: dxcLogo, alt: "DXC Technology" }}
+        header={<DxcApplicationLayout.Header />}
         sidenav={
           <DxcApplicationLayout.Sidenav
             navItems={navItems}
-            branding={isExpanded && <SidenavLogo />}
+            appTitle={isExpanded && <SidenavLogo />}
             topContent={
               isExpanded && (
                 <DxcTextInput

apps/website/screens/common/componentsList.json

@@ -3,8 +3,16 @@
   { "label": "Alert", "path": "/components/alert", "status": "stable" },
   {
     "label": "Application layout",
-    "path": "/components/application-layout",
-    "status": "stable"
+    "links": [
+      {
+        "label": "Application layout",
+        "path": "/components/application-layout",
+        "status": "stable"
+      },
+      { "label": "Footer", "path": "/components/footer", "status": "stable" },
+      { "label": "Header", "path": "/components/header", "status": "stable" },
+      { "label": "Sidenav", "path": "/components/sidenav", "status": "stable" }
+    ]
   },
   {
     "label": "Avatar",
@@ -64,9 +72,7 @@
     "status": "stable"
   },
   { "label": "Flex", "path": "/components/flex", "status": "stable" },
-  { "label": "Footer", "path": "/components/footer", "status": "stable" },
   { "label": "Grid", "path": "/components/grid", "status": "stable" },
-  { "label": "Header", "path": "/components/header", "status": "stable" },
   { "label": "Heading", "path": "/components/heading", "status": "stable" },
   { "label": "Image", "path": "/components/image", "status": "stable" },
   { "label": "Inset", "path": "/components/inset", "status": "stable" },
@@ -101,7 +107,6 @@
     "status": "stable"
   },
   { "label": "Select", "path": "/components/select", "status": "stable" },
-  { "label": "Sidenav", "path": "/components/sidenav", "status": "stable" },
   { "label": "Slider", "path": "/components/slider", "status": "stable" },
   { "label": "Spinner", "path": "/components/spinner", "status": "stable" },
   {

apps/website/screens/common/pagesList.tsx

@@ -62,7 +62,7 @@ const v16Links: LinkDetails[] = [
 
 const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links }];
 
-const componentsLinks = componentsList as LinkDetails[];
+const componentsLinks = componentsList as (LinkDetails | LinksSectionDetails)[];
 
 export const LinksSections: LinksSectionDetails[] = [
   { label: "Overview", links: overviewLinks },

apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx

@@ -2,9 +2,16 @@ import { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halsta
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import Link from "next/link";
-import Code, { TableCode } from "@/common/Code";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
 
+const logoTypeString = `{
+  src: string | SVG;
+  alt: string;
+  href?: string;
+  onClick?: () => void;
+}`;
+
 const ApplicationLayoutPropsTable = () => (
   <DxcTable>
     <thead>
@@ -61,6 +68,22 @@ const ApplicationLayoutPropsTable = () => (
         </td>
         <td>-</td>
       </tr>
+      <tr>
+        <td>
+          <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+            <StatusBadge status="new" />
+            logo
+          </DxcFlex>
+        </td>
+        <td>
+          <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
+        </td>
+        <td>
+          Object used to configure the header logo. The logo will be placed in the header, but if no global app header
+          exists, it will be shown in the sidenav instead.
+        </td>
+        <td>-</td>
+      </tr>
       <tr>
         <td>sidenav</td>
         <td>

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

@@ -2,14 +2,6 @@ import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
-import StatusBadge from "@/common/StatusBadge";
-
-const logoTypeString = `{
-  src: string | SVG;
-  alt: string;
-  href?: string;
-  onClick?: () => void;
-}`;
 
 const navItemsTypeString = `(GroupItem | Item)[]`;
 
@@ -50,19 +42,6 @@ const sections = [
             <td>Object used to configure the header application title.</td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="required" />
-                logo
-              </DxcFlex>
-            </td>
-            <td>
-              <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
-            </td>
-            <td>Object used to configure the header logo.</td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>navItems</td>
             <td>

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

@@ -37,7 +37,7 @@ const sections = [
             {/* It is also where the searchbar will be displayed once that feature is triggered. */}
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Right slot:</strong> it's the place where all utilities related to an application are hosted. It’s
+            <strong>Right slot:</strong> it's the place where all utilities related to an application are hosted. It's
             highly adaptable for each product's needs.
           </DxcBulletedList.Item>
         </DxcBulletedList>

apps/website/screens/components/sidenav/code/SidenavCodePage.tsx

@@ -4,18 +4,6 @@ import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import StatusBadge from "@/common/StatusBadge";
 
-const brandingTypeString = `{
-  logo?: Logo;
-  appTitle?: string;
-}`;
-
-const logoTypeString = `{
-  alt: string;
-  href?: string;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  src: string;
-}`;
-
 const commonItemTypeString = `badge?: ReactElement;
   icon?: string | SVG;
   label: string;`;
@@ -63,27 +51,6 @@ const sections = [
             <td>The content rendered in the bottom part of the sidenav, under the navigation menu.</td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
-                branding
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>{"Branding | ReactNode"}</TableCode>
-              <p>
-                being <Code>Branding</Code> an object with the following properties:
-              </p>
-              <ExtendedTableCode>{brandingTypeString}</ExtendedTableCode>
-              <p>
-                and <Code>Logo</Code> an object with the following properties:
-              </p>
-              <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
-            </td>
-            <td>Object with the properties of the branding placed at the top of the sidenav.</td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">

apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx

@@ -40,8 +40,7 @@ const sections = [
                 Contains <strong>collapse/expand toggle</strong> for the sidenav.
               </DxcBulletedList.Item>
               <DxcBulletedList.Item>
-                If no global app header exists, this area should be used for <strong>branding</strong> (logo,
-                product/app name).
+                If no global app header exists, this area will be used for <strong>logo and application name</strong>.
               </DxcBulletedList.Item>
             </DxcBulletedList>
           </DxcBulletedList.Item>

packages/lib/src/footer/Footer.stories.tsx

@@ -468,9 +468,9 @@ const items = [
 
 const FooterInLayout = () => (
   <DxcApplicationLayout
+    logo={dxcBrandedLogo}
     header={
       <DxcHeader
-        logo={dxcBrandedLogo}
         navItems={items}
         sideContent={(isResponsive) =>
           isResponsive ? (
@@ -546,9 +546,9 @@ const FooterInLayout = () => (
 
 const ReducedFooterInLayout = () => (
   <DxcApplicationLayout
+    logo={dxcBrandedLogo}
     header={
       <DxcHeader
-        logo={dxcBrandedLogo}
         navItems={items}
         sideContent={(isResponsive) =>
           isResponsive ? (

packages/lib/src/header/Header.accessibility.test.tsx

@@ -16,20 +16,6 @@ const disabledRules = {
   rules: formatRules(rules),
 };
 
-const iconSVG = (
-  <svg viewBox="0 0 24 24" height="24" width="24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-  </svg>
-);
-
-const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
-
-const logo = {
-  src: iconSVG,
-  alt: "DXC Logo",
-  href: iconUrl,
-};
 const appTitle =
   "Application Title with a very long name that exceeds the normal length to test how the header manages overflow situations";
 
@@ -71,7 +57,6 @@ describe("Header component accessibility tests", () => {
   it("Should not have basic accessibility issues", async () => {
     const { container } = render(
       <DxcHeader
-        logo={logo}
         appTitle={appTitle}
         navItems={items}
         sideContent={

packages/lib/src/header/Header.stories.tsx

@@ -60,25 +60,13 @@ const dxcLogo = (
   </svg>
 );
 
-const logo = {
-  src: "https://picsum.photos/id/1000/104/34",
-  alt: "DXC Logo",
-  href: "https://www.dxc.com",
-};
-
 const dxcBrandedLogo = {
   src: dxcLogo,
   alt: "DXC Logo",
 };
 
 const longAppTitle = "This is a very long application title to test the header component behavior with long titles";
 
-const longLogo = {
-  src: "https://picsum.photos/id/1000/104/34",
-  alt: "DXC Logo",
-  href: "https://www.dxc.com",
-};
-
 const longSideContent = `Long side content that is intended to test how the header component handles situations where the side content exceeds the typical length. This content should ideally wrap or be truncated based on the design specifications of the header component within the application.`;
 
 const items = [
@@ -122,30 +110,26 @@ const longItems = [
 const Header = () => (
   <DxcFlex gap="var(--spacing-gap-m)" direction="column">
     <Title title="Default Header" theme="light" level={3} />
-    <DxcHeader logo={logo} />
-    <DxcHeader logo={logo} />
-    <DxcHeader logo={logo} sideContent={<div>Side Content</div>} />
-    <DxcHeader logo={logo} navItems={items} sideContent={<div>Side Content</div>} />
+    <DxcHeader />
+    <DxcHeader />
+    <DxcHeader sideContent={<div>Side Content</div>} />
+    <DxcHeader navItems={items} sideContent={<div>Side Content</div>} />
     <Title title="Header with long content" theme="light" level={3} />
-    <DxcHeader logo={logo} navItems={items} sideContent={<div>{longSideContent}</div>} />
-    <DxcHeader logo={longLogo} appTitle={longAppTitle} navItems={items} />
-    <DxcHeader logo={longLogo} appTitle={longAppTitle} navItems={items} sideContent={<div>{longSideContent}</div>} />
-    <DxcHeader logo={longLogo} appTitle={longAppTitle} sideContent={<div>{longSideContent}</div>} />
-    <DxcHeader logo={longLogo} appTitle={longAppTitle} navItems={longItems} />
-    <DxcHeader
-      logo={longLogo}
-      appTitle={longAppTitle}
-      navItems={longItems}
-      sideContent={<div>{longSideContent}</div>}
-    />
+    <DxcHeader navItems={items} sideContent={<div>{longSideContent}</div>} />
+    <DxcHeader appTitle={longAppTitle} navItems={items} />
+    <DxcHeader appTitle={longAppTitle} navItems={items} sideContent={<div>{longSideContent}</div>} />
+    <DxcHeader appTitle={longAppTitle} sideContent={<div>{longSideContent}</div>} />
+    <DxcHeader appTitle={longAppTitle} navItems={longItems} />
+    <DxcHeader appTitle={longAppTitle} navItems={longItems} sideContent={<div>{longSideContent}</div>} />
   </DxcFlex>
 );
 
 const HeaderInLayout = () => (
   <DxcApplicationLayout
+    logo={dxcBrandedLogo}
     header={
-      <DxcHeader
-        logo={dxcBrandedLogo}
+      <DxcApplicationLayout.Header
+        appTitle="Application Layout with Header"
         navItems={items}
         sideContent={(isResponsive) =>
           isResponsive ? (

packages/lib/src/header/Header.test.tsx

@@ -3,11 +3,6 @@ import "@testing-library/jest-dom";
 import DxcHeader from "./Header";
 import { Item, GroupItem } from "../base-menu/types";
 
-const defaultHeaderBranding = {
-  src: "url-to-dxc-logo",
-  alt: "DXC Logo",
-};
-
 describe("Header component tests", () => {
   const mockMatchMedia = jest.fn();
 
@@ -26,11 +21,6 @@ describe("Header component tests", () => {
     }));
   });
 
-  test("Header renders with default logo", () => {
-    const { getByAltText } = render(<DxcHeader logo={defaultHeaderBranding} />);
-    expect(getByAltText("DXC Logo")).toBeTruthy();
-  });
-
   test("hamburger button triggers onClick when clicked", () => {
     mockMatchMedia.mockImplementation(() => ({
       matches: true,
@@ -39,7 +29,7 @@ describe("Header component tests", () => {
     }));
 
     const navItems: Item[] = [{ label: "Home", onSelect: jest.fn() }];
-    render(<DxcHeader logo={defaultHeaderBranding} navItems={navItems} />);
+    render(<DxcHeader navItems={navItems} />);
 
     const menuButton = screen.getByRole("button", { name: /toggle menu/i });
     fireEvent.click(menuButton);
@@ -63,7 +53,7 @@ describe("Header component tests", () => {
       },
     ];
 
-    render(<DxcHeader logo={defaultHeaderBranding} navItems={deepNestedItems} />);
+    render(<DxcHeader navItems={deepNestedItems} />);
     expect(screen.getByText("Services")).toBeInTheDocument();
     expect(screen.queryByText("Development")).not.toBeInTheDocument();
     expect(screen.queryByText("Frontend")).not.toBeInTheDocument();