Added small footer variant

lib/src/common/variables.ts

@@ -379,6 +379,11 @@ export const componentTokens = {
     bottomLinksFontWeight: CoreTokens.type_regular,
     bottomLinksFontColor: CoreTokens.color_white,
     bottomLinksTextDecoration: CoreTokens.type_no_line,
+    childrenFontColor: CoreTokens.color_white,
+    childrenFontFamily: CoreTokens.type_sans,
+    childrenFontSize: CoreTokens.type_scale_01,
+    childrenFontStyle: CoreTokens.type_normal,
+    childrenFontWeight: CoreTokens.type_regular,
     copyrightFontFamily: CoreTokens.type_sans,
     copyrightFontSize: CoreTokens.type_scale_01,
     copyrightFontStyle: CoreTokens.type_normal,
@@ -390,6 +395,9 @@ export const componentTokens = {
     socialLinksSize: "24px",
     socialLinksGutter: "16px",
     socialLinksColor: CoreTokens.color_white,
+    reducedHeight: "40px",
+    reducedLogoHeight: "16px",
+    tagGap: "20px",
   },
   header: {
     backgroundColor: CoreTokens.color_white,

lib/src/footer/Footer.stories.tsx

@@ -99,6 +99,11 @@ const opinionatedTheme = {
   },
 };
 
+const info = [
+  { label: "Database Codes", text: "Example" },
+  { label: "Version", text: "Example" },
+];
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -121,6 +126,16 @@ export const Chromatic = () => (
         </div>
       </DxcFooter>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced" theme="light" level={4} />
+      <DxcFooter variant="reduced">
+        {info.map((tag, index) => (
+          <div key={`tag${index}${tag.label}${tag.text}`}>
+            {tag.label}: {tag.text}
+          </div>
+        ))}
+      </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,14 +14,19 @@ const DxcFooter = ({
   children,
   margin,
   tabIndex = 0,
+  variant = "default",
 }: FooterPropsType): JSX.Element => {
   const colorsTheme = useTheme();
   const translatedLabels = useTranslatedLabels();
 
   const footerLogo = useMemo(
     () =>
       !colorsTheme.footer.logo ? (
-        dxcLogo
+        variant !== "reduced" ? (
+          dxcLogo
+        ) : (
+          dxcSmallLogo
+        )
       ) : typeof colorsTheme.footer.logo === "string" ? (
         <LogoImg alt={translatedLabels.formFields.logoAlternativeText} src={colorsTheme.footer.logo} />
       ) : (
@@ -32,59 +37,64 @@ const DxcFooter = ({
 
   return (
     <ThemeProvider theme={colorsTheme.footer}>
-      <FooterContainer margin={margin}>
+      <FooterContainer margin={margin} variant={variant}>
         <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 variant={variant}>{footerLogo}</LogoContainer>
+          {variant !== "reduced" && (
+            <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" /> : 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>
+        {children && <ChildComponents variant={variant}>{children}</ChildComponents>}
+        {variant !== "reduced" && (
+          <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"]; variant?: "default" | "reduced" }>`
+  background-color: ${(props) => props.theme.backgroundColor};
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
+  flex-direction: ${(props) => (props?.variant !== "reduced" ? "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?.variant !== "reduced" ? props.theme.height : props.theme.reducedHeight)};
+  width: 100%;
+  gap: ${(props) => (props?.variant !== "reduced" ? "0px" : "32px")};
   @media (min-width: ${responsiveSizes.small}rem) {
-    padding: 24px 36px 24px 36px;
+    padding: ${(props) => (props?.variant !== "reduced" ? "24px 32px 24px 32px" : "12px 32px 12px 32px")};
   }
   @media (max-width: ${responsiveSizes.small}rem) {
     padding: 20px;
+    flex-direction: column;
   }
 `;
 
@@ -106,9 +116,23 @@ const BottomContainer = styled.div`
   margin-top: 16px;
 `;
 
-const ChildComponents = styled.div`
+const ChildComponents = styled.div<{ variant: "default" | "reduced" }>`
   min-height: 16px;
   overflow: hidden;
+  font-family: ${(props) => props.theme.childrenFontFamily};
+  font-size: ${(props) => props.theme.childrenFontSize};
+  font-style: ${(props) => props.theme.childrenFontStyle};
+  font-weight: ${(props) => props.theme.childrenFontWeight};
+  color: ${(props) => props.theme.childrenFontColor};
+  ${(props) =>
+    props.variant === "reduced" &&
+    `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 16px;
+  `}
 `;
 
 const Copyright = styled.div`
@@ -131,13 +155,13 @@ const Copyright = styled.div`
   }
 `;
 
-const LogoContainer = styled.span`
-  max-height: ${(props) => props.theme.logoHeight};
+const LogoContainer = styled.span<{ variant?: "default" | "reduced" }>`
+  max-height: ${(props) => (props?.variant !== "reduced" ? props.theme.logoHeight : props.theme.reducedLogoHeight)};
   width: ${(props) => props.theme.logoWidth};
 `;
 
-const LogoImg = styled.img`
-  max-height: ${(props) => props.theme.logoHeight};
+const LogoImg = styled.img<{ variant?: "default" | "reduced" }>`
+  max-height: ${(props) => (props?.variant !== "reduced" ? props.theme.logoHeight : props.theme.reducedLogoHeight)};
   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

@@ -27,6 +27,17 @@ type BottomLink = {
   text: string;
 };
 
+type InfoTag = {
+  /**
+   * Label for the element
+   */
+  label: string;
+  /**
+   * Text for the element
+   */
+  text: string;
+};
+
 type FooterPropsType = {
   /**
    * An array of objects representing the links that will be rendered as
@@ -56,6 +67,17 @@ type FooterPropsType = {
    * inside the custom area.
    */
   tabIndex?: number;
+  /**
+   * Determines the visual style and layout
+   * - "default": The default variant with full content and styling.
+   * - "reduced": A reduced variant with minimal content and styling.
+   */
+  variant?: "default" | "reduced";
+  /**
+   * An array of objects representing the links that will be rendered at
+   * the bottom part of the footer.
+   */
+  infoTags?: InfoTag[];
 };
 
 export default FooterPropsType;

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

@@ -111,6 +111,32 @@ const sections = [
               <TableCode>0</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusTag status="Information">New</StatusTag>variant
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'default' | 'reduced'</TableCode>
+            </td>
+            <td>
+              The active mode for the visual style and layout.
+              <ul>
+                <li>
+                  <b>default</b>: The default variant with full content and
+                  styling.
+                </li>
+                <li>
+                  <b>reduced</b>: A reduced variant with minimal content and
+                  styling.
+                </li>
+              </ul>
+            </td>
+            <td>
+              <TableCode>'default'</TableCode>
+            </td>
+          </tr>
         </tbody>
       </DxcTable>
     ),