Skip to content

Commit 884435a

Browse files
josephaxisajosephaxisa
committed
feat: localize QuickEmbed component
1 parent f3c5fc4 commit 884435a

File tree

9 files changed

+183
-10
lines changed

9 files changed

+183
-10
lines changed

‎packages/embed-components/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,26 @@
3434
},
3535
"homepage": "https://github.com/looker-open-source/sdk-codegen/tree/master/packages/embed-components",
3636
"devDependencies": {
37-
"redux-saga-tester": "^1.0.874",
37+
"@looker/components-test-utils": "^1.5.27",
3838
"@looker/sdk-node": "*",
3939
"@testing-library/react": "^11.2.7",
40-
"@looker/components-test-utils": "^1.5.27",
41-
"react-redux": "^7.2.9",
40+
"@testing-library/user-event": "^14.4.3",
4241
"@types/react-redux": "^7.1.25",
43-
"@testing-library/user-event": "^14.4.3"
42+
"react-redux": "^7.2.9",
43+
"redux-saga-tester": "^1.0.874"
4444
},
4545
"dependencies": {
4646
"@looker/components": "^4.1.3",
4747
"@looker/embed-services": "*",
48+
"@looker/i18n": "^1.0.0",
4849
"@looker/redux": "^0.0.1",
4950
"@looker/sdk": "*",
5051
"@looker/sdk-rtl": "*",
5152
"@reduxjs/toolkit": "^1.9.3",
5253
"@styled-icons/material-outlined": "^10.47.0",
5354
"react": "16.14.0",
5455
"react-dom": "16.14.0",
56+
"react-i18next": "11.8.15",
5557
"styled-components": "^5.3.1",
5658
"typed-redux-saga": "^1.5.0"
5759
},

‎packages/embed-components/src/QuickEmbed/QuickEmbed.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('QuickEmbed', () => {
9595
expect(
9696
screen.getByRole('button', { name: 'Copy Link' })
9797
).toBeInTheDocument()
98-
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
98+
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
9999
})
100100

101101
it('does not render theme selector for non-themable content', () => {

‎packages/embed-components/src/QuickEmbed/QuickEmbed.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,15 @@ import {
4040
} from '@looker/components'
4141
import { Link } from '@styled-icons/material-outlined'
4242
import { EmbedUrl } from '@looker/embed-services'
43+
import { useTranslation } from '../utils'
4344
import { useThemesStoreState, SelectTheme, useThemeActions } from '../Theme'
4445

4546
interface QuickEmbedProps {
4647
onClose: () => void
4748
}
4849

4950
export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
51+
const { t } = useTranslation('QuickEmbed')
5052
const service = new EmbedUrl()
5153
const [toggleValue, setToggle] = useState(false)
5254
const [embedUrl, setEmbedUrl] = useState<string>(service.embedUrl(false))
@@ -77,14 +79,16 @@ export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
7779
return (
7880
<Section padding="large">
7981
<Heading as="h3" fontWeight="medium">
80-
Get embed URL
82+
{t('Get embed URL')}
8183
</Heading>
8284

8385
<SpaceVertical pt="medium" pb="medium" gap="xsmall">
8486
{service.isThemable && (
8587
<>
8688
<Span fontWeight="normal" fontSize="xsmall">
87-
Apply theme to {service.contentType.toLocaleLowerCase()} URL
89+
{t(`Apply theme to contentType URL`, {
90+
contentType: service.contentType.toLocaleLowerCase(),
91+
})}
8892
</Span>
8993
<SelectTheme />
9094
</>
@@ -104,14 +108,14 @@ export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
104108

105109
<Space gap="xxsmall" fontWeight="normal" fontSize="small">
106110
<ToggleSwitch onChange={handleToggle} on={toggleValue} />
107-
Include current params in URL
111+
{t('Include current params in URL')}
108112
</Space>
109113

110114
<Space mt="large" between>
111115
<CopyToClipboard content={embedUrl}>
112-
<ButtonOutline iconBefore={<Link />}>Copy Link</ButtonOutline>
116+
<ButtonOutline iconBefore={<Link />}>{t('Copy Link')}</ButtonOutline>
113117
</CopyToClipboard>
114-
<Button onClick={onClose}>Cancel</Button>
118+
<Button onClick={onClose}>{t('Close')}</Button>
115119
</Space>
116120
</Section>
117121
)

‎packages/embed-components/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@
2626
export * from './GlobalStore'
2727
export * from './Theme'
2828
export * from './QuickEmbed'
29+
export * from './locales'

‎packages/embed-components/src/locales/index.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2023 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
export * from './resources/en'
27+
export * from './resources/it-IT'

‎packages/embed-components/src/locales/resources/en.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2023 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
import { en as componentsLocale } from '@looker/components'
27+
import { mergeLocaleObjects } from '@looker/i18n'
28+
29+
const resources = {
30+
QuickEmbed: {
31+
'Get embed URL': 'Get embed URL',
32+
'Apply theme to contentType URL': 'Apply theme to {{contentType}} URL',
33+
'Include current params in URL': 'Include current params in URL',
34+
'Copy Link': 'Copy Link',
35+
Close: 'Close',
36+
},
37+
}
38+
39+
export const en = mergeLocaleObjects([componentsLocale], 'en', resources)

‎packages/embed-components/src/locales/resources/it-IT.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2023 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
import { mergeLocaleObjects } from '@looker/i18n'
27+
import { itIT as componentsLocale } from '@looker/components'
28+
29+
const resources = {
30+
QuickEmbed: {
31+
'Get embed URL': 'Ottieni embed URL',
32+
'Apply theme to contentType URL': 'Applica il tema a {{contentType}} URL',
33+
'Include current params in URL': "Includi i parametri correntin nell'URL",
34+
'Copy Link': 'Copia Link',
35+
Close: 'Chiudi',
36+
},
37+
}
38+
39+
export const itIT = mergeLocaleObjects([componentsLocale], 'it-IT', resources)

‎packages/embed-components/src/utils/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2023 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
export * from './useTranslation'

‎packages/embed-components/src/utils/useTranslation.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2023 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
import type { Namespace, UseTranslationOptions } from 'react-i18next'
27+
import { useTranslationBase } from '@looker/i18n'
28+
import { en } from '../locales'
29+
30+
export const useTranslation = (
31+
ns?: Namespace,
32+
options?: UseTranslationOptions
33+
) => {
34+
return useTranslationBase(en, ns, options)
35+
}

0 commit comments

Comments
 (0)