Skip to content

Commit 8a86fad

Browse files
AugustinMauroyovflowd
AugustinMauroy
and
ovflowd
committed
migration(Layout): newFooter (#5320)
Co-authored-by: Claudio Wunder <[email protected]>
1 parent 53adc57 commit 8a86fad

File tree

6 files changed

+416
-1
lines changed

6 files changed

+416
-1
lines changed

‎components/Sections/NewFooter/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Tests for Footer component renders correctly 1`] = `
4+
<div>
5+
<footer
6+
class="footer"
7+
>
8+
<ul
9+
class="left"
10+
>
11+
<li>
12+
<a
13+
aria-label="Node.js Trademark Policy - PDF (Opens in new tab)"
14+
class="link"
15+
href="https://trademark-policy.openjsf.org/"
16+
rel="noopener noreferrer"
17+
target="_blank"
18+
>
19+
components.footer.links.trademark
20+
</a>
21+
</li>
22+
<li>
23+
<a
24+
aria-label="Node.js Privacy Policy - PDF (Opens in new tab)"
25+
class="link"
26+
href="https://privacy-policy.openjsf.org/"
27+
rel="noopener noreferrer"
28+
target="_blank"
29+
>
30+
components.footer.links.privacy
31+
</a>
32+
</li>
33+
<li>
34+
<a
35+
class="link"
36+
href="https://github.com/openjs-foundation/cross-project-council/blob/main/CODE_OF_CONDUCT.md#contributor-covenant-code-of-conduct"
37+
rel="noopener noreferrer"
38+
target="_blank"
39+
>
40+
components.footer.links.codeOfConduct
41+
</a>
42+
</li>
43+
<li>
44+
<a
45+
class="link"
46+
href="/en/about/security"
47+
>
48+
components.footer.links.security
49+
</a>
50+
</li>
51+
<li>
52+
<a
53+
class="link"
54+
href="/en/about"
55+
>
56+
components.footer.links.about
57+
</a>
58+
</li>
59+
<li>
60+
<a
61+
class="link"
62+
href="/en/blog"
63+
>
64+
components.footer.links.blog
65+
</a>
66+
</li>
67+
</ul>
68+
<ul
69+
class="right"
70+
>
71+
<li>
72+
© OpenJS Foundation
73+
</li>
74+
<li>
75+
<a
76+
aria-label="Node.js Github Page (opens in new tab)"
77+
href="https://github.com/nodejs/node"
78+
rel="noopener noreferrer"
79+
target="_blank"
80+
>
81+
<svg
82+
fill="currentColor"
83+
height="1em"
84+
stroke="currentColor"
85+
stroke-width="0"
86+
viewBox="0 0 496 512"
87+
width="1em"
88+
xmlns="http://www.w3.org/2000/svg"
89+
>
90+
<path
91+
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
92+
/>
93+
</svg>
94+
</a>
95+
</li>
96+
<li>
97+
<a
98+
aria-label="Node.js Mastodon (opens in new tab)"
99+
href="https://mastodon.social/@[email protected]"
100+
rel="noopener noreferrer"
101+
target="_blank"
102+
>
103+
<svg
104+
fill="currentColor"
105+
height="1em"
106+
stroke="currentColor"
107+
stroke-width="0"
108+
viewBox="0 0 448 512"
109+
width="1em"
110+
xmlns="http://www.w3.org/2000/svg"
111+
>
112+
<path
113+
d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"
114+
/>
115+
</svg>
116+
</a>
117+
</li>
118+
<li>
119+
<a
120+
aria-label="Node.js Twitter (opens in new tab)"
121+
href="https://twitter.com/nodejs"
122+
rel="noopener noreferrer"
123+
target="_blank"
124+
>
125+
<svg
126+
fill="currentColor"
127+
height="1em"
128+
stroke="currentColor"
129+
stroke-width="0"
130+
viewBox="0 0 512 512"
131+
width="1em"
132+
xmlns="http://www.w3.org/2000/svg"
133+
>
134+
<path
135+
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
136+
/>
137+
</svg>
138+
</a>
139+
</li>
140+
<li>
141+
<a
142+
aria-label="Node.js Slack (opens in new tab)"
143+
href="https://slack.openjsf.org"
144+
rel="noopener noreferrer"
145+
target="_blank"
146+
>
147+
<svg
148+
fill="currentColor"
149+
height="1em"
150+
stroke="currentColor"
151+
stroke-width="0"
152+
viewBox="0 0 448 512"
153+
width="1em"
154+
xmlns="http://www.w3.org/2000/svg"
155+
>
156+
<path
157+
d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"
158+
/>
159+
</svg>
160+
</a>
161+
</li>
162+
</ul>
163+
</footer>
164+
</div>
165+
`;

‎components/Sections/NewFooter/__tests__/index.test.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { render } from '@testing-library/react';
2+
import { IntlProvider } from 'react-intl';
3+
import Footer from '..';
4+
5+
// mock useRouter
6+
jest.mock('next/router', () => ({
7+
useRouter() {
8+
return {
9+
locale: 'en',
10+
};
11+
},
12+
}));
13+
14+
jest.mock('../../../../hooks/useLocale', () => ({
15+
useLocale: () => ({
16+
currentLocale: { code: 'en', name: 'English', localName: 'English' },
17+
}),
18+
}));
19+
20+
describe('Tests for Footer component', () => {
21+
it('renders correctly', () => {
22+
const { container } = render(
23+
<IntlProvider locale="en" onError={() => {}}>
24+
<Footer />
25+
</IntlProvider>
26+
);
27+
expect(container).toMatchSnapshot();
28+
});
29+
});

‎components/Sections/NewFooter/index.module.scss

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.footer {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: space-between;
5+
margin: 0;
6+
margin-top: auto;
7+
8+
@media (max-width: 900px) {
9+
flex-direction: column;
10+
}
11+
12+
.left {
13+
display: flex;
14+
flex-wrap: wrap;
15+
height: 100%;
16+
justify-content: space-between;
17+
list-style: none;
18+
19+
li a {
20+
color: var(--color-text-primary);
21+
22+
&:hover {
23+
color: var(--color-brand-primary);
24+
}
25+
}
26+
27+
> li:first-of-type {
28+
border-right: 1px solid var(--black5);
29+
margin-right: 12px;
30+
padding-right: 12px;
31+
padding-top: 0;
32+
}
33+
34+
@media (max-width: 900px) {
35+
align-items: center;
36+
flex-direction: column;
37+
height: 10rem;
38+
justify-content: center;
39+
40+
> li:first-of-type {
41+
border-right: none;
42+
margin-right: 0;
43+
padding: 6px 0;
44+
}
45+
}
46+
}
47+
48+
.right {
49+
display: flex;
50+
flex-wrap: wrap;
51+
height: 100%;
52+
justify-content: space-between;
53+
list-style: none;
54+
margin-right: 20px;
55+
56+
> li svg {
57+
height: 1.8rem;
58+
width: 1.8rem;
59+
}
60+
61+
@media (max-width: 900px) {
62+
margin: 0;
63+
64+
> li:first-of-type {
65+
margin-left: 0;
66+
margin-right: auto;
67+
}
68+
69+
> li {
70+
margin-left: 18px;
71+
}
72+
}
73+
}
74+
75+
.left,
76+
.right {
77+
> li {
78+
font-size: 12px;
79+
height: 24px;
80+
margin-right: 32px;
81+
82+
@media (max-width: 900px) {
83+
margin-right: 0;
84+
padding: 6px 0;
85+
}
86+
}
87+
88+
@media (max-width: 900px) {
89+
padding: 6px 18px;
90+
}
91+
}
92+
93+
.link {
94+
text-decoration: none;
95+
}
96+
97+
svg {
98+
fill: var(--color-text-secondary);
99+
height: 1.8rem;
100+
width: 1.8rem;
101+
}
102+
}

‎components/Sections/NewFooter/index.stories.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Footer from './index';
2+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
3+
4+
type Story = StoryObj<typeof Footer>;
5+
type Meta = MetaObj<typeof Footer>;
6+
7+
export const Default: Story = {};
8+
9+
export default { component: Footer } as Meta;

0 commit comments

Comments
 (0)