CDPT- 1855: Update docs (#296)

* CDPT- 1855: Update docs
- Bring docs up to date
- Add the beginnings of automated testing with test-runner.js
- Add last reviewed block

* nl

* nl

* - Update Setup instructions
- Add required node version
- Fix link

public/app/frontend/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../src/index';
+import React from "react";
 
 // TODO: add agreed screensizes for Viewport button
 
@@ -10,14 +11,23 @@ const preview = {
         order: [
           'Documentation',
           'Development', ['Setup', 'Build a new component', 'Build a new layout', 'Connect a component to Wordpress'],
-          'Design', ['Typography', 'Colours', 'Grid', 'Icons'], 
-          'Quality assurance', ['Testing'], 
+          'Design', ['Typography', 'Colours', 'Grid', 'Spacing', 'Breakpoints', 'Icons'],
+          'Quality assurance', ['General', 'Compatibility', 'Accessibility', 'Performance'],
           'Components', 
           'Layouts', 
           'Example pages',
         ],
         locales: 'en-GB',
       }
+    },
+    docs: {
+      components: {
+        // Override lists just for the Storybook theme (we reset them in base.scss)
+        ol: ({children, ...args}) => React.createElement('ol', {style: {'list-style-type': 'roman'}, ...args}, children),
+        ul: ({children, ...args}) => React.createElement('ul', {style: {'list-style-type': 'disc'}, ...args}, children),
+        // Override blockquotes just for Storybook (used for the 'review-block' Storybook component, see 'utils/documentation/review-block.js')
+        blockquote: ({children, ...args}) => React.createElement('blockquote', {style: {'margin-top': '5rem'}, ...args}, children)
+      }
     }
   },
 };

public/app/frontend/.storybook/test-runner.js

@@ -0,0 +1,24 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config = {
+    async preVisit(page) {
+        await injectAxe(page);
+    },
+    async postVisit(page) {
+        await checkA11y(page, '#storybook-root', {
+            detailedReport: true,
+            detailedReportOptions: {
+                html: true,
+            },
+        });
+    },
+    tags: {
+        exclude: ['no-tests'],
+    },
+};
+
+export default config;

public/app/frontend/.storybook/utils/documentation/review-block.js

@@ -0,0 +1,40 @@
+// Helper functions for use in Storybook documentation
+const reviewPeriod = 6;
+const formatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+};
+
+/**
+ * Formats a date string in 'j l, F Y' format
+ * @param {string} lastReview The date that a page was last reviewed.
+ * @return {string} The date string formatted as
+ */
+function getLastReview(lastReview)
+{
+    const date = new Date(lastReview);
+    return date.toLocaleString('en-GB', formatOptions);
+}
+
+/**
+ * Adds the review period to a date string and returns the date in 'jS l, F Y' format
+ * @param {string} lastReview The date that a page was last reviewed.
+ * @return {string} The date string formatted as
+ */
+function getNextReview(lastReview)
+{
+    const date = new Date(lastReview);
+    const reviewDate =  new Date(date.setMonth(date.getMonth() + reviewPeriod));
+    return reviewDate.toLocaleString('en-GB', formatOptions);
+}
+
+/**
+ * Returns a block that displays the last date that a page was reviewed and when it is due a review again
+ * @param {string} lastReview The date that a page was last reviewed.
+ * @return {string} The date string formatted as
+ */
+export function getReviewBlock(lastReview)
+{
+    return `This page was last reviewed on ${getLastReview(lastReview)}. It should be reviewed again on ${getNextReview(lastReview)}`;
+}