From 4acde23692586a6f0c6825315330360267e94bb1 Mon Sep 17 00:00:00 2001
From: SarahHouben <sarahhouben@outlook.com>
Date: Thu, 3 Mar 2022 12:31:08 +0000
Subject: [PATCH 1/4] feat: adjust hourcycle for locale, #185

---
 src/Time/README.stories.mdx | 13 +++++++++++++
 src/Time/getDateString.js   | 16 ++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/Time/README.stories.mdx b/src/Time/README.stories.mdx
index 5fb23e2f1..b00f769dd 100644
--- a/src/Time/README.stories.mdx
+++ b/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>
diff --git a/src/Time/getDateString.js b/src/Time/getDateString.js
index 832332e70..2f81a12d3 100644
--- a/src/Time/getDateString.js
+++ b/src/Time/getDateString.js
@@ -16,11 +16,19 @@ function date(d) {
 
 function getDateString({
 	dateTime,
-	locale,
+	locale = 'en-GB',
 	systemOffset = 0,
 	readoutFunctions = {},
 }) {
+	let hourCycle = 'h24';
+	// Set of languages for which we want to display AM / PM
+	const hourCycle12Languages = ['en-GB', 'en-US', 'es-ES'];
+	if (hourCycle12Languages.includes(locale)) {
+		hourCycle = 'h12';
+	}
+
 	// Set default readout functions
+	// TODO: add localisation
 	const {
 		secondsAgoReadout = count =>
 			`${count} second${count > 1 ? 's' : ''} ago`,
@@ -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()) {

From 4caa673bfc2d117da65f336f70eaa618943109bf Mon Sep 17 00:00:00 2001
From: SarahHouben <sarahhouben@outlook.com>
Date: Thu, 3 Mar 2022 13:08:18 +0000
Subject: [PATCH 2/4] feat: add functions for label customisation, #185

---
 src/Time/getDateString.js | 14 ++++++++++----
 src/Time/index.js         | 16 +++++++++++++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/Time/getDateString.js b/src/Time/getDateString.js
index 2f81a12d3..88b77e394 100644
--- a/src/Time/getDateString.js
+++ b/src/Time/getDateString.js
@@ -19,21 +19,27 @@ function getDateString({
 	locale = 'en-GB',
 	systemOffset = 0,
 	readoutFunctions = {},
+	getMinReadoutLabel,
+	getSecReadoutLabel,
 }) {
+	// Default hourCycle value
 	let hourCycle = 'h24';
-	// Set of languages for which we want to display AM / PM
 	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
-	// TODO: add localisation
 	const {
 		secondsAgoReadout = count =>
-			`${count} second${count > 1 ? 's' : ''} ago`,
+			getSecReadoutLabel
+				? getSecReadoutLabel(count)
+				: `${count} second${count > 1 ? 's' : ''} ago`,
 		minutesAgoReadout = count =>
-			`${count} minute${count > 1 ? 's' : ''} ago`,
+			getMinReadoutLabel
+				? getMinReadoutLabel(count)
+				: `${count} minute${count > 1 ? 's' : ''} ago`,
 	} = readoutFunctions;
 
 	// Define the offset, how old is this...
diff --git a/src/Time/index.js b/src/Time/index.js
index 219b2eca1..c0976b845 100644
--- a/src/Time/index.js
+++ b/src/Time/index.js
@@ -9,7 +9,15 @@ function useForceUpdate() {
 	return forceUpdate;
 }
 
-function Time({dateTime, systemTime, readoutFunctions, locale, ...otherProps}) {
+function Time({
+	dateTime,
+	systemTime,
+	readoutFunctions,
+	locale,
+	getMinReadoutLabel,
+	getSecReadoutLabel,
+	...otherProps
+}) {
 	const forceUpdate = useForceUpdate();
 
 	// Offset system time with local time...
@@ -23,6 +31,8 @@ function Time({dateTime, systemTime, readoutFunctions, locale, ...otherProps}) {
 		dateTime,
 		locale,
 		systemOffset: systemOffset.current,
+		getMinReadoutLabel,
+		getSecReadoutLabel,
 	});
 
 	// Set the datestring
@@ -71,6 +81,10 @@ Time.propTypes = {
 		secondsAgoReadout: PropTypes.func,
 		minutesAgoReadout: PropTypes.func,
 	}),
+	/** Customise the minutes label, i.e. for localisation */
+	getMinReadoutLabel: PropTypes.func,
+	/** Customise the seconds label, i.e. for localisation */
+	getSecReadoutLabel: PropTypes.func,
 };
 
 export default Time;

From 7a4522932fcc261c9cee5122336b2ed0b2dac075 Mon Sep 17 00:00:00 2001
From: SarahHouben <sarahhouben@outlook.com>
Date: Thu, 3 Mar 2022 13:35:33 +0000
Subject: [PATCH 3/4] fix: revert readout functions, #185

---
 src/Time/getDateString.js | 10 ++--------
 src/Time/index.js         | 16 +---------------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/src/Time/getDateString.js b/src/Time/getDateString.js
index 88b77e394..7cf4700fc 100644
--- a/src/Time/getDateString.js
+++ b/src/Time/getDateString.js
@@ -19,8 +19,6 @@ function getDateString({
 	locale = 'en-GB',
 	systemOffset = 0,
 	readoutFunctions = {},
-	getMinReadoutLabel,
-	getSecReadoutLabel,
 }) {
 	// Default hourCycle value
 	let hourCycle = 'h24';
@@ -33,13 +31,9 @@ function getDateString({
 	// Set default readout functions
 	const {
 		secondsAgoReadout = count =>
-			getSecReadoutLabel
-				? getSecReadoutLabel(count)
-				: `${count} second${count > 1 ? 's' : ''} ago`,
+			`${count} second${count > 1 ? 's' : ''} ago`,
 		minutesAgoReadout = count =>
-			getMinReadoutLabel
-				? getMinReadoutLabel(count)
-				: `${count} minute${count > 1 ? 's' : ''} ago`,
+			`${count} minute${count > 1 ? 's' : ''} ago`,
 	} = readoutFunctions;
 
 	// Define the offset, how old is this...
diff --git a/src/Time/index.js b/src/Time/index.js
index c0976b845..219b2eca1 100644
--- a/src/Time/index.js
+++ b/src/Time/index.js
@@ -9,15 +9,7 @@ function useForceUpdate() {
 	return forceUpdate;
 }
 
-function Time({
-	dateTime,
-	systemTime,
-	readoutFunctions,
-	locale,
-	getMinReadoutLabel,
-	getSecReadoutLabel,
-	...otherProps
-}) {
+function Time({dateTime, systemTime, readoutFunctions, locale, ...otherProps}) {
 	const forceUpdate = useForceUpdate();
 
 	// Offset system time with local time...
@@ -31,8 +23,6 @@ function Time({
 		dateTime,
 		locale,
 		systemOffset: systemOffset.current,
-		getMinReadoutLabel,
-		getSecReadoutLabel,
 	});
 
 	// Set the datestring
@@ -81,10 +71,6 @@ Time.propTypes = {
 		secondsAgoReadout: PropTypes.func,
 		minutesAgoReadout: PropTypes.func,
 	}),
-	/** Customise the minutes label, i.e. for localisation */
-	getMinReadoutLabel: PropTypes.func,
-	/** Customise the seconds label, i.e. for localisation */
-	getSecReadoutLabel: PropTypes.func,
 };
 
 export default Time;

From 65da95e1859b84ff96daf8003fce69b4eecbbe61 Mon Sep 17 00:00:00 2001
From: SarahHouben <sarahhouben@outlook.com>
Date: Thu, 3 Mar 2022 14:03:57 +0000
Subject: [PATCH 4/4] fix: fix default locale, #185

---
 src/Time/getDateString.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Time/getDateString.js b/src/Time/getDateString.js
index 7cf4700fc..edd350aa2 100644
--- a/src/Time/getDateString.js
+++ b/src/Time/getDateString.js
@@ -16,7 +16,7 @@ function date(d) {
 
 function getDateString({
 	dateTime,
-	locale = 'en-GB',
+	locale = navigator.language,
 	systemOffset = 0,
 	readoutFunctions = {},
 }) {