Merge pull request #633 from alphagov/fix-table-captionSize-class

Fix table captions to allow heading classes
alphagov · Apr 5, 2018 · f016ee8 · f016ee8
2 parents f3b06a0 + 3807c5e
commit f016ee8
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,8 @@ Fixes:
   `a:link:focus` selector in GOV.UK Template, which was overriding focussed
   links to always use the dark blue link colour for text.
   (PR [#609](https://github.com/alphagov/govuk-frontend/pull/609))
+- Fix table captions to allow heading classes
+  (PR [#633](https://github.com/alphagov/govuk-frontend/pull/633))
 
 New features:
 - Add `govuk-main-wrapper--l` a variant of the main page wrapper to use when a

diff --git a/src/table/README.md b/src/table/README.md
@@ -225,7 +225,7 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
 
     <table class="govuk-c-table">
 
-      <caption class="govuk-c-table__caption small">Caption 1 : Months and rates</caption>
+      <caption class="govuk-c-table__caption govuk-heading-l">Caption 1 : Months and rates</caption>
 
       <thead class="govuk-c-table__head">
         <tr class="govuk-c-table__row">
@@ -280,7 +280,7 @@ Find out when to use the Table component in your service in the [GOV.UK Design S
 
     {{ govukTable({
       "caption": "Caption 1 : Months and rates",
-      "captionSize": "small",
+      "captionSize": "govuk-heading-l",
       "firstCellIsHeader": true,
       "head": [
         {

diff --git a/src/table/_table.scss b/src/table/_table.scss
@@ -17,6 +17,7 @@
 
 @include govuk-exports("table") {
   .govuk-c-table {
+    @include govuk-font-regular-19;
     @include govuk-text-colour;
     width: 100%;
     @include govuk-responsive-margin($govuk-spacing-responsive-6, "bottom");
@@ -26,16 +27,14 @@
   }
 
   .govuk-c-table__header {
-    @include govuk-font-bold-19;
+    @include govuk-typography-weight-bold;
 
     padding: govuk-em($govuk-spacing-scale-2, 19px) govuk-em($govuk-spacing-scale-4, 19px) govuk-em($govuk-spacing-scale-2, 19px) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
   }
 
   .govuk-c-table__cell {
-    @include govuk-font-regular-19;
-
     padding: govuk-em($govuk-spacing-scale-2, 19px) govuk-em($govuk-spacing-scale-4, 19px) govuk-em($govuk-spacing-scale-2, 19px) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
@@ -56,7 +55,9 @@
   }
 
   .govuk-c-table__caption {
+    @include govuk-typography-weight-bold;
+
+    display: table-caption;
     text-align: left;
-    @include govuk-font-bold-19;
   }
 }
diff --git a/src/table/table.yaml b/src/table/table.yaml
@@ -50,7 +50,7 @@ examples:
  - name: table-with-caption-and-head
    data:
      caption: "Caption 1 : Months and rates"
-     captionSize: small
+     captionSize: govuk-heading-l
      firstCellIsHeader: true
      head:
        - text: Month you apply

diff --git a/src/table/template.test.js b/src/table/template.test.js
@@ -54,7 +54,7 @@ describe('Table', () => {
     const $ = render('table', examples['table-with-caption-and-head'])
     const $caption = $('.govuk-c-table__caption')
 
-    expect($caption.hasClass('small')).toBeTruthy()
+    expect($caption.hasClass('govuk-heading-l')).toBeTruthy()
   })
 
   it('renders first cell in every row as a <th> element with correct `govuk-c-table__header` class and `scope=row` attribute', () => {