Skip to content

Commit ac8ff55

Browse files
TheSummTheSumm
committed
Add German language support
1 parent 3378152 commit ac8ff55

File tree

6 files changed

+167
-14
lines changed

6 files changed

+167
-14
lines changed

‎README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,17 @@ This is the wrapper component that creates the vertical timeline.
2929

3030
- Props
3131

32-
| name | Type | Required | Values Allowed | default values | Description |
33-
| ---------- | ------ | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
34-
| theme | object | false | colors | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components |
35-
| lang | node | false | `en` or `es` | `en` | Change the language `from` and `to` texts and change the format in the dates |
36-
| dateFormat | string | false | `L`, `l` or `ll` | `L` | Change the presentation format of dates |
32+
| name | Type | Required | Values Allowed | default values | Description |
33+
| ---------- | ------ | -------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
34+
| theme | object | false | colors | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components |
35+
| lang | node | false | `en`, `es` or `de` | `en` | Change the language `from` and `to` texts and change the format in the dates |
36+
| dateFormat | string | false | `L`, `l` or `ll` | `L` | Change the presentation format of dates |
3737

3838
`dateFormat`: Receive only one of three options. (The options are same the [moment.js](https://momentjs.com/) using).
3939

40-
- The option `L` will return a date like `MM/DD/YYYY` (in english) or `DD/MM/YYYY` (in spanish).
41-
- The option `l` will return a date like `M/D/YYYY` (in english) or `D/M/YYYY` (in spanish).
42-
- The option `ll` will return a date like `MMM DD, YYYY` (in english) or `DD de MMM, YYYY` (in spanish).
40+
- The option `L` will return a date like `MM/DD/YYYY` (in English), `DD/MM/YYYY` (in Spanish) `DD.MM.YYYY` (in German).
41+
- The option `l` will return a date like `M/D/YYYY` (in English), `D/M/YYYY` (in Spanish) `D.M.YYYY` (in German).
42+
- The option `ll` will return a date like `MMM DD, YYYY` (in English), `DD de MMM, YYYY` (in Spanish) `DD. MMM YYYY` (in German).
4343

4444
### Container
4545

‎src/components/timeline/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Timeline.defaultProps = {
3535

3636
Timeline.propTypes = {
3737
theme: shape({}),
38-
lang: oneOf(['es', 'en']),
38+
lang: oneOf(['es', 'en', 'de']),
3939
dateFormat: oneOf(['L', 'l', 'll']),
4040
children: oneOfType([arrayOf(node), node]).isRequired,
4141
};

‎src/config/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,20 @@ export const monthArray = {
4141
'Nov',
4242
'Dec',
4343
],
44+
de: [
45+
'Jan.',
46+
'Feb.',
47+
'März',
48+
'Apr.',
49+
'Mai.',
50+
'Juni',
51+
'Juli',
52+
'Aug.',
53+
'Sep.',
54+
'Okt.',
55+
'Nov.',
56+
'Dez.',
57+
],
4458
};
4559

4660
export const mapText = {
@@ -52,4 +66,8 @@ export const mapText = {
5266
from: 'Desde',
5367
to: 'Hasta',
5468
},
69+
de: {
70+
from: 'Von',
71+
to: 'Bis',
72+
},
5573
};

‎src/helpers/transform-date.helper.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,39 @@ export const transformDate = ({ date, lang, type }) => {
1616
? `${month ? `${completeWith0(month)}/` : ''}${
1717
day ? `${completeWith0(day)}/` : ''
1818
}${year}`
19-
: `${day ? `${completeWith0(day)}/` : ''}${
19+
: lang === 'es'
20+
? `${day ? `${completeWith0(day)}/` : ''}${
2021
month ? `${completeWith0(month)}/` : ''
21-
}${year}`;
22+
}${year}`
23+
: /* lang === 'de' */
24+
`${
25+
day && month
26+
? `${completeWith0(day)}.${completeWith0(month)}.${year}`
27+
: `${month ? `${completeWith0(month)}/` : ''}${year}`
28+
}`;
2229
case 'l':
2330
return lang === 'en'
2431
? `${month ? `${month}/` : ''}${day ? `${day}/` : ''}${year}`
25-
: `${day ? `${day}/` : ''}${month ? `${month}/` : ''}${year}`;
32+
: lang === 'es'
33+
? `${day ? `${day}/` : ''}${month ? `${month}/` : ''}${year}`
34+
: /* lang === 'de' */
35+
`${
36+
day && month
37+
? `${day}.${month}.${year}`
38+
: `${month ? `${month}/` : ''}${year}`
39+
}`;
2640
case 'll':
2741
return lang === 'en'
2842
? `${month ? `${monthArray[lang][month - 1]}` : ''}${
2943
day ? ` ${completeWith0(day)}` : ''
3044
}${day || month ? ', ' : ''}${year}`
31-
: `${day ? `${day} de ` : ''}${
45+
: lang === 'es'
46+
? `${day ? `${day} de ` : ''}${
3247
month ? `${monthArray[lang][month - 1]}, ` : ''
48+
}${year}`
49+
: /* lang === 'de' */
50+
`${day ? `${day}. ` : ''}${
51+
month ? `${monthArray[lang][month - 1]} ` : ''
3352
}${year}`;
3453
}
3554
};
@@ -45,4 +64,9 @@ export const mapDate = {
4564
l: (date) => transformDate({ date, lang: 'es', type: 'l' }),
4665
ll: (date) => transformDate({ date, lang: 'es', type: 'll' }),
4766
},
67+
de: {
68+
L: (date) => transformDate({ date, lang: 'de', type: 'L' }),
69+
l: (date) => transformDate({ date, lang: 'de', type: 'l' }),
70+
ll: (date) => transformDate({ date, lang: 'de', type: 'll' }),
71+
},
4872
};

‎test/components/year-content.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe('<YearContent />', () => {
4242
expect(wrapper.find('span').text()).toEqual('From');
4343

4444
expect(wrapper.find('time')).toHaveLength(2);
45-
expect(wrapper.find('time').text().includes('2020')).toBeTruthy();
45+
expect(wrapper.find('time').text().includes('2021')).toBeTruthy();
4646
expect(wrapper.find('time').text().includes('08/21/2019')).toBeTruthy();
4747
});
4848

‎test/helpers/transform-date.helper.spec.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,93 @@ describe('Helpers', () => {
195195
});
196196
});
197197
});
198+
199+
describe('[lang = de]', () => {
200+
const lang = 'de';
201+
202+
describe('[type = L]', () => {
203+
const type = 'L';
204+
205+
it('should transform date with a format like DD.MM.YYYY', () => {
206+
const date = '2020/10/31';
207+
208+
const result = transformDate({ date, lang, type });
209+
expect(result).toEqual('31.10.2020');
210+
});
211+
212+
it('should transform date with a format like MM/YYYY', () => {
213+
const date = '2020/10';
214+
215+
const result = transformDate({ date, lang, type });
216+
expect(result).toEqual('10/2020');
217+
});
218+
219+
it('should transform date with a format like YYYY', () => {
220+
const date = '2020';
221+
222+
const result = transformDate({ date, lang, type });
223+
expect(result).toEqual('2020');
224+
});
225+
});
226+
227+
describe('[type = l]', () => {
228+
const type = 'l';
229+
230+
it('should transform date with a format like D.M.YYYY', () => {
231+
const dateOne = '2020/09/09';
232+
const dateTwo = '2020/12/31';
233+
234+
const result = transformDate({ date: dateOne, lang, type });
235+
expect(result).toEqual('9.9.2020');
236+
237+
const resultTwo = transformDate({ date: dateTwo, lang, type });
238+
expect(resultTwo).toEqual('31.12.2020');
239+
});
240+
241+
it('should transform date with a format like M/YYYY', () => {
242+
const dateOne = '2020/09';
243+
const dateTwo = '2020/12';
244+
245+
const result = transformDate({ date: dateOne, lang, type });
246+
expect(result).toEqual('9/2020');
247+
248+
const resultTwo = transformDate({ date: dateTwo, lang, type });
249+
expect(resultTwo).toEqual('12/2020');
250+
});
251+
252+
it('should transform date with a format like YYYY', () => {
253+
const date = '2020';
254+
255+
const result = transformDate({ date, lang, type });
256+
expect(result).toEqual('2020');
257+
});
258+
});
259+
260+
describe('[type = ll]', () => {
261+
const type = 'll';
262+
263+
it('should transform date with a format like DD. MMM. YYYY', () => {
264+
const date = '2020/08/20';
265+
266+
const result = transformDate({ date, lang, type });
267+
expect(result).toEqual('20. Aug. 2020');
268+
});
269+
270+
it('should transform date with a format like MMM. YYYY', () => {
271+
const date = '2020/08';
272+
273+
const result = transformDate({ date, lang, type });
274+
expect(result).toEqual('Aug. 2020');
275+
});
276+
277+
it('should transform date with a format like YYYY', () => {
278+
const date = '2020';
279+
280+
const result = transformDate({ date, lang, type });
281+
expect(result).toEqual('2020');
282+
});
283+
});
284+
});
198285
});
199286

200287
describe('mapDate hashmap', () => {
@@ -245,5 +332,29 @@ describe('Helpers', () => {
245332

246333
expect(mapDate[lang][type](date)).toEqual('21 de Ago, 2020');
247334
});
335+
336+
it('LANG=de - TYPE=L', () => {
337+
const lang = 'de';
338+
const type = 'L';
339+
const date = '2020/08/21';
340+
341+
expect(mapDate[lang][type](date)).toEqual('21.08.2020');
342+
});
343+
344+
it('LANG=de - TYPE=l', () => {
345+
const lang = 'de';
346+
const type = 'l';
347+
const date = '2020/08/21';
348+
349+
expect(mapDate[lang][type](date)).toEqual('21.8.2020');
350+
});
351+
352+
it('LANG=de - TYPE=ll', () => {
353+
const lang = 'de';
354+
const type = 'll';
355+
const date = '2020/08/21';
356+
357+
expect(mapDate[lang][type](date)).toEqual('21. Aug. 2020');
358+
});
248359
});
249360
});

0 commit comments

Comments
 (0)