Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit a9ce24a

Browse files
jemjambenhalverson
jemjam
authored and
benhalverson
committed
feat(releases-page): Restore code from #547
A huge acknowledgement to @saulonunesdev for putting together these templates initially. The PR looked great but ended up with some additional content that needed to be refactored out. This commit restores the work he put in to update the Downloads page. - Add all the Download templates that were green from original PR - Add to the style tokens
1 parent caa3061 commit a9ce24a

File tree

17 files changed

+710
-21
lines changed

17 files changed

+710
-21
lines changed

‎src/components/DownloadCards/DownloadCards.scss‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.download-card__row {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
list-style: none;
6+
padding: 0px;
7+
margin-block-end: 0px;
8+
margin-block-start: 0px;
9+
width: 100%;
10+
max-width: 615px;
11+
margin-top: 40px;
12+
}
13+
14+
.download-card--active,
15+
.download-card--inactive {
16+
background-color: var(--color-fill-app);
17+
border: 1px solid var(--color-border-secondary);
18+
display: flex;
19+
flex-direction: column;
20+
padding: 16px;
21+
width: 179px;
22+
height: 167px;
23+
box-sizing: border-box;
24+
box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.05);
25+
border-radius: 4px;
26+
cursor: pointer;
27+
}
28+
29+
.download-card--active {
30+
height: 197px;
31+
border-radius: 4px 4px 0px 0px;
32+
border-top: 4px solid var(--brand5);
33+
}
34+
35+
.download-card__top {
36+
display: flex;
37+
justify-content: space-between;
38+
}
39+
40+
.download-card__top--inactive {
41+
width: 48px;
42+
height: 48px;
43+
}
44+
45+
.download-card__top--active {
46+
width: 56px;
47+
height: 56px;
48+
}
49+
50+
.download-card__link {
51+
height: 24px;
52+
width: 24px;
53+
color: var(--black5);
54+
font-size: 24px;
55+
}
56+
57+
.download-card__label--active {
58+
margin-top: 24px;
59+
font-weight: var(--font-weight-semibold);
60+
}
61+
62+
.download-card__label--inactive {
63+
margin-top: 16px;
64+
font-weight: var(--font-weight-semibold);
65+
}
66+
67+
.download-card__filename {
68+
font-weight: normal;
69+
font-size: var(--font-size-body3);
70+
line-height: 18px;
71+
}
72+
73+
@media (max-width: 620px) {
74+
.download-card--inactive {
75+
padding: 8px;
76+
width: 130px;
77+
height: 137px;
78+
}
79+
80+
.download-card--active {
81+
width: 130px;
82+
height: 167px;
83+
}
84+
85+
.download-card__label--active {
86+
margin-top: 12px;
87+
font-size: var(--font-size-caption);
88+
}
89+
90+
.download-card__label--inactive {
91+
margin-top: 16px;
92+
font-size: var(--font-size-caption);
93+
}
94+
95+
.download-card__filename {
96+
font-size: var(--font-size-caption);
97+
line-height: 12px;
98+
}
99+
}
100+
101+
@media (max-width: 460px) {
102+
.download-card__row {
103+
flex-direction: column;
104+
height: 500px;
105+
margin-top: 10px;
106+
}
107+
108+
.download-card--inactive {
109+
width: 150px;
110+
}
111+
112+
.download-card--active {
113+
width: 160px;
114+
height: 167px;
115+
}
116+
}

