Display all variations of format (#14293)

It's useful to be able to see all the possible values of format, for
reference, rather than just a few examples.

Author: JamieB-gu

dotcom-rendering/src/devServer/docs/article.tsx

@@ -1,3 +1,9 @@
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '../../lib/articleFormat';
 import { Available } from './available';
 import { descriptionLinks } from './styles';
 
@@ -89,6 +95,28 @@ const Examples = () => (
 	</>
 );
 
+/**
+ * Joins all the `string` values of an enum into a single, comma-separated
+ * `string`.
+ *
+ * `ArticleDesign`, `ArticleDisplay` and the two variants of `ArticleTheme` are
+ * TypeScript enums. Their values contain both the `string` and `number`
+ * representations of the enum, but here we just want the `string`s, so we
+ * filter out the `number`s.
+ *
+ * https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings
+ */
+const formatValues = (
+	a:
+		| typeof ArticleDesign
+		| typeof ArticleDisplay
+		| typeof Pillar
+		| typeof ArticleSpecial,
+): string =>
+	Object.values(a)
+		.filter((v) => typeof v !== 'number')
+		.join(', ');
+
 const Format = () => (
 	<>
 		<h2>Format</h2>
@@ -103,23 +131,21 @@ const Format = () => (
 			<dd>
 				Primarily influences the content, structure and features of an
 				article. It's the most important of the three, and is often used
-				as a shorthand to describe the "kind" of article. Examples
-				include <code>Liveblog</code>, <code>Feature</code> and{' '}
-				<code>Gallery</code>.
+				as a shorthand to describe the "kind" of article. The values
+				are: {formatValues(ArticleDesign)}.
 			</dd>
 			<dt>Display</dt>
 			<dd>
-				Primarily influences the layout of an article. Examples include{' '}
-				<code>Immersive</code>, <code>Showcase</code> and{' '}
-				<code>NumberedList</code>.
+				Primarily influences the layout of an article. The values are:{' '}
+				{formatValues(ArticleDisplay)}.
 			</dd>
 			<dt>Theme</dt>
 			<dd>
 				Primarily influences the fonts and colours of an article. It can
 				can be thought of as a superset of "pillar", i.e. all the
 				pillars are considered themes, but there are some additional
-				themes that are not pillars. Examples include <code>News</code>,{' '}
-				<code>Sport</code> and <code>Labs</code>.
+				themes that are not pillars. The values are:{' '}
+				{formatValues(Pillar)}, {formatValues(ArticleSpecial)}.
 			</dd>
 		</dl>
 		<p>