From b7ac3823ae1f1eb58e1c800466d11b910fe8903a Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 11 Apr 2018 15:39:21 +0100 Subject: [PATCH 1/6] Remove -c prefix --- src/back-link/README.md | 68 ++--- src/back-link/_back-link.scss | 4 +- src/back-link/template.njk | 2 +- src/back-link/template.test.js | 16 +- src/breadcrumbs/README.md | 142 ++++----- src/breadcrumbs/_breadcrumbs.scss | 8 +- src/breadcrumbs/template.njk | 10 +- src/breadcrumbs/template.test.js | 24 +- src/button/README.md | 132 ++++----- src/button/_button.scss | 14 +- src/button/button.yaml | 2 +- src/button/template.njk | 2 +- src/button/template.test.js | 62 ++-- src/checkboxes/README.md | 274 +++++++++--------- .../__snapshots__/template.test.js.snap | 18 +- src/checkboxes/_checkboxes.scss | 24 +- src/checkboxes/checkboxes.yaml | 2 +- src/checkboxes/template.njk | 8 +- src/checkboxes/template.test.js | 58 ++-- src/date-input/README.md | 236 +++++++-------- .../__snapshots__/template.test.js.snap | 20 +- src/date-input/_date-input.scss | 10 +- src/date-input/date-input.yaml | 12 +- src/date-input/template.njk | 8 +- src/date-input/template.test.js | 40 +-- src/details/README.md | 120 ++++---- src/details/_details.scss | 22 +- src/details/template.njk | 8 +- src/details/template.test.js | 16 +- src/error-message/README.md | 58 ++-- src/error-message/_error-message.scss | 2 +- src/error-message/template.njk | 2 +- src/error-message/template.test.js | 8 +- src/error-summary/README.md | 94 +++--- src/error-summary/_error-summary.scss | 10 +- src/error-summary/template.njk | 8 +- src/error-summary/template.test.js | 38 +-- src/fieldset/README.md | 100 +++---- .../__snapshots__/template.test.js.snap | 2 +- src/fieldset/_fieldset.scss | 8 +- src/fieldset/template.njk | 6 +- src/fieldset/template.test.js | 40 +-- src/file-upload/README.md | 108 +++---- .../__snapshots__/template.test.js.snap | 4 +- src/file-upload/_file-upload.scss | 4 +- src/file-upload/template.njk | 2 +- src/file-upload/template.test.js | 26 +- src/footer/README.md | 122 ++++---- src/footer/_footer.scss | 40 +-- src/footer/template.njk | 38 +-- src/footer/template.test.js | 50 ++-- src/globals/core/_links.scss | 6 +- src/globals/settings/_media-queries.scss | 2 +- src/input/README.md | 138 ++++----- src/input/__snapshots__/template.test.js.snap | 4 +- src/input/_input.scss | 16 +- src/input/input.yaml | 6 +- src/input/template.njk | 2 +- src/input/template.test.js | 30 +- src/label/README.md | 112 +++---- src/label/__snapshots__/template.test.js.snap | 2 +- src/label/_label.scss | 6 +- src/label/label.yaml | 2 +- src/label/template.njk | 4 +- src/label/template.test.js | 22 +- src/panel/README.md | 82 +++--- src/panel/_panel.scss | 8 +- src/panel/template.njk | 6 +- src/panel/template.test.js | 16 +- src/phase-banner/README.md | 72 ++--- .../__snapshots__/template.test.js.snap | 6 +- src/phase-banner/_phase-banner.scss | 8 +- src/phase-banner/template.njk | 8 +- src/phase-banner/template.test.js | 18 +- src/radios/README.md | 252 ++++++++-------- .../__snapshots__/template.test.js.snap | 18 +- src/radios/_radios.scss | 28 +- src/radios/radios.yaml | 4 +- src/radios/template.njk | 8 +- src/radios/template.test.js | 58 ++-- src/select/README.md | 138 ++++----- .../__snapshots__/template.test.js.snap | 4 +- src/select/_select.scss | 10 +- src/select/template.njk | 4 +- src/select/template.test.js | 34 +-- src/skip-link/README.md | 68 ++--- src/skip-link/_skip-link.scss | 2 +- src/skip-link/template.njk | 2 +- src/skip-link/template.test.js | 18 +- src/table/README.md | 242 ++++++++-------- src/table/_table.scss | 18 +- src/table/template.njk | 24 +- src/table/template.test.js | 78 ++--- src/tag/README.md | 62 ++-- src/tag/_tag.scss | 4 +- src/tag/tag.yaml | 2 +- src/tag/template.njk | 2 +- src/tag/template.test.js | 16 +- src/textarea/README.md | 116 ++++---- .../__snapshots__/template.test.js.snap | 4 +- src/textarea/_textarea.scss | 4 +- src/textarea/template.njk | 2 +- src/textarea/template.test.js | 30 +- src/warning-text/README.md | 74 ++--- src/warning-text/_warning-text.scss | 8 +- src/warning-text/template.njk | 8 +- src/warning-text/template.test.js | 22 +- 107 files changed, 2036 insertions(+), 2036 deletions(-) diff --git a/src/back-link/README.md b/src/back-link/README.md index 856545d9b0..e4ee888b65 100644 --- a/src/back-link/README.md +++ b/src/back-link/README.md @@ -16,7 +16,7 @@ Find out when to use the Back link component in your service in the [GOV.UK Desi #### Markup - Back + Back #### Macro @@ -55,83 +55,83 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments - +
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/back-link/_back-link.scss b/src/back-link/_back-link.scss index 1ca8948bf9..3a3799a35d 100644 --- a/src/back-link/_back-link.scss +++ b/src/back-link/_back-link.scss @@ -20,7 +20,7 @@ @include govuk-exports("back-link") { - .govuk-c-back-link { + .govuk-back-link { @include govuk-font-regular-16; @include govuk-link-common; @include govuk-link-style-text; @@ -61,7 +61,7 @@ // Begin adjustments for font baseline offset // These should be removed when the font is updated with the correct baseline - .govuk-c-back-link:before { + .govuk-back-link:before { $offset: 1px; top: $offset * -1; diff --git a/src/back-link/template.njk b/src/back-link/template.njk index 3d322a6d86..e5314ef2b4 100644 --- a/src/back-link/template.njk +++ b/src/back-link/template.njk @@ -1,2 +1,2 @@ -{{ (params.html | safe if params.html else params.text) }} diff --git a/src/back-link/template.test.js b/src/back-link/template.test.js index d8b0da0ee1..13fd3fddb7 100644 --- a/src/back-link/template.test.js +++ b/src/back-link/template.test.js @@ -27,7 +27,7 @@ describe('back-link component', () => { it('renders the default example with an anchor, href and text correctly', () => { const $ = render('back-link', examples.default) - const $component = $('.govuk-c-back-link') + const $component = $('.govuk-back-link') expect($component.get(0).tagName).toEqual('a') expect($component.attr('href')).toEqual('https://gov.uk') expect($component.text()).toEqual('Back') @@ -35,13 +35,13 @@ describe('back-link component', () => { it('renders classes correctly', () => { const $ = render('back-link', { - classes: 'app-c-back-link--custom-class', + classes: 'app-back-link--custom-class', href: '#', html: 'Back' }) - const $component = $('.govuk-c-back-link') - expect($component.hasClass('app-c-back-link--custom-class')).toBeTruthy() + const $component = $('.govuk-back-link') + expect($component.hasClass('app-back-link--custom-class')).toBeTruthy() }) it('renders custom text correctly', () => { @@ -50,7 +50,7 @@ describe('back-link component', () => { text: 'Home' }) - const $component = $('.govuk-c-back-link') + const $component = $('.govuk-back-link') expect($component.html()).toEqual('Home') }) @@ -60,7 +60,7 @@ describe('back-link component', () => { text: 'Home' }) - const $component = $('.govuk-c-back-link') + const $component = $('.govuk-back-link') expect($component.html()).toEqual('<b>Home</b>') }) @@ -70,7 +70,7 @@ describe('back-link component', () => { html: 'Back' }) - const $component = $('.govuk-c-back-link') + const $component = $('.govuk-back-link') expect($component.html()).toEqual('Back') }) @@ -84,7 +84,7 @@ describe('back-link component', () => { html: 'Back' }) - const $component = $('.govuk-c-back-link') + const $component = $('.govuk-back-link') expect($component.attr('data-test')).toEqual('attribute') expect($component.attr('aria-label')).toEqual('Back to home') }) diff --git a/src/breadcrumbs/README.md b/src/breadcrumbs/README.md index 98d371949c..a9adb3e954 100644 --- a/src/breadcrumbs/README.md +++ b/src/breadcrumbs/README.md @@ -16,15 +16,15 @@ Find out when to use the Breadcrumbs component in your service in the [GOV.UK De #### Markup -
-
    +
    +
      -
    1. - Section 1 +
    2. + Section 1
      3. -
    3. - Sub-section +
    4. + Sub-section
    @@ -53,11 +53,11 @@ Find out when to use the Breadcrumbs component in your service in the [GOV.UK De #### Markup -
    -
      +
      +
        -
      1. - Section 1 +
      2. + Section 1
      @@ -82,23 +82,23 @@ Find out when to use the Breadcrumbs component in your service in the [GOV.UK De #### Markup -
      -
        +
        +
          -
        1. - Home +
        2. + Home
          3. -
        3. - Section 3 +
        4. + Section 3
          5. -
        5. - Sub-section 1 +
        6. + Sub-section 1
          7. -
        7. - Sub Sub-section 1 +
        8. + Sub Sub-section 1
        @@ -135,15 +135,15 @@ Find out when to use the Breadcrumbs component in your service in the [GOV.UK De #### Markup -
        -
          +
          +
            -
          1. - Service Manual +
          2. + Service Manual
            3. -
          3. - Agile Delivery +
          4. + Agile Delivery
          @@ -172,18 +172,18 @@ Find out when to use the Breadcrumbs component in your service in the [GOV.UK De #### Markup -
          -
            +
            +
              -
            1. - Home +
            2. + Home
              3. -
            3. - Passports, travel and living abroad +
            4. + Passports, travel and living abroad
              5. -
            5. Travel abroad
              6. +
            6. Travel abroad
            @@ -238,95 +238,95 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classes for the back-link component.Optional additional classes for the back-link component.
texttextstringstringNoNoText to use within the back link component.Text to use within the back link component.
htmlhtmlstringstringNoNoHTML to use within the back link. If this is provided, the text argument will be ignored.HTML to use within the back link. If this is provided, the text argument will be ignored.
hrefhrefstringstringYesYesThe value of the link href attributeThe value of the link href attribute
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the anchor tag.Any extra HTML attributes (for example data attributes) to add to the anchor tag.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/breadcrumbs/_breadcrumbs.scss b/src/breadcrumbs/_breadcrumbs.scss index 3d83599ffa..62e0804fec 100644 --- a/src/breadcrumbs/_breadcrumbs.scss +++ b/src/breadcrumbs/_breadcrumbs.scss @@ -37,7 +37,7 @@ // √(8² + 8²) * 0.5 ≅ 5.655 $chevron-altitude-calculated: 5.655px; - .govuk-c-breadcrumbs { + .govuk-breadcrumbs { @include govuk-font-regular-16; @include govuk-text-colour; @@ -45,7 +45,7 @@ margin-bottom: $govuk-spacing-scale-2; } - .govuk-c-breadcrumbs__list { + .govuk-breadcrumbs__list { @include govuk-h-clearfix; margin: 0; @@ -53,7 +53,7 @@ list-style-type: none; } - .govuk-c-breadcrumbs__list-item { + .govuk-breadcrumbs__list-item { display: inline-block; position: relative; @@ -122,7 +122,7 @@ } } - .govuk-c-breadcrumbs__link { + .govuk-breadcrumbs__link { @include govuk-link-common; @include govuk-link-style-text; } diff --git a/src/breadcrumbs/template.njk b/src/breadcrumbs/template.njk index 39076a39bd..1c4e9cebfc 100644 --- a/src/breadcrumbs/template.njk +++ b/src/breadcrumbs/template.njk @@ -1,12 +1,12 @@ -
-
    +
    +
      {% for item in params.items %} {% if item.href %} -
    1. - {{ item.html | safe if item.html else item.text }} +
    2. + {{ item.html | safe if item.html else item.text }}
      3. {% else %} -
    3. {{ item.html | safe if item.html else item.text }}
      4. +
    4. {{ item.html | safe if item.html else item.text }}
      5. {% endif %} {% endfor %}
    diff --git a/src/breadcrumbs/template.test.js b/src/breadcrumbs/template.test.js index 509f241515..6099c7e8b0 100644 --- a/src/breadcrumbs/template.test.js +++ b/src/breadcrumbs/template.test.js @@ -17,11 +17,11 @@ describe('Breadcrumbs', () => { it('renders with classes', () => { const $ = render('breadcrumbs', { - classes: 'app-c-breadcrumbs--custom-modifier' + classes: 'app-breadcrumbs--custom-modifier' }) - const $component = $('.govuk-c-breadcrumbs') - expect($component.hasClass('app-c-breadcrumbs--custom-modifier')).toBeTruthy() + const $component = $('.govuk-breadcrumbs') + expect($component.hasClass('app-breadcrumbs--custom-modifier')).toBeTruthy() }) it('renders with attributes', () => { @@ -32,7 +32,7 @@ describe('Breadcrumbs', () => { } }) - const $component = $('.govuk-c-breadcrumbs') + const $component = $('.govuk-breadcrumbs') expect($component.attr('id')).toEqual('my-navigation') expect($component.attr('role')).toEqual('navigation') }) @@ -49,7 +49,7 @@ describe('Breadcrumbs', () => { ] }) - const $items = $('.govuk-c-breadcrumbs__list-item') + const $items = $('.govuk-breadcrumbs__list-item') expect($items.length).toEqual(2) }) @@ -62,7 +62,7 @@ describe('Breadcrumbs', () => { ] }) - const $item = $('.govuk-c-breadcrumbs__list-item') + const $item = $('.govuk-breadcrumbs__list-item') expect($item.text()).toEqual('Section 1') }) @@ -75,7 +75,7 @@ describe('Breadcrumbs', () => { ] }) - const $item = $('.govuk-c-breadcrumbs__list-item') + const $item = $('.govuk-breadcrumbs__list-item') expect($item.html()).toEqual('<span>Section 1</span>') }) @@ -88,7 +88,7 @@ describe('Breadcrumbs', () => { ] }) - const $item = $('.govuk-c-breadcrumbs__list-item') + const $item = $('.govuk-breadcrumbs__list-item') expect($item.html()).toEqual('Section 1') }) @@ -102,9 +102,9 @@ describe('Breadcrumbs', () => { ] }) - const $anchor = $('.govuk-c-breadcrumbs__list-item a') + const $anchor = $('.govuk-breadcrumbs__list-item a') expect($anchor.get(0).tagName).toEqual('a') - expect($anchor.attr('class')).toEqual('govuk-c-breadcrumbs__link') + expect($anchor.attr('class')).toEqual('govuk-breadcrumbs__link') expect($anchor.attr('href')).toEqual('/section') expect($anchor.text()).toEqual('Section 1') }) @@ -119,7 +119,7 @@ describe('Breadcrumbs', () => { ] }) - const $anchor = $('.govuk-c-breadcrumbs__list-item a') + const $anchor = $('.govuk-breadcrumbs__list-item a') expect($anchor.html()).toEqual('Section 1') }) }) @@ -127,7 +127,7 @@ describe('Breadcrumbs', () => { describe('default example', () => { it('renders 2 items', () => { const $ = render('breadcrumbs', examples.default) - const $items = $('.govuk-c-breadcrumbs__list-item') + const $items = $('.govuk-breadcrumbs__list-item') expect($items.length).toEqual(2) }) }) diff --git a/src/button/README.md b/src/button/README.md index 2cbc6b988f..1ad2f2a630 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -18,7 +18,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - + #### Macro @@ -34,7 +34,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - + #### Macro @@ -51,7 +51,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - + Link button @@ -70,7 +70,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - + Disabled link button @@ -90,7 +90,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - + Start now link button @@ -101,7 +101,7 @@ Buttons are configured to perform an action and they can have a different look. {{ govukButton({ "text": "Start now link button", "href": "/", - "classes": "govuk-c-button--start" + "classes": "govuk-button--start" }) }} ### Button--explicit-button @@ -110,7 +110,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - @@ -130,7 +130,7 @@ Buttons are configured to perform an action and they can have a different look. #### Markup - @@ -174,143 +174,143 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
itemsitemsarrayarrayYesYesArray of breadcrumbs itemsArray of breadcrumbs items
texttextstringstringNoNoText to use within the breadcrumbs itemText to use within the breadcrumbs item
htmlhtmlstringstringNoNoHTML to use within the breadcrumbs item. If this is provided, the text argument will be ignored.HTML to use within the breadcrumbs item. If this is provided, the text argument will be ignored.
hrefhrefstringstringnonoLink for the breadcrumbs item. If not specified, breadcrumbs item is a normal list itemLink for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the breadcrumbs container.Any extra HTML attributes (for example data attributes) to add to the breadcrumbs container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/button/_button.scss b/src/button/_button.scss index f03dc0bcb5..b90ef6d5f0 100644 --- a/src/button/_button.scss +++ b/src/button/_button.scss @@ -28,7 +28,7 @@ // increase the bottom margin to include it (s2). $button-shadow-size: $govuk-border-width-form-element; - .govuk-c-button { + .govuk-button { @include govuk-font-regular; @include govuk-typography-responsive( $govuk-font-19, @@ -127,9 +127,9 @@ } } - .govuk-c-button--disabled, - .govuk-c-button[disabled="disabled"], - .govuk-c-button[disabled] { + .govuk-button--disabled, + .govuk-button[disabled="disabled"], + .govuk-button[disabled] { opacity: (.5); background: $govuk-button-colour; @@ -151,7 +151,7 @@ } } - .govuk-c-button--start { + .govuk-button--start { @include govuk-typography-weight-bold; @include govuk-typography-responsive( $govuk-font-24, @@ -180,12 +180,12 @@ $offset: 2; - .govuk-c-button { + .govuk-button { padding-top: ($govuk-spacing-scale-2 - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 padding-bottom: ($govuk-spacing-scale-2 - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 } - .govuk-c-button--start { + .govuk-button--start { padding-top: ($govuk-spacing-scale-2 - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 padding-bottom: ($govuk-spacing-scale-2 - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 } diff --git a/src/button/button.yaml b/src/button/button.yaml index 5145f88d07..b8ebfa7c97 100644 --- a/src/button/button.yaml +++ b/src/button/button.yaml @@ -19,7 +19,7 @@ examples: data: text: Start now link button href: / - classes: 'govuk-c-button--start' + classes: 'govuk-button--start' - name: explicit-button data: element: button diff --git a/src/button/template.njk b/src/button/template.njk index c50eec7257..5c860ea8c0 100644 --- a/src/button/template.njk +++ b/src/button/template.njk @@ -14,7 +14,7 @@ {#- Define common attributes that we can use across all element types #} -{%- set commonAttributes %} class="govuk-c-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-c-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %} +{%- set commonAttributes %} class="govuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %} {#- Define common attributes we can use for both button and input types #} diff --git a/src/button/template.test.js b/src/button/template.test.js index 0a7f7915d9..dabcf3cd00 100644 --- a/src/button/template.test.js +++ b/src/button/template.test.js @@ -18,7 +18,7 @@ describe('Button', () => { it('renders the default example', () => { const $ = render('button', examples.default) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.get(0).tagName).toEqual('input') expect($component.attr('type')).toEqual('submit') expect($component.val()).toEqual('Save and continue') @@ -33,7 +33,7 @@ describe('Button', () => { } }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('aria-controls')).toEqual('example-id') expect($component.attr('data-tracking-dimension')).toEqual('123') }) @@ -41,20 +41,20 @@ describe('Button', () => { it('renders with classes', () => { const $ = render('button', { element: 'input', - classes: 'app-c-button--custom-modifier' + classes: 'app-button--custom-modifier' }) - const $component = $('.govuk-c-button') - expect($component.hasClass('app-c-button--custom-modifier')).toBeTruthy() + const $component = $('.govuk-button') + expect($component.hasClass('app-button--custom-modifier')).toBeTruthy() }) it('renders with disabled', () => { const $ = render('button', examples.disabled) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('aria-disabled')).toEqual('true') expect($component.attr('disabled')).toEqual('disabled') - expect($component.hasClass('govuk-c-button--disabled')).toBeTruthy() + expect($component.hasClass('govuk-button--disabled')).toBeTruthy() }) it('renders with name', () => { @@ -63,7 +63,7 @@ describe('Button', () => { name: 'start-now' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('name')).toEqual('start-now') }) @@ -73,7 +73,7 @@ describe('Button', () => { type: 'button' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('type')).toEqual('button') }) }) @@ -86,7 +86,7 @@ describe('Button', () => { text: 'Continue' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.get(0).tagName).toEqual('a') expect($component.attr('href')).toEqual('/') expect($component.attr('role')).toEqual('button') @@ -98,7 +98,7 @@ describe('Button', () => { element: 'a' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('href')).toEqual('#') }) @@ -111,7 +111,7 @@ describe('Button', () => { } }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('aria-controls')).toEqual('example-id') expect($component.attr('data-tracking-dimension')).toEqual('123') }) @@ -119,18 +119,18 @@ describe('Button', () => { it('renders with classes', () => { const $ = render('button', { element: 'a', - classes: 'app-c-button--custom-modifier' + classes: 'app-button--custom-modifier' }) - const $component = $('.govuk-c-button') - expect($component.hasClass('app-c-button--custom-modifier')).toBeTruthy() + const $component = $('.govuk-button') + expect($component.hasClass('app-button--custom-modifier')).toBeTruthy() }) it('renders with disabled', () => { const $ = render('button', examples['disabled-link']) - const $component = $('.govuk-c-button') - expect($component.hasClass('govuk-c-button--disabled')).toBeTruthy() + const $component = $('.govuk-button') + expect($component.hasClass('govuk-button--disabled')).toBeTruthy() }) }) @@ -138,7 +138,7 @@ describe('Button', () => { it('renders with anchor, href and an accessible role of button', () => { const $ = render('button', examples['explicit-button']) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.get(0).tagName).toEqual('button') expect($component.attr('type')).toEqual('submit') }) @@ -152,7 +152,7 @@ describe('Button', () => { } }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('aria-controls')).toEqual('example-id') expect($component.attr('data-tracking-dimension')).toEqual('123') }) @@ -160,11 +160,11 @@ describe('Button', () => { it('renders with classes', () => { const $ = render('button', { element: 'button', - classes: 'app-c-button--custom-modifier' + classes: 'app-button--custom-modifier' }) - const $component = $('.govuk-c-button') - expect($component.hasClass('app-c-button--custom-modifier')).toBeTruthy() + const $component = $('.govuk-button') + expect($component.hasClass('app-button--custom-modifier')).toBeTruthy() }) it('renders with disabled', () => { @@ -173,10 +173,10 @@ describe('Button', () => { disabled: true }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('aria-disabled')).toEqual('true') expect($component.attr('disabled')).toEqual('disabled') - expect($component.hasClass('govuk-c-button--disabled')).toBeTruthy() + expect($component.hasClass('govuk-button--disabled')).toBeTruthy() }) it('renders with name', () => { @@ -185,7 +185,7 @@ describe('Button', () => { name: 'start-now' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('name')).toEqual('start-now') }) @@ -195,7 +195,7 @@ describe('Button', () => { value: 'start' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('value')).toEqual('start') }) @@ -205,7 +205,7 @@ describe('Button', () => { html: 'Start now' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.html()).toContain('Start now') }) @@ -216,7 +216,7 @@ describe('Button', () => { text: 'Start now' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.attr('type')).toEqual('button') }) }) @@ -227,7 +227,7 @@ describe('Button', () => { href: '/' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.get(0).tagName).toEqual('a') }) @@ -236,14 +236,14 @@ describe('Button', () => { html: 'Start now' }) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.get(0).tagName).toEqual('button') }) it('renders an input[type=submit] if you don\'t pass anything', () => { const $ = render('button', {}) - const $component = $('.govuk-c-button') + const $component = $('.govuk-button') expect($component.get(0).tagName).toEqual('input') expect($component.attr('type')).toEqual('submit') }) diff --git a/src/checkboxes/README.md b/src/checkboxes/README.md index b33b9c48ba..8f71cdbf8a 100644 --- a/src/checkboxes/README.md +++ b/src/checkboxes/README.md @@ -17,36 +17,36 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des #### Markup
-
+
- + What is your nationality? - If you have dual nationality, select all options that are relevant to you. + If you have dual nationality, select all options that are relevant to you. -
+
-
- -
NameNameTypeTypeRequiredRequiredDescriptionDescription
elementelementstringstringYesYesWhether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.
texttextstringstringYesYesText for the buttonText for the button
htmlhtmlstringstringYesYesHTML for the button or link. If this is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.HTML for the button or link. If this is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
namenamestringstringYesYesName for the `input` or `button`. This has no effect on `a` elements.Name for the `input` or `button`. This has no effect on `a` elements.
typetypestringstringYesYesType of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.
valuevaluestringstringYesYesValue for the `button` tag. This has no effect on `a` or `input` elements.Value for the `button` tag. This has no effect on `a` or `input` elements.
disableddisabledbooleanbooleanNoNoWhether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
hrefhrefstringstringNoNoThe URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.
classesclassesstringstringNoNoOptional additional classesOptional additional classes
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the error message span tagAny extra HTML attributes (for example data attributes) to add to the error message span tag
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/checkboxes/__snapshots__/template.test.js.snap b/src/checkboxes/__snapshots__/template.test.js.snap index 7d12a14a13..aaced8be5d 100644 --- a/src/checkboxes/__snapshots__/template.test.js.snap +++ b/src/checkboxes/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Checkboxes nested dependant components passes through fieldset params without breaking 1`] = ` - + Please select an option @@ -10,13 +10,13 @@ exports[`Checkboxes nested dependant components passes through fieldset params w exports[`Checkboxes nested dependant components passes through fieldset params without breaking 2`] = ` -
- + What is your nationality? - + If you have dual nationality, select all options that are relevant to you. @@ -26,10 +26,10 @@ exports[`Checkboxes nested dependant components passes through fieldset params w exports[`Checkboxes nested dependant components passes through html fieldset params without breaking 1`] = ` -
- +
+ What is your <b>nationality</b>? - + If you have dual nationality, select all options @@ -43,7 +43,7 @@ exports[`Checkboxes nested dependant components passes through html fieldset par exports[`Checkboxes nested dependant components passes through label params without breaking 1`] = ` - -
NameNameTypeTypeRequiredRequiredDescriptionDescription
fieldsetfieldsetobjectobjectNoNoArguments for the fieldset component (e.g. legendText, legendHintText, errorMessage). See fieldset component.Arguments for the fieldset component (e.g. legendText, legendHintText, errorMessage). See fieldset component.
classesclassesstringstringNoNoOptional additional classesOptional additional classes
idPrefixidPrefixstringstringNoNoString to prefix id for each checkbox item if no id is specified on each item.String to prefix id for each checkbox item if no id is specified on each item.
namenamestringstringYesYesName attribute for each checkbox item.Name attribute for each checkbox item.
itemsitemsarrayarrayYesYesArray of checkbox items.Array of checkbox items.
texttextstringstringNoNoText to use within each checkbox item label.Text to use within each checkbox item label.
htmlhtmlstringstringNoNoHTML to use within each checkbox item label. If this is provided, the text argument will be ignored.HTML to use within each checkbox item label. If this is provided, the text argument will be ignored.
labellabelobjectobjectNoNoProvide additional attributes to each checkbox item label.Provide additional attributes to each checkbox item label.
checkedcheckedbooleanbooleanNoNoIf true, checkbox will be checkedIf true, checkbox will be checked
disableddisabledbooleanbooleanNoNoIf true, checkbox will be disabledIf true, checkbox will be disabled
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the checkboxes container.Any extra HTML attributes (for example data attributes) to add to the checkboxes container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/date-input/__snapshots__/template.test.js.snap b/src/date-input/__snapshots__/template.test.js.snap index 731ec1439c..299756c33c 100644 --- a/src/date-input/__snapshots__/template.test.js.snap +++ b/src/date-input/__snapshots__/template.test.js.snap @@ -2,17 +2,17 @@ exports[`Date input nested dependant components passes through label params without breaking 1`] = ` - - -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
ididstringstringNoNoOptional id. This is used for the main component and to compose the items' ids.Optional id. This is used for the main component and to compose the items' ids.
namenamestringstringNoNoOptional name. This is used to compose the items' names.Optional name. This is used to compose the items' names.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the date div tag.Any extra HTML attributes (for example data attributes) to add to the date div tag.
itemsitemsarrayarrayYesYesAn array of input objects with name, value and optional classesAn array of input objects with name, value and optional classes
errorMessageerrorMessageobjectobjectNoNoOptional error message. See errorMessage component.Optional error message. See errorMessage component.
fieldsetfieldsetobjectobjectNoNoArguments for the fieldset component (e.g. legendText, legendHintText, errorMessage). See fieldset component.Arguments for the fieldset component (e.g. legendText, legendHintText, errorMessage). See fieldset component.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/details/_details.scss b/src/details/_details.scss index a10c573ed0..37c6fc3450 100644 --- a/src/details/_details.scss +++ b/src/details/_details.scss @@ -17,7 +17,7 @@ @include govuk-exports("details") { - .govuk-c-details { + .govuk-details { @include govuk-font-regular-19; @include govuk-text-colour; @include govuk-responsive-margin($govuk-spacing-responsive-6, "bottom"); @@ -25,7 +25,7 @@ display: block; } - .govuk-c-details__summary { + .govuk-details__summary { // Make the focus outline shrink-wrap the text content of the summary display: inline-block; @@ -43,15 +43,15 @@ } // ...but only underline the text, not the arrow - .govuk-c-details__summary-text { + .govuk-details__summary-text { text-decoration: underline; } - .govuk-c-details__summary:hover { + .govuk-details__summary:hover { color: $govuk-link-hover-colour; } - .govuk-c-details__summary:focus { + .govuk-details__summary:focus { // -1px offset fixes gap between background and outline in Firefox outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour; outline-offset: -1px; @@ -60,12 +60,12 @@ // Remove the default details marker so we can style our own consistently and // ensure it displays in Firefox (see implementation.md for details) - .govuk-c-details__summary::-webkit-details-marker { + .govuk-details__summary::-webkit-details-marker { display: none; } // Append our own open / closed marker using a pseudo-element - .govuk-c-details__summary:before { + .govuk-details__summary:before { content: ""; position: absolute; @@ -77,23 +77,23 @@ @include govuk-shape-arrow($direction: right, $base: 14px); - .govuk-c-details[open] > & { + .govuk-details[open] > & { @include govuk-shape-arrow($direction: down, $base: 14px); } } - .govuk-c-details__text { + .govuk-details__text { padding: $govuk-spacing-scale-3; padding-left: $govuk-spacing-scale-4; border-left: $govuk-border-width solid $govuk-border-colour; } - .govuk-c-details__text p { + .govuk-details__text p { margin-top: 0; margin-bottom: $govuk-spacing-scale-4; } - .govuk-c-details__text p:last-child { + .govuk-details__text p:last-child { margin-bottom: 0; } } diff --git a/src/details/template.njk b/src/details/template.njk index da9dd1645b..999a7ec0d5 100644 --- a/src/details/template.njk +++ b/src/details/template.njk @@ -1,10 +1,10 @@ -
- - +
+ + {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }} -
+
{{ params.html | safe if params.html else params.text }}
diff --git a/src/details/template.test.js b/src/details/template.test.js index e63ba10f45..a6eb49097e 100644 --- a/src/details/template.test.js +++ b/src/details/template.test.js @@ -17,7 +17,7 @@ describe('Details', () => { it('renders a details element', () => { const $ = render('details', examples.default) - const $component = $('.govuk-c-details') + const $component = $('.govuk-details') expect($component.get(0).tagName).toEqual('details') }) @@ -25,7 +25,7 @@ describe('Details', () => { const $ = render('details', examples.default) // Look for the summary element _within_ the details element - const $summary = $('.govuk-c-details .govuk-c-details__summary') + const $summary = $('.govuk-details .govuk-details__summary') expect($summary.get(0).tagName).toEqual('summary') }) @@ -34,7 +34,7 @@ describe('Details', () => { text: 'More about the greater than symbol (>)' }) - const detailsText = $('.govuk-c-details__text').html().trim() + const detailsText = $('.govuk-details__text').html().trim() expect(detailsText).toEqual('More about the greater than symbol (>)') }) @@ -43,7 +43,7 @@ describe('Details', () => { html: 'More about bold text' }) - const detailsText = $('.govuk-c-details__text').html().trim() + const detailsText = $('.govuk-details__text').html().trim() expect(detailsText).toEqual('More about bold text') }) @@ -52,7 +52,7 @@ describe('Details', () => { summaryText: 'The greater than symbol (>) is the best' }) - const detailsText = $('.govuk-c-details__summary-text').html().trim() + const detailsText = $('.govuk-details__summary-text').html().trim() expect(detailsText).toEqual('The greater than symbol (>) is the best') }) @@ -61,7 +61,7 @@ describe('Details', () => { summaryHtml: 'Use bold text sparingly' }) - const detailsText = $('.govuk-c-details__summary-text').html().trim() + const detailsText = $('.govuk-details__summary-text').html().trim() expect(detailsText).toEqual('Use bold text sparingly') }) @@ -70,7 +70,7 @@ describe('Details', () => { classes: 'some-additional-class' }) - const $component = $('.govuk-c-details') + const $component = $('.govuk-details') expect($component.hasClass('some-additional-class')).toBeTruthy() }) @@ -82,7 +82,7 @@ describe('Details', () => { } }) - const $component = $('.govuk-c-details') + const $component = $('.govuk-details') expect($component.attr('data-some-data-attribute')).toEqual('i-love-data') expect($component.attr('another-attribute')).toEqual('true') }) diff --git a/src/error-message/README.md b/src/error-message/README.md index ebdb8e6fb7..f9716e9413 100644 --- a/src/error-message/README.md +++ b/src/error-message/README.md @@ -16,7 +16,7 @@ Find out when to use the Error message component in your service in the [GOV.UK #### Markup - + Error message about full name goes here @@ -56,71 +56,71 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments -
NameNameTypeTypeRequiredRequiredDescriptionDescription
summaryTextsummaryTextstringstringYesYesText to use within the summary element (the visible part of the details element)Text to use within the summary element (the visible part of the details element)
summaryHtmlsummaryHtmlstringstringYesYesHTML to use within the summary element (the visible part of the details element). If this is provided, the summaryText argument will be ignored.HTML to use within the summary element (the visible part of the details element). If this is provided, the summaryText argument will be ignored.
texttextstringstringYesYesText to use within the disclosed part of the details element.Text to use within the disclosed part of the details element.
htmlhtmlstringstringYesYesHTML to use within the disclosed part of the details element. If this is provided, the text argument will be ignored.HTML to use within the disclosed part of the details element. If this is provided, the text argument will be ignored.
ididstringstringNoNoOptional idOptional id
classesclassesstringstringNoNoOptional additional classesOptional additional classes
openopenbooleanbooleanNoNoIf true, details will be expanded.If true, details will be expanded.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the details elementAny extra HTML attributes (for example data attributes) to add to the details element
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/error-message/_error-message.scss b/src/error-message/_error-message.scss index f24f7edefa..470ac2ce27 100644 --- a/src/error-message/_error-message.scss +++ b/src/error-message/_error-message.scss @@ -12,7 +12,7 @@ @import "../globals/settings/typography-responsive"; @include govuk-exports("error-message") { - .govuk-c-error-message { + .govuk-error-message { @include govuk-font-bold-19; display: block; diff --git a/src/error-message/template.njk b/src/error-message/template.njk index 17fe3bf6a7..de51cc1fe1 100644 --- a/src/error-message/template.njk +++ b/src/error-message/template.njk @@ -1,3 +1,3 @@ - + {{ params.html | safe if params.html else params.text }} diff --git a/src/error-message/template.test.js b/src/error-message/template.test.js index e0556a1c61..f6d0f3a742 100644 --- a/src/error-message/template.test.js +++ b/src/error-message/template.test.js @@ -19,7 +19,7 @@ describe('Error message', () => { classes: 'custom-class' }) - const $component = $('.govuk-c-error-message') + const $component = $('.govuk-error-message') expect($component.hasClass('custom-class')).toBeTruthy() }) @@ -28,7 +28,7 @@ describe('Error message', () => { text: 'Unexpected > in body' }) - const content = $('.govuk-c-error-message').html().trim() + const content = $('.govuk-error-message').html().trim() expect(content).toEqual('Unexpected > in body') }) @@ -37,7 +37,7 @@ describe('Error message', () => { html: 'Unexpected bold text in body copy' }) - const content = $('.govuk-c-error-message').html().trim() + const content = $('.govuk-error-message').html().trim() expect(content).toEqual('Unexpected bold text in body copy') }) @@ -49,7 +49,7 @@ describe('Error message', () => { } }) - const $component = $('.govuk-c-error-message') + const $component = $('.govuk-error-message') expect($component.attr('data-test')).toEqual('attribute') expect($component.attr('id')).toEqual('my-error-message') }) diff --git a/src/error-summary/README.md b/src/error-summary/README.md index 3eee38f79b..71fcfbff32 100644 --- a/src/error-summary/README.md +++ b/src/error-summary/README.md @@ -16,17 +16,17 @@ Find out when to use the Error summary component in your service in the [GOV.UK #### Markup -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
texttextstringstringNoNoText to use within the error messageText to use within the error message
htmlhtmlstringstringNoNoHTML to use within the error message. If this is provided, the text argument will be ignored.HTML to use within the error message. If this is provided, the text argument will be ignored.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the error message span tagAny extra HTML attributes (for example data attributes) to add to the error message span tag
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/error-summary/_error-summary.scss b/src/error-summary/_error-summary.scss index 7bee2d073a..5d88664bdf 100644 --- a/src/error-summary/_error-summary.scss +++ b/src/error-summary/_error-summary.scss @@ -21,7 +21,7 @@ @include govuk-exports("error-summary") { - .govuk-c-error-summary { + .govuk-error-summary { @include govuk-text-colour; @include govuk-responsive-padding($govuk-spacing-responsive-4); @include govuk-responsive-margin($govuk-spacing-responsive-8, "bottom"); @@ -34,14 +34,14 @@ } } - .govuk-c-error-summary__title { + .govuk-error-summary__title { @include govuk-font-bold-24; margin-top: 0; @include govuk-responsive-margin($govuk-spacing-responsive-4, "bottom"); } - .govuk-c-error-summary__body { + .govuk-error-summary__body { @include govuk-font-regular-19; p { @@ -51,12 +51,12 @@ } // Cross-component class - adjusts styling of list component - .govuk-c-error-summary__list { + .govuk-error-summary__list { margin-top: 0; margin-bottom: 0; } - .govuk-c-error-summary__list a { + .govuk-error-summary__list a { @include govuk-focusable-fill; @include govuk-typography-weight-bold; diff --git a/src/error-summary/template.njk b/src/error-summary/template.njk index 2954715952..83c4a7aa74 100644 --- a/src/error-summary/template.njk +++ b/src/error-summary/template.njk @@ -1,16 +1,16 @@ -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
titleTexttitleTextstringstringNoNoText to use for the heading of the error summary block.Text to use for the heading of the error summary block.
titleHtmltitleHtmlstringstringNoNoHTML to use for the heading of the error summary block. If this is provided, the titleText argument will be ignored.HTML to use for the heading of the error summary block. If this is provided, the titleText argument will be ignored.
descriptionTextdescriptionTextstringstringNoNoOptional text description of the errors.Optional text description of the errors.
descriptionHtmldescriptionHtmlstringstringNoNoOptional HTML description of the errors. If this is provided, the descriptionText argument will be ignored.Optional HTML description of the errors. If this is provided, the descriptionText argument will be ignored.
errorListerrorListobjectobjectYesYesContains an array of error link items and all their available arguments.Contains an array of error link items and all their available arguments.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the error-summary container.Any extra HTML attributes (for example data attributes) to add to the error-summary container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/fieldset/__snapshots__/template.test.js.snap b/src/fieldset/__snapshots__/template.test.js.snap index 1295114ae7..50d39f764f 100644 --- a/src/fieldset/__snapshots__/template.test.js.snap +++ b/src/fieldset/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`fieldset dependant components passes through errorMessage params without breaking 1`] = ` - + Please fill in the street input diff --git a/src/fieldset/_fieldset.scss b/src/fieldset/_fieldset.scss index 2f31272b87..995212a6da 100644 --- a/src/fieldset/_fieldset.scss +++ b/src/fieldset/_fieldset.scss @@ -17,14 +17,14 @@ @include govuk-exports("fieldset") { - .govuk-c-fieldset { + .govuk-fieldset { margin: 0; padding: 0; border: 0; @include govuk-h-clearfix; } - .govuk-c-fieldset__legend { + .govuk-fieldset__legend { @include govuk-font-regular-19; @include govuk-text-colour; @@ -55,12 +55,12 @@ } } - .govuk-c-fieldset__legend--bold { + .govuk-fieldset__legend--bold { @include govuk-typography-weight-bold; } // Hint text sits inside a legend, to be read by AT - .govuk-c-fieldset__hint { + .govuk-fieldset__hint { @include govuk-typography-weight-regular; display: block; diff --git a/src/fieldset/template.njk b/src/fieldset/template.njk index 827b2b1734..d1037192eb 100644 --- a/src/fieldset/template.njk +++ b/src/fieldset/template.njk @@ -1,13 +1,13 @@ {% from "error-message/macro.njk" import govukErrorMessage -%}
-
{% if params.legendHtml or params.legendText %} - + {{ params.legendHtml | safe if params.legendHtml else params.legendText }} {% if params.legendHintText or params.legendHintHtml %} - {{ params.legendHintHtml | safe if params.legendHintHtml else params.legendHintText }} + {{ params.legendHintHtml | safe if params.legendHintHtml else params.legendHintText }} {% endif %} {% if params.errorMessage %} {{ govukErrorMessage(params.errorMessage) | trim | indent(4) -}} diff --git a/src/fieldset/template.test.js b/src/fieldset/template.test.js index 9365cf1235..985fcf90fd 100644 --- a/src/fieldset/template.test.js +++ b/src/fieldset/template.test.js @@ -19,19 +19,19 @@ describe('fieldset', () => { legendText: 'What is your address?' }) - const $component = $('fieldset.govuk-c-fieldset') - const $legend = $component.find('.govuk-c-fieldset__legend') + const $component = $('fieldset.govuk-fieldset') + const $legend = $component.find('.govuk-fieldset__legend') expect($component.get(0).tagName).toContain('fieldset') expect($legend.get(0).tagName).toContain('legend') }) it('renders classes', () => { const $ = render('fieldset', { - classes: 'app-c-fieldset--custom-modifier' + classes: 'app-fieldset--custom-modifier' }) - const $component = $('.govuk-c-fieldset') - expect($component.hasClass('app-c-fieldset--custom-modifier')).toBeTruthy() + const $component = $('.govuk-fieldset') + expect($component.hasClass('app-fieldset--custom-modifier')).toBeTruthy() }) it('renders legendText using markup that is semantic', () => { @@ -39,8 +39,8 @@ describe('fieldset', () => { legendText: 'What is your address?' }) - const $component = $('fieldset.govuk-c-fieldset') - const $legend = $component.find('legend.govuk-c-fieldset__legend') + const $component = $('fieldset.govuk-fieldset') + const $legend = $component.find('legend.govuk-fieldset__legend') expect($legend.html()).toContain('What is your address?') }) @@ -49,8 +49,8 @@ describe('fieldset', () => { legendText: 'What is your address?' }) - const $component = $('.govuk-c-fieldset') - const $legend = $component.find('.govuk-c-fieldset__legend') + const $component = $('.govuk-fieldset') + const $legend = $component.find('.govuk-fieldset__legend') expect($legend.html()).toContain('What is <b>your</b> address?') }) @@ -59,8 +59,8 @@ describe('fieldset', () => { legendHtml: 'What is your address?' }) - const $component = $('.govuk-c-fieldset') - const $legend = $component.find('.govuk-c-fieldset__legend') + const $component = $('.govuk-fieldset') + const $legend = $component.find('.govuk-fieldset__legend') expect($legend.html()).toContain('What is your address?') }) @@ -70,8 +70,8 @@ describe('fieldset', () => { legendHintText: 'For example, 10 Downing Street' }) - const $component = $('.govuk-c-fieldset') - const $hint = $component.find('.govuk-c-fieldset__hint') + const $component = $('.govuk-fieldset') + const $hint = $component.find('.govuk-fieldset__hint') expect($hint.html()).toEqual('For example, 10 Downing Street') }) @@ -81,8 +81,8 @@ describe('fieldset', () => { legendHintText: 'For example, 10 Downing Street' }) - const $component = $('.govuk-c-fieldset') - const $hint = $component.find('.govuk-c-fieldset__hint') + const $component = $('.govuk-fieldset') + const $hint = $component.find('.govuk-fieldset__hint') expect($hint.html()).toEqual('For example, <b>10 Downing Street</b>') }) @@ -92,8 +92,8 @@ describe('fieldset', () => { legendHintHtml: 'For example, 10 Downing Street' }) - const $component = $('.govuk-c-fieldset') - const $hint = $component.find('.govuk-c-fieldset__hint') + const $component = $('.govuk-fieldset') + const $hint = $component.find('.govuk-fieldset__hint') expect($hint.html()).toEqual('For example, 10 Downing Street') }) @@ -105,7 +105,7 @@ describe('fieldset', () => { } }) - const $component = $('.govuk-c-fieldset') + const $component = $('.govuk-fieldset') expect($component.attr('data-attribute')).toEqual('value') expect($component.attr('data-another-attribute')).toEqual('another-value') }) @@ -114,14 +114,14 @@ describe('fieldset', () => { it('have correct nesting order', () => { const $ = render('fieldset', examples['with-error-message']) - const $component = $('.govuk-o-form-group > .govuk-c-fieldset') + const $component = $('.govuk-o-form-group > .govuk-fieldset') expect($component.length).toBeTruthy() }) it('passes through errorMessage params without breaking', () => { const $ = render('fieldset', examples['with-error-message']) - expect(htmlWithClassName($, '.govuk-c-error-message')).toMatchSnapshot() + expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot() }) }) }) diff --git a/src/file-upload/README.md b/src/file-upload/README.md index 51c9c6887c..27bcda5c97 100644 --- a/src/file-upload/README.md +++ b/src/file-upload/README.md @@ -16,11 +16,11 @@ Find out when to use the File upload component in your service in the [GOV.UK De #### Markup -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
legendTextlegendTextstringstringNoNoLegend textLegend text
legendHtmllegendHtmlstringstringNoNoLegend textLegend text
legendHintTextlegendHintTextstringstringNoNoHTML to use within the legend element. If this is used, the legendText argument will be ignored.HTML to use within the legend element. If this is used, the legendText argument will be ignored.
legendHintHtmllegendHintHtmlstringstringNoNoHTML to use within the legend hint element. If this is used, the hintText argument will be ignored.HTML to use within the legend hint element. If this is used, the hintText argument will be ignored.
errorMessageerrorMessageobjectobjectNoNoProvide text or html key with values. See errorMessage component for more details.Provide text or html key with values. See errorMessage component for more details.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the fieldset container.Any extra HTML attributes (for example data attributes) to add to the fieldset container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/file-upload/__snapshots__/template.test.js.snap b/src/file-upload/__snapshots__/template.test.js.snap index 0bfd5dde10..30711dbc96 100644 --- a/src/file-upload/__snapshots__/template.test.js.snap +++ b/src/file-upload/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`File upload with dependant components renders with error message 1`] = ` - + Error message @@ -10,7 +10,7 @@ exports[`File upload with dependant components renders with error message 1`] = exports[`File upload with dependant components renders with label 1`] = ` -
NameNameTypeTypeRequiredRequiredDescriptionDescription
ididstringstringYesYesThe id of the inputThe id of the input
namenamestringstringYesYesThe name of the input, which is submitted with the form dataThe name of the input, which is submitted with the form data
valuevaluestringstringNoNoOptional initial value of the inputOptional initial value of the input
labellabelobjectobjectYesYesArguments for the label componentArguments for the label component
errorMessageerrorMessageobjectobjectNoNoArguments for the error message componentArguments for the error message component
classesclassesstringstringNoNoOptional additional classesOptional additional classes
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example accept or data attributes) to add to the input tagAny extra HTML attributes (for example accept or data attributes) to add to the input tag
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/footer/_footer.scss b/src/footer/_footer.scss index 6f27fab80c..4aa33404cd 100644 --- a/src/footer/_footer.scss +++ b/src/footer/_footer.scss @@ -34,7 +34,7 @@ $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2); $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2); - .govuk-c-footer { + .govuk-footer { @include govuk-font-regular; @include govuk-typography-responsive($govuk-font-16); @include govuk-responsive-padding($govuk-spacing-responsive-7, "top"); @@ -45,7 +45,7 @@ background: $govuk-footer-background; } - .govuk-c-footer__link { + .govuk-footer__link { @include govuk-focusable-fill; &:link, @@ -73,14 +73,14 @@ } } - .govuk-c-footer__section-break { + .govuk-footer__section-break { margin: 0; // Reset `
` default margins @include govuk-responsive-margin($govuk-spacing-responsive-8, "bottom"); border: 0; // Reset `
` default borders border-bottom: 1px solid $govuk-footer-border; } - .govuk-c-footer__meta { + .govuk-footer__meta { display: flex; // Support: Flexbox margin-right: -$govuk-gutter-half; margin-left: -$govuk-gutter-half; @@ -89,20 +89,20 @@ justify-content: center; // Support: Flexbox } - .govuk-c-footer__meta-item { + .govuk-footer__meta-item { margin-right: $govuk-gutter-half; margin-bottom: $govuk-spacing-scale-5; margin-left: $govuk-gutter-half; } - .govuk-c-footer__meta-item--grow { + .govuk-footer__meta-item--grow { flex: 1; // Support: Flexbox @include mq ($until: tablet) { flex-basis: 320px; // Support: Flexbox } } - .govuk-c-footer__licence-logo { + .govuk-footer__licence-logo { display: inline-block; margin-right: $govuk-spacing-scale-2; @include mq ($until: desktop) { @@ -111,11 +111,11 @@ vertical-align: top; } - .govuk-c-footer__licence-description { + .govuk-footer__licence-description { display: inline-block; } - .govuk-c-footer__copyright-logo { + .govuk-footer__copyright-logo { display: inline-block; min-width: $govuk-footer-crest-image-width; padding-top: ($govuk-footer-crest-image-height + $govuk-spacing-scale-2); @@ -131,19 +131,19 @@ white-space: nowrap; } - .govuk-c-footer__inline-list { + .govuk-footer__inline-list { margin-top: 0; margin-bottom: $govuk-spacing-scale-3; padding: 0; } - .govuk-c-footer__inline-list-item { + .govuk-footer__inline-list-item { display: inline-block; margin-right: $govuk-spacing-scale-3; margin-bottom: $govuk-spacing-scale-1; } - .govuk-c-footer__heading { + .govuk-footer__heading { @include govuk-responsive-margin($govuk-spacing-responsive-7, "bottom"); padding-bottom: $govuk-spacing-scale-4; @include mq ($until: tablet) { @@ -152,14 +152,14 @@ border-bottom: 1px solid $govuk-footer-border; } - .govuk-c-footer__navigation { + .govuk-footer__navigation { display: flex; // Support: Flexbox margin-right: -$govuk-gutter-half; margin-left: -$govuk-gutter-half; flex-wrap: wrap; // Support: Flexbox } - .govuk-c-footer__section { + .govuk-footer__section { display: inline-block; margin-right: $govuk-gutter-half; margin-bottom: $govuk-gutter; @@ -177,12 +177,12 @@ // Sections two-third:one-third on desktop @include mq ($from: desktop) { - .govuk-c-footer__section:first-child { + .govuk-footer__section:first-child { flex-grow: 2; // Support: Flexbox } } - .govuk-c-footer__list { + .govuk-footer__list { margin: 0; padding: 0; list-style: none; @@ -190,20 +190,20 @@ } @include mq ($from: desktop) { - .govuk-c-footer__list--columns-2 { + .govuk-footer__list--columns-2 { column-count: 2; // Support: Columns } - .govuk-c-footer__list--columns-3 { + .govuk-footer__list--columns-3 { column-count: 3; // Support: Columns } } - .govuk-c-footer__list-item { + .govuk-footer__list-item { @include govuk-responsive-margin($govuk-spacing-responsive-4, "bottom"); } - .govuk-c-footer__list-item:last-child { + .govuk-footer__list-item:last-child { margin-bottom: 0; } } diff --git a/src/footer/template.njk b/src/footer/template.njk index 1c4a727067..98c6773e5a 100644 --- a/src/footer/template.njk +++ b/src/footer/template.njk @@ -1,22 +1,22 @@ -
{% if params.navigation %} -
+
{% for item in params.navigation %} -
-

{{ item.title }}

+
+

{{ item.title }}

{% if item.items %} {% set listClasses %} {% if item.columns %} - govuk-c-footer__list--columns-{{ item.columns }} + govuk-footer__list--columns-{{ item.columns }} {% endif %} {% endset %} -
{% endfor %}
-
+
{% endif %} -
-
+
+
{% if params.meta and params.meta.items %}

Support links

-
-
+
diff --git a/src/footer/template.test.js b/src/footer/template.test.js index 0510184323..ebcf062fad 100644 --- a/src/footer/template.test.js +++ b/src/footer/template.test.js @@ -17,7 +17,7 @@ describe('footer', () => { it('entire component must have a role of `contentinfo`', () => { const $ = render('footer', {}) - const $component = $('.govuk-c-footer') + const $component = $('.govuk-footer') expect($component.attr('role')).toEqual('contentinfo') }) @@ -29,7 +29,7 @@ describe('footer', () => { } }) - const $component = $('.govuk-c-footer') + const $component = $('.govuk-footer') expect($component.attr('data-test-attribute')).toEqual('value') expect($component.attr('data-test-attribute-2')).toEqual('value-2') }) @@ -39,7 +39,7 @@ describe('footer', () => { classes: 'app-o-footer--custom-modifier' }) - const $component = $('.govuk-c-footer') + const $component = $('.govuk-footer') expect($component.hasClass('app-o-footer--custom-modifier')).toBeTruthy() }) @@ -48,7 +48,7 @@ describe('footer', () => { containerClasses: 'app-o-width-container' }) - const $component = $('.govuk-c-footer') + const $component = $('.govuk-footer') const $container = $component.find('.govuk-o-width-container') expect($container.hasClass('app-o-width-container')).toBeTruthy() @@ -65,7 +65,7 @@ describe('footer', () => { it('renders heading', () => { const $ = render('footer', examples['with-meta']) - const $component = $('.govuk-c-footer') + const $component = $('.govuk-footer') const $heading = $component.find('h2.govuk-h-visually-hidden') expect($heading.text()).toEqual('Support links') }) @@ -73,10 +73,10 @@ describe('footer', () => { it('renders links', () => { const $ = render('footer', examples['with-meta']) - const $component = $('.govuk-c-footer') - const $list = $component.find('ul.govuk-c-footer__inline-list') - const $items = $list.find('li.govuk-c-footer__inline-list-item') - const $firstItem = $items.find('a.govuk-c-footer__link:first-child') + const $component = $('.govuk-footer') + const $list = $component.find('ul.govuk-footer__inline-list') + const $items = $list.find('li.govuk-footer__inline-list-item') + const $firstItem = $items.find('a.govuk-footer__link:first-child') expect($items.length).toEqual(3) expect($firstItem.attr('href')).toEqual('#1') expect($firstItem.text()).toContain('Item 1') @@ -94,11 +94,11 @@ describe('footer', () => { it('renders headings', () => { const $ = render('footer', examples['with-navigation']) - const $component = $('.govuk-c-footer') - const $firstSection = $component.find('.govuk-c-footer__section:first-child') - const $lastSection = $component.find('.govuk-c-footer__section:last-child') - const $firstHeading = $firstSection.find('h2.govuk-c-footer__heading') - const $lastHeading = $lastSection.find('h2.govuk-c-footer__heading') + const $component = $('.govuk-footer') + const $firstSection = $component.find('.govuk-footer__section:first-child') + const $lastSection = $component.find('.govuk-footer__section:last-child') + const $firstHeading = $firstSection.find('h2.govuk-footer__heading') + const $lastHeading = $lastSection.find('h2.govuk-footer__heading') expect($firstHeading.text()).toEqual('Two column list') expect($lastHeading.text()).toEqual('Single column list') }) @@ -106,10 +106,10 @@ describe('footer', () => { it('renders lists of links', () => { const $ = render('footer', examples['with-navigation']) - const $component = $('.govuk-c-footer') - const $list = $component.find('ul.govuk-c-footer__list') - const $items = $list.find('li.govuk-c-footer__list-item') - const $firstItem = $items.find('a.govuk-c-footer__link:first-child') + const $component = $('.govuk-footer') + const $list = $component.find('ul.govuk-footer__list') + const $items = $list.find('li.govuk-footer__list-item') + const $firstItem = $items.find('a.govuk-footer__link:first-child') expect($items.length).toEqual(9) expect($firstItem.attr('href')).toEqual('#1') expect($firstItem.text()).toContain('Navigation item 1') @@ -118,9 +118,9 @@ describe('footer', () => { it('renders lists in columns', () => { const $ = render('footer', examples['with-navigation']) - const $component = $('.govuk-c-footer') - const $list = $component.find('ul.govuk-c-footer__list') - expect($list.hasClass('govuk-c-footer__list--columns-2')).toBeTruthy() + const $component = $('.govuk-footer') + const $list = $component.find('ul.govuk-footer__list') + expect($list.hasClass('govuk-footer__list--columns-2')).toBeTruthy() }) }) @@ -128,16 +128,16 @@ describe('footer', () => { it('renders when there is a navigation', () => { const $ = render('footer', examples['with-navigation']) - const $component = $('.govuk-c-footer') - const $sectionBreak = $component.find('hr.govuk-c-footer__section-break') + const $component = $('.govuk-footer') + const $sectionBreak = $component.find('hr.govuk-footer__section-break') expect($sectionBreak.length).toBeTruthy() }) it('renders nothing when there is only meta', () => { const $ = render('footer', examples['with-meta']) - const $component = $('.govuk-c-footer') - const $sectionBreak = $component.find('hr.govuk-c-footer__section-break') + const $component = $('.govuk-footer') + const $sectionBreak = $component.find('hr.govuk-footer__section-break') expect($sectionBreak.length).toBeFalsy() }) }) diff --git a/src/globals/core/_links.scss b/src/globals/core/_links.scss index 87cf009632..615ba16864 100644 --- a/src/globals/core/_links.scss +++ b/src/globals/core/_links.scss @@ -19,7 +19,7 @@ /// govuk-link-common mixin in order to get the focus state. /// /// @example scss -/// .govuk-c-component__link { +/// .govuk-component__link { /// @include govuk-link-common; /// @include govuk-link-style-muted; /// } @@ -50,7 +50,7 @@ /// govuk-link-common mixin in order to get the focus state. /// /// @example scss -/// .govuk-c-component__link { +/// .govuk-component__link { /// @include govuk-link-common; /// @include govuk-link-style-muted; /// } @@ -87,7 +87,7 @@ /// govuk-link-common mixin in order to get the focus state. /// /// @example scss -/// .govuk-c-component__link { +/// .govuk-component__link { /// @include govuk-link-common; /// @include govuk-link-style-text; /// } diff --git a/src/globals/settings/_media-queries.scss b/src/globals/settings/_media-queries.scss index 884faa0be8..e34384d8a1 100644 --- a/src/globals/settings/_media-queries.scss +++ b/src/globals/settings/_media-queries.scss @@ -9,7 +9,7 @@ // Write css mobile-first, overriding mobile styles for tablet and desktop // -// .govuk-c-component { +// .govuk-component { // // Apply styling to mobile and upwards // @include mq($from: mobile) { // color: red; diff --git a/src/input/README.md b/src/input/README.md index e9ab4732f7..664599d67f 100644 --- a/src/input/README.md +++ b/src/input/README.md @@ -16,11 +16,11 @@ Find out when to use the Input component in your service in the [GOV.UK Design S #### Markup -
NameNameTypeTypeRequiredRequiredDescriptionDescription
metametaobjectobjectNoNoObject containing parameters for the meta navigationObject containing parameters for the meta navigation
meta.items[]meta.items[]arrayarrayNoNoArray of items for use in the meta section of the footerArray of items for use in the meta section of the footer
navigationnavigationarrayarrayNoNoArray of items for use in the navigation section of the footerArray of items for use in the navigation section of the footer
navigation[].titlenavigation[].titlestringstringNoNoTitle for a sectionTitle for a section
navigation[].columnsnavigation[].columnsintegerintegerNoNoAmount of columns to display items inAmount of columns to display items in
navigation[].itemsnavigation[].itemsarrayarrayNoNoArray of items to display in the listArray of items to display in the list
attributesattributesobjectobjectNoNoWill add attributes to the footer component rootWill add attributes to the footer component root
classesclassesstringstringNoNoWill add classes to the footer component rootWill add classes to the footer component root
containerClassescontainerClassesstringstringNoNoClasses that can be added to the container, useful if you want to make the footer full width.Classes that can be added to the container, useful if you want to make the footer full width.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/input/__snapshots__/template.test.js.snap b/src/input/__snapshots__/template.test.js.snap index d2d9165a12..f060b75d21 100644 --- a/src/input/__snapshots__/template.test.js.snap +++ b/src/input/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Input with dependant components renders with error message 1`] = ` - + Error message @@ -10,7 +10,7 @@ exports[`Input with dependant components renders with error message 1`] = ` exports[`Input with dependant components renders with label 1`] = ` -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
ididstringstringYesYesThe id of the inputThe id of the input
namenamestringstringYesYesThe name of the input, which is submitted with the form dataThe name of the input, which is submitted with the form data
typetypestringstringNoNoType of input control to render. Defaults to "text"Type of input control to render. Defaults to "text"
labellabelobjectobjectNoNoArguments for the label component. See label component.Arguments for the label component. See label component.
errorMessageerrorMessageobjectobjectNoNoOptional error messageOptional error message
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the input component.Any extra HTML attributes (for example data attributes) to add to the input component.
valuevaluestringstringNoNoOptional initial value of the inputOptional initial value of the input
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/label/__snapshots__/template.test.js.snap b/src/label/__snapshots__/template.test.js.snap index bc469087b6..e3f64d2333 100644 --- a/src/label/__snapshots__/template.test.js.snap +++ b/src/label/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Label with dependant components renders the error message text 1`] = ` - + Error message goes here diff --git a/src/label/_label.scss b/src/label/_label.scss index 7fa5864da3..bfe98a9869 100644 --- a/src/label/_label.scss +++ b/src/label/_label.scss @@ -3,19 +3,19 @@ @import "../error-message/error-message"; @include govuk-exports("label") { - .govuk-c-label { + .govuk-label { @include govuk-font-regular-19; @include govuk-text-colour; display: block; } - .govuk-c-label--bold { + .govuk-label--bold { @include govuk-typography-weight-bold; } // Hint text sits inside a label, to be read by AT - .govuk-c-label__hint { + .govuk-label__hint { @include govuk-typography-weight-regular; display: block; diff --git a/src/label/label.yaml b/src/label/label.yaml index d99778d5e9..8f74a4ba2a 100644 --- a/src/label/label.yaml +++ b/src/label/label.yaml @@ -6,7 +6,7 @@ examples: For example, ‘QQ 12 34 56 C’.' - name: with bold text data: - classes: govuk-c-label--bold + classes: govuk-label--bold text: National Insurance number hintText: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.' diff --git a/src/label/template.njk b/src/label/template.njk index 5b91f7f541..fcf2197b6a 100644 --- a/src/label/template.njk +++ b/src/label/template.njk @@ -1,11 +1,11 @@ {% from "error-message/macro.njk" import govukErrorMessage -%} -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
texttextstringstringNoNoText to use within the labelText to use within the label
htmlhtmlstringstringNoNoHTML to use within the label. If this is provided, the text argument will be ignored.HTML to use within the label. If this is provided, the text argument will be ignored.
forforstringstringYesYesThe value of the for attribute, the id of the input the label is associated withThe value of the for attribute, the id of the input the label is associated with
hintTexthintTextstringstringNoNoOptional text to use as a hintOptional text to use as a hint
hintHtmlhintHtmlstringstringNoNoOptional HTML to use as a hint. If this is provided, the hintText argument will be ignored.Optional HTML to use as a hint. If this is provided, the hintText argument will be ignored.
errorMessageerrorMessageobjectobjectNoNoOptional error message. See errorMessage component.Optional error message. See errorMessage component.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the error message span tag.Any extra HTML attributes (for example data attributes) to add to the error message span tag.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/panel/_panel.scss b/src/panel/_panel.scss index e464fdcd6a..905bdb673d 100644 --- a/src/panel/_panel.scss +++ b/src/panel/_panel.scss @@ -15,7 +15,7 @@ @include govuk-exports("panel") { - .govuk-c-panel { + .govuk-panel { @include govuk-font-regular-19; box-sizing: border-box; @@ -32,19 +32,19 @@ } } - .govuk-c-panel--confirmation { + .govuk-panel--confirmation { color: $govuk-white; background: $govuk-turquoise; } - .govuk-c-panel__title { + .govuk-panel__title { margin-top: 0; margin-bottom: $govuk-spacing-scale-6; @include govuk-font-bold-48; } - .govuk-c-panel__body { + .govuk-panel__body { @include govuk-font-regular-36; } diff --git a/src/panel/template.njk b/src/panel/template.njk index 29ae7b73f4..11183ade59 100644 --- a/src/panel/template.njk +++ b/src/panel/template.njk @@ -1,10 +1,10 @@ -
-

+

{{ params.titleHtml | safe if params.titleHtml else params.titleText }}

-
+
{{ params.html | safe if params.html else params.text }}
diff --git a/src/panel/template.test.js b/src/panel/template.test.js index 6b15e19ec2..d18edd989e 100644 --- a/src/panel/template.test.js +++ b/src/panel/template.test.js @@ -16,7 +16,7 @@ describe('Panel', () => { it('renders title text', () => { const $ = render('panel', examples.default) - const panelTitle = $('.govuk-c-panel__title').text().trim() + const panelTitle = $('.govuk-panel__title').text().trim() expect(panelTitle).toEqual('Application complete') }) @@ -26,7 +26,7 @@ describe('Panel', () => { titleText: 'Application not complete' }) - const panelTitle = $('.govuk-c-panel__title').html().trim() + const panelTitle = $('.govuk-panel__title').html().trim() expect(panelTitle).toEqual('Application <strong>not</strong> complete') }) @@ -35,13 +35,13 @@ describe('Panel', () => { titleHtml: 'Application not complete' }) - const panelTitle = $('.govuk-c-panel__title').html().trim() + const panelTitle = $('.govuk-panel__title').html().trim() expect(panelTitle).toEqual('Application not complete') }) it('renders body text', () => { const $ = render('panel', examples.default) - const panelBodyText = $('.govuk-c-panel__body').text().trim() + const panelBodyText = $('.govuk-panel__body').text().trim() expect(panelBodyText).toEqual('Your reference number: HDJ2123F') }) @@ -51,7 +51,7 @@ describe('Panel', () => { text: 'Your reference number
HDJ2123F' }) - const panelBodyText = $('.govuk-c-panel__body').html().trim() + const panelBodyText = $('.govuk-panel__body').html().trim() expect(panelBodyText).toEqual('Your reference number<br><strong>HDJ2123F</strong>') }) @@ -60,7 +60,7 @@ describe('Panel', () => { html: 'Your reference number
HDJ2123F' }) - const panelBodyText = $('.govuk-c-panel__body').html().trim() + const panelBodyText = $('.govuk-panel__body').html().trim() expect(panelBodyText).toEqual('Your reference number
HDJ2123F') }) @@ -69,7 +69,7 @@ describe('Panel', () => { classes: 'extra-class one-more-class' }) - const $component = $('.govuk-c-panel') + const $component = $('.govuk-panel') expect($component.hasClass('extra-class one-more-class')).toBeTruthy() }) @@ -81,7 +81,7 @@ describe('Panel', () => { } }) - const $component = $('.govuk-c-panel') + const $component = $('.govuk-panel') expect($component.attr('first-attribute')).toEqual('true') expect($component.attr('second-attribute')).toEqual('false') }) diff --git a/src/phase-banner/README.md b/src/phase-banner/README.md index 5910ae3b79..11989262bd 100644 --- a/src/phase-banner/README.md +++ b/src/phase-banner/README.md @@ -16,11 +16,11 @@ Find out when to use the Phase banner component in your service in the [GOV.UK D #### Markup -
-

+

+

alpha - + This is a new service - your feedback will help us to improve it.

@@ -65,83 +65,83 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments -
NameNameTypeTypeRequiredRequiredDescriptionDescription
titleTexttitleTextstringstringYesYesText for the panel titleText for the panel title
titleHtmltitleHtmlstringstringYesYesHTML for the panel title. If this is provided, the titleText argument is ignored.HTML for the panel title. If this is provided, the titleText argument is ignored.
texttextstringstringNoNoText for the panel contentText for the panel content
htmlhtmlstringstringNoNoHTML for the panel content. If this is provided, the text argument is ignored.HTML for the panel content. If this is provided, the text argument is ignored.
classesclassesstringstringNoNoOptional additional classesOptional additional classes
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the panel containerAny extra HTML attributes (for example data attributes) to add to the panel container
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/phase-banner/__snapshots__/template.test.js.snap b/src/phase-banner/__snapshots__/template.test.js.snap index 37d5a21a7c..7df3476c31 100644 --- a/src/phase-banner/__snapshots__/template.test.js.snap +++ b/src/phase-banner/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Phase banner with dependant components renders the tag component classes 1`] = ` - + alpha @@ -10,7 +10,7 @@ exports[`Phase banner with dependant components renders the tag component classe exports[`Phase banner with dependant components renders the tag component html 1`] = ` - + alpha @@ -20,7 +20,7 @@ exports[`Phase banner with dependant components renders the tag component html 1 exports[`Phase banner with dependant components renders the tag component text 1`] = ` - + alpha diff --git a/src/phase-banner/_phase-banner.scss b/src/phase-banner/_phase-banner.scss index 5e9573aa60..47f8e38046 100644 --- a/src/phase-banner/_phase-banner.scss +++ b/src/phase-banner/_phase-banner.scss @@ -2,7 +2,7 @@ @import "../tag/tag"; @include govuk-exports("phase-banner") { - .govuk-c-phase-banner { + .govuk-phase-banner { @include govuk-font-regular-16; @include govuk-text-colour; @@ -12,16 +12,16 @@ border-bottom: 1px solid $govuk-border-colour; } - .govuk-c-phase-banner__content { + .govuk-phase-banner__content { display: table; margin: 0; } - .govuk-c-phase-banner__content__tag { + .govuk-phase-banner__content__tag { margin-right: $govuk-spacing-scale-2; } - .govuk-c-phase-banner__text { + .govuk-phase-banner__text { display: table-cell; vertical-align: baseline; } diff --git a/src/phase-banner/template.njk b/src/phase-banner/template.njk index e78d1d640c..37bcb10571 100644 --- a/src/phase-banner/template.njk +++ b/src/phase-banner/template.njk @@ -1,16 +1,16 @@ {% from "tag/macro.njk" import govukTag -%} -
-

+

{{- govukTag( { "text": params.tag.text, "html": params.tag.html, - "classes": "govuk-c-phase-banner__content__tag " + (params.tag.classes if params.tag.classes) + "classes": "govuk-phase-banner__content__tag " + (params.tag.classes if params.tag.classes) } ) -}} - + {{ params.html | safe if params.html else params.text }}

diff --git a/src/phase-banner/template.test.js b/src/phase-banner/template.test.js index e7b8ce2a27..6b4d8b21b6 100644 --- a/src/phase-banner/template.test.js +++ b/src/phase-banner/template.test.js @@ -20,7 +20,7 @@ describe('Phase banner', () => { classes: 'extra-class one-more-class' }) - const $component = $('.govuk-c-phase-banner') + const $component = $('.govuk-phase-banner') expect($component.hasClass('extra-class one-more-class')).toBeTruthy() }) @@ -28,7 +28,7 @@ describe('Phase banner', () => { const $ = render('phase-banner', { text: 'This is a new service – your feedback will help us to improve it.' }) - const phaseBannerText = $('.govuk-c-phase-banner__text').text().trim() + const phaseBannerText = $('.govuk-phase-banner__text').text().trim() expect(phaseBannerText).toEqual('This is a new service – your feedback will help us to improve it.') }) @@ -38,14 +38,14 @@ describe('Phase banner', () => { text: 'This is a new service - your feedback will help us to improve it.' }) - const phaseBannerText = $('.govuk-c-phase-banner__text').html().trim() + const phaseBannerText = $('.govuk-phase-banner__text').html().trim() expect(phaseBannerText).toEqual('This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.') }) it('allows body HTML to be passed un-escaped', () => { const $ = render('phase-banner', examples.default) - const phaseBannerText = $('.govuk-c-phase-banner__text').html().trim() + const phaseBannerText = $('.govuk-phase-banner__text').html().trim() expect(phaseBannerText).toEqual('This is a new service - your feedback will help us to improve it.') }) @@ -57,7 +57,7 @@ describe('Phase banner', () => { } }) - const $component = $('.govuk-c-phase-banner') + const $component = $('.govuk-phase-banner') expect($component.attr('first-attribute')).toEqual('true') expect($component.attr('second-attribute')).toEqual('false') }) @@ -66,7 +66,7 @@ describe('Phase banner', () => { it('renders the tag component text', () => { const $ = render('phase-banner', examples.default) - expect(htmlWithClassName($, '.govuk-c-phase-banner__content__tag')).toMatchSnapshot() + expect(htmlWithClassName($, '.govuk-phase-banner__content__tag')).toMatchSnapshot() }) it('renders the tag component html', () => { @@ -76,18 +76,18 @@ describe('Phase banner', () => { } }) - expect(htmlWithClassName($, '.govuk-c-phase-banner__content__tag')).toMatchSnapshot() + expect(htmlWithClassName($, '.govuk-phase-banner__content__tag')).toMatchSnapshot() }) it('renders the tag component classes', () => { const $ = render('phase-banner', { 'tag': { 'text': 'alpha', - 'classes': 'govuk-c-tag--inactive' + 'classes': 'govuk-tag--inactive' } }) - expect(htmlWithClassName($, '.govuk-c-phase-banner__content__tag')).toMatchSnapshot() + expect(htmlWithClassName($, '.govuk-phase-banner__content__tag')).toMatchSnapshot() }) }) }) diff --git a/src/radios/README.md b/src/radios/README.md index dab82f7503..9f4466bae3 100644 --- a/src/radios/README.md +++ b/src/radios/README.md @@ -17,28 +17,28 @@ Find out when to use the Radios component in your service in the [GOV.UK Design #### Markup
-
+
- + Have you changed your name? - This includes changing your last name or spelling your name differently. + This includes changing your last name or spelling your name differently. -
+
-
- -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
texttextstringstringNoNoText for teh phase-banner message.Text for teh phase-banner message.
htmlhtmlstringstringNoNoHTML to use for the phase-banner message. If this is provided, the text argument will be ignored.HTML to use for the phase-banner message. If this is provided, the text argument will be ignored.
tagtagobjectobjectNoNoArguments for the tag object. Can contain text or html.Arguments for the tag object. Can contain text or html.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the phase banner container.Any extra HTML attributes (for example data attributes) to add to the phase banner container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/radios/__snapshots__/template.test.js.snap b/src/radios/__snapshots__/template.test.js.snap index 4c3d022388..367b122f8c 100644 --- a/src/radios/__snapshots__/template.test.js.snap +++ b/src/radios/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Radios nested dependant components passes through fieldset params without breaking 1`] = ` - + Please select an option @@ -10,13 +10,13 @@ exports[`Radios nested dependant components passes through fieldset params witho exports[`Radios nested dependant components passes through fieldset params without breaking 2`] = ` -
- + Have you changed your name? - + This includes changing your last name or spelling your name differently. @@ -26,10 +26,10 @@ exports[`Radios nested dependant components passes through fieldset params witho exports[`Radios nested dependant components passes through html fieldset params without breaking 1`] = ` -
- +
+ Have <b>you</b> changed your name? - + This includes @@ -43,7 +43,7 @@ exports[`Radios nested dependant components passes through html fieldset params exports[`Radios nested dependant components passes through label params without breaking 1`] = ` - -
NameNameTypeTypeRequiredRequiredDescriptionDescription
fieldsetfieldsetobjectobjectNoNoArguments for the fieldset component (e.g. legendText, legendHintText, errorMessage). See fieldset component.Arguments for the fieldset component (e.g. legendText, legendHintText, errorMessage). See fieldset component.
classesclassesstringstringNoNoOptional additional classesOptional additional classes
idPrefixidPrefixstringstringNoNoString to prefix id for each radio item if no id is specified on each item.String to prefix id for each radio item if no id is specified on each item.
namenamestringstringYesYesName attribute for each radio item.Name attribute for each radio item.
itemsitemsarrayarrayYesYesArray of radio items.Array of radio items.
texttextstringstringNoNoText to use within the radio label.Text to use within the radio label.
htmlhtmlstringstringNoNoHTML to use within the radio label. If this is provided, the text argument will be ignored.HTML to use within the radio label. If this is provided, the text argument will be ignored.
labellabelobjectobjectNoNoProvide additional attributes to the radio label.Provide additional attributes to the radio label.
checkedcheckedbooleanbooleanNoNoIf true, radio will be checked.If true, radio will be checked.
disableddisabledbooleanbooleanNoNoIf true, radio will be disabled.If true, radio will be disabled.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the radio container.Any extra HTML attributes (for example data attributes) to add to the radio container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/select/__snapshots__/template.test.js.snap b/src/select/__snapshots__/template.test.js.snap index c76edd5ea9..ae4676e8e2 100644 --- a/src/select/__snapshots__/template.test.js.snap +++ b/src/select/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Select with dependant components renders with error message 1`] = ` - + Error message @@ -10,7 +10,7 @@ exports[`Select with dependant components renders with error message 1`] = ` exports[`Select with dependant components renders with label 1`] = ` -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classes.Optional additional classes.
ididstringstringYesYesId for each select boxId for each select box
namenamestringstringYesYesName property for the select.Name property for the select.
itemsitemsarrayarrayYesYesArray of option items for the select.Array of option items for the select.
valuevaluestringstringNoNoValue for the option item.Value for the option item.
texttextstringstringYesYesText for the option item.Text for the option item.
selectedselectedbooleanbooleanNoNoSets the option as the selected.Sets the option as the selected.
disableddisabledbooleanbooleanNoNoSets the option item as disabled.Sets the option item as disabled.
labellabelobjectobjectNoNoOptional label text or HTML by specifying value for either text or html keys. See label component.Optional label text or HTML by specifying value for either text or html keys. See label component.
errorMessageerrorMessagestringstringNoNoOptional error message. See errorMessage component.Optional error message. See errorMessage component.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the select component.Any extra HTML attributes (for example data attributes) to add to the select component.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/skip-link/_skip-link.scss b/src/skip-link/_skip-link.scss index 44ac60c901..70d8c6cd3f 100644 --- a/src/skip-link/_skip-link.scss +++ b/src/skip-link/_skip-link.scss @@ -20,7 +20,7 @@ @import "../globals/core/links"; @include govuk-exports("skip-link") { - .govuk-c-skip-link { + .govuk-skip-link { @include govuk-h-visually-hidden-focusable; @include govuk-link-common; @include govuk-link-style-text; diff --git a/src/skip-link/template.njk b/src/skip-link/template.njk index b160095df6..b78695eae8 100644 --- a/src/skip-link/template.njk +++ b/src/skip-link/template.njk @@ -1,3 +1,3 @@ - + {{- params.html | safe if params.html else params.text -}} diff --git a/src/skip-link/template.test.js b/src/skip-link/template.test.js index b1d77a2778..533b28860c 100644 --- a/src/skip-link/template.test.js +++ b/src/skip-link/template.test.js @@ -19,14 +19,14 @@ describe('Skip link', () => { href: '#custom' }) - const $component = $('.govuk-c-skip-link') + const $component = $('.govuk-skip-link') expect($component.attr('href')).toEqual('#custom') }) it('renders default href', () => { const $ = render('skip-link', {}) - const $component = $('.govuk-c-skip-link') + const $component = $('.govuk-skip-link') expect($component.attr('href')).toEqual('#content') }) @@ -35,7 +35,7 @@ describe('Skip link', () => { text: 'skip' }) - const $component = $('.govuk-c-skip-link') + const $component = $('.govuk-skip-link') expect($component.html()).toEqual('skip') }) @@ -44,7 +44,7 @@ describe('Skip link', () => { text: '

skip

' }) - const $component = $('.govuk-c-skip-link') + const $component = $('.govuk-skip-link') expect($component.html()).toEqual('<p>skip</p>') }) @@ -53,17 +53,17 @@ describe('Skip link', () => { html: '

skip

' }) - const $component = $('.govuk-c-skip-link') + const $component = $('.govuk-skip-link') expect($component.html()).toEqual('

skip

') }) it('renders classes', () => { const $ = render('skip-link', { - classes: 'app-c-skip-link--custom-class' + classes: 'app-skip-link--custom-class' }) - const $component = $('.govuk-c-skip-link') - expect($component.hasClass('app-c-skip-link--custom-class')).toBeTruthy() + const $component = $('.govuk-skip-link') + expect($component.hasClass('app-skip-link--custom-class')).toBeTruthy() }) it('renders attributes', () => { @@ -74,7 +74,7 @@ describe('Skip link', () => { } }) - const $component = $('.govuk-c-skip-link') + const $component = $('.govuk-skip-link') expect($component.attr('data-test')).toEqual('attribute') expect($component.attr('aria-label')).toEqual('Skip to content') }) diff --git a/src/table/README.md b/src/table/README.md index 31c63a9448..5732b6a7cb 100644 --- a/src/table/README.md +++ b/src/table/README.md @@ -16,37 +16,37 @@ Find out when to use the Table component in your service in the [GOV.UK Design S #### Markup -
NameNameTypeTypeRequiredRequiredDescriptionDescription
hrefhrefstringstringYesYesThe value of the skip link href attribute. Defaults to #contentThe value of the skip link href attribute. Defaults to #content
texttextstringstringNoNoText to use within the skip link.Text to use within the skip link.
htmlhtmlstringstringNoNoHTML to use within the skip link. If this is provided, the text argument will be ignored.HTML to use within the skip link. If this is provided, the text argument will be ignored.
classesclassesstringstringNoNoOptional additional classes for the skip link.Optional additional classes for the skip link.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the skip link.Any extra HTML attributes (for example data attributes) to add to the skip link.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + @@ -107,49 +107,49 @@ Find out when to use the Table component in your service in the [GOV.UK Design S #### Markup -
JanuaryJanuary£85£85£95£95
FebruaryFebruary£75£75£55£55
MarchMarch£165£165£125£125
+
- - + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -223,51 +223,51 @@ Find out when to use the Table component in your service in the [GOV.UK Design S #### Markup -
Month you applyMonth you applyRate for bicyclesRate for bicyclesRate for vehiclesRate for vehicles
JanuaryJanuary£85£85£95£95
FebruaryFebruary£75£75£55£55
MarchMarch£165£165£125£125
+
- + - - + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -366,167 +366,167 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments -
Caption 1 : Months and ratesCaption 1 : Months and rates
Month you applyMonth you applyRate for bicyclesRate for bicyclesRate for vehiclesRate for vehicles
JanuaryJanuary£85£85£95£95
FebruaryFebruary£75£75£55£55
MarchMarch£165£165£125£125
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/table/_table.scss b/src/table/_table.scss index 04996b35d1..cac5f14690 100644 --- a/src/table/_table.scss +++ b/src/table/_table.scss @@ -16,7 +16,7 @@ @import "../globals/settings/typography-responsive"; @include govuk-exports("table") { - .govuk-c-table { + .govuk-table { @include govuk-font-regular-19; @include govuk-text-colour; width: 100%; @@ -26,7 +26,7 @@ border-collapse: collapse; } - .govuk-c-table__header { + .govuk-table__header { @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; @@ -34,27 +34,27 @@ text-align: left; } - .govuk-c-table__cell { + .govuk-table__cell { 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--numeric { + .govuk-table__cell--numeric { @include govuk-font-regular-tabular; } - .govuk-c-table__header--numeric, - .govuk-c-table__cell--numeric { + .govuk-table__header--numeric, + .govuk-table__cell--numeric { text-align: right; } - .govuk-c-table__header:last-child, - .govuk-c-table__cell:last-child { + .govuk-table__header:last-child, + .govuk-table__cell:last-child { padding-right: 0; } - .govuk-c-table__caption { + .govuk-table__caption { @include govuk-typography-weight-bold; display: table-caption; diff --git a/src/table/template.njk b/src/table/template.njk index 777a3e2fd4..626ba35a81 100644 --- a/src/table/template.njk +++ b/src/table/template.njk @@ -1,34 +1,34 @@ -
NameNameformatformatRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classes.Optional additional classes.
captioncaptionstringstringNoNoOptional caption text.Optional caption text.
captionClassescaptionClassesstringstringNoNoOptional classes for caption text size. Class should correspond to the available typography heading classes.Optional classes for caption text size. Class should correspond to the available typography heading classes.
firstCellIsHeaderfirstCellIsHeaderbooleanbooleanNoNoIf set to true, first cell in table row will be a TH instead of a TD.If set to true, first cell in table row will be a TH instead of a TD.
headheadarrayarrayNoNoOptional array of table head cellsOptional array of table head cells
rowsrowsarrayarrayYesYesArray of table rows and cells.Array of table rows and cells.
texttextstringstringNoNoText for cells in table head and rows.Text for cells in table head and rows.
htmlhtmlstringstringNoNoHTML for cells in table head and rows. If this is specified, the text argument will be ignored.HTML for cells in table head and rows. If this is specified, the text argument will be ignored.
formatformatstringstringNoNoSpecify format of any cell. Currently we only use "numeric".Specify format of any cell. Currently we only use "numeric".
colspancolspannumbernumberNoNoSpecify how many columns the cell extends.Specify how many columns the cell extends.
rowspanrowspannumbernumberNoNoSpecify how many rows the cell extends.Specify how many rows the cell extends.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the table container.Any extra HTML attributes (for example data attributes) to add to the table container.
{% if params.caption %} - {% endif %} {% if params.head %} - - + + {% for item in params.head %} - {% endfor %} {% endif %} - + {% for row in params.rows %} - + {% for cell in row %} {% if loop.first and params.firstCellIsHeader %} - + {% elseif loop.first %} - {% else %} - {% endif %} diff --git a/src/table/template.test.js b/src/table/template.test.js index 9964f08a43..9cc53ac706 100644 --- a/src/table/template.test.js +++ b/src/table/template.test.js @@ -38,26 +38,26 @@ describe('Table', () => { ] ] }) - const $component = $('.govuk-c-table') + const $component = $('.govuk-table') expect($component.hasClass('custom-class-goes-here')).toBeTruthy() }) it('renders with caption text', () => { const $ = render('table', examples['table-with-caption-and-head']) - const $caption = $('.govuk-c-table__caption') + const $caption = $('.govuk-table__caption') expect($caption.text()).toBe('Caption 1 : Months and rates') }) it('renders the caption size class', () => { const $ = render('table', examples['table-with-caption-and-head']) - const $caption = $('.govuk-c-table__caption') + const $caption = $('.govuk-table__caption') expect($caption.hasClass('govuk-heading-m')).toBeTruthy() }) - it('renders first cell in every row as a
{{ params.caption }}
{{ item.html |safe if item.html else item.text }}
{{ cell.html | safe if cell.html else cell.text }}{{ cell.html | safe if cell.html else cell.text }}{{ cell.html | safe if cell.html else cell.text }}{{ cell.html | safe if cell.html else cell.text }} element with correct `govuk-c-table__header` class and `scope=row` attribute', () => { + it('renders first cell in every row as a element with correct `govuk-table__header` class and `scope=row` attribute', () => { const $ = render('table', { 'firstCellIsHeader': true, 'rows': [ @@ -89,31 +89,31 @@ describe('Table', () => { ] ] }) - const $component = $('.govuk-c-table') - const $tableBody = $component.find('.govuk-c-table .govuk-c-table__body') - const $firstTableRow = $tableBody.find('.govuk-c-table__row:first-child') - const $firstTableHeader = $firstTableRow.find('.govuk-c-table__header:first-child') + const $component = $('.govuk-table') + const $tableBody = $component.find('.govuk-table .govuk-table__body') + const $firstTableRow = $tableBody.find('.govuk-table__row:first-child') + const $firstTableHeader = $firstTableRow.find('.govuk-table__header:first-child') expect($firstTableHeader.get(0).tagName).toEqual('th') expect($firstTableHeader.attr('scope')).toEqual('row') - expect($firstTableHeader.hasClass('govuk-c-table__header')).toBeTruthy() + expect($firstTableHeader.hasClass('govuk-table__header')).toBeTruthy() - const $lastTableRow = $tableBody.find('.govuk-c-table__row:last-child') - const $lastTableHeader = $lastTableRow.find('.govuk-c-table__header:first-child') + const $lastTableRow = $tableBody.find('.govuk-table__row:last-child') + const $lastTableHeader = $lastTableRow.find('.govuk-table__header:first-child') expect($lastTableHeader.get(0).tagName).toEqual('th') expect($lastTableHeader.attr('scope')).toEqual('row') - expect($lastTableHeader.hasClass('govuk-c-table__header')).toBeTruthy() + expect($lastTableHeader.hasClass('govuk-table__header')).toBeTruthy() }) it('renders with thead', () => { const args = examples['table-with-head'] const $ = render('table', args) - const $component = $('.govuk-c-table') - const $tableHead = $component.find('.govuk-c-table__head') - const $tableHeadRow = $tableHead.find('.govuk-c-table__row') - const $tableHeadCell = $tableHeadRow.find('.govuk-c-table__header') + const $component = $('.govuk-table') + const $tableHead = $component.find('.govuk-table__head') + const $tableHeadRow = $tableHead.find('.govuk-table__row') + const $tableHeadCell = $tableHeadRow.find('.govuk-table__header') expect($tableHead).toHaveLength(1) expect($tableHeadRow).toHaveLength(1) @@ -157,18 +157,18 @@ describe('Table', () => { ] }) - const $component = $('.govuk-c-table') - const $tableHeadCell = $component.find('.govuk-c-table__head .govuk-c-table__header') + const $component = $('.govuk-table') + const $tableHeadCell = $component.find('.govuk-table__head .govuk-table__header') - expect($tableHeadCell.eq(1).attr('class')).toMatch('govuk-c-table__header--numeric') + expect($tableHeadCell.eq(1).attr('class')).toMatch('govuk-table__header--numeric') }) describe('rows and cells', () => { const $ = render('table', examples.default) - const $component = $('.govuk-c-table') - const $tableBody = $component.find('.govuk-c-table__body') - const $tableRow = $component.find('.govuk-c-table__row') - const $tableCell = $component.find('.govuk-c-table__cell') + const $component = $('.govuk-table') + const $tableBody = $component.find('.govuk-table__body') + const $tableRow = $component.find('.govuk-table__row') + const $tableCell = $component.find('.govuk-table__cell') it('renders one tbody element', () => { expect($tableBody).toHaveLength(1) @@ -222,10 +222,10 @@ describe('Table', () => { ] }) - const $component = $('.govuk-c-table') - const $tableBody = $component.find('.govuk-c-table__body') - const $tableRow = $tableBody.find('.govuk-c-table__row') - const $tableCell = $tableRow.find('.govuk-c-table__cell') + const $component = $('.govuk-table') + const $tableBody = $component.find('.govuk-table__body') + const $tableRow = $tableBody.find('.govuk-table__row') + const $tableCell = $tableRow.find('.govuk-table__cell') expect($tableCell.eq(1).html()).toEqual('85') }) @@ -248,10 +248,10 @@ describe('Table', () => { ] ] }) - const $component = $('.govuk-c-table') - const $tableBody = $component.find('.govuk-c-table__body') - const $tableRow = $tableBody.find('.govuk-c-table__row') - const $tableCell = $tableRow.find('.govuk-c-table__cell') + const $component = $('.govuk-table') + const $tableBody = $component.find('.govuk-table__body') + const $tableRow = $tableBody.find('.govuk-table__row') + const $tableCell = $tableRow.find('.govuk-table__cell') expect($tableCell.eq(1).html()).toEqual('<em>85</em>') }) @@ -279,10 +279,10 @@ describe('Table', () => { ] ] }) - const $component = $('.govuk-c-table') - const $tableCell = $component.find('.govuk-c-table__body .govuk-c-table__cell') + const $component = $('.govuk-table') + const $tableCell = $component.find('.govuk-table__body .govuk-table__cell') - expect($tableCell.eq(1).attr('class')).toMatch('govuk-c-table__cell--numeric') + expect($tableCell.eq(1).attr('class')).toMatch('govuk-table__cell--numeric') }) it('renders cell `colspan` attribute correctly', () => { @@ -309,8 +309,8 @@ describe('Table', () => { ] ] }) - const $component = $('.govuk-c-table') - const $tableCell = $component.find('.govuk-c-table__body .govuk-c-table__row .govuk-c-table__cell') + const $component = $('.govuk-table') + const $tableCell = $component.find('.govuk-table__body .govuk-table__row .govuk-table__cell') expect($tableCell.eq(1).attr('colspan')).toEqual('2') }) @@ -339,8 +339,8 @@ describe('Table', () => { ] ] }) - const $component = $('.govuk-c-table') - const $tableCell = $component.find('.govuk-c-table__body .govuk-c-table__row .govuk-c-table__cell') + const $component = $('.govuk-table') + const $tableCell = $component.find('.govuk-table__body .govuk-table__row .govuk-table__cell') expect($tableCell.eq(1).attr('rowspan')).toEqual('2') }) @@ -373,7 +373,7 @@ describe('Table', () => { ] }) - const $component = $('.govuk-c-table') + const $component = $('.govuk-table') expect($component.attr('attribute-1')).toEqual('yes') expect($component.attr('attribute-2')).toEqual('no') diff --git a/src/tag/README.md b/src/tag/README.md index e09aff4b13..0cfb085500 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -16,7 +16,7 @@ Find out when to use the Tag component in your service in the [GOV.UK Design Sys #### Markup - + alpha @@ -34,7 +34,7 @@ Find out when to use the Tag component in your service in the [GOV.UK Design Sys #### Markup - + alpha @@ -44,7 +44,7 @@ Find out when to use the Tag component in your service in the [GOV.UK Design Sys {{ govukTag({ "text": "alpha", - "classes": "govuk-c-tag--inactive" + "classes": "govuk-tag--inactive" }) }} ## Dependencies @@ -75,71 +75,71 @@ To show the button image you need to configure your app to show these assets. Be If you are using Nunjucks,then macros take the following arguments - +
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/tag/_tag.scss b/src/tag/_tag.scss index e4e1cbec8f..9c05995a50 100644 --- a/src/tag/_tag.scss +++ b/src/tag/_tag.scss @@ -13,7 +13,7 @@ @import "../globals/settings/typography-responsive"; @include govuk-exports("tag") { - .govuk-c-tag { + .govuk-tag { @include govuk-font-bold; @include govuk-typography-responsive( $govuk-font-16, @@ -31,7 +31,7 @@ text-transform: uppercase; } - .govuk-c-tag--inactive { + .govuk-tag--inactive { background-color: $govuk-grey-1; } } diff --git a/src/tag/tag.yaml b/src/tag/tag.yaml index 56dcc1c016..dab9a3dd9b 100644 --- a/src/tag/tag.yaml +++ b/src/tag/tag.yaml @@ -5,4 +5,4 @@ examples: - name: inactive data: text: alpha - classes: govuk-c-tag--inactive + classes: govuk-tag--inactive diff --git a/src/tag/template.njk b/src/tag/template.njk index d81732e1ed..b4eeca6169 100644 --- a/src/tag/template.njk +++ b/src/tag/template.njk @@ -1,3 +1,3 @@ - + {{ params.html | safe if params.html else params.text }} diff --git a/src/tag/template.test.js b/src/tag/template.test.js index 962bcab711..6a675d5078 100644 --- a/src/tag/template.test.js +++ b/src/tag/template.test.js @@ -17,19 +17,19 @@ describe('Tag', () => { it('renders the default example with strong element and text', () => { const $ = render('tag', examples.default) - const $component = $('.govuk-c-tag') + const $component = $('.govuk-tag') expect($component.get(0).tagName).toEqual('strong') expect($component.text()).toContain('alpha') }) it('renders classes', () => { const $ = render('tag', { - classes: 'govuk-c-tag--inactive', + classes: 'govuk-tag--inactive', text: 'alpha' }) - const $component = $('.govuk-c-tag') - expect($component.hasClass('govuk-c-tag--inactive')).toBeTruthy() + const $component = $('.govuk-tag') + expect($component.hasClass('govuk-tag--inactive')).toBeTruthy() }) it('renders custom text', () => { @@ -37,7 +37,7 @@ describe('Tag', () => { text: 'some-custom-text' }) - const $component = $('.govuk-c-tag') + const $component = $('.govuk-tag') expect($component.html()).toContain('some-custom-text') }) @@ -46,7 +46,7 @@ describe('Tag', () => { text: 'alpha' }) - const $component = $('.govuk-c-tag') + const $component = $('.govuk-tag') expect($component.html()).toContain('<span>alpha</span>') }) @@ -55,7 +55,7 @@ describe('Tag', () => { html: 'alpha' }) - const $component = $('.govuk-c-tag') + const $component = $('.govuk-tag') expect($component.html()).toContain('alpha') }) @@ -68,7 +68,7 @@ describe('Tag', () => { html: 'alpha' }) - const $component = $('.govuk-c-tag') + const $component = $('.govuk-tag') expect($component.attr('data-test')).toEqual('attribute') expect($component.attr('id')).toEqual('my-tag') }) diff --git a/src/textarea/README.md b/src/textarea/README.md index eaf66b82cf..7fa14d7f71 100644 --- a/src/textarea/README.md +++ b/src/textarea/README.md @@ -16,15 +16,15 @@ Find out when to use the Textarea component in your service in the [GOV.UK Desig #### Markup -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
texttextstringstringNoNoText for the tag component.Text for the tag component.
htmlhtmlstringstringNoNoHTML to use within for the tag component. If this is provided, the text argument will be ignored.HTML to use within for the tag component. If this is provided, the text argument will be ignored.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the tag container.Any extra HTML attributes (for example data attributes) to add to the tag container.
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/textarea/__snapshots__/template.test.js.snap b/src/textarea/__snapshots__/template.test.js.snap index 43e85d3cfa..5344d01742 100644 --- a/src/textarea/__snapshots__/template.test.js.snap +++ b/src/textarea/__snapshots__/template.test.js.snap @@ -2,7 +2,7 @@ exports[`Textarea with dependant components renders with error message 1`] = ` - + Error message @@ -10,7 +10,7 @@ exports[`Textarea with dependant components renders with error message 1`] = ` exports[`Textarea with dependant components renders with label 1`] = ` -
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
ididstringstringYesYesThe id of the textareaThe id of the textarea
namenamestringstringYesYesThe name of the textarea, which is submitted with the form dataThe name of the textarea, which is submitted with the form data
rowsrowsstringstringNoNoOptional number of textarea rows (default is 5 rows)Optional number of textarea rows (default is 5 rows)
valuevaluestringstringNoNoOptional initial value of the textareaOptional initial value of the textarea
labellabelobjectobjectYesYesArguments for the label componentArguments for the label component
errorMessageerrorMessageobjectobjectNoNoArguments for the error message componentArguments for the error message component
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the textarea tagAny extra HTML attributes (for example data attributes) to add to the textarea tag
+
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/src/warning-text/_warning-text.scss b/src/warning-text/_warning-text.scss index cc2839d513..7b3e0a2b6a 100644 --- a/src/warning-text/_warning-text.scss +++ b/src/warning-text/_warning-text.scss @@ -19,7 +19,7 @@ @include govuk-exports("warning-text") { - .govuk-c-warning-text { + .govuk-warning-text { @include govuk-font-regular-19; @include govuk-text-colour; @@ -28,11 +28,11 @@ padding: $govuk-spacing-scale-2 0; } - .govuk-c-warning-text__assistive { + .govuk-warning-text__assistive { @include govuk-h-visually-hidden; } - .govuk-c-warning-text__icon { + .govuk-warning-text__icon { @include govuk-font-bold; display: inline-block; @@ -50,7 +50,7 @@ line-height: 35px; } - .govuk-c-warning-text__text { + .govuk-warning-text__text { display: block; margin-left: -$govuk-gutter-half; padding-left: 65px; diff --git a/src/warning-text/template.njk b/src/warning-text/template.njk index 98f773e903..9c42057c98 100644 --- a/src/warning-text/template.njk +++ b/src/warning-text/template.njk @@ -1,11 +1,11 @@ {% from "warning-text/macro.njk" import govukWarningText -%} -
- - - {{ params.iconFallbackText }} + + + {{ params.iconFallbackText }} {{ params.html | safe if params.html else params.text }}
diff --git a/src/warning-text/template.test.js b/src/warning-text/template.test.js index cfbfd66740..7ee25c1eed 100644 --- a/src/warning-text/template.test.js +++ b/src/warning-text/template.test.js @@ -17,39 +17,39 @@ describe('Warning text', () => { it('renders the default example with text', () => { const $ = render('warning-text', examples.default) - const $component = $('.govuk-c-warning-text') + const $component = $('.govuk-warning-text') expect($component.text()).toContain('You can be fined up to £5,000 if you don’t register.') }) it('renders the default example with assistive text', () => { const $ = render('warning-text', examples.default) - const $assistiveText = $('.govuk-c-warning-text__assistive') + const $assistiveText = $('.govuk-warning-text__assistive') expect($assistiveText.text()).toEqual('Warning') }) it('hides the icon from screen readers using the aria-hidden attribute', () => { const $ = render('warning-text', examples.default) - const $icon = $('.govuk-c-warning-text__icon') + const $icon = $('.govuk-warning-text__icon') expect($icon.attr('aria-hidden')).toEqual('true') }) it('renders classes', () => { const $ = render('warning-text', { - classes: 'govuk-c-warning-text--custom-class', + classes: 'govuk-warning-text--custom-class', text: 'Warning text' }) - const $component = $('.govuk-c-warning-text') - expect($component.hasClass('govuk-c-warning-text--custom-class')).toBeTruthy() + const $component = $('.govuk-warning-text') + expect($component.hasClass('govuk-warning-text--custom-class')).toBeTruthy() }) it('renders custom text', () => { const $ = render('warning-text', { text: 'Some custom warning text' }) - const $component = $('.govuk-c-warning-text') + const $component = $('.govuk-warning-text') expect($component.html()).toContain('Some custom warning text') }) @@ -57,7 +57,7 @@ describe('Warning text', () => { const $ = render('warning-text', { iconFallbackText: 'Some custom fallback text' }) - const $assistiveText = $('.govuk-c-warning-text__assistive') + const $assistiveText = $('.govuk-warning-text__assistive') expect($assistiveText.html()).toContain('Some custom fallback text') }) @@ -66,7 +66,7 @@ describe('Warning text', () => { text: 'Some custom warning text' }) - const $component = $('.govuk-c-warning-text') + const $component = $('.govuk-warning-text') expect($component.html()).toContain('<span>Some custom warning text</span>') }) @@ -75,7 +75,7 @@ describe('Warning text', () => { html: 'Some custom warning text' }) - const $component = $('.govuk-c-warning-text') + const $component = $('.govuk-warning-text') expect($component.html()).toContain('Some custom warning text') }) @@ -87,7 +87,7 @@ describe('Warning text', () => { } }) - const $component = $('.govuk-c-warning-text') + const $component = $('.govuk-warning-text') expect($component.attr('data-test')).toEqual('attribute') expect($component.attr('id')).toEqual('my-warning-text') }) From 4e8386e1aca205b2174ff9d611023767ce7997b1 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 11 Apr 2018 15:39:51 +0100 Subject: [PATCH 2/6] Remove -o prefix --- src/checkboxes/README.md | 8 ++--- src/checkboxes/template.test.js | 2 +- src/date-input/README.md | 40 +++++++++++------------ src/date-input/template.test.js | 2 +- src/fieldset/README.md | 4 +-- src/fieldset/template.njk | 2 +- src/fieldset/template.test.js | 2 +- src/file-upload/README.md | 8 ++--- src/file-upload/template.njk | 2 +- src/file-upload/template.test.js | 2 +- src/footer/README.md | 2 +- src/footer/template.njk | 2 +- src/footer/template.test.js | 10 +++--- src/globals/helpers/_device-pixels.scss | 2 +- src/globals/objects/_form-group.scss | 8 ++--- src/globals/objects/_grid.scss | 14 ++++---- src/globals/objects/_main-wrapper.scss | 12 +++---- src/globals/objects/_shapes.scss | 2 +- src/globals/objects/_width-container.scss | 2 +- src/input/README.md | 12 +++---- src/input/template.njk | 2 +- src/input/template.test.js | 2 +- src/radios/README.md | 10 +++--- src/radios/template.test.js | 2 +- src/select/README.md | 4 +-- src/select/template.njk | 2 +- src/select/template.test.js | 2 +- src/textarea/README.md | 8 ++--- src/textarea/template.njk | 2 +- src/textarea/template.test.js | 2 +- src/warning-text/README.md | 2 +- src/warning-text/template.njk | 2 +- 32 files changed, 89 insertions(+), 89 deletions(-) diff --git a/src/checkboxes/README.md b/src/checkboxes/README.md index 8f71cdbf8a..c39b37ba13 100644 --- a/src/checkboxes/README.md +++ b/src/checkboxes/README.md @@ -16,7 +16,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des #### Markup -
+
@@ -146,7 +146,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des #### Markup -
+
@@ -273,7 +273,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des #### Markup -
+
@@ -358,7 +358,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des #### Markup -
+
diff --git a/src/checkboxes/template.test.js b/src/checkboxes/template.test.js index 0e3cefa047..e8ab7dcbdd 100644 --- a/src/checkboxes/template.test.js +++ b/src/checkboxes/template.test.js @@ -203,7 +203,7 @@ describe('Checkboxes', () => { it('have correct nesting order', () => { const $ = render('checkboxes', examples['with-extreme-fieldset']) - const $component = $('.govuk-o-form-group > .govuk-fieldset > .govuk-checkboxes') + const $component = $('.govuk-form-group > .govuk-fieldset > .govuk-checkboxes') expect($component.length).toBeTruthy() }) diff --git a/src/date-input/README.md b/src/date-input/README.md index 271a53e3b6..a69c7df1c8 100644 --- a/src/date-input/README.md +++ b/src/date-input/README.md @@ -16,7 +16,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des #### Markup -
+
@@ -29,7 +29,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
-
NameNameTypeTypeRequiredRequiredDescriptionDescription
classesclassesstringstringNoNoOptional additional classesOptional additional classes
iconFallbackTexticonFallbackTextstringstringYesYesThe fallback text for the iconThe fallback text for the icon
texttextstringstringYesYesThe text next to the iconThe text next to the icon
htmlhtmlstringstringYesYesHTML for the warning text content. If this is provided, the text argument is ignored.HTML for the warning text content. If this is provided, the text argument is ignored.
attributesattributesobjectobjectNoNoAny extra HTML attributes (for example data attributes) to add to the textarea tagAny extra HTML attributes (for example data attributes) to add to the textarea tag