‎src/components/DownloadCards/index.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { useState } from 'react';
2+
import { ReleaseData } from '../../hooks/useReleaseHistory';
3+
4+
import './DownloadCards.scss';
5+
import appleLogo from '../../images/logos/apple-logo.svg';
6+
import microsoftLogo from '../../images/logos/microsoft-download-logo.svg';
7+
import sourceCodeIcon from '../../images/logos/source-code-icon.svg';
8+
9+
interface Props {
10+
line?: ReleaseData;
11+
userOS: string;
12+
}
13+
14+
export default function DownloadCards({ line, userOS }: Props): JSX.Element {
15+
const fileName = line && line.version;
16+
const [selected, setSelected] = useState(
17+
!(['WIN', 'MAC', 'MOBILE'].indexOf(userOS) >= 0) ? 'SOURCECODE' : userOS
18+
);
19+
// eslint-disable-next-line no-console
20+
console.log('OS: ', userOS, 'hook: ', selected);
21+
const DownloadTypes = [
22+
{
23+
label: 'Windows Installer',
24+
icon: microsoftLogo,
25+
name: 'WIN',
26+
fileName: `node-${fileName}-x86.msi`,
27+
download: `https://nodejs.org/dist/${fileName}/node-${fileName}-x86.msi`,
28+
},
29+
{
30+
label: 'MAC Installer',
31+
icon: appleLogo,
32+
name: 'MAC',
33+
fileName: `node-${fileName}.pkg`,
34+
download: `https://nodejs.org/dist/${fileName}/node-${fileName}.pkg`,
35+
},
36+
{
37+
label: 'Source Code',
38+
name: 'SOURCECODE',
39+
icon: sourceCodeIcon,
40+
fileName: `node-${fileName}.tar.gz`,
41+
download: `https://nodejs.org/dist/${fileName}/node-${fileName}.tar.gz`,
42+
},
43+
];
44+
45+
return (
46+
<>
47+
<ul className="download-card__row">
48+
{DownloadTypes.map(
49+
(os): JSX.Element => {
50+
return (
51+
<li
52+
className={
53+
selected === os.name
54+
? 'download-card--active'
55+
: 'download-card--inactive'
56+
}
57+
key={os.name}
58+
role="presentation"
59+
onClick={(): void => {
60+
setSelected(os.name);
61+
}}
62+
>
63+
<div className="download-card__top">
64+
<img
65+
className={
66+
selected === os.name
67+
? 'download-card__top--active'
68+
: 'download-card__top--inactive'
69+
}
70+
src={os.icon}
71+
alt={`${os.label} logo`}
72+
/>
73+
{selected === os.name && (
74+
<a className="download-card__link" href={os.download}>
75+
<i className="material-icons">get_app</i>
76+
</a>
77+
)}
78+
</div>
79+
<p
80+
className={
81+
selected === os.name
82+
? 'download-card__label--active'
83+
: 'download-card__label--inactive'
84+
}
85+
>
86+
{os.label}
87+
</p>
88+
<p className="download-card__filename">{os.fileName}</p>
89+
</li>
90+
);
91+
}
92+
)}
93+
</ul>
94+
</>
95+
);
96+
}

‎src/components/DownloadHeader/DownloadHeader.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.download-page__navigation {
2+
display: flex;
3+
justify-content: space-between;
4+
text-transform: uppercase;
5+
color: var(--black7);
6+
font-size: var(--font-size-overline);
7+
line-height: var(--line-height-overline);
8+
letter-spacing: var(--space-02);
9+
width: 100%;
10+
}
11+
12+
.download-page__navigation--active {
13+
color: var(--brand4);
14+
}
15+
16+
.download-page__navigation--title {
17+
text-transform: capitalize;
18+
color: var(--black9);
19+
font-size: var(--font-size-display3);
20+
line-height: var(--line-height-display3);
21+
}
22+
23+
.download-page__navigation--npm {
24+
text-transform: lowercase;
25+
width: 100%;
26+
text-align: right;
27+
}
28+
29+
@media (max-width: 500px) {
30+
.download-page__navigation--title {
31+
font-size: var(--font-size-display5);
32+
line-height: var(--line-height-display5);
33+
}
34+
}

