Merge pull request #2356 from dxc-technology/jialecl/appLayout-logo

Logo prop moved to the application layout

Author: PelayoFelgueroso

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={