nodejs · saulonunesdev · Apr 11, 2020 · May 16, 2020 · May 16, 2020 · May 24, 2020
diff --git a/src/components/Article/__tests__/article.test.tsx b/src/components/Article/__tests__/article.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React from 'react';
 import * as ShallowRenderer from 'react-test-renderer/shallow';
 import Article from '..';
@@ -7,15 +6,15 @@ import {
   createLearnPageContext,
 } from '../../../../test/__fixtures__/page';
 
-describe('Article component', () => {
-  it('renders correctly', () => {
+describe('Article component', (): void => {
+  it('renders correctly', (): void => {
     const renderer = ShallowRenderer.createRenderer();
     const learnPageData = createLearnPageData();
     const learnPageContext = createLearnPageContext();
 
     const {
       doc: {
-        frontmatter: { title, description },
+        frontmatter: { title },
         html,
         fields: { authors },
       },

diff --git a/src/components/DownloadCards/DownloadCards.scss b/src/components/DownloadCards/DownloadCards.scss
@@ -0,0 +1,116 @@
+.download-card__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0px;
+  margin-block-end: 0px;
+  margin-block-start: 0px;
+  width: 100%;
+  max-width: 615px;
+  margin-top: 40px;
+}
+
+.download-card--active,
+.download-card--inactive {
+  background-color: var(--color-fill-app);
+  border: 1px solid var(--color-border-secondary);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  width: 179px;
+  height: 167px;
+  box-sizing: border-box;
+  box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.download-card--active {
+  height: 197px;
+  border-radius: 4px 4px 0px 0px;
+  border-top: 4px solid var(--brand5);
+}
+
+.download-card__top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.download-card__top--inactive {
+  width: 48px;
+  height: 48px;
+}
+
+.download-card__top--active {
+  width: 56px;
+  height: 56px;
+}
+
+.download-card__link {
+  height: 24px;
+  width: 24px;
+  color: var(--black5);
+  font-size: 24px;
+}
+
+.download-card__label--active {
+  margin-top: 24px;
+  font-weight: var(--font-weight-semibold);
+}
+
+.download-card__label--inactive {
+  margin-top: 16px;
+  font-weight: var(--font-weight-semibold);
+}
+
+.download-card__filename {
+  font-weight: normal;
+  font-size: var(--font-size-body3);
+  line-height: 18px;
+}
+
+@media (max-width: 620px) {
+  .download-card--inactive {
+    padding: 8px;
+    width: 130px;
+    height: 137px;
+  }
+
+  .download-card--active {
+    width: 130px;
+    height: 167px;
+  }
+
+  .download-card__label--active {
+    margin-top: 12px;
+    font-size: var(--font-size-caption);
+  }
+
+  .download-card__label--inactive {
+    margin-top: 16px;
+    font-size: var(--font-size-caption);
+  }
+
+  .download-card__filename {
+    font-size: var(--font-size-caption);
+    line-height: 12px;
+  }
+}
+
+@media (max-width: 460px) {
+  .download-card__row {
+    flex-direction: column;
+    height: 500px;
+    margin-top: 10px;
+  }
+
+  .download-card--inactive {
+    width: 150px;
+  }
+
+  .download-card--active {
+    width: 160px;
+    height: 167px;
+  }
+}
diff --git a/src/components/DownloadCards/index.tsx b/src/components/DownloadCards/index.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { ReleaseData } from '../../hooks/useReleaseHistory';
+
+import './DownloadCards.scss';
+import appleLogo from '../../images/logos/apple-logo.svg';
+import microsoftLogo from '../../images/logos/microsoft-download-logo.svg';
+import sourceCodeIcon from '../../images/logos/source-code-icon.svg';
+
+interface Props {
+  line?: ReleaseData;
+  userOS: string;
+}
+
+export default function DownloadCards({ line, userOS }: Props): JSX.Element {
+  const fileName = line && line.version;
+  const [selected, setSelected] = useState(
+    !(['WIN', 'MAC', 'MOBILE'].indexOf(userOS) >= 0) ? 'SOURCECODE' : userOS
+  );
+  // eslint-disable-next-line no-console
+  console.log('OS: ', userOS, 'hook: ', selected);
+  const DownloadTypes = [
+    {
+      label: 'Windows Installer',
+      icon: microsoftLogo,
+      name: 'WIN',
+      fileName: `node-${fileName}-x86.msi`,
+      download: `https://nodejs.org/dist/${fileName}/node-${fileName}-x86.msi`,
+    },
+    {
+      label: 'MAC Installer',
+      icon: appleLogo,
+      name: 'MAC',
+      fileName: `node-${fileName}.pkg`,
+      download: `https://nodejs.org/dist/${fileName}/node-${fileName}.pkg`,
+    },
+    {
+      label: 'Source Code',
+      name: 'SOURCECODE',
+      icon: sourceCodeIcon,
+      fileName: `node-${fileName}.tar.gz`,
+      download: `https://nodejs.org/dist/${fileName}/node-${fileName}.tar.gz`,
+    },
+  ];
+
+  return (
+    <>
+      <ul className="download-card__row">
+        {DownloadTypes.map(
+          (os): JSX.Element => {
+            return (
+              <li
+                className={
+                  selected === os.name
+                    ? 'download-card--active'
+                    : 'download-card--inactive'
+                }
+                key={os.name}
+                role="presentation"
+                onClick={(): void => {
+                  setSelected(os.name);
+                }}
+              >
+                <div className="download-card__top">
+                  <img
+                    className={
+                      selected === os.name
+                        ? 'download-card__top--active'
+                        : 'download-card__top--inactive'
+                    }
+                    src={os.icon}
+                    alt={`${os.label} logo`}
+                  />
+                  {selected === os.name && (
+                    <a className="download-card__link" href={os.download}>
+                      <i className="material-icons">get_app</i>
+                    </a>
+                  )}
+                </div>
+                <p
+                  className={
+                    selected === os.name
+                      ? 'download-card__label--active'
+                      : 'download-card__label--inactive'
+                  }
+                >
+                  {os.label}
+                </p>
+                <p className="download-card__filename">{os.fileName}</p>
+              </li>
+            );
+          }
+        )}
+      </ul>
+    </>
+  );
+}
diff --git a/src/components/DownloadHeader/DownloadHeader.scss b/src/components/DownloadHeader/DownloadHeader.scss
@@ -0,0 +1,34 @@
+.download-page__navigation {
+  display: flex;
+  justify-content: space-between;
+  text-transform: uppercase;
+  color: var(--black7);
+  font-size: var(--font-size-overline);
+  line-height: var(--line-height-overline);
+  letter-spacing: var(--space-02);
+  width: 100%;
+}
+
+.download-page__navigation--active {
+  color: var(--brand4);
+}
+
+.download-page__navigation--title {
+  text-transform: capitalize;
+  color: var(--black9);
+  font-size: var(--font-size-display3);
+  line-height: var(--line-height-display3);
+}
+
+.download-page__navigation--npm {
+  text-transform: lowercase;
+  width: 100%;
+  text-align: right;
+}
+
+@media (max-width: 500px) {
+  .download-page__navigation--title {
+    font-size: var(--font-size-display5);
+    line-height: var(--line-height-display5);
+  }
+}
diff --git a/src/components/DownloadHeader/index.tsx b/src/components/DownloadHeader/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { ReleaseData } from '../../hooks/useReleaseHistory';
+import './DownloadHeader.scss';
+
+interface Props {
+  release?: ReleaseData;
+}
+
+export default function DownloadHeader({ release }: Props): JSX.Element {
+  const nodev = release && release.version;
+  const npmv = release && release.npm;
+  const lts = release && release.lts;
+
+  return (
+    <>
+      <div className="download-page__navigation">
+        <div>
+          HOME /{' '}
+          <span className="download-page__navigation--active">downloads</span>
+        </div>
+        <div>
+          {lts ? 'LATEST LTS' : 'CURRENT'} VERSION {nodev}
+        </div>
+      </div>
+      <div className="download-page__navigation">
+        <div className="download-page__navigation--title">Downloads</div>
+        <div className="download-page__navigation--npm">
+          (includes npm {npmv})
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/DownloadReleases/DownloadReleases.scss b/src/components/DownloadReleases/DownloadReleases.scss
@@ -0,0 +1,51 @@
+.download-releases {
+  margin-top: 126px;
+  width: 100%;
+}
+
+.download-releases__title {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-display4);
+  line-height: var(--line-height-display4);
+}
+
+.node {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  text-align: center;
+}
+
+.current {
+  grid-area: 1 / 1 / 2 / 2;
+}
+.lts {
+  grid-area: 1 / 2 / 2 / 3;
+}
+.maintenance {
+  grid-area: 1 / 3 / 2 / 4;
+}
+.endoflife {
+  grid-area: 1 / 4 / 2 / 5;
+}
+.div5 {
+  grid-area: 1 / 5 / 2 / 6;
+}
+.release-title {
+  font-weight: 600;
+}
+.release-date {
+  font-size: 12px;
+}
+
+.lts__text {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-display5);
+  line-height: var(--line-height-body1);
+}
+
+.react-tabs__tab--selected {
+  border-bottom: 2px solid #5fa04e;
+}
diff --git a/src/components/ReleaseTable/index.tsx → ...onents/DownloadReleases/DownloadTable.tsx b/src/components/ReleaseTable/index.tsx → ...onents/DownloadReleases/DownloadTable.tsx
@@ -5,7 +5,7 @@ interface Props {
   releases: ReleaseData[];
 }
 
-const ReleaseTable = ({ releases }: Props): JSX.Element => {
+const DownloadTable = ({ releases }: Props): JSX.Element => {
   return (
     <table>
       <thead>
@@ -55,4 +55,4 @@ const ReleaseTable = ({ releases }: Props): JSX.Element => {
   );
 };
 
-export default ReleaseTable;
+export default DownloadTable;