‎src/components/DownloadHeader/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { ReleaseData } from '../../hooks/useReleaseHistory';
3+
import './DownloadHeader.scss';
4+
5+
interface Props {
6+
release?: ReleaseData;
7+
}
8+
9+
export default function DownloadHeader({ release }: Props): JSX.Element {
10+
const nodev = release && release.version;
11+
const npmv = release && release.npm;
12+
const lts = release && release.lts;
13+
14+
return (
15+
<>
16+
<div className="download-page__navigation">
17+
<div>
18+
HOME /{' '}
19+
<span className="download-page__navigation--active">downloads</span>
20+
</div>
21+
<div>
22+
{lts ? 'LATEST LTS' : 'CURRENT'} VERSION {nodev}
23+
</div>
24+
</div>
25+
<div className="download-page__navigation">
26+
<div className="download-page__navigation--title">Downloads</div>
27+
<div className="download-page__navigation--npm">
28+
(includes npm {npmv})
29+
</div>
30+
</div>
31+
</>
32+
);
33+
}

‎src/components/DownloadReleases/DownloadReleases.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.download-releases {
2+
margin-top: 126px;
3+
width: 100%;
4+
}
5+
6+
.download-releases__title {
7+
font-weight: var(--font-weight-semibold);
8+
font-size: var(--font-size-display4);
9+
line-height: var(--line-height-display4);
10+
}
11+
12+
.node {
13+
display: grid;
14+
grid-template-columns: repeat(5, 1fr);
15+
grid-template-rows: 1fr;
16+
grid-column-gap: 0px;
17+
grid-row-gap: 0px;
18+
text-align: center;
19+
}
20+
21+
.current {
22+
grid-area: 1 / 1 / 2 / 2;
23+
}
24+
.lts {
25+
grid-area: 1 / 2 / 2 / 3;
26+
}
27+
.maintenance {
28+
grid-area: 1 / 3 / 2 / 4;
29+
}
30+
.endoflife {
31+
grid-area: 1 / 4 / 2 / 5;
32+
}
33+
.div5 {
34+
grid-area: 1 / 5 / 2 / 6;
35+
}
36+
.release-title {
37+
font-weight: 600;
38+
}
39+
.release-date {
40+
font-size: 12px;
41+
}
42+
43+
.lts__text {
44+
font-weight: var(--font-weight-regular);
45+
font-size: var(--font-size-display5);
46+
line-height: var(--line-height-body1);
47+
}
48+
49+
.react-tabs__tab--selected {
50+
border-bottom: 2px solid #5fa04e;
51+
}

‎src/components/DownloadReleases/DownloadTable.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import { ReleaseData } from '../../hooks/useReleaseHistory';
3+
4+
interface Props {
5+
releases: ReleaseData[];
6+
}
7+
8+
const DownloadTable = ({ releases }: Props): JSX.Element => {
9+
return (
10+
<table>
11+
<thead>
12+
<tr>
13+
<td>Version</td>
14+
<td>LTS</td>
15+
<td>Date</td>
16+
<td>V8</td>
17+
<td>NPM</td>
18+
<td>ABI</td>
19+
<td>SHASUM</td>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
{releases.map(
24+
({ version, date, npm, v8, lts }: ReleaseData): JSX.Element => {
25+
const majorVersion = version.substring(1).split('.')[0];
26+
27+
return (
28+
<tr key={version}>
29+
<td>{version}</td>
30+
<td>{lts || ''}</td>
31+
<td>{date}</td>
32+
<td>{v8}</td>
33+
<td>{npm}</td>
34+
<td>ABI?</td>
35+
<td>
36+
<a
37+
href={`https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V${majorVersion}.md#${version.substring(
38+
1
39+
)}`}
40+
>
41+
Changelog
42+
</a>
43+
</td>
44+
<td>
45+
<a href={`https://nodejs.org/download/release/${version}/`}>
46+
Download
47+
</a>
48+
</td>
49+
</tr>
50+
);
51+
}
52+
)}
53+
</tbody>
54+
</table>
55+
);
56+
};
57+
58+
export default DownloadTable;

0 commit comments

Comments
 (0)