Skip to content

Commit ef13dea

Browse files
authored
feat(translations): expose Button and Modal translations (#1183)
1 parent 4b0eec0 commit ef13dea

21 files changed

Lines changed: 669 additions & 123 deletions

.circleci/config.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,7 @@ workflows:
157157
requires:
158158
- build
159159
- test_types
160-
# TODO: Enable once the test env setup is ready.
161-
# - test_unit
160+
- test_unit
162161
# TODO: Enable again once Cypress is installed on the repo.
163162
# - test_cypress
164163
- release:

bundlesize.config.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
},
77
{
88
"path": "packages/docsearch-react/dist/umd/index.js",
9-
"maxSize": "19.30 kB"
9+
"maxSize": "20 kB"
1010
},
1111
{
1212
"path": "packages/docsearch-js/dist/umd/index.js",
13-
"maxSize": "27.25 kB"
13+
"maxSize": "27.75 kB"
1414
}
1515
]
1616
}

cypress/tsconfig.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
2-
"extends": "../../tsconfig",
2+
"extends": "../tsconfig.json",
33
"compilerOptions": {
44
"types": ["cypress"]
5-
}
5+
},
6+
"exclude": []
67
}

jest.config.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
module.exports = {
2-
rootDir: process.cwd(),
3-
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
4-
testPathIgnorePatterns: ['node_modules/', 'dist/', 'cypress/'],
5-
watchPlugins: [
6-
'jest-watch-typeahead/filename',
7-
'jest-watch-typeahead/testname',
2+
preset: 'ts-jest',
3+
testMatch: ['<rootDir>/packages/docsearch-*/src/__tests__/*.test.(ts|tsx)'],
4+
transformIgnorePatterns: [
5+
'<rootDir>/node_modules/',
6+
'<rootDir>/packages/docsearch-*/node_modules/',
87
],
8+
transform: {
9+
'^.+\\.(tsx|ts|js)$': 'babel-jest',
10+
},
11+
setupFilesAfterEnv: ['<rootDir>/scripts/jest/setupTests.ts'],
12+
testEnvironment: 'jsdom',
913
globals: {
1014
__DEV__: true,
1115
},

package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,10 @@
4747
"@rollup/plugin-json": "4.1.0",
4848
"@rollup/plugin-node-resolve": "7.1.1",
4949
"@rollup/plugin-replace": "2.3.3",
50-
"@testing-library/dom": "7.23.0",
50+
"@testing-library/dom": "8.11.0",
5151
"@testing-library/jest-dom": "5.15.0",
52-
"@testing-library/user-event": "12.1.3",
52+
"@testing-library/react": "12.1.2",
53+
"@testing-library/user-event": "13.5.0",
5354
"@types/jest": "^27.0.0",
5455
"@types/jest-diff": "^24.3.0",
5556
"@types/react": "^17.0.0",
@@ -102,6 +103,7 @@
102103
"stylelint-no-unsupported-browser-features": "5.0.2",
103104
"stylelint-order": "5.0.0",
104105
"stylelint-prettier": "2.0.0",
106+
"ts-jest": "27.0.7",
105107
"typescript": "4.5.2",
106108
"watch": "1.0.2",
107109
"webpack": "4.44.1"
Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
import React from 'react';
22

3-
export const AlgoliaLogo: React.FC = () => {
3+
type AlgoliaLogoTranslations = Partial<{
4+
searchByText: string;
5+
}>;
6+
7+
type AlgoliaLogoProps = {
8+
translations?: AlgoliaLogoTranslations;
9+
};
10+
11+
export function AlgoliaLogo({ translations = {} }: AlgoliaLogoProps) {
12+
const { searchByText = 'Search by' } = translations;
413
return (
514
<a
615
href="https://www.algolia.com/docsearch"
716
target="_blank"
817
rel="noopener noreferrer"
918
>
10-
<span className="DocSearch-Label">Search by</span>
19+
<span className="DocSearch-Label">{searchByText}</span>
1120
<svg width="77" height="19">
1221
<path
1322
d="M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z"
@@ -17,4 +26,4 @@ export const AlgoliaLogo: React.FC = () => {
1726
</svg>
1827
</a>
1928
);
20-
};
29+
}

packages/docsearch-react/src/DocSearch.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ import type {
1515
} from './types';
1616
import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents';
1717

18+
import type { ButtonTranslations, ModalTranslations } from '.';
19+
20+
export type DocSearchTranslations = Partial<{
21+
button: ButtonTranslations;
22+
modal: ModalTranslations;
23+
}>;
24+
1825
export interface DocSearchProps {
1926
appId?: string;
2027
apiKey: string;
@@ -33,6 +40,7 @@ export interface DocSearchProps {
3340
disableUserPersonalization?: boolean;
3441
initialQuery?: string;
3542
navigator?: AutocompleteOptions<InternalDocSearchHit>['navigator'];
43+
translations?: DocSearchTranslations;
3644
}
3745

3846
export function DocSearch(props: DocSearchProps) {
@@ -68,14 +76,19 @@ export function DocSearch(props: DocSearchProps) {
6876

6977
return (
7078
<>
71-
<DocSearchButton ref={searchButtonRef} onClick={onOpen} />
79+
<DocSearchButton
80+
ref={searchButtonRef}
81+
translations={props?.translations?.button}
82+
onClick={onOpen}
83+
/>
7284

7385
{isOpen &&
7486
createPortal(
7587
<DocSearchModal
7688
{...props}
7789
initialScrollY={window.scrollY}
7890
initialQuery={initialQuery}
91+
translations={props?.translations?.modal}
7992
onClose={onClose}
8093
/>,
8194
document.body

packages/docsearch-react/src/DocSearchButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import React, { useMemo } from 'react';
33
import { ControlKeyIcon } from './icons/ControlKeyIcon';
44
import { SearchIcon } from './icons/SearchIcon';
55

6-
type Translations = Partial<{
6+
export type ButtonTranslations = Partial<{
77
buttonText: string;
88
buttonAriaLabel: string;
99
}>;
1010

1111
export type DocSearchButtonProps = React.ComponentProps<'button'> & {
12-
translations?: Translations;
12+
translations?: ButtonTranslations;
1313
};
1414

1515
const ACTION_KEY_DEFAULT = 'Ctrl' as const;

packages/docsearch-react/src/DocSearchModal.tsx

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ import React from 'react';
44

55
import { MAX_QUERY_SIZE } from './constants';
66
import type { DocSearchProps } from './DocSearch';
7+
import type { FooterTranslations } from './Footer';
78
import { Footer } from './Footer';
89
import { Hit } from './Hit';
10+
import type { ScreenStateTranslations } from './ScreenState';
911
import { ScreenState } from './ScreenState';
12+
import type { SearchBoxTranslations } from './SearchBox';
1013
import { SearchBox } from './SearchBox';
1114
import { createStoredSearches } from './stored-searches';
1215
import type {
@@ -19,10 +22,17 @@ import { useTouchEvents } from './useTouchEvents';
1922
import { useTrapFocus } from './useTrapFocus';
2023
import { groupBy, identity, noop, removeHighlightTags } from './utils';
2124

22-
export interface DocSearchModalProps extends DocSearchProps {
25+
export type ModalTranslations = Partial<{
26+
searchBox: SearchBoxTranslations;
27+
footer: FooterTranslations;
28+
}> &
29+
ScreenStateTranslations;
30+
31+
export type DocSearchModalProps = DocSearchProps & {
2332
initialScrollY: number;
2433
onClose?: () => void;
25-
}
34+
translations?: ModalTranslations;
35+
};
2636

2737
export function DocSearchModal({
2838
appId = 'BH4D9OD16A',
@@ -39,7 +49,13 @@ export function DocSearchModal({
3949
transformSearchClient = identity,
4050
disableUserPersonalization = false,
4151
initialQuery: initialQueryFromProp = '',
52+
translations = {},
4253
}: DocSearchModalProps) {
54+
const {
55+
footer: footerTranslations,
56+
searchBox: searchBoxTranslations,
57+
...screenStateTranslations
58+
} = translations;
4359
const [state, setState] = React.useState<
4460
AutocompleteState<InternalDocSearchHit>
4561
>({
@@ -127,7 +143,6 @@ export function DocSearchModal({
127143
onStateChange(props) {
128144
setState(props.state);
129145
},
130-
131146
getSources({ query, state: sourcesState, setContext, setStatus }) {
132147
if (!query) {
133148
if (disableUserPersonalization) {
@@ -397,6 +412,7 @@ export function DocSearchModal({
397412
Boolean(initialQuery) &&
398413
initialQuery === initialQueryFromSelection
399414
}
415+
translations={searchBoxTranslations}
400416
onClose={onClose}
401417
/>
402418
</header>
@@ -412,6 +428,7 @@ export function DocSearchModal({
412428
recentSearches={recentSearches}
413429
favoriteSearches={favoriteSearches}
414430
inputRef={inputRef}
431+
translations={screenStateTranslations}
415432
onItemClick={(item) => {
416433
saveRecentSearch(item);
417434
onClose();
@@ -420,7 +437,7 @@ export function DocSearchModal({
420437
</div>
421438

422439
<footer className="DocSearch-Footer">
423-
<Footer />
440+
<Footer translations={footerTranslations} />
424441
</footer>
425442
</div>
426443
</div>

packages/docsearch-react/src/ErrorScreen.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,27 @@ import React from 'react';
22

33
import { ErrorIcon } from './icons';
44

5-
export function ErrorScreen() {
5+
export type ErrorScreenTranslations = Partial<{
6+
titleText: string;
7+
helpText: string;
8+
}>;
9+
10+
type ErrorScreenProps = {
11+
translations?: ErrorScreenTranslations;
12+
};
13+
14+
export function ErrorScreen({ translations = {} }: ErrorScreenProps) {
15+
const {
16+
titleText = 'Unable to fetch results',
17+
helpText = 'You might want to check your network connection.',
18+
} = translations;
619
return (
720
<div className="DocSearch-ErrorScreen">
821
<div className="DocSearch-Screen-Icon">
922
<ErrorIcon />
1023
</div>
11-
<p className="DocSearch-Title">Unable to fetch results</p>
12-
<p className="DocSearch-Help">
13-
You might want to check your network connection.
14-
</p>
24+
<p className="DocSearch-Title">{titleText}</p>
25+
<p className="DocSearch-Help">{helpText}</p>
1526
</div>
1627
);
1728
}

0 commit comments

Comments
 (0)