+ + April 21, 2023 +
++ components.blog.blogCard.author.by + + + Bat Man + +
+
+
+ M
+
+
+`;
+
+exports[`Data Tag component renders with red background color when tag is 'E' 1`] = `
+
+
+ E
+
+
+`;
+
+exports[`Data Tag component renders with yellow background color when tag is 'C' 1`] = `
+
+
+ C
+
+
+`;
diff --git a/components/Api/DataTag/__tests__/index.test.tsx b/components/Api/DataTag/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..8e4d5c7cda5f3
--- /dev/null
+++ b/components/Api/DataTag/__tests__/index.test.tsx
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import DataTag from '../index';
+
+describe('Data Tag component', () => {
+ it(`renders with red background color when tag is 'E'`, () => {
+ const { container } = render(
+
+
+`;
+
+exports[`Alert component should support passing children into the component 1`] = `
+
+
+`;
diff --git a/components/Article/Alert/__tests__/index.test.tsx b/components/Article/Alert/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..b5e7b898f47ad
--- /dev/null
+++ b/components/Article/Alert/__tests__/index.test.tsx
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import Alert from '../index';
+
+describe('Alert component', () => {
+ it('should render correctly', () => {
+ const { container } = render(
+ This is an alert
+
+{children}
+);
+
+export default Alert;
diff --git a/components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..f7d9312442eb7
--- /dev/null
+++ b/components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Author component does not render without a username 1`] = `
+
+
+
+ 
+
+
+
+`;
+
+exports[`Author component renders correctly 1`] = `
+
+
+
+
+
+ 
+
+
+
+`;
diff --git a/components/Article/AuthorList/Author/__tests__/index.test.tsx b/components/Article/AuthorList/Author/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..b1db41e5d4742
--- /dev/null
+++ b/components/Article/AuthorList/Author/__tests__/index.test.tsx
@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import Author from '..';
+
+describe('Author component', () => {
+ it('renders correctly', () => {
+ const username = 'test-author';
+ const { container } = render(
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+export default AuthorList;
diff --git a/components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..d26d87cee0ea7
--- /dev/null
+++ b/components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockQuote component should render correctly 1`] = `
+-
+ {authors.map(author => (
+
+
+
+`;
+
+exports[`BlockQuote component should support passing children into the component 1`] = `
+
+
+`;
+
+exports[`BlockQuote component should support passing multiple children into the component 1`] = `
+
+ This is a block quote
+
+
+
+`;
diff --git a/components/Article/BlockQuote/__tests__/index.test.tsx b/components/Article/BlockQuote/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..8f5909ef68c66
--- /dev/null
+++ b/components/Article/BlockQuote/__tests__/index.test.tsx
@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import BlockQuote from '../index';
+
+describe('BlockQuote component', () => {
+ it('should render correctly', () => {
+ const { container } = render();
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should support passing children into the component', () => {
+ const { container } = render(
+
+
++ This is a block quote +
++ This is a block quote +
+This is a block quote+ ); + + expect(container).toMatchSnapshot(); + }); + + it('should support passing multiple children into the component', () => { + const { container } = render( +
++ ); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/components/Article/BlockQuote/index.module.scss b/components/Article/BlockQuote/index.module.scss new file mode 100644 index 0000000000000..5874a1fc7db72 --- /dev/null +++ b/components/Article/BlockQuote/index.module.scss @@ -0,0 +1,22 @@ +.blockQuote { + background-color: var(--color-fill-banner); + border-radius: 5px; + color: var(--color-text-primary); + font-size: var(--font-size-body1); + margin: var(--space-16) auto; + max-width: 90vw; + padding: var(--space-12); + position: relative; + + @media (max-width: 900px) { + margin: var(--space-08) auto; + } + + p:first-child { + margin-top: 0; + } + + p:last-child { + margin: 0; + } +} diff --git a/components/Article/BlockQuote/index.stories.tsx b/components/Article/BlockQuote/index.stories.tsx new file mode 100644 index 0000000000000..128405600d05c --- /dev/null +++ b/components/Article/BlockQuote/index.stories.tsx @@ -0,0 +1,22 @@ +import BlockQuote from './index'; +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +type Story = StoryObjThis is a block quote
+This is a block quote
+
This is a block quote 1
, +This is a block quote 2
, + ], + }, +}; + +export default { component: BlockQuote } as Meta; diff --git a/components/Article/BlockQuote/index.tsx b/components/Article/BlockQuote/index.tsx new file mode 100644 index 0000000000000..47681f83c5901 --- /dev/null +++ b/components/Article/BlockQuote/index.tsx @@ -0,0 +1,8 @@ +import styles from './index.module.scss'; +import type { FC, PropsWithChildren } from 'react'; + +const BlockQuote: FC{children}
+);
+
+export default BlockQuote;
diff --git a/components/Article/EditLink/__tests__/__snapshots__/index.test.tsx.snap b/components/Article/EditLink/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..5e39c384a0b3e
--- /dev/null
+++ b/components/Article/EditLink/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditLink component edit mode renders correctly 1`] = `
+
+`;
+
+exports[`EditLink component renders without a relative path 1`] = ``;
+
+exports[`EditLink component translate mode renders correctly 1`] = `
+
+`;
diff --git a/components/Article/EditLink/__tests__/index.test.tsx b/components/Article/EditLink/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..cf0104a288114
--- /dev/null
+++ b/components/Article/EditLink/__tests__/index.test.tsx
@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import EditLink from './../index';
+import { LocaleProvider } from '../../../../providers/localeProvider';
+import type { AppProps } from '../../../../types';
+
+jest.mock('next/router', () => ({
+ useRouter: jest.fn().mockImplementation(() => ({
+ asPath: '',
+ })),
+}));
+
+const absolutePath =
+ 'https://github.com/nodejs/nodejs.org/edit/major/website-redesign/pages/en/get-involved/contribute.md';
+const relativePath = 'get-involved/contribute.md';
+const editPath = 'pages/en/get-involved/contribute.md';
+
+const i18nDataEditMode = {
+ currentLocale: {
+ code: 'en',
+ },
+ localeMessages: {
+ 'components.article.editLink.title.edit': 'Edit this page on GitHub',
+ },
+} as unknown as AppProps['i18nData'];
+
+const i18nDataTranslateMode = {
+ currentLocale: {
+ code: 'xx',
+ },
+ localeMessages: {
+ 'components.article.editLink.title.translate':
+ 'Interested to help with translations?',
+ },
+} as unknown as AppProps['i18nData'];
+
+describe('EditLink component', () => {
+ it('edit mode renders correctly', () => {
+ const { container } = render(
+
+
+
+ );
+};
+
+export default EditLink;
diff --git a/components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap b/components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..430876477be63
--- /dev/null
+++ b/components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlogCard component renders correctly 1`] = `
+
+
+`;
diff --git a/components/Blog/BlogCard/__tests__/index.test.tsx b/components/Blog/BlogCard/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..3a2b31ef998eb
--- /dev/null
+++ b/components/Blog/BlogCard/__tests__/index.test.tsx
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import BlogCard from '..';
+
+jest.mock('next/router', () => ({
+ useRouter: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('../../../../hooks/useLocale', () => ({
+ useLocale: jest.fn().mockReturnValue({
+ currentLocale: {},
+ }),
+}));
+
+describe('BlogCard component', () => {
+ it('renders correctly', () => {
+ const { container } = render(
+
+
+
+
+ Sample Test Blog
+
+
+
+
+
+
+
+);
+
+export default BlogCard;
diff --git a/components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..cdb93e8192bcb
--- /dev/null
+++ b/components/Common/AnimatedPlaceholder/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedPlaceholder component should render correctly with default skeleton 1`] = `
+
+ {title}
+
+
+ {category && (
+
+ {category}
+
+ )}
+ {readingTime}
+
+
+
+
+ {author && (
+
+
+
+ {author && (
+
+
+
+`;
+
+exports[`AnimatedPlaceholder component should support passing loader skeleton from outside 1`] = `
+
+
+
+
+
+
+
+
+
+`;
diff --git a/components/Common/AnimatedPlaceholder/__tests__/index.test.tsx b/components/Common/AnimatedPlaceholder/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..a6ed849a159e2
--- /dev/null
+++ b/components/Common/AnimatedPlaceholder/__tests__/index.test.tsx
@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react';
+import AnimatedPlaceholder from './../index';
+
+describe('AnimatedPlaceholder component', () => {
+ it('should render correctly with default skeleton', () => {
+ const { container } = render(
+
+
+
+ {children || (
+ <>
+
+
+);
+
+export default AnimatedPlaceholder;
diff --git a/components/Common/Banner/__tests__/index.test.tsx b/components/Common/Banner/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..f384b272f4cd2
--- /dev/null
+++ b/components/Common/Banner/__tests__/index.test.tsx
@@ -0,0 +1,145 @@
+import { render, screen } from '@testing-library/react';
+import { LocaleProvider } from '../../../../providers/localeProvider';
+import Banner from '../index';
+import type { AppProps, WebsiteBanner } from '../../../../types';
+
+jest.mock('isomorphic-dompurify', () => ({
+ sanitize: jest.fn((html: string) => html),
+}));
+
+const bannersIndex: WebsiteBanner = {
+ endDate: '',
+ link: 'test/banner/link',
+ text: 'Test banner text',
+ startDate: '',
+};
+
+const i18nData = { currentLocale: { code: 'en' } } as AppProps['i18nData'];
+
+describe('Tests for Header component', () => {
+ it('renders when today between startDate and endDate', () => {
+ const beforeToday = new Date();
+ beforeToday.setDate(beforeToday.getDate() - 1);
+ const afterToday = new Date();
+ afterToday.setDate(afterToday.getDate() + 1);
+
+ bannersIndex.startDate = beforeToday.toISOString();
+ bannersIndex.endDate = afterToday.toISOString();
+
+ render(
+
+
+
+
+
+ )}
+ 
';
+
+ render(
+ Banner HTML
', + link: 'https://nodejs.org/en/', + }, + }, +}; + +export const WithHTMLImage: Story = { + args: { + bannersIndex: { + startDate: startDate.toISOString(), + endDate: endDate.toISOString(), + html: '
',
+ link: 'https://nodejs.org/en/',
+ },
+ },
+};
+
+export default { component: Banner } as Meta;
diff --git a/components/Common/Banner/index.tsx b/components/Common/Banner/index.tsx
new file mode 100644
index 0000000000000..054c6a880133f
--- /dev/null
+++ b/components/Common/Banner/index.tsx
@@ -0,0 +1,79 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { sanitize } from 'isomorphic-dompurify';
+import styles from './index.module.scss';
+import { dateIsBetween } from '../../../util/dateIsBetween';
+import { isAbsoluteUrl } from '../../../util/isAbsoluteUrl';
+import type { FC } from 'react';
+import type { WebsiteBanner } from '../../../types';
+
+const useTextContent = ({ text, link }: WebsiteBanner, bannerBtnText: string) =>
+ useMemo(() => {
+ if (text) {
+ return (
+ + + {bannerBtnText || 'Read More'} + + {text} +
+ ); + } + + return null; + }, [text, link, bannerBtnText]); + +const useHtmlContent = ({ html, link }: WebsiteBanner) => + useMemo(() => { + if (html) { + return ( + + ); + } + + return null; + }, [html, link]); + +type BannerProps = { bannersIndex: WebsiteBanner }; + +const Banner: FC
+ {bannersIndex.text ? textContent : htmlContent}
+
+ );
+ }
+
+ return null;
+};
+
+export default Banner;
diff --git a/components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..6f3759d5005b0
--- /dev/null
+++ b/components/Common/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DarkModeToggle Component render dark mode toggle 1`] = `
+
+
+
+`;
diff --git a/components/Common/DarkModeToggle/__tests__/index.test.tsx b/components/Common/DarkModeToggle/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..4122acad5f843
--- /dev/null
+++ b/components/Common/DarkModeToggle/__tests__/index.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import DarkModeToggle from '../index';
+
+let mockCurrentTheme = '';
+
+const mockToggleTheme = jest.fn().mockImplementation(() => {
+ mockCurrentTheme = mockCurrentTheme === 'dark' ? 'light' : 'dark';
+});
+
+// Mock dark mode module for controlling dark mode HOC behaviour
+jest.mock('next-themes', () => ({
+ useTheme: () => {
+ return { theme: mockCurrentTheme, setTheme: mockToggleTheme };
+ },
+}));
+
+describe('DarkModeToggle Component', () => {
+ it('render dark mode toggle', () => {
+ const { container } = render(
+ -
+ {mappedElements}
+
+
+ ),
+ ],
+} as Meta;
diff --git a/components/Common/LanguageSelector/index.tsx b/components/Common/LanguageSelector/index.tsx
new file mode 100644
index 0000000000000..e966f0f1cace6
--- /dev/null
+++ b/components/Common/LanguageSelector/index.tsx
@@ -0,0 +1,60 @@
+import { useMemo, useState } from 'react';
+import { MdOutlineTranslate } from 'react-icons/md';
+import { useIntl } from 'react-intl';
+import styles from './index.module.scss';
+import Dropdown from '../Dropdown';
+import { useLocale } from '../../../hooks/useLocale';
+
+const dropdownStyle = {
+ position: 'absolute',
+ top: '60%',
+ right: '0',
+ margin: 0,
+} as const;
+
+const LanguageSelector = () => {
+ const [showDropdown, setShowDropdown] = useState(false);
+
+ const { availableLocales, currentLocale } = useLocale();
+
+ const intl = useIntl();
+
+ const dropdownItems = useMemo(
+ () =>
+ availableLocales.map(locale => ({
+ title: locale.localName,
+ label: locale.name,
+ onClick: () => {
+ // TODO: "locale changing logic yet to be implemented"
+ },
+ active: currentLocale.code === locale.code,
+ })),
+ [availableLocales, currentLocale]
+ );
+
+ const ariaLabelText = intl.formatMessage({
+ id: 'components.common.languageSelector.button.title',
+ });
+
+ return (
+
+
+
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/components/Common/SectionTitle/__tests__/SectionTitle.test.tsx b/components/Common/SectionTitle/__tests__/SectionTitle.test.tsx
new file mode 100644
index 0000000000000..3ea1f85e93947
--- /dev/null
+++ b/components/Common/SectionTitle/__tests__/SectionTitle.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import SectionTitle from '..';
+
+describe('SectionTitle component', () => {
+ const mockData = ['home', 'previous', 'current'];
+
+ it('renders correctly with data', () => {
+ const { container } = render(
+
+`;
diff --git a/components/Common/SectionTitle/index.module.scss b/components/Common/SectionTitle/index.module.scss
new file mode 100644
index 0000000000000..018959b7515b0
--- /dev/null
+++ b/components/Common/SectionTitle/index.module.scss
@@ -0,0 +1,13 @@
+.sectionTitle,
+%section-title {
+ color: var(--color-text-primary);
+ font-size: var(--font-size-overline);
+ font-weight: var(--font-weight-semibold);
+ letter-spacing: var(--space-02);
+ line-height: var(--line-height-overline);
+ text-transform: uppercase;
+
+ .active {
+ color: var(--brand4);
+ }
+}
diff --git a/components/Common/SectionTitle/index.stories.ts b/components/Common/SectionTitle/index.stories.ts
new file mode 100644
index 0000000000000..26f9599a3c006
--- /dev/null
+++ b/components/Common/SectionTitle/index.stories.ts
@@ -0,0 +1,13 @@
+import SectionTitle from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj
+ home /
+ previous /
+
+ current
+
+
+
+ {path.map((item, index) => {
+ const isLast = index === path.length - 1;
+
+ if (isLast) {
+ return (
+
+ {item}
+
+ );
+ }
+
+ return `${item} / `;
+ })}
+
+);
+
+export default SectionTitle;
diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..0a18a22852632
--- /dev/null
+++ b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShellBox should render 1`] = `
+
+
+`;
diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx
new file mode 100644
index 0000000000000..9d764926a5d86
--- /dev/null
+++ b/components/Common/ShellBox/__tests__/index.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import ShellBox from '../index';
+
+const mockWriteText = jest.fn();
+const originalNavigator = { ...window.navigator };
+
+describe('ShellBox', () => {
+ beforeEach(() => {
+ Object.defineProperty(window, 'navigator', {
+ value: {
+ clipboard: {
+ writeText: mockWriteText,
+ },
+ },
+ });
+ });
+
+ afterEach(() => {
+ Object.defineProperty(window, 'navigator', {
+ value: originalNavigator,
+ });
+ });
+
+ it('should render', () => {
+ const { container } = render(
+ +++ + SHELL + + +++ test ++
++ ); +}; + +export default ShellBox; diff --git a/components/Common/index.ts b/components/Common/index.ts new file mode 100644 index 0000000000000..d49eb3b30e135 --- /dev/null +++ b/components/Common/index.ts @@ -0,0 +1 @@ +export { default as ShellBox } from './ShellBox'; diff --git a/components/Downloads/DownloadList.tsx b/components/Downloads/DownloadList.tsx index b4293f8d17b86..ce144d256eec9 100644 --- a/components/Downloads/DownloadList.tsx +++ b/components/Downloads/DownloadList.tsx @@ -1,18 +1,17 @@ import { FormattedMessage } from 'react-intl'; - import LocalizedLink from '../LocalizedLink'; import { useNavigation } from '../../hooks/useNavigation'; - import type { NodeVersionData } from '../../types'; +import type { FC } from 'react'; type DownloadListProps = Pick+ SHELL + ++{children}+
| {downloads.WindowsInstaller} (.msi) | - + 32-bit | - + 64-bit | {hasWindowsArm64 && (ARM64 @@ -143,14 +139,14 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => { | {downloads.WindowsBinary} (.zip) | 32-bit | 64-bit @@ -158,7 +154,7 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => { {hasWindowsArm64 && ( | ARM64 @@ -169,9 +165,7 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => { | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {downloads.MacOSInstaller} (.pkg) | - + 64-bit / ARM64 | @@ -180,14 +174,14 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => {{downloads.MacOSBinary} (.tar.gz) | 64-bit | ARM64 @@ -198,7 +192,7 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => { | {downloads.LinuxBinaries} (x64) | 64-bit @@ -208,14 +202,14 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => { | {downloads.LinuxBinaries} (ARM) | ARMv7 | ARMv8 @@ -225,10 +219,8 @@ const PrimaryDownloadMatrix = (props: PrimaryDownloadMatrixProps) => { | ||||||||||||||||
| {downloads.SourceCode} | - - node-{props.node}.tar.gz + + node-{node}.tar.gz | {additional.LinuxPowerSystems} | 64-bit @@ -42,7 +44,7 @@ const SecondaryDownloadMatrix = (props: SecondaryDownloadMatrixProps) => { | {additional.LinuxSystemZ} | 64-bit @@ -52,7 +54,7 @@ const SecondaryDownloadMatrix = (props: SecondaryDownloadMatrixProps) => { | {additional.AIXPowerSystems} | 64-bit @@ -61,7 +63,7 @@ const SecondaryDownloadMatrix = (props: SecondaryDownloadMatrixProps) => { |
@@ -27,10 +32,10 @@ const HomeDownloadButton = (props: HomeDownloadButtonProps) => {
href={nodeDownloadLink}
className="home-downloadbutton"
title={nodeDownloadTitle}
- data-version={props.node}
+ data-version={node}
>
- {props.nodeNumeric} {labels[props.isLts ? 'lts' : 'current']}
- {labels[`tagline-${props.isLts ? 'lts' : 'current'}`]}
+ {nodeNumeric} {labels[isLts ? 'lts' : 'current']}
+ {labels[`tagline-${isLts ? 'lts' : 'current'}`]}
-
@@ -40,7 +45,7 @@ const HomeDownloadButton = (props: HomeDownloadButtonProps) => {
-
-
+ {labels.changelog}
diff --git a/components/Home/NodeFeatures/NodeFeature/index.module.scss b/components/Home/NodeFeatures/NodeFeature/index.module.scss
new file mode 100644
index 0000000000000..278076d33f94f
--- /dev/null
+++ b/components/Home/NodeFeatures/NodeFeature/index.module.scss
@@ -0,0 +1,5 @@
+.container {
+ margin: 0 2em;
+ max-width: 248px;
+ text-align: center;
+}
diff --git a/components/Home/NodeFeatures/NodeFeature/index.tsx b/components/Home/NodeFeatures/NodeFeature/index.tsx
new file mode 100644
index 0000000000000..fb958b5cb88b5
--- /dev/null
+++ b/components/Home/NodeFeatures/NodeFeature/index.tsx
@@ -0,0 +1,18 @@
+import styles from './index.module.scss';
+import type { ReactElement, FC } from 'react';
+
+type NodeFeatureProps = {
+ icon: ReactElement;
+ heading: ReactElement;
+ description: ReactElement;
+};
+
+const NodeFeature: FC -
+ {previous && (
+
+
+ + + )} +
+ -
+ {next && (
+
+
+ + + )} +
+
+ {icon}
+
+);
+
+export default NodeFeature;
diff --git a/components/Home/NodeFeatures/__test__/__snapshots__/index.test.tsx.snap b/components/Home/NodeFeatures/__test__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..4cf67440b4440
--- /dev/null
+++ b/components/Home/NodeFeatures/__test__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NodeFeatures should render 1`] = `
+{heading}
+{description}
+
+
+
+
+`;
diff --git a/components/Home/NodeFeatures/__test__/index.test.tsx b/components/Home/NodeFeatures/__test__/index.test.tsx
new file mode 100644
index 0000000000000..11fd0c5177601
--- /dev/null
+++ b/components/Home/NodeFeatures/__test__/index.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import NodeFeatures from '../index';
+
+describe('NodeFeatures', () => {
+ it('should render', () => {
+ const { container } = render(
+
+
+
+ + components.home.nodeFeatures.javascript.title +
++ components.home.nodeFeatures.javascript.description +
+
+
+
+ + components.home.nodeFeatures.openSource.title +
++ components.home.nodeFeatures.openSource.description +
+
+
+
+ + components.home.nodeFeatures.everywhere.title +
++ components.home.nodeFeatures.everywhere.description +
+-
+