Skip to content

Commit b030db1

Browse files
veroglezveroglez
committed
feat(@clayui/language-picker): LPD-45714 Export component as LanguagePicker
1 parent 35025a8 commit b030db1

File tree

5 files changed

+33
-40
lines changed

5 files changed

+33
-40
lines changed

‎packages/clay-core/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export {Picker, Option} from './picker';
2424
export {FocusTrap} from './focus-trap';
2525
export {Nav} from './nav';
2626
export {Body, Cell, Head, Row, Table} from './table';
27+
export {LanguagePicker} from './language-picker';
2728

2829
// Experimental components
2930
export * as __EXPERIMENTAL_MENU from './drop-down';

‎packages/clay-core/src/language-picker/__tests__/__snapshots__/index.tsx.snap

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`ClayLanguagePicker renders 1`] = `
3+
exports[`LanguagePicker renders 1`] = `
44
<div>
55
<button
66
aria-activedescendant=""
@@ -29,7 +29,7 @@ exports[`ClayLanguagePicker renders 1`] = `
2929
</div>
3030
`;
3131

32-
exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
32+
exports[`LanguagePicker renders a class name for the trigger 1`] = `
3333
<div>
3434
<button
3535
aria-activedescendant=""
@@ -58,7 +58,7 @@ exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
5858
</div>
5959
`;
6060

61-
exports[`ClayLanguagePicker renders a small picker 1`] = `
61+
exports[`LanguagePicker renders a small picker 1`] = `
6262
<div>
6363
<button
6464
aria-activedescendant=""
@@ -87,7 +87,7 @@ exports[`ClayLanguagePicker renders a small picker 1`] = `
8787
</div>
8888
`;
8989

90-
exports[`ClayLanguagePicker renders hidding the trigger text 1`] = `
90+
exports[`LanguagePicker renders hidding the trigger text 1`] = `
9191
<div>
9292
<button
9393
aria-activedescendant=""
@@ -115,7 +115,7 @@ exports[`ClayLanguagePicker renders hidding the trigger text 1`] = `
115115
</div>
116116
`;
117117

118-
exports[`ClayLanguagePicker renders the picker with id 1`] = `
118+
exports[`LanguagePicker renders the picker with id 1`] = `
119119
<div>
120120
<button
121121
aria-activedescendant=""
@@ -145,7 +145,7 @@ exports[`ClayLanguagePicker renders the picker with id 1`] = `
145145
</div>
146146
`;
147147

148-
exports[`ClayLanguagePicker renders with a default selected locale 1`] = `
148+
exports[`LanguagePicker renders with a default selected locale 1`] = `
149149
<div>
150150
<button
151151
aria-activedescendant=""
@@ -174,7 +174,7 @@ exports[`ClayLanguagePicker renders with a default selected locale 1`] = `
174174
</div>
175175
`;
176176

177-
exports[`ClayLanguagePicker renders with a selected locale 1`] = `
177+
exports[`LanguagePicker renders with a selected locale 1`] = `
178178
<div>
179179
<button
180180
aria-activedescendant=""
@@ -203,7 +203,7 @@ exports[`ClayLanguagePicker renders with a selected locale 1`] = `
203203
</div>
204204
`;
205205

206-
exports[`ClayLanguagePicker renders with custom labels 1`] = `
206+
exports[`LanguagePicker renders with custom labels 1`] = `
207207
<div>
208208
<button
209209
aria-activedescendant=""
@@ -232,7 +232,7 @@ exports[`ClayLanguagePicker renders with custom labels 1`] = `
232232
</div>
233233
`;
234234

235-
exports[`ClayLanguagePicker renders with translations 1`] = `
235+
exports[`LanguagePicker renders with translations 1`] = `
236236
<div>
237237
<button
238238
aria-activedescendant=""

‎packages/clay-core/src/language-picker/__tests__/index.tsx

+15-19
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* SPDX-License-Identifier: BSD-3-Clause
1010
*/
1111

12-
import ClayLanguagePicker from '..';
12+
import {LanguagePicker} from '..';
1313
import {cleanup, fireEvent, render, screen} from '@testing-library/react';
1414
import React from 'react';
1515

@@ -42,20 +42,20 @@ const locales = [
4242

4343
const onSelectedLocaleChange = jest.fn(() => null);
4444

45-
describe('ClayLanguagePicker', () => {
45+
describe('LanguagePicker', () => {
4646
afterEach(cleanup);
4747

4848
it('renders', () => {
4949
const {container} = render(
50-
<ClayLanguagePicker locales={locales} spritemap="/path/to/svg" />
50+
<LanguagePicker locales={locales} spritemap="/path/to/svg" />
5151
);
5252

5353
expect(container).toMatchSnapshot();
5454
});
5555

5656
it('renders with a default selected locale', () => {
5757
const {container} = render(
58-
<ClayLanguagePicker
58+
<LanguagePicker
5959
classNamesTrigger="trigger-class"
6060
defaultSelectedLocaleId={locales[1]!.id}
6161
locales={locales}
@@ -68,7 +68,7 @@ describe('ClayLanguagePicker', () => {
6868

6969
it('renders with a selected locale', () => {
7070
const {container} = render(
71-
<ClayLanguagePicker
71+
<LanguagePicker
7272
classNamesTrigger="trigger-class"
7373
defaultSelectedLocaleId={locales[2]!.id}
7474
locales={locales}
@@ -81,7 +81,7 @@ describe('ClayLanguagePicker', () => {
8181

8282
it('renders a class name for the trigger', () => {
8383
const {container} = render(
84-
<ClayLanguagePicker
84+
<LanguagePicker
8585
classNamesTrigger="trigger-class"
8686
locales={locales}
8787
spritemap="/path/to/svg"
@@ -93,7 +93,7 @@ describe('ClayLanguagePicker', () => {
9393

9494
it('renders the picker with id', () => {
9595
const {container} = render(
96-
<ClayLanguagePicker
96+
<LanguagePicker
9797
id="pickerId"
9898
locales={locales}
9999
spritemap="/path/to/svg"
@@ -105,7 +105,7 @@ describe('ClayLanguagePicker', () => {
105105

106106
it('renders with custom labels', () => {
107107
const {container} = render(
108-
<ClayLanguagePicker
108+
<LanguagePicker
109109
locales={locales}
110110
messages={{
111111
default: 'Default Label',
@@ -124,19 +124,15 @@ describe('ClayLanguagePicker', () => {
124124

125125
it('renders a small picker', () => {
126126
const {container} = render(
127-
<ClayLanguagePicker
128-
locales={locales}
129-
small
130-
spritemap="/path/to/svg"
131-
/>
127+
<LanguagePicker locales={locales} small spritemap="/path/to/svg" />
132128
);
133129

134130
expect(container).toMatchSnapshot();
135131
});
136132

137133
it('renders with translations', () => {
138134
const {container} = render(
139-
<ClayLanguagePicker
135+
<LanguagePicker
140136
locales={locales}
141137
spritemap="/path/to/svg"
142138
translations={{
@@ -151,7 +147,7 @@ describe('ClayLanguagePicker', () => {
151147

152148
it('renders hidding the trigger text', () => {
153149
const {container} = render(
154-
<ClayLanguagePicker
150+
<LanguagePicker
155151
hideTriggerText
156152
locales={locales}
157153
spritemap="/path/to/svg"
@@ -163,7 +159,7 @@ describe('ClayLanguagePicker', () => {
163159

164160
it('renders the Default label in the correct default locale', () => {
165161
render(
166-
<ClayLanguagePicker
162+
<LanguagePicker
167163
defaultLocaleId="nl_NL"
168164
locales={locales}
169165
spritemap="/path/to/svg"
@@ -183,7 +179,7 @@ describe('ClayLanguagePicker', () => {
183179

184180
it('renders different labels for translations', () => {
185181
render(
186-
<ClayLanguagePicker
182+
<LanguagePicker
187183
locales={locales}
188184
spritemap="/path/to/svg"
189185
translations={{
@@ -208,7 +204,7 @@ describe('ClayLanguagePicker', () => {
208204

209205
it('calls onSelectedLocaleChange when a language is selected', () => {
210206
render(
211-
<ClayLanguagePicker
207+
<LanguagePicker
212208
locales={locales}
213209
onSelectedLocaleChange={onSelectedLocaleChange}
214210
spritemap="/path/to/svg"
@@ -226,7 +222,7 @@ describe('ClayLanguagePicker', () => {
226222
const onActiveChange = jest.fn(() => null);
227223

228224
render(
229-
<ClayLanguagePicker
225+
<LanguagePicker
230226
locales={locales}
231227
onActiveChange={onActiveChange}
232228
spritemap="/path/to/svg"

‎packages/clay-core/src/language-picker/index.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
2+
* SPDX-FileCopyrightText: © 2025 Liferay, Inc. <https://liferay.com>
33
* SPDX-License-Identifier: BSD-3-Clause
44
*/
55

@@ -198,7 +198,7 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
198198

199199
Trigger.displayName = 'Trigger';
200200

201-
const ClayLanguagePicker = ({
201+
export function LanguagePicker({
202202
active,
203203
classNamesTrigger,
204204
defaultActive = false,
@@ -221,7 +221,7 @@ const ClayLanguagePicker = ({
221221
small,
222222
spritemap,
223223
translations = {},
224-
}: Props) => {
224+
}: Props) {
225225
const hasTranslations = Object.keys(translations).length;
226226
const selectedLocale = locales.find(({id}) => id === selectedLocaleId);
227227

@@ -306,8 +306,4 @@ const ClayLanguagePicker = ({
306306
}}
307307
</Picker>
308308
);
309-
};
310-
311-
ClayLanguagePicker.displayName = 'ClayLanguagePicker';
312-
313-
export default ClayLanguagePicker;
309+
}

‎packages/clay-core/stories/LanguagePicker.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55

66
import React, {useState} from 'react';
77

8-
import ClayLanguagePicker from '../src/language-picker';
8+
import {LanguagePicker} from '../src/language-picker';
99

1010
export default {
11-
component: ClayLanguagePicker,
11+
component: LanguagePicker,
1212
title: 'Design System/Components/LanguagePicker',
1313
};
1414

@@ -45,7 +45,7 @@ export const Default = (args: any) => {
4545
);
4646

4747
return (
48-
<ClayLanguagePicker
48+
<LanguagePicker
4949
hideTriggerText={args.hideTriggerText}
5050
id="languagePicker"
5151
locales={locales}
@@ -71,7 +71,7 @@ export const LanguagePickerWithTranslations = (args: any) => {
7171
};
7272

7373
return (
74-
<ClayLanguagePicker
74+
<LanguagePicker
7575
hideTriggerText={args.hideTriggerText}
7676
id="languagePicker"
7777
locales={locales}

0 commit comments

Comments
 (0)