Merge pull request #186 from 5app/185-time-component-localisation

feat: localisation time component, #185

src/Time/README.stories.mdx

@@ -46,6 +46,19 @@ The component auto-updates to keep the time accurate without requiring a page re
 	<Time dateTime="1981-05-12" />
 </Canvas>
 
+### DE locale
+<Canvas>
+	<Time dateTime="2019-08-24T13:30:00Z" systemTime="2019-08-29T12:00:00Z" locale="de-DE" />
+</Canvas>
+
+<Canvas>
+	<Time dateTime="2019-01-24T13:30:00Z" systemTime="2019-08-29T12:00:00Z" locale="de-DE"/>
+</Canvas>
+
+<Canvas>
+	<Time dateTime="1981-05-12"  locale="de-DE" />
+</Canvas>
+
 ## Invalid examples
 
 <Canvas>

src/Time/getDateString.js

@@ -16,10 +16,18 @@ function date(d) {
 
 function getDateString({
 	dateTime,
-	locale,
+	locale = navigator.language,
 	systemOffset = 0,
 	readoutFunctions = {},
 }) {
+	// Default hourCycle value
+	let hourCycle = 'h24';
+	const hourCycle12Languages = ['en-GB', 'en-US', 'es-ES'];
+	if (hourCycle12Languages.includes(locale)) {
+		// Set hourCycle to 12 for languages for which we want to display AM / PM
+		hourCycle = 'h12';
+	}
+
 	// Set default readout functions
 	const {
 		secondsAgoReadout = count =>
@@ -61,12 +69,12 @@ function getDateString({
 		const mins = parseInt(offset / ONE_MINUTE);
 		dateString = minutesAgoReadout(mins);
 	}
-	// Occcured today...
+	// Occured today...
 	else if (offset < ms_today) {
 		// Number of ms until end of the day...
 		delay = ONE_DAY - ms_today;
 		dateString = new Intl.DateTimeFormat(locale, {
-			hourCycle: 'h12',
+			hourCycle,
 			hour: 'numeric',
 			minute: 'numeric',
 		}).format(time);
@@ -78,7 +86,7 @@ function getDateString({
 		// Get day
 		dateString = new Intl.DateTimeFormat(locale, {
 			weekday: 'short',
-			hourCycle: 'h12',
+			hourCycle,
 			hour: 'numeric',
 		}).format(time);
 	} else if (time.getYear() === systemtime.getYear()) {