add updated caption styles to table conponent

src/components/table/caption-m/index.njk

@@ -0,0 +1,46 @@
+---
+title: Custom caption size
+layout: layout-example.njk
+---
+
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
+  caption: "Dates and amounts",
+  captionClasses: "govuk-table__caption--m",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Date"
+    },
+    {
+      text: "Amount"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "First 6 weeks"
+      },
+      {
+        text: "£109.80 per week"
+      }
+    ],
+    [
+      {
+        text: "Next 33 weeks"
+      },
+      {
+        text: "£109.80 per week"
+      }
+    ],
+    [
+      {
+        text: "Total estimated pay"
+      },
+      {
+        text: "£4,282.20"
+      }
+    ]
+  ]
+}) }}

src/components/table/index.md.njk

@@ -27,6 +27,10 @@ Never use the table component to layout content on a page. Instead, use the [gri
 
 Use the `<caption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
 
+There are other styling options for table captions. You can use `govuk-table__caption--s`, `govuk-table__caption--m`, `govuk-table__caption--l` and `govuk-table__caption--xl` classes to make them different from the default.
+
+{{ example({group: "components", item: "table", example: "caption-m", html: true, nunjucks: true, open: false, size: "m"}) }}
+
 ### Table headers
 
 Use table headers to tell users what the rows and columns represent. Use the `scope` attribute to help users of assistive technology distinguish between row and column headers.