feat: New Duration component

src/Duration/README.mdx

@@ -0,0 +1,27 @@
+---
+name: Duration
+menu: Components
+---
+
+import {Playground, Props} from 'docz';
+import Duration from './';
+
+# Duration
+
+A simple component for rendering a duration (e.g. of a video) in the format `m:s` or `h:m:s` with an accessible label.
+
+## Examples
+
+<Playground>
+	<Duration value={27} />
+	<br />
+	<Duration value={523} />
+	<br />
+	<Duration value={1104} />
+	<br />
+	<Duration value={7329} />
+</Playground>
+
+## Props
+
+<Props of={Duration} />

src/Duration/getDuration.js

@@ -0,0 +1,21 @@
+function getZeroPaddedRest(value, base) {
+	const remaining = value % base;
+	if (remaining < 10) {
+		return String(remaining).padStart(2, '0');
+	} else return remaining;
+}
+
+function getDuration(durationInSeconds) {
+	const hours = parseInt(durationInSeconds / (60 * 60));
+	let minutes = parseInt(durationInSeconds / 60);
+	minutes = hours ? getZeroPaddedRest(minutes, 60) : minutes;
+	const seconds = getZeroPaddedRest(durationInSeconds, 60);
+
+	return {
+		hours,
+		minutes,
+		seconds,
+	};
+}
+
+export default getDuration;

src/Duration/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import getDuration from './getDuration';
+
+function getDefaultLabel(minutes, hours) {
+	const addPluralS = count => (count === 1 ? '' : 's');
+
+	const readableMins = `${minutes} minute${addPluralS(minutes)}`;
+	if (hours) {
+		return `${hours} hour${addPluralS(minutes)}, ${readableMins}`;
+	} else return readableMins;
+}
+
+function Duration(props) {
+	const {value, getLabel, as: Component, ...otherProps} = props;
+	const {hours, minutes, seconds} = getDuration(value);
+
+	const duration = hours ? [hours, minutes, seconds] : [minutes, seconds];
+
+	return (
+		<Component
+			{...otherProps}
+			aria-label={getLabel(Number(minutes), Number(hours))}
+		>
+			{duration.join(':')}
+		</Component>
+	);
+}
+
+Duration.defaultProps = {
+	as: 'span',
+	getLabel: getDefaultLabel,
+};
+
+Duration.propTypes = {
+	/** Change the element rendered by the component */
+	as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+	/** Customise the accessible label, i.e. for localisation */
+	getLabel: PropTypes.func,
+	/** Duration in seconds */
+	value: PropTypes.number.isRequired,
+};
+
+export {getDuration};
+
+export default Duration;

src/index.js

@@ -9,6 +9,7 @@ export {default as Box} from './Box';
 export {default as Button} from './Button';
 export {default as ButtonCore} from './ButtonCore';
 export {default as CenterContent} from './CenterContent';
+export {default as Duration} from './Duration';
 export {default as Flex} from './Flex';
 export {default as Icon} from './Icon';
 export {default as InlineList} from './InlineList';