Added small footer variant

lib/src/footer/Footer.stories.tsx

@@ -3,6 +3,8 @@ import DxcFooter from "./Footer";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
+import DxcFlex from "../flex/Flex";
+import DxcTypography from "../typography/Typography";
 
 const social = [
   {
@@ -99,6 +101,11 @@ const opinionatedTheme = {
   },
 };
 
+const info = [
+  { label: "Example Label", text: "Example" },
+  { label: "Example Label", text: "Example" },
+];
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -121,6 +128,18 @@ export const Chromatic = () => (
         </div>
       </DxcFooter>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced" theme="light" level={4} />
+      <DxcFooter mode="reduced">
+        <DxcFlex justifyContent="center" alignItems="center" gap={"1rem"}>
+          {info.map((tag, index) => (
+            <DxcTypography color="white" key={`tag${index}${tag.label}${tag.text}`} >
+              {tag.label}: {tag.text}
+            </DxcTypography>
+          ))}
+        </DxcFlex>
+      </DxcFooter>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

lib/src/footer/Footer.tsx

@@ -3,7 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { spaces, responsiveSizes } from "../common/variables";
 import useTheme from "../useTheme";
 import useTranslatedLabels from "../useTranslatedLabels";
-import { dxcLogo } from "./Icons";
+import { dxcLogo, dxcSmallLogo } from "./Icons";
 import FooterPropsType from "./types";
 import DxcFlex from "../flex/Flex";
 
@@ -14,16 +14,21 @@ const DxcFooter = ({
   children,
   margin,
   tabIndex = 0,
+  mode = "default",
 }: FooterPropsType): JSX.Element => {
   const colorsTheme = useTheme();
   const translatedLabels = useTranslatedLabels();
 
   const footerLogo = useMemo(
     () =>
       !colorsTheme.footer.logo ? (
-        dxcLogo
+        mode === "default" ? (
+          dxcLogo
+        ) : (
+          dxcSmallLogo
+        )
       ) : typeof colorsTheme.footer.logo === "string" ? (
-        <LogoImg alt={translatedLabels.formFields.logoAlternativeText} src={colorsTheme.footer.logo} />
+        <LogoImg mode={mode} alt={translatedLabels.formFields.logoAlternativeText} src={colorsTheme.footer.logo} />
       ) : (
         colorsTheme.footer.logo
       ),
@@ -32,59 +37,64 @@ const DxcFooter = ({
 
   return (
     <ThemeProvider theme={colorsTheme.footer}>
-      <FooterContainer margin={margin}>
+      <FooterContainer margin={margin} mode={mode}>
         <DxcFlex justifyContent="space-between" alignItems="center" wrap="wrap" gap="1.5rem">
-          <LogoContainer>{footerLogo}</LogoContainer>
-          <DxcFlex>
-            {socialLinks?.map((link, index) => (
-              <SocialAnchor
-                href={link.href}
-                tabIndex={tabIndex}
-                title={link.title}
-                aria-label={link.title}
-                key={`social${index}${link.href}`}
-                index={index}
-              >
-                <SocialIconContainer>
-                  {typeof link.logo === "string" ? <img src={link.logo} /> : link.logo}
-                </SocialIconContainer>
-              </SocialAnchor>
-            ))}
-          </DxcFlex>
+          <LogoContainer mode={mode}>{footerLogo}</LogoContainer>
+          {mode === "default" && (
+            <DxcFlex>
+              {socialLinks?.map((link, index) => (
+                <SocialAnchor
+                  href={link.href}
+                  tabIndex={tabIndex}
+                  title={link.title}
+                  aria-label={link.title}
+                  key={`social${index}${link.href}`}
+                  index={index}
+                >
+                  <SocialIconContainer>
+                    {typeof link.logo === "string" ? <img src={link.logo} alt={link.title} /> : link.logo}
+                  </SocialIconContainer>
+                </SocialAnchor>
+              ))}
+            </DxcFlex>
+          )}
         </DxcFlex>
         <ChildComponents>{children}</ChildComponents>
-        <BottomContainer>
-          <BottomLinks>
-            {bottomLinks?.map((link, index) => (
-              <span key={`bottom${index}${link.text}`}>
-                <BottomLink href={link.href} tabIndex={tabIndex}>
-                  {link.text}
-                </BottomLink>
-              </span>
-            ))}
-          </BottomLinks>
-          <Copyright>{copyright || translatedLabels.footer.copyrightText(new Date().getFullYear())}</Copyright>
-        </BottomContainer>
+        {mode === "default" && (
+          <BottomContainer>
+            <BottomLinks>
+              {bottomLinks?.map((link, index) => (
+                <span key={`bottom${index}${link.text}`}>
+                  <BottomLink href={link.href} tabIndex={tabIndex}>
+                    {link.text}
+                  </BottomLink>
+                </span>
+              ))}
+            </BottomLinks>
+            <Copyright>{copyright || translatedLabels.footer.copyrightText(new Date().getFullYear())}</Copyright>
+          </BottomContainer>
+        )}
       </FooterContainer>
     </ThemeProvider>
   );
 };
 
-const FooterContainer = styled.footer<{ margin: FooterPropsType["margin"] }>`
+const FooterContainer = styled.footer<{ margin: FooterPropsType["margin"]; mode?: FooterPropsType["mode"] }>`
+  background-color: ${(props) => props.theme.backgroundColor};
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
+  flex-direction: ${(props) => (props?.mode === "default" ? "column" : "row")};
   justify-content: space-between;
-  width: 100%;
-  min-height: ${(props) => props.theme.height};
   margin-top: ${(props) => (props.margin ? spaces[props.margin] : "0px")};
-  background-color: ${(props) => props.theme.backgroundColor};
-
+  min-height: ${(props) => (props?.mode === "default" ? props.theme.height : "40px")};
+  width: 100%;
+  gap: ${(props) => (props?.mode === "default" ? "0px" : "32px")};
   @media (min-width: ${responsiveSizes.small}rem) {
-    padding: 24px 36px 24px 36px;
+    padding: ${(props) => (props?.mode === "default" ? "24px 36px 24px 36px" : "12px 32px 12px 32px")};
   }
   @media (max-width: ${responsiveSizes.small}rem) {
     padding: 20px;
+    flex-direction: column;
   }
 `;
 
@@ -131,13 +141,13 @@ const Copyright = styled.div`
   }
 `;
 
-const LogoContainer = styled.span`
-  max-height: ${(props) => props.theme.logoHeight};
+const LogoContainer = styled.span<{ mode?: FooterPropsType["mode"] }>`
+  max-height: ${(props) => (props?.mode === "default" ? props.theme.logoHeight : "16px")};
   width: ${(props) => props.theme.logoWidth};
 `;
 
-const LogoImg = styled.img`
-  max-height: ${(props) => props.theme.logoHeight};
+const LogoImg = styled.img<{ mode?: FooterPropsType["mode"] }>`
+  max-height: ${(props) => (props?.mode === "default" ? props.theme.logoHeight : "16px")};
   width: ${(props) => props.theme.logoWidth};
 `;
 

lib/src/footer/Icons.tsx

@@ -73,3 +73,77 @@ export const dxcLogo = (
     </g>
   </svg>
 );
+
+export const dxcSmallLogo = (
+  <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="100%" height="16" viewBox="0 0 280.781 32">
+    <title>DXC Logo</title>
+    <g id="g12">
+      <path
+        id="path14"
+        d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5"
+        transform="translate(-68.528 65.45)"
+        fill="#fff"
+      />
+      <path
+        id="path16"
+        d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96"
+        transform="translate(-77.56 65.45)"
+        fill="#fff"
+      />
+      <path
+        id="path18"
+        d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813"
+        transform="translate(-86.019 65.583)"
+        fill="#fff"
+      />
+      <path
+        id="path20"
+        d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594"
+        transform="translate(-95.903 65.45)"
+        fill="#fff"
+      />
+      <path
+        id="path22"
+        d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058"
+        transform="translate(-105.869 65.45)"
+        fill="#fff"
+      />
+      <path
+        id="path24"
+        d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145"
+        transform="translate(-115.631 65.583)"
+        fill="#fff"
+      />
+      <path
+        id="path26"
+        d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786"
+        transform="translate(-126.654 65.45)"
+        fill="#fff"
+      />
+      <path
+        id="path28"
+        d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145"
+        transform="translate(-135.016 65.583)"
+        fill="#fff"
+      />
+      <path
+        id="path30"
+        d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5"
+        transform="translate(-145.284 65.583)"
+        fill="#fff"
+      />
+      <path
+        id="path32"
+        d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46"
+        transform="translate(-154.162 65.45)"
+        fill="#fff"
+      />
+      <path
+        id="path34"
+        d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892"
+        transform="translate(-21.08 69.298)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);

lib/src/footer/types.ts

@@ -56,6 +56,12 @@ type FooterPropsType = {
    * inside the custom area.
    */
   tabIndex?: number;
+  /**
+   * Determines the visual style and layout
+   * - "default": The default mode with full content and styling.
+   * - "reduced": A reduced mode with minimal content and styling.
+   */
+  mode?: "default" | "reduced";
 };
 
 export default FooterPropsType;

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

@@ -20,6 +20,30 @@ const sections = [
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusTag status="Information">New</StatusTag>mode
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'default' | 'reduced'</TableCode>
+            </td>
+            <td>
+              The available footer modes:
+              <ul>
+                <li>
+                  <b>default</b>: Footer with full content.
+                </li>
+                <li>
+                  <b>reduced</b>: Smaller footer with minimal content.
+                </li>
+              </ul>
+            </td>
+            <td>
+              <TableCode>'default'</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>socialLinks</td>
             <td>