feat: New component ViewMoreText

src/ViewMoreText/README.mdx

@@ -0,0 +1,36 @@
+---
+name: ViewMoreText
+menu: Components
+---
+
+import {Playground, Props} from 'docz';
+
+import InlineList from '../InlineList';
+import ViewMoreText from './';
+
+# ViewMoreText
+
+Truncates a piece of text by a specified amount and displays a "View more" button at the end of it, which will reveal the rest of the text when clicked.
+
+The labels of the "View more" and "View less" buttons can be customised using the props `viewMoreLabel` and `viewLessLabel`.
+
+## Examples
+
+<Playground>
+	<ViewMoreText
+		content="This is a short example text with a disappointing reveal."
+		truncateBy={26}
+	/>
+	<br />
+	<br />
+	<ViewMoreText
+		content="Here comes a longer, tastier example. Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula."
+		truncateBy={150}
+		viewMoreLabel="Read more"
+		viewLessLabel="I don't care about any of that"
+	/>
+</Playground>
+
+## Props
+
+<Props of={ViewMoreText} />

src/ViewMoreText/index.js

@@ -0,0 +1,42 @@
+import React, {Fragment, useState} from 'react';
+import PropTypes from 'prop-types';
+
+import truncateText from '../utils/truncateText';
+import TextLink from '../TextLink';
+
+function ViewMoreText(props) {
+	const {
+		content,
+		truncateBy = 110,
+		viewMoreLabel = 'View more',
+		viewLessLabel = 'View less',
+	} = props;
+
+	const [showMore, setShowmore] = useState(false);
+
+	function toggleShowMore() {
+		setShowmore(prevState => !prevState);
+	}
+
+	const shouldTextBeTruncated = content && content.length > truncateBy;
+
+	return (
+		<Fragment>
+			{truncateText(content, showMore ? null : truncateBy)}{' '}
+			{shouldTextBeTruncated && (
+				<TextLink as="button" onClick={toggleShowMore}>
+					{showMore ? viewLessLabel : viewMoreLabel}
+				</TextLink>
+			)}
+		</Fragment>
+	);
+}
+
+ViewMoreText.propTypes = {
+	content: PropTypes.string.isRequired,
+	truncateBy: PropTypes.number,
+	viewMoreLabel: PropTypes.string,
+	viewLessLabel: PropTypes.string,
+};
+
+export default ViewMoreText;