add updated caption styles to table conponent

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

@@ -0,0 +1,46 @@
+---
+title: Custom caption size
+layout: layout-example.njk
+---
+
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
+  caption: "Months and rates",
+  captionClasses: "govuk-table__caption--l",
+  firstCellIsHeader: true,
+  head: [
+    {
+      text: "Month you apply"
+    },
+    {
+      text: "Rate for vehicles"
+    }
+  ],
+  rows: [
+    [
+      {
+        text: "January"
+      },
+      {
+        text: "£95"
+      }
+    ],
+    [
+      {
+        text: "February"
+      },
+      {
+        text: "£55"
+      }
+    ],
+    [
+      {
+        text: "March"
+      },
+      {
+        text: "£125"
+      }
+    ]
+  ]
+}) }}

src/components/table/column-widths-custom-classes/index.njk

@@ -9,6 +9,7 @@ stylesheets:
 
 {{ govukTable({
   caption: "Month you apply",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {

src/components/table/column-widths/index.njk

@@ -7,6 +7,7 @@ layout: layout-example.njk
 
 {{ govukTable({
   caption: "Month you apply",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {

src/components/table/default/index.njk

@@ -7,6 +7,7 @@ layout: layout-example.njk
 
 {{ govukTable({
   caption: "Dates and amounts",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {

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-l", 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.

src/components/table/numbers/index.njk

@@ -7,6 +7,7 @@ layout: layout-example.njk
 
 {{ govukTable({
   caption: "Months and rates",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {