Skip to content

Commit 0777d79

Browse files
pat270pat270
authored
Merge pull request #5924 from veroglez/LPD-46156
docs(clayui.com): LPD-46156 Add API documentation
2 parents ec13b8b + 0b057ba commit 0777d79

File tree

5 files changed

+568
-411
lines changed

5 files changed

+568
-411
lines changed

‎clayui.com/static/sass-api/index.html

+127-406
Large diffs are not rendered by default.

‎packages/clay-core/docs/api-language-picker.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: 'Language Picker'
3+
description: 'A language picker is very similar to a dropdown visually but it let users select languages from the panel and then represent the selection in the button.'
4+
mainTabURL: 'docs/components/language-picker.html'
5+
---
6+
7+
## Language Picker
8+
9+
<div>[APITable "clay-core/src/language-picker/index.tsx"]</div>

‎packages/clay-core/docs/language-picker.js

+298
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
/**
2+
* SPDX-FileCopyrightText: © 2025 Liferay, Inc. <https://liferay.com>
3+
* SPDX-License-Identifier: BSD-3-Clause
4+
*/
5+
6+
import Editor from '$clayui.com/src/components/Editor';
7+
import {LanguagePicker} from '@clayui/core';
8+
import React from 'react';
9+
10+
const exampleImports = `import {LanguagePicker} from '@clayui/core';
11+
import React from 'react';`;
12+
13+
const exampleCode = `const SelectLanguage = () => {
14+
return (
15+
<div style={{width: 'fit-content'}}>
16+
<LanguagePicker locales={[
17+
{
18+
id: 'en_US',
19+
label: 'en-US',
20+
name: 'English (United States)',
21+
symbol: 'en-us',
22+
},
23+
{
24+
id: 'ar_SA',
25+
label: 'ar-SA',
26+
name: 'Arabic (Saudi Arabia)',
27+
symbol: 'ar-sa',
28+
},
29+
{
30+
id: 'ca_ES',
31+
label: 'ca-ES',
32+
name: 'Catalan (Spain)',
33+
symbol: 'ca-es',
34+
},
35+
{
36+
id: 'nl_NL',
37+
label: 'nl-NL',
38+
name: 'Dutch (Netherlands)',
39+
symbol: 'nl-nl',
40+
},
41+
{
42+
id: 'fi_FI',
43+
label: 'fi-FI',
44+
name: 'Finnish (Finland)',
45+
symbol: 'fi-fi',
46+
},
47+
{
48+
id: 'fr_FR',
49+
label: 'fr-FR',
50+
name: 'French (France)',
51+
symbol: 'fr-fr',
52+
},
53+
{
54+
id: 'de_DE',
55+
label: 'de-DE',
56+
name: 'German (Germany)',
57+
symbol: 'de-de',
58+
},
59+
{
60+
id: 'hu_HU',
61+
label: 'hu-HU',
62+
name: 'Hungarian (Hungary)',
63+
symbol: 'hu-hu',
64+
},
65+
]} />
66+
</div>
67+
);
68+
};
69+
70+
render(<SelectLanguage />)`;
71+
72+
const LanguagePickerExample = () => {
73+
const scope = {LanguagePicker};
74+
75+
return <Editor code={exampleCode} imports={exampleImports} scope={scope} />;
76+
};
77+
78+
const exampleLanguagesImports = `import {LanguagePicker} from '@clayui/core';
79+
import React from 'react';`;
80+
81+
const exampleLanguagesCode = `const SelectLanguage = () => {
82+
return (
83+
<div style={{width: 'fit-content'}}>
84+
<LanguagePicker locales={[
85+
{
86+
id: 'en_US',
87+
label: 'en-US',
88+
name: 'English (United States)',
89+
symbol: 'en-us',
90+
},
91+
{
92+
id: 'ar_SA',
93+
label: 'ar-SA',
94+
name: 'Arabic (Saudi Arabia)',
95+
symbol: 'ar-sa',
96+
},
97+
{
98+
id: 'ca_ES',
99+
label: 'ca-ES',
100+
name: 'Catalan (Spain)',
101+
symbol: 'ca-es',
102+
},
103+
{
104+
id: 'nl_NL',
105+
label: 'nl-NL',
106+
name: 'Dutch (Netherlands)',
107+
symbol: 'nl-nl',
108+
}
109+
]} />
110+
</div>
111+
);
112+
};
113+
114+
render(<SelectLanguage />)`;
115+
116+
const LanguagePickerLanguagesExample = () => {
117+
const scope = {LanguagePicker};
118+
119+
return (
120+
<Editor
121+
code={exampleLanguagesCode}
122+
imports={exampleLanguagesImports}
123+
scope={scope}
124+
/>
125+
);
126+
};
127+
128+
const exampleTranslationsImports = `import {LanguagePicker} from '@clayui/core';
129+
import React from 'react';`;
130+
131+
const exampleTranslationsCode = `const SelectLanguage = () => {
132+
const translations = {
133+
'ca-ES': {total: 4, translated: 2},
134+
'nl-NL': {total: 4, translated: 4},
135+
};
136+
137+
return (
138+
<div style={{width: 'fit-content'}}>
139+
<LanguagePicker
140+
locales={[
141+
{
142+
id: 'en_US',
143+
label: 'en-US',
144+
name: 'English (United States)',
145+
symbol: 'en-us',
146+
},
147+
{
148+
id: 'ar_SA',
149+
label: 'ar-SA',
150+
name: 'Arabic (Saudi Arabia)',
151+
symbol: 'ar-sa',
152+
},
153+
{
154+
id: 'ca_ES',
155+
label: 'ca-ES',
156+
name: 'Catalan (Spain)',
157+
symbol: 'ca-es',
158+
},
159+
{
160+
id: 'nl_NL',
161+
label: 'nl-NL',
162+
name: 'Dutch (Netherlands)',
163+
symbol: 'nl-nl',
164+
}
165+
]}
166+
translations={translations}
167+
/>
168+
</div>
169+
);
170+
};
171+
172+
render(<SelectLanguage />)`;
173+
174+
const LanguagePickerTranslationsExample = () => {
175+
const scope = {LanguagePicker};
176+
177+
return (
178+
<Editor
179+
code={exampleTranslationsCode}
180+
imports={exampleTranslationsImports}
181+
scope={scope}
182+
/>
183+
);
184+
};
185+
186+
const exampleSmallImports = `import {LanguagePicker} from '@clayui/core';
187+
import React from 'react';`;
188+
189+
const exampleSmallCode = `const SelectLanguage = () => {
190+
return (
191+
<div style={{width: 'fit-content'}}>
192+
<LanguagePicker
193+
locales={[
194+
{
195+
id: 'en_US',
196+
label: 'en-US',
197+
name: 'English (United States)',
198+
symbol: 'en-us',
199+
},
200+
{
201+
id: 'ar_SA',
202+
label: 'ar-SA',
203+
name: 'Arabic (Saudi Arabia)',
204+
symbol: 'ar-sa',
205+
},
206+
{
207+
id: 'ca_ES',
208+
label: 'ca-ES',
209+
name: 'Catalan (Spain)',
210+
symbol: 'ca-es',
211+
},
212+
{
213+
id: 'nl_NL',
214+
label: 'nl-NL',
215+
name: 'Dutch (Netherlands)',
216+
symbol: 'nl-nl',
217+
}
218+
]}
219+
small
220+
/>
221+
</div>
222+
);
223+
};
224+
225+
render(<SelectLanguage />)`;
226+
227+
const LanguagePickerSmallExample = () => {
228+
const scope = {LanguagePicker};
229+
230+
return (
231+
<Editor
232+
code={exampleSmallCode}
233+
imports={exampleSmallImports}
234+
scope={scope}
235+
/>
236+
);
237+
};
238+
239+
const exampleOnlyIconImports = `import {LanguagePicker} from '@clayui/core';
240+
import React from 'react';`;
241+
242+
const exampleOnlyIconCode = `const SelectLanguage = () => {
243+
return (
244+
<div style={{width: 'fit-content'}}>
245+
<LanguagePicker
246+
hideTriggerText
247+
locales={[
248+
{
249+
id: 'en_US',
250+
label: 'en-US',
251+
name: 'English (United States)',
252+
symbol: 'en-us',
253+
},
254+
{
255+
id: 'ar_SA',
256+
label: 'ar-SA',
257+
name: 'Arabic (Saudi Arabia)',
258+
symbol: 'ar-sa',
259+
},
260+
{
261+
id: 'ca_ES',
262+
label: 'ca-ES',
263+
name: 'Catalan (Spain)',
264+
symbol: 'ca-es',
265+
},
266+
{
267+
id: 'nl_NL',
268+
label: 'nl-NL',
269+
name: 'Dutch (Netherlands)',
270+
symbol: 'nl-nl',
271+
}
272+
]}
273+
/>
274+
</div>
275+
);
276+
};
277+
278+
render(<SelectLanguage />)`;
279+
280+
const LanguagePickerOnlyIconExample = () => {
281+
const scope = {LanguagePicker};
282+
283+
return (
284+
<Editor
285+
code={exampleOnlyIconCode}
286+
imports={exampleOnlyIconImports}
287+
scope={scope}
288+
/>
289+
);
290+
};
291+
292+
export {
293+
LanguagePickerExample,
294+
LanguagePickerLanguagesExample,
295+
LanguagePickerOnlyIconExample,
296+
LanguagePickerSmallExample,
297+
LanguagePickerTranslationsExample,
298+
};

0 commit comments

Comments
 (0)