Skip to content

Commit 8ded8ca

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1793 from dxc-technology/Mil4n0r/small-footer
Added small footer variant
2 parents 18ade79 + 26650a0 commit 8ded8ca

File tree

5 files changed

+177
-44
lines changed

5 files changed

+177
-44
lines changed

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import DxcFooter from "./Footer";
33
import Title from "../../.storybook/components/Title";
44
import ExampleContainer from "../../.storybook/components/ExampleContainer";
55
import { HalstackProvider } from "../HalstackContext";
6+
import DxcFlex from "../flex/Flex";
7+
import DxcTypography from "../typography/Typography";
68

79
const social = [
810
{
@@ -99,6 +101,11 @@ const opinionatedTheme = {
99101
},
100102
};
101103

104+
const info = [
105+
{ label: "Example Label", text: "Example" },
106+
{ label: "Example Label", text: "Example" },
107+
];
108+
102109
export const Chromatic = () => (
103110
<>
104111
<ExampleContainer>
@@ -121,6 +128,18 @@ export const Chromatic = () => (
121128
</div>
122129
</DxcFooter>
123130
</ExampleContainer>
131+
<ExampleContainer>
132+
<Title title="Reduced" theme="light" level={4} />
133+
<DxcFooter mode="reduced">
134+
<DxcFlex justifyContent="center" alignItems="center" gap={"1rem"}>
135+
{info.map((tag, index) => (
136+
<DxcTypography color="white" key={`tag${index}${tag.label}${tag.text}`} >
137+
{tag.label}: {tag.text}
138+
</DxcTypography>
139+
))}
140+
</DxcFlex>
141+
</DxcFooter>
142+
</ExampleContainer>
124143
<Title title="Margins" theme="light" level={2} />
125144
<ExampleContainer>
126145
<Title title="Xxsmall margin" theme="light" level={4} />

‎lib/src/footer/Footer.tsx‎

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
33
import { spaces, responsiveSizes } from "../common/variables";
44
import useTheme from "../useTheme";
55
import useTranslatedLabels from "../useTranslatedLabels";
6-
import { dxcLogo } from "./Icons";
6+
import { dxcLogo, dxcSmallLogo } from "./Icons";
77
import FooterPropsType from "./types";
88
import DxcFlex from "../flex/Flex";
99

@@ -14,16 +14,21 @@ const DxcFooter = ({
1414
children,
1515
margin,
1616
tabIndex = 0,
17+
mode = "default",
1718
}: FooterPropsType): JSX.Element => {
1819
const colorsTheme = useTheme();
1920
const translatedLabels = useTranslatedLabels();
2021

2122
const footerLogo = useMemo(
2223
() =>
2324
!colorsTheme.footer.logo ? (
24-
dxcLogo
25+
mode === "default" ? (
26+
dxcLogo
27+
) : (
28+
dxcSmallLogo
29+
)
2530
) : typeof colorsTheme.footer.logo === "string" ? (
26-
<LogoImg alt={translatedLabels.formFields.logoAlternativeText} src={colorsTheme.footer.logo} />
31+
<LogoImg mode={mode} alt={translatedLabels.formFields.logoAlternativeText} src={colorsTheme.footer.logo} />
2732
) : (
2833
colorsTheme.footer.logo
2934
),
@@ -32,59 +37,64 @@ const DxcFooter = ({
3237

3338
return (
3439
<ThemeProvider theme={colorsTheme.footer}>
35-
<FooterContainer margin={margin}>
40+
<FooterContainer margin={margin} mode={mode}>
3641
<DxcFlex justifyContent="space-between" alignItems="center" wrap="wrap" gap="1.5rem">
37-
<LogoContainer>{footerLogo}</LogoContainer>
38-
<DxcFlex>
39-
{socialLinks?.map((link, index) => (
40-
<SocialAnchor
41-
href={link.href}
42-
tabIndex={tabIndex}
43-
title={link.title}
44-
aria-label={link.title}
45-
key={`social${index}${link.href}`}
46-
index={index}
47-
>
48-
<SocialIconContainer>
49-
{typeof link.logo === "string" ? <img src={link.logo} /> : link.logo}
50-
</SocialIconContainer>
51-
</SocialAnchor>
52-
))}
53-
</DxcFlex>
42+
<LogoContainer mode={mode}>{footerLogo}</LogoContainer>
43+
{mode === "default" && (
44+
<DxcFlex>
45+
{socialLinks?.map((link, index) => (
46+
<SocialAnchor
47+
href={link.href}
48+
tabIndex={tabIndex}
49+
title={link.title}
50+
aria-label={link.title}
51+
key={`social${index}${link.href}`}
52+
index={index}
53+
>
54+
<SocialIconContainer>
55+
{typeof link.logo === "string" ? <img src={link.logo} alt={link.title} /> : link.logo}
56+
</SocialIconContainer>
57+
</SocialAnchor>
58+
))}
59+
</DxcFlex>
60+
)}
5461
</DxcFlex>
5562
<ChildComponents>{children}</ChildComponents>
56-
<BottomContainer>
57-
<BottomLinks>
58-
{bottomLinks?.map((link, index) => (
59-
<span key={`bottom${index}${link.text}`}>
60-
<BottomLink href={link.href} tabIndex={tabIndex}>
61-
{link.text}
62-
</BottomLink>
63-
</span>
64-
))}
65-
</BottomLinks>
66-
<Copyright>{copyright || translatedLabels.footer.copyrightText(new Date().getFullYear())}</Copyright>
67-
</BottomContainer>
63+
{mode === "default" && (
64+
<BottomContainer>
65+
<BottomLinks>
66+
{bottomLinks?.map((link, index) => (
67+
<span key={`bottom${index}${link.text}`}>
68+
<BottomLink href={link.href} tabIndex={tabIndex}>
69+
{link.text}
70+
</BottomLink>
71+
</span>
72+
))}
73+
</BottomLinks>
74+
<Copyright>{copyright || translatedLabels.footer.copyrightText(new Date().getFullYear())}</Copyright>
75+
</BottomContainer>
76+
)}
6877
</FooterContainer>
6978
</ThemeProvider>
7079
);
7180
};
7281

73-
const FooterContainer = styled.footer<{ margin: FooterPropsType["margin"] }>`
82+
const FooterContainer = styled.footer<{ margin: FooterPropsType["margin"]; mode?: FooterPropsType["mode"] }>`
83+
background-color: ${(props) => props.theme.backgroundColor};
7484
box-sizing: border-box;
7585
display: flex;
76-
flex-direction: column;
86+
flex-direction: ${(props) => (props?.mode === "default" ? "column" : "row")};
7787
justify-content: space-between;
78-
width: 100%;
79-
min-height: ${(props) => props.theme.height};
8088
margin-top: ${(props) => (props.margin ? spaces[props.margin] : "0px")};
81-
background-color: ${(props) => props.theme.backgroundColor};
82-
89+
min-height: ${(props) => (props?.mode === "default" ? props.theme.height : "40px")};
90+
width: 100%;
91+
gap: ${(props) => (props?.mode === "default" ? "0px" : "32px")};
8392
@media (min-width: ${responsiveSizes.small}rem) {
84-
padding: 24px 36px 24px 36px;
93+
padding: ${(props) => (props?.mode === "default" ? "24px 36px 24px 36px" : "12px 32px 12px 32px")};
8594
}
8695
@media (max-width: ${responsiveSizes.small}rem) {
8796
padding: 20px;
97+
flex-direction: column;
8898
}
8999
`;
90100

@@ -131,13 +141,13 @@ const Copyright = styled.div`
131141
}
132142
`;
133143

134-
const LogoContainer = styled.span`
135-
max-height: ${(props) => props.theme.logoHeight};
144+
const LogoContainer = styled.span<{ mode?: FooterPropsType["mode"] }>`
145+
max-height: ${(props) => (props?.mode === "default" ? props.theme.logoHeight : "16px")};
136146
width: ${(props) => props.theme.logoWidth};
137147
`;
138148

139-
const LogoImg = styled.img`
140-
max-height: ${(props) => props.theme.logoHeight};
149+
const LogoImg = styled.img<{ mode?: FooterPropsType["mode"] }>`
150+
max-height: ${(props) => (props?.mode === "default" ? props.theme.logoHeight : "16px")};
141151
width: ${(props) => props.theme.logoWidth};
142152
`;
143153

‎lib/src/footer/Icons.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,77 @@ export const dxcLogo = (
7373
</g>
7474
</svg>
7575
);
76+
77+
export const dxcSmallLogo = (
78+
<svg id="g10" xmlns="http://www.w3.org/2000/svg" width="100%" height="16" viewBox="0 0 280.781 32">
79+
<title>DXC Logo</title>
80+
<g id="g12">
81+
<path
82+
id="path14"
83+
d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5"
84+
transform="translate(-68.528 65.45)"
85+
fill="#fff"
86+
/>
87+
<path
88+
id="path16"
89+
d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96"
90+
transform="translate(-77.56 65.45)"
91+
fill="#fff"
92+
/>
93+
<path
94+
id="path18"
95+
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"
96+
transform="translate(-86.019 65.583)"
97+
fill="#fff"
98+
/>
99+
<path
100+
id="path20"
101+
d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594"
102+
transform="translate(-95.903 65.45)"
103+
fill="#fff"
104+
/>
105+
<path
106+
id="path22"
107+
d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058"
108+
transform="translate(-105.869 65.45)"
109+
fill="#fff"
110+
/>
111+
<path
112+
id="path24"
113+
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"
114+
transform="translate(-115.631 65.583)"
115+
fill="#fff"
116+
/>
117+
<path
118+
id="path26"
119+
d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786"
120+
transform="translate(-126.654 65.45)"
121+
fill="#fff"
122+
/>
123+
<path
124+
id="path28"
125+
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"
126+
transform="translate(-135.016 65.583)"
127+
fill="#fff"
128+
/>
129+
<path
130+
id="path30"
131+
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"
132+
transform="translate(-145.284 65.583)"
133+
fill="#fff"
134+
/>
135+
<path
136+
id="path32"
137+
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"
138+
transform="translate(-154.162 65.45)"
139+
fill="#fff"
140+
/>
141+
<path
142+
id="path34"
143+
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"
144+
transform="translate(-21.08 69.298)"
145+
fill="#fff"
146+
/>
147+
</g>
148+
</svg>
149+
);

‎lib/src/footer/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ type FooterPropsType = {
5656
* inside the custom area.
5757
*/
5858
tabIndex?: number;
59+
/**
60+
* Determines the visual style and layout
61+
* - "default": The default mode with full content and styling.
62+
* - "reduced": A reduced mode with minimal content and styling.
63+
*/
64+
mode?: "default" | "reduced";
5965
};
6066

6167
export default FooterPropsType;

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,30 @@ const sections = [
2020
</tr>
2121
</thead>
2222
<tbody>
23+
<tr>
24+
<td>
25+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
26+
<StatusTag status="Information">New</StatusTag>mode
27+
</DxcFlex>
28+
</td>
29+
<td>
30+
<TableCode>'default' | 'reduced'</TableCode>
31+
</td>
32+
<td>
33+
The available footer modes:
34+
<ul>
35+
<li>
36+
<b>default</b>: Footer with full content.
37+
</li>
38+
<li>
39+
<b>reduced</b>: Smaller footer with minimal content.
40+
</li>
41+
</ul>
42+
</td>
43+
<td>
44+
<TableCode>'default'</TableCode>
45+
</td>
46+
</tr>
2347
<tr>
2448
<td>socialLinks</td>
2549
<td>

0 commit comments

Comments
 (0)