Merge pull request #28 from TheSumm/lang-de

Proskynete · web-flow · commit a0ab59b7f5f4 · 2021-03-19T23:09:23.000-03:00
German language support
diff --git a/README.md b/README.md
@@ -29,17 +29,17 @@ This is the wrapper component that creates the vertical timeline.
 
 - Props
 
-| name       | Type   | Required | Values Allowed   | default values                                                                                                                                                        | Description                                                                  |
-| ---------- | ------ | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| theme      | object | false    | colors           | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components                                                 |
-| lang       | node   | false    | `en` or `es`     | `en`                                                                                                                                                                  | Change the language `from` and `to` texts and change the format in the dates |
-| dateFormat | string | false    | `L`, `l` or `ll` | `L`                                                                                                                                                                   | Change the presentation format of dates                                      |
+| name       | Type   | Required | Values Allowed     | default values                                                                                                                                                        | Description                                                                  |
+| ---------- | ------ | -------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| theme      | object | false    | colors             | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components                                                 |
+| lang       | node   | false    | `en`, `es` or `de` | `en`                                                                                                                                                                  | Change the language `from` and `to` texts and change the format in the dates |
+| dateFormat | string | false    | `L`, `l` or `ll`   | `L`                                                                                                                                                                   | Change the presentation format of dates                                      |
 
 `dateFormat`: Receive only one of three options. (The options are same the [moment.js](https://momentjs.com/) using).
 
-- The option `L` will return a date like `MM/DD/YYYY` (in english) or `DD/MM/YYYY` (in spanish).
-- The option `l` will return a date like `M/D/YYYY` (in english) or `D/M/YYYY` (in spanish).
-- The option `ll` will return a date like `MMM DD, YYYY` (in english) or `DD de MMM, YYYY` (in spanish).
+- The option `L` will return a date like `MM/DD/YYYY` (in English), `DD/MM/YYYY` (in Spanish) `DD.MM.YYYY` (in German).
+- The option `l` will return a date like `M/D/YYYY` (in English), `D/M/YYYY` (in Spanish) `D.M.YYYY` (in German).
+- The option `ll` will return a date like `MMM DD, YYYY` (in English), `DD de MMM, YYYY` (in Spanish) `DD. MMM YYYY` (in German).
 
 ### Container
 
diff --git a/src/components/timeline/index.js b/src/components/timeline/index.js
@@ -35,7 +35,7 @@ Timeline.defaultProps = {
 
 Timeline.propTypes = {
 	theme: shape({}),
-	lang: oneOf(['es', 'en']),
+	lang: oneOf(['es', 'en', 'de']),
 	dateFormat: oneOf(['L', 'l', 'll']),
 	children: oneOfType([arrayOf(node), node]).isRequired,
 };
diff --git a/src/config/index.js b/src/config/index.js
@@ -41,6 +41,20 @@ export const monthArray = {
 		'Nov',
 		'Dec',
 	],
+	de: [
+		'Jan.',
+		'Feb.',
+		'März',
+		'Apr.',
+		'Mai.',
+		'Juni',
+		'Juli',
+		'Aug.',
+		'Sep.',
+		'Okt.',
+		'Nov.',
+		'Dez.',
+	],
 };
 
 export const mapText = {
@@ -52,4 +66,8 @@ export const mapText = {
 		from: 'Desde',
 		to: 'Hasta',
 	},
+	de: {
+		from: 'Von',
+		to: 'Bis',
+	},
 };
diff --git a/src/helpers/transform-date.helper.js b/src/helpers/transform-date.helper.js
@@ -16,20 +16,39 @@ export const transformDate = ({ date, lang, type }) => {
 				? `${month ? `${completeWith0(month)}/` : ''}${
 						day ? `${completeWith0(day)}/` : ''
 				  }${year}`
-				: `${day ? `${completeWith0(day)}/` : ''}${
+				: lang === 'es'
+				? `${day ? `${completeWith0(day)}/` : ''}${
 						month ? `${completeWith0(month)}/` : ''
-				  }${year}`;
+				  }${year}`
+				: /* lang === 'de' */
+				  `${
+						day && month
+							? `${completeWith0(day)}.${completeWith0(month)}.${year}`
+							: `${month ? `${completeWith0(month)}/` : ''}${year}`
+				  }`;
 		case 'l':
 			return lang === 'en'
 				? `${month ? `${month}/` : ''}${day ? `${day}/` : ''}${year}`
-				: `${day ? `${day}/` : ''}${month ? `${month}/` : ''}${year}`;
+				: lang === 'es'
+				? `${day ? `${day}/` : ''}${month ? `${month}/` : ''}${year}`
+				: /* lang === 'de' */
+				  `${
+						day && month
+							? `${day}.${month}.${year}`
+							: `${month ? `${month}/` : ''}${year}`
+				  }`;
 		case 'll':
 			return lang === 'en'
 				? `${month ? `${monthArray[lang][month - 1]}` : ''}${
 						day ? ` ${completeWith0(day)}` : ''
 				  }${day || month ? ', ' : ''}${year}`
-				: `${day ? `${day} de ` : ''}${
+				: lang === 'es'
+				? `${day ? `${day} de ` : ''}${
 						month ? `${monthArray[lang][month - 1]}, ` : ''
+				  }${year}`
+				: /* lang === 'de' */
+				  `${day ? `${day}. ` : ''}${
+						month ? `${monthArray[lang][month - 1]} ` : ''
 				  }${year}`;
 	}
 };
@@ -45,4 +64,9 @@ export const mapDate = {
 		l: (date) => transformDate({ date, lang: 'es', type: 'l' }),
 		ll: (date) => transformDate({ date, lang: 'es', type: 'll' }),
 	},
+	de: {
+		L: (date) => transformDate({ date, lang: 'de', type: 'L' }),
+		l: (date) => transformDate({ date, lang: 'de', type: 'l' }),
+		ll: (date) => transformDate({ date, lang: 'de', type: 'll' }),
+	},
 };
diff --git a/test/components/__snapshots__/container.spec.js.snap b/test/components/__snapshots__/container.spec.js.snap
@@ -2,13 +2,13 @@
 
 exports[`<Container /> should create Snapshot 1`] = `
 <section
-  className="sc-AxiKw eozVxv"
+  className="sc-dlfnbm cWAGMS"
 >
   <div>
     First child
   </div>
   <div
-    className="sc-AxhCb ccMvAG"
+    className="sc-hKgILt"
   >
     <div>
       Second child
diff --git a/test/components/__snapshots__/description.spec.js.snap b/test/components/__snapshots__/description.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Description /> should create Snapshot 1`] = `
 <li
-  className="sc-fzoLsD gWtHBF"
+  className="sc-jrAGrp erWYBT"
 >
   text
 </li>
diff --git a/test/components/__snapshots__/section.spec.js.snap b/test/components/__snapshots__/section.spec.js.snap
@@ -2,15 +2,15 @@
 
 exports[`<Section /> should create Snapshot 1`] = `
 <article
-  className="sc-AxheI kdvXAR"
+  className="sc-gKsewC eXtzIU"
 >
   <p
-    className="sc-Axmtr kHDhOq"
+    className="sc-iBPRYJ eQfaEM"
   >
     title
   </p>
   <ul
-    className="sc-AxmLO chzFoG"
+    className="sc-fubCfw eTAXIs"
   >
     <div>
       children
diff --git a/test/components/__snapshots__/timeline.spec.js.snap b/test/components/__snapshots__/timeline.spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`<Timeline /> should create Snapshot 1`] = `
 <div
-  className="sc-AxjAm bXdGBi"
+  className="sc-bdfBwQ iNuYTL"
 >
   <div
-    className="sc-AxirZ lhnuda"
+    className="sc-gsTCUz fONLjA"
   >
     <div>
       Child
diff --git a/test/components/__snapshots__/year-content.spec.js.snap b/test/components/__snapshots__/year-content.spec.js.snap
@@ -2,12 +2,12 @@
 
 exports[`<YearContent /> should create Snapshot 1`] = `
 <p
-  className="sc-AxhUy hwimqV"
+  className="sc-eCssSg eJxYfY"
   format="L"
   lang="en"
 >
   <span
-    className="sc-AxgMl jZSFGj"
+    className="sc-jSgupP hSlCmR"
   >
     From
   </span>
diff --git a/test/components/year-content.spec.js b/test/components/year-content.spec.js
@@ -42,7 +42,7 @@ describe('<YearContent />', () => {
 		expect(wrapper.find('span').text()).toEqual('From');
 
 		expect(wrapper.find('time')).toHaveLength(2);
-		expect(wrapper.find('time').text().includes('2020')).toBeTruthy();
+		expect(wrapper.find('time').text().includes('2021')).toBeTruthy();
 		expect(wrapper.find('time').text().includes('08/21/2019')).toBeTruthy();
 	});
 
diff --git a/test/helpers/transform-date.helper.spec.js b/test/helpers/transform-date.helper.spec.js
@@ -195,6 +195,93 @@ describe('Helpers', () => {
 				});
 			});
 		});
+
+		describe('[lang = de]', () => {
+			const lang = 'de';
+
+			describe('[type = L]', () => {
+				const type = 'L';
+
+				it('should transform date with a format like DD.MM.YYYY', () => {
+					const date = '2020/10/31';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('31.10.2020');
+				});
+
+				it('should transform date with a format like MM/YYYY', () => {
+					const date = '2020/10';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('10/2020');
+				});
+
+				it('should transform date with a format like YYYY', () => {
+					const date = '2020';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('2020');
+				});
+			});
+
+			describe('[type = l]', () => {
+				const type = 'l';
+
+				it('should transform date with a format like D.M.YYYY', () => {
+					const dateOne = '2020/09/09';
+					const dateTwo = '2020/12/31';
+
+					const result = transformDate({ date: dateOne, lang, type });
+					expect(result).toEqual('9.9.2020');
+
+					const resultTwo = transformDate({ date: dateTwo, lang, type });
+					expect(resultTwo).toEqual('31.12.2020');
+				});
+
+				it('should transform date with a format like M/YYYY', () => {
+					const dateOne = '2020/09';
+					const dateTwo = '2020/12';
+
+					const result = transformDate({ date: dateOne, lang, type });
+					expect(result).toEqual('9/2020');
+
+					const resultTwo = transformDate({ date: dateTwo, lang, type });
+					expect(resultTwo).toEqual('12/2020');
+				});
+
+				it('should transform date with a format like YYYY', () => {
+					const date = '2020';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('2020');
+				});
+			});
+
+			describe('[type = ll]', () => {
+				const type = 'll';
+
+				it('should transform date with a format like DD. MMM. YYYY', () => {
+					const date = '2020/08/20';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('20. Aug. 2020');
+				});
+
+				it('should transform date with a format like MMM. YYYY', () => {
+					const date = '2020/08';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('Aug. 2020');
+				});
+
+				it('should transform date with a format like YYYY', () => {
+					const date = '2020';
+
+					const result = transformDate({ date, lang, type });
+					expect(result).toEqual('2020');
+				});
+			});
+		});
 	});
 
 	describe('mapDate hashmap', () => {
@@ -245,5 +332,29 @@ describe('Helpers', () => {
 
 			expect(mapDate[lang][type](date)).toEqual('21 de Ago, 2020');
 		});
+
+		it('LANG=de - TYPE=L', () => {
+			const lang = 'de';
+			const type = 'L';
+			const date = '2020/08/21';
+
+			expect(mapDate[lang][type](date)).toEqual('21.08.2020');
+		});
+
+		it('LANG=de - TYPE=l', () => {
+			const lang = 'de';
+			const type = 'l';
+			const date = '2020/08/21';
+
+			expect(mapDate[lang][type](date)).toEqual('21.8.2020');
+		});
+
+		it('LANG=de - TYPE=ll', () => {
+			const lang = 'de';
+			const type = 'll';
+			const date = '2020/08/21';
+
+			expect(mapDate[lang][type](date)).toEqual('21. Aug. 2020');
+		});
 	});
 });

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`<Description /> should create Snapshot 1`] = `
`4`	`4`	`<li`
`5`		`- className="sc-fzoLsD gWtHBF"`
	`5`	`+ className="sc-jrAGrp erWYBT"`
`6`	`6`	`>`
`7`	`7`	`text`
`8`	`8`	`</li>`
Original file line number	Diff line number	Diff line change
`@@ -2,15 +2,15 @@`
`2`	`2`
`3`	`3`	exports[`<Section /> should create Snapshot 1`] = `
`4`	`4`	`<article`
`5`		`- className="sc-AxheI kdvXAR"`
	`5`	`+ className="sc-gKsewC eXtzIU"`
`6`	`6`	`>`
`7`	`7`	`<p`
`8`		`- className="sc-Axmtr kHDhOq"`
	`8`	`+ className="sc-iBPRYJ eQfaEM"`
`9`	`9`	`>`
`10`	`10`	`title`
`11`	`11`	`</p>`
`12`	`12`	`<ul`
`13`		`- className="sc-AxmLO chzFoG"`
	`13`	`+ className="sc-fubCfw eTAXIs"`
`14`	`14`	`>`
`15`	`15`	`<div>`
`16`	`16`	`children`
Original file line number	Diff line number	Diff line change
`@@ -2,10 +2,10 @@`
`2`	`2`
`3`	`3`	exports[`<Timeline /> should create Snapshot 1`] = `
`4`	`4`	`<div`
`5`		`- className="sc-AxjAm bXdGBi"`
	`5`	`+ className="sc-bdfBwQ iNuYTL"`
`6`	`6`	`>`
`7`	`7`	`<div`
`8`		`- className="sc-AxirZ lhnuda"`
	`8`	`+ className="sc-gsTCUz fONLjA"`
`9`	`9`	`>`
`10`	`10`	`<div>`
`11`	`11`	`Child`
Original file line number	Diff line number	Diff line change
`@@ -2,12 +2,12 @@`
`2`	`2`
`3`	`3`	exports[`<YearContent /> should create Snapshot 1`] = `
`4`	`4`	`<p`
`5`		`- className="sc-AxhUy hwimqV"`
	`5`	`+ className="sc-eCssSg eJxYfY"`
`6`	`6`	`format="L"`
`7`	`7`	`lang="en"`
`8`	`8`	`>`
`9`	`9`	`<span`
`10`		`- className="sc-AxgMl jZSFGj"`
	`10`	`+ className="sc-jSgupP hSlCmR"`
`11`	`11`	`>`
`12`	`12`	`From`
`13`	`13`	`</span>`