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

Commit 3d50be5

Browse files
authored
feat(react-intl): added localization keys for all entries (#2634)
1 parent 8f21dce commit 3d50be5

124 files changed

Lines changed: 703 additions & 520 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.eslintrc.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,14 @@ module.exports = {
6969
},
7070
},
7171
{
72-
files: ['test-processor.js', 'test-setup.js', 'test/**'],
72+
files: [
73+
'test-processor.js',
74+
'test-setup.js',
75+
'test/**',
76+
'**/**.test.js',
77+
'**/**.test.ts',
78+
'**/**.test.tsx',
79+
],
7380
extends: ['plugin:testing-library/react'],
7481
env: {
7582
jest: true,
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ContributorApiResponse, Contributor } from '../../src/hooks';
1+
import { ContributorApiResponse, Contributor } from '../hooks';
22

33
export const createRandomContributorApiData = (): ContributorApiResponse => ({
44
login: 'login_mock',
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
NodeReleaseData,
1111
TableOfContents,
1212
BlogCategoriesList,
13-
} from '../../src/types';
13+
} from '../types';
1414
import mockMDXBodyContent from './mockMDXBodyContent';
1515

1616
export const mockTableOfContents: TableOfContents = {
@@ -168,7 +168,7 @@ export const createBlogData = (): BlogPostsList & BlogCategoriesList => ({
168168
],
169169
},
170170
fields: {
171-
date: 'Mock date',
171+
date: '11/11/2022',
172172
slug: 'Mock blog slug',
173173
readingTime: {
174174
text: '1 min read',
@@ -197,7 +197,7 @@ export const createBlogPageData = (): BlogPageData => ({
197197
},
198198
],
199199
},
200-
fields: { slug: 'slug-mock', date: 'date-mock' },
200+
fields: { slug: 'slug-mock', date: '11/11/2022' },
201201
},
202202
recent: {
203203
edges: [
@@ -218,7 +218,7 @@ export const createBlogPageData = (): BlogPageData => ({
218218
],
219219
},
220220
fields: {
221-
date: 'date-mock',
221+
date: '11/11/2022',
222222
slug: 'slug-mock',
223223
readingTime: { text: 'text-mock' },
224224
},

src/components/Article/__tests__/__snapshots__/article.test.tsx.snap

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ exports[`Article component renders correctly 1`] = `
106106
<span>
107107
Edit this page on GitHub
108108
</span>
109-
110109
<svg
111110
class="icon"
112111
fill="currentColor"
@@ -129,7 +128,7 @@ exports[`Article component renders correctly 1`] = `
129128
href="/learn/test-slug"
130129
rel="prev"
131130
>
132-
  Prev
131+
← Prev
133132
</a>
134133
</li>
135134
<li>
@@ -138,7 +137,7 @@ exports[`Article component renders correctly 1`] = `
138137
href="/learn/test-slug"
139138
rel="next"
140139
>
141-
Next  
140+
Next →
142141
</a>
143142
</li>
144143
</ul>
@@ -324,7 +323,6 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
324323
<span>
325324
Edit this page on GitHub
326325
</span>
327-
328326
<svg
329327
class="icon"
330328
fill="currentColor"
@@ -347,7 +345,7 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
347345
href="/learn/test-slug"
348346
rel="prev"
349347
>
350-
  Prev
348+
← Prev
351349
</a>
352350
</li>
353351
<li>
@@ -356,7 +354,7 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
356354
href="/learn/test-slug"
357355
rel="next"
358356
>
359-
Next  
357+
Next →
360358
</a>
361359
</li>
362360
</ul>
@@ -477,7 +475,6 @@ exports[`Article component should accept and render child components 1`] = `
477475
<span>
478476
Edit this page on GitHub
479477
</span>
480-
481478
<svg
482479
class="icon"
483480
fill="currentColor"
@@ -500,7 +497,7 @@ exports[`Article component should accept and render child components 1`] = `
500497
href="/learn/test-slug"
501498
rel="prev"
502499
>
503-
  Prev
500+
← Prev
504501
</a>
505502
</li>
506503
<li>
@@ -509,7 +506,7 @@ exports[`Article component should accept and render child components 1`] = `
509506
href="/learn/test-slug"
510507
rel="next"
511508
>
512-
Next  
509+
Next →
513510
</a>
514511
</li>
515512
</ul>

src/components/Article/__tests__/article.test.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3-
import '../../../../test/__mocks__/intersectionObserverMock';
4-
53
import Article from '..';
64
import {
75
createLearnPageData,
86
createLearnPageContext,
9-
} from '../../../../test/__fixtures__/page';
7+
} from '../../../__fixtures__/page';
108

119
const getArticleProps = () => {
1210
const learnPageData = createLearnPageData();

src/components/BlogCard/index.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
22
import React, { Fragment } from 'react';
3+
import { injectIntl, WrappedComponentProps } from 'react-intl';
34
import { BlogMetaData } from '../../types';
45
import { getTerminatingString } from '../../util/getTerminatingString';
56
import './BlogCard.scss';
67

7-
interface Props {
8-
data: BlogMetaData;
9-
}
8+
type Props = { data: BlogMetaData } & WrappedComponentProps;
109

1110
const getBlogCategoryUrl = (category: string): string => `/blog/${category}/`;
1211

@@ -17,6 +16,7 @@ const BlogCard = ({
1716
frontmatter: { blogAuthors, title, category },
1817
},
1918
},
19+
intl,
2020
}: Props): JSX.Element => (
2121
<div className="blog-card">
2222
<div className="title">
@@ -33,16 +33,20 @@ const BlogCard = ({
3333
<div className="content">
3434
<h4>{date}</h4>
3535
<p>
36-
by{' '}
36+
{intl.formatMessage({ id: 'blog.authors.list.title.by' })}{' '}
3737
{blogAuthors?.map((author, i) => (
3838
<Fragment key={author.name}>
3939
<span>{author.name}</span>
40-
{getTerminatingString(i, blogAuthors.length)}
40+
{getTerminatingString(
41+
i,
42+
blogAuthors.length,
43+
` ${intl.formatMessage({ id: 'blog.authors.list.title.and' })} `
44+
)}
4145
</Fragment>
4246
))}
4347
</p>
4448
</div>
4549
</div>
4650
);
4751

48-
export default BlogCard;
52+
export default injectIntl(BlogCard);

src/components/Codebox/__tests__/codebox.test.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
2-
3-
import { render } from '@testing-library/react';
42
import userEvent from '@testing-library/user-event';
3+
import { render, screen } from '@testing-library/react';
54

65
import Codebox from '../index';
76

@@ -35,7 +34,8 @@ describe('Codebox component', (): void => {
3534

3635
it('renders correctly', async () => {
3736
const textToCopy = <p>text to be copy</p>;
38-
const { getByText, findByText } = render(
37+
38+
render(
3939
<Codebox>
4040
{{
4141
props: {
@@ -48,12 +48,12 @@ describe('Codebox component', (): void => {
4848

4949
navigatorClipboardSpy.mockImplementationOnce(() => Promise.resolve());
5050

51-
const buttonElement = getByText('copy');
51+
const buttonElement = screen.getByText('copy');
5252
userEvent.click(buttonElement);
5353

54-
await findByText('copied');
54+
await screen.findByText('copied');
5555

56-
expect(getByText('done')).toBeInTheDocument();
56+
expect(screen.getByText('done')).toBeInTheDocument();
5757
expect(navigatorClipboardSpy).toHaveBeenCalledTimes(1);
5858
expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy.toString());
5959
});

src/components/DownloadAdditional/__tests__/download-additional.test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { render } from '@testing-library/react';
32
import userEvent from '@testing-library/user-event';
3+
import { render } from '@testing-library/react';
44
import DownloadAdditional from '..';
55

66
describe('DownloadAdditional component', (): void => {
@@ -40,6 +40,7 @@ describe('DownloadAdditional component', (): void => {
4040
/>
4141
);
4242

43+
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
4344
const downloadItem = container.querySelector(
4445
'.download-additional__item'
4546
) as Element;
@@ -59,6 +60,7 @@ describe('DownloadAdditional component', (): void => {
5960
/>
6061
);
6162

63+
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
6264
const downloadItem = container.querySelector(
6365
'.download-additional__item'
6466
) as Element;

src/components/DownloadAdditional/index.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, FC } from 'react';
2+
import { FormattedMessage } from 'react-intl';
23
import DownloadToggle from '../DownloadToggle';
34
import { NodeReleaseLTSNPMVersion } from '../../types';
45
import { getDownloadableItemsList, Downloadable } from './downloadItems';
@@ -16,7 +17,7 @@ const DownloadButton: FC<DownloadButtonProps> = ({
1617
className,
1718
link,
1819
label,
19-
}: DownloadButtonProps) => (
20+
}) => (
2021
<a className={className} href={link}>
2122
<i className="material-icons">get_app</i>
2223
{label}
@@ -33,7 +34,7 @@ const DownloadableItem: FC<DownloadableItemProps> = ({
3334
item,
3435
isExpanded,
3536
setExpandedItem,
36-
}: DownloadableItemProps) => {
37+
}) => {
3738
const onClick = (): void =>
3839
isExpanded ? setExpandedItem('') : setExpandedItem(item.name);
3940
const classes = `${CLASS_NAME}__item`.concat(
@@ -84,12 +85,14 @@ const DownloadAdditional: FC<DownloadAdditionalProps> = ({
8485
line,
8586
selectedTypeRelease,
8687
handleTypeReleaseToggle,
87-
}: DownloadAdditionalProps): JSX.Element => {
88+
}) => {
8889
const [expandedItem, setExpandedItem] = useState('');
8990
return (
9091
<div className={CLASS_NAME}>
9192
<div className={`${CLASS_NAME}__header`}>
92-
<h3 className={`${CLASS_NAME}__title`}>Additional Downloads</h3>
93+
<h3 className={`${CLASS_NAME}__title`}>
94+
<FormattedMessage id="components.downloadAdditional.title" />
95+
</h3>
9396
<DownloadToggle
9497
selected={selectedTypeRelease}
9598
handleClick={handleTypeReleaseToggle}

0 commit comments

Comments
 (0)