New Footer reimplementation

apps/website/screens/components/footer/code/FooterCodePage.tsx

@@ -4,12 +4,22 @@ import DocFooter from "@/common/DocFooter";
 import StatusBadge from "@/common/StatusBadge";
 import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 
+const bottomLinksTypeString = `{
+  href: string;
+  text: string;
+}[]`;
+
 const logoTypeString = `{
-  href?: string;
   src: string;
-  title?: string;
+  alt: string;
 }`;
 
+const socialLinkTypeString = `{
+  href: string;
+  title: string;
+  logo: string | SVG;
+}[]`;
+
 const sections = [
   {
     title: "Props",
@@ -27,7 +37,7 @@ const sections = [
           <tr>
             <td>bottomLinks</td>
             <td>
-              <TableCode>{"{ href: string; text: string; }[]"}</TableCode>
+              <ExtendedTableCode>{bottomLinksTypeString}</ExtendedTableCode>
             </td>
             <td>
               An array of objects representing the links that will be rendered at the bottom part of the footer. Each
@@ -46,9 +56,12 @@ const sections = [
           <tr>
             <td>children</td>
             <td>
-              <TableCode>React.ReactNode</TableCode>
+              <TableCode>ReactNode</TableCode>
+            </td>
+            <td>
+              Contains DxcFooter.LeftContent and DxcFooter.RightContent components to customize the left and right
+              content of the footer respectively.
             </td>
-            <td>The center section of the footer. Can be used to render custom content in this area.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -63,33 +76,33 @@ const sections = [
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
                 <StatusBadge status="new" />
-                logo
+                leftContent
               </DxcFlex>
             </td>
             <td>
-              <td>
-                <TableCode>{"Logo"}</TableCode>
-                <p>
-                  being <Code>Logo</Code> an object with the following properties:
-                </p>
-                <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
-              </td>
+              <TableCode>ReactNode</TableCode>
             </td>
-            <td>Logo to be displayed inside the header.</td>
+            <td>Content to be displayed on the left side of the footer under the logo.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                logo
+              </DxcFlex>
+            </td>
+            <td>
+              <td>
+                <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
+              </td>
             </td>
-            <td>Size of the top margin to be applied to the footer.</td>
+            <td>Logo to be displayed inside the footer.</td>
             <td>-</td>
           </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
                 mode
               </DxcFlex>
             </td>
@@ -111,12 +124,23 @@ const sections = [
               <TableCode>'default'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                rightContent
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>ReactNode</TableCode>
+            </td>
+            <td>Content to be displayed on the right side of the footer before the socialLinks if provided.</td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>socialLinks</td>
             <td>
-              <TableCode>
-                {`{ href: string; title: string; logo: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); }[]`}
-              </TableCode>
+              <ExtendedTableCode>{socialLinkTypeString}</ExtendedTableCode>
             </td>
             <td>
               An array of objects representing the links that will be rendered as icons at the top-right side of the
@@ -148,7 +172,8 @@ const sections = [
               <TableCode>number</TableCode>
             </td>
             <td>
-              Value of the <Code>tabindex</Code> for all interactive elements, except those inside the custom area.
+              Value of the <Code>tabindex</Code> for all interactive elements, except those inside the leftContent and
+              rightContent.
             </td>
             <td>
               <TableCode>0</TableCode>
@@ -158,29 +183,6 @@ const sections = [
       </DxcTable>
     ),
   },
-  {
-    title: "Examples",
-    subSections: [
-      {
-        title: "Footer 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"
-          />
-        ),
-      },
-    ],
-  },
 ];
 
 const FooterCodePage = () => {

apps/website/screens/components/footer/overview/FooterOverviewPage.tsx

@@ -31,6 +31,10 @@ const sections = [
             <strong>Logo:</strong> Represents the brand identity visually. Positioned on the left side, it helps
             reinforce company recognition across all pages.
           </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Border:</strong> Marks the upper boundary of the header to visually separate it from the main
+            content.
+          </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Social icons:</strong> A set of clickable icons linking to the company's social media platforms
             (e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access.
@@ -43,6 +47,12 @@ const sections = [
             <strong>Company links:</strong> A horizontal list of navigational hyperlinks such as Privacy Policy, Terms &
             Conditions, etc. Offers users access to important legal or informational resources.
           </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Left slot:</strong> Commonly used for short informational paragraphs or contact details.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Right slot:</strong> Commonly used for additional links, buttons, forms, or call to action.
+          </DxcBulletedList.Item>
         </DxcBulletedList>
       </>
     ),
@@ -52,21 +62,22 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          To maintain consistency in layout flexibility and brand presentation, the footer offers three primary
-          variants: <strong>Default</strong>, <strong>With Navigation</strong>, and <strong>Small</strong>.
+          To maintain consistency in layout flexibility and brand presentation, the footer offers two primary variants:{" "}
+          <strong>Default</strong> and <strong>Reduced</strong>.
         </DxcParagraph>
         <DxcBulletedList>
           <DxcBulletedList.Item>
             <strong>Default:</strong> provides a balanced layout with branding and essential legal links. It offers a
             clean, uncluttered appearance suitable for most standard applications.
+            <DxcBulletedList>
+              <DxcBulletedList.Item>
+                Users can add content to the Default view using custom code such as content sections, text, links, and
+                other components for increased customization based on their specific needs.
+              </DxcBulletedList.Item>
+            </DxcBulletedList>
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>With Navigation:</strong> includes additional navigational sections, enabling users to quickly
-            access key areas of the site. This layout is ideal for content-heavy pages or enterprise-level applications
-            requiring enhanced footer functionality.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Small:</strong> offers a compact version of the footer, typically limited to branding and minimal
+            <strong>Reduced:</strong> offers a compact version of the footer, typically limited to branding and minimal
             legal text. It's best suited for lightweight experiences, login pages, or environments with constrained
             vertical space.
           </DxcBulletedList.Item>
@@ -87,13 +98,15 @@ const sections = [
       <>
         <DxcBulletedList>
           <DxcBulletedList.Item>
-            <strong>Dock the footer to the bottom of the page:</strong> the footer should remain fixed at the bottom
-            edge of the viewport and not scroll with the page content to maintain visibility and separation from dynamic
-            areas.
+            <strong>Dock the footer at the bottom of the page:</strong> The footer should appear after the content at
+            the bottom page at all times. If the page content exceeds the current view and the user needs to scroll to
+            reach the bottom of the content and see the footer.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Ensure full-width alignment:</strong> the footer container should always span the full width of the
-            screen to create a clean, structured boundary and support responsive behavior across breakpoints.
+            <strong>Ensure full-width alignment:</strong> By default, the footer spans the entire width of the page
+            excluding the Sidenav. For cases when the left Sidenav is not used, the footer container should always span
+            the full width of the screen to create a clean, structured boundary and support responsive behavior across
+            breakpoints.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Display copyright information on the right:</strong> consistently place legal disclaimers or

packages/lib/src/footer/Footer.accessibility.test.tsx

@@ -2,6 +2,13 @@ import { render } from "@testing-library/react";
 import { axe, formatRules } from "../../test/accessibility/axe-helper";
 import DxcFooter from "./Footer";
 import rules from "../../test/accessibility/rules/specific/footer/disabledRules";
+import { vi } from "vitest";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
 
 const disabledRules = {
   rules: formatRules(rules),
@@ -90,22 +97,31 @@ const bottom = [
 describe("Footer component accessibility tests", () => {
   it("Should not have basic accessibility issues", async () => {
     const { container } = render(
-      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} margin="small" mode="default">
-        <div>
-          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
-        </div>
-      </DxcFooter>
+      <DxcFooter
+        copyright="Copyright"
+        socialLinks={social}
+        bottomLinks={bottom}
+        mode="default"
+        leftContent={
+          <>
+            <div>
+              <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+            </div>
+          </>
+        }
+        rightContent={
+          <div>
+            <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+          </div>
+        }
+      />
     );
     const results = await axe(container, disabledRules);
     expect(results.violations).toHaveLength(0);
   });
   it("Should not have basic accessibility issues for reduced mode", async () => {
     const { container } = render(
-      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} margin="small" mode="reduced">
-        <div>
-          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
-        </div>
-      </DxcFooter>
+      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom} mode="reduced" />
     );
     const results = await axe(container, disabledRules);
     expect(results.violations).toHaveLength(0);