diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/interruption-page/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/interruption-page/index.njk index 663cb3b394..258a81e4e0 100644 --- a/packages/govuk-frontend-review/src/views/full-page-examples/interruption-page/index.njk +++ b/packages/govuk-frontend-review/src/views/full-page-examples/interruption-page/index.njk @@ -23,16 +23,22 @@ title: Is your age correct?
{% call govukPanel({ classes: "govuk-panel--interruption", - titleText: "Is your age correct?" + titleText: "Is your age correct?", + actions: { + items: [ + { + text: "Yes, this is correct", + type: "button", + href: "#submit" + }, + { + text: "Change my age", + href: "#change" + } + ] + } }) %}

You entered your age as 109.

-
- {{ govukButton({ - classes: "govuk-button--inverse", - text: "Yes, this is correct" - }) }} - Change my age -
{% endcall %}
diff --git a/packages/govuk-frontend/src/govuk/_base.import.scss b/packages/govuk-frontend/src/govuk/_base.import.scss index 7d8e2b50a5..1a4dd878aa 100644 --- a/packages/govuk-frontend/src/govuk/_base.import.scss +++ b/packages/govuk-frontend/src/govuk/_base.import.scss @@ -3,3 +3,4 @@ @import "helpers"; @import "custom-properties"; @import "components/button/settings"; +@import "components/button/helpers"; diff --git a/packages/govuk-frontend/src/govuk/_base.scss b/packages/govuk-frontend/src/govuk/_base.scss index c339feb60f..4769fefedf 100644 --- a/packages/govuk-frontend/src/govuk/_base.scss +++ b/packages/govuk-frontend/src/govuk/_base.scss @@ -2,3 +2,4 @@ @forward "tools"; @forward "helpers"; @forward "components/button/settings"; +@forward "components/button/helpers"; diff --git a/packages/govuk-frontend/src/govuk/components/button/_helpers.scss b/packages/govuk-frontend/src/govuk/components/button/_helpers.scss new file mode 100644 index 0000000000..e058930b0b --- /dev/null +++ b/packages/govuk-frontend/src/govuk/components/button/_helpers.scss @@ -0,0 +1,29 @@ +//// +/// @group components/button +//// + +@use "sass:list"; + +/// List of the button variants available in GOV.UK Frontend +$_available-variants: (secondary, warning, inverse); + +/// Configure colours of the Button component for the given variant +/// +/// Use: +/// - to create modifiers of the `.govuk-button` class to apply a specific variant to a single button +/// - inside a component to update the default style of all buttons with only the `.govuk-button` class +/// +/// It configures the `--_govuk-button-` custom properties that apply colours to the button +/// with the appropriate `--_govuk--button-` properties that define colours for a given variant. +/// +/// @access private +@mixin govuk-button-style($variant-name) { + @if not list.index($_available-variants, $variant-name) { + @error "Unknown button variant `#{$variant-name}` (available variants: #{$_available-variants})"; + } + + --_govuk-button-background-colour: var(--_govuk-#{$variant-name}-button-background-colour); + --_govuk-button-shadow-colour: var(--_govuk-#{$variant-name}-button-shadow-colour); + --_govuk-button-text-colour: var(--_govuk-#{$variant-name}-button-text-colour); + --_govuk-button-hover-background-colour: var(--_govuk-#{$variant-name}-button-hover-background-colour); +} diff --git a/packages/govuk-frontend/src/govuk/components/button/_mixin.scss b/packages/govuk-frontend/src/govuk/components/button/_mixin.scss index 5ac349a77a..35e167d495 100644 --- a/packages/govuk-frontend/src/govuk/components/button/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/button/_mixin.scss @@ -6,34 +6,37 @@ /// @access private @mixin styles($background-colour, $text-colour, $inverse-background-colour, $inverse-text-colour) { - $govuk-button-colour: $background-colour; - $text-colour: $text-colour; - $govuk-button-hover-colour: base.govuk-colour("green", $variant: "shade-25"); - $govuk-button-shadow-colour: base.govuk-colour("green", $variant: "shade-50"); - - // Secondary button variables - $govuk-secondary-button-colour: base.govuk-colour("black", $variant: "tint-95"); - $govuk-secondary-button-text-colour: base.govuk-colour("black"); - $govuk-secondary-button-hover-colour: base.govuk-colour("black", $variant: "tint-80"); - $govuk-secondary-button-shadow-colour: base.govuk-colour("black", $variant: "tint-50"); - - // Warning button variables - $govuk-warning-button-colour: base.govuk-colour("red"); - $govuk-warning-button-text-colour: base.govuk-colour("white"); - $govuk-warning-button-hover-colour: base.govuk-colour("red", $variant: "shade-25"); - $govuk-warning-button-shadow-colour: base.govuk-colour("red", $variant: "shade-50"); - - // Inverse button variables - $govuk-inverse-button-colour: $inverse-background-colour; - $inverse-text-colour: $inverse-text-colour; - $govuk-inverse-button-hover-colour: base.govuk-colour("blue", $variant: "tint-95"); - $govuk-inverse-button-shadow-colour: base.govuk-colour("blue", $variant: "shade-50"); - // Because the shadow (s0) is visually 'part of' the button, we need to reduce // the height of the button to compensate by adjusting its padding (s1) and // increase the bottom margin to include it (s2). $button-shadow-size: base.$govuk-border-width-form-element; + :root { + // Default button colours + --_govuk-button-background-colour: #{$background-colour}; + --_govuk-button-text-colour: #{$text-colour}; + --_govuk-button-hover-background-colour: #{base.govuk-colour("green", $variant: "shade-25")}; + --_govuk-button-shadow-colour: #{base.govuk-colour("green", $variant: "shade-50")}; + + // Secondary button colours + --_govuk-secondary-button-background-colour: #{base.govuk-colour("black", $variant: "tint-95")}; + --_govuk-secondary-button-text-colour: #{base.govuk-colour("black")}; + --_govuk-secondary-button-hover-background-colour: #{base.govuk-colour("black", $variant: "tint-80")}; + --_govuk-secondary-button-shadow-colour: #{base.govuk-colour("black", $variant: "tint-50")}; + + // Warning button colours + --_govuk-warning-button-background-colour: #{base.govuk-colour("red")}; + --_govuk-warning-button-text-colour: #{base.govuk-colour("white")}; + --_govuk-warning-button-hover-background-colour: #{base.govuk-colour("red", $variant: "shade-25")}; + --_govuk-warning-button-shadow-colour: #{base.govuk-colour("red", $variant: "shade-50")}; + + // Warning button colours + --_govuk-inverse-button-background-colour: #{$inverse-background-colour}; + --_govuk-inverse-button-text-colour: #{$inverse-text-colour}; + --_govuk-inverse-button-hover-background-colour: #{base.govuk-colour("blue", $variant: "tint-95")}; + --_govuk-inverse-button-shadow-colour: #{base.govuk-colour("blue", $variant: "shade-50")}; + } + .govuk-button { @include base.govuk-font($size: 19, $line-height: 19px); @@ -49,9 +52,9 @@ (base.govuk-spacing(2) - base.$govuk-border-width-form-element - ($button-shadow-size * 0.5)); // s1 border: base.$govuk-border-width-form-element solid transparent; border-radius: 0; - color: $text-colour; - background-color: $govuk-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 + color: var(--_govuk-button-text-colour); + background-color: var(--_govuk-button-background-colour); + box-shadow: 0 $button-shadow-size 0 var(--_govuk-button-shadow-colour); // s0 text-align: center; vertical-align: top; cursor: pointer; @@ -66,7 +69,7 @@ &:visited, &:active, &:hover { - color: $text-colour; + color: var(--_govuk-button-text-colour); text-decoration: none; } @@ -77,7 +80,7 @@ } &:hover { - background-color: $govuk-button-hover-colour; + background-color: var(--_govuk-button-hover-background-colour); } &:active { @@ -130,80 +133,29 @@ } .govuk-button[disabled] { + --_govuk-button-hover-background-colour: var(--_govuk-button-background-colour); + opacity: (0.5); &:hover { - background-color: $govuk-button-colour; cursor: not-allowed; } &:active { top: 0; - box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 } } .govuk-button--secondary { - background-color: $govuk-secondary-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-secondary-button-text-colour; - } - - &:hover { - background-color: $govuk-secondary-button-hover-colour; - - &[disabled] { - background-color: $govuk-secondary-button-colour; - } - } + @include base.govuk-button-style(secondary); } .govuk-button--warning { - background-color: $govuk-warning-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-warning-button-text-colour; - } - - &:hover { - background-color: $govuk-warning-button-hover-colour; - - &[disabled] { - background-color: $govuk-warning-button-colour; - } - } + @include base.govuk-button-style(warning); } .govuk-button--inverse { - background-color: $govuk-inverse-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $inverse-text-colour; - } - - &:hover { - background-color: $govuk-inverse-button-hover-colour; - - &[disabled] { - background-color: $govuk-inverse-button-colour; - } - } + @include base.govuk-button-style(inverse); } .govuk-button--start { diff --git a/packages/govuk-frontend/src/govuk/components/button/helpers.unit.test.mjs b/packages/govuk-frontend/src/govuk/components/button/helpers.unit.test.mjs new file mode 100644 index 0000000000..b8edb708ee --- /dev/null +++ b/packages/govuk-frontend/src/govuk/components/button/helpers.unit.test.mjs @@ -0,0 +1,41 @@ +import { compileSassString } from '@govuk-frontend/helpers/tests' +import { outdent } from 'outdent' + +describe('button/_helpers', () => { + describe('@mixin govuk-button-style', () => { + it('Applies the appropriate variant custom properties to the button custom properties', async () => { + const sass = ` + @use "components/button/helpers" as *; + + .app-component { + @include govuk-button-style(warning); + } + ` + + const { css } = await compileSassString(sass) + + expect(css).toEqual(outdent` + .app-component { + --_govuk-button-background-colour: var(--_govuk-warning-button-background-colour); + --_govuk-button-shadow-colour: var(--_govuk-warning-button-shadow-colour); + --_govuk-button-text-colour: var(--_govuk-warning-button-text-colour); + --_govuk-button-hover-background-colour: var(--_govuk-warning-button-hover-background-colour); + } + `) + }) + + it('Throws an error if the variant does not exist', () => { + const sass = ` + @use "components/button/helpers" as *; + + .app-component { + @include govuk-button-style(unknown-button-variant); + } + ` + + expect(compileSassString(sass)).rejects.toThrow( + 'Unknown button variant `unknown-button-variant` (available variants: secondary, warning, inverse)' + ) + }) + }) +}) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_mixin.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_mixin.scss index 5779be0221..777af21bd4 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/file-upload/_mixin.scss @@ -118,18 +118,14 @@ border-color: base.govuk-functional-colour("error"); } - .govuk-file-upload-button__pseudo-button { - background-color: base.govuk-colour("black", $variant: "tint-95"); - } + @include base.govuk-button-style(secondary); &:hover { + --_govuk-button-background-colour: var(--_govuk-button-hover-background-colour); + border-style: dashed; border-color: base.govuk-colour("black", $variant: "tint-50"); - .govuk-file-upload-button__pseudo-button { - background-color: base.govuk-colour("black", $variant: "tint-80"); - } - .govuk-file-upload-button__status { background-color: base.govuk-colour("blue"); } @@ -150,15 +146,13 @@ // here as it is already used for the yellow focus state. box-shadow: inset 0 0 0 base.$govuk-border-width-form-element; - .govuk-file-upload-button__pseudo-button { - background-color: base.govuk-functional-colour(focus); - box-shadow: 0 2px 0 base.govuk-colour("black"); - } + --_govuk-button-background-colour: #{base.govuk-functional-colour(focus)}; + --_govuk-button-shadow-colour: #{base.govuk-functional-colour(focus-text)}; &:hover .govuk-file-upload-button__pseudo-button { + --_govuk-button-background-colour: var(--_govuk-button-hover-background-colour); border-color: base.govuk-functional-colour(focus); outline: 3px solid transparent; - background-color: base.govuk-colour("black", $variant: "tint-80"); box-shadow: inset 0 0 0 1px base.govuk-functional-colour(focus); } } @@ -168,10 +162,6 @@ border-style: dashed; background-color: $empty-button-background-colour; - .govuk-file-upload-button__pseudo-button { - background-color: $empty-pseudo-button-background-colour; - } - .govuk-file-upload-button__status { color: base.govuk-colour("black"); background-color: $empty-status-background-colour; @@ -205,10 +195,6 @@ background-color: $empty-button-background-colour; - .govuk-file-upload-button__pseudo-button { - background-color: $empty-pseudo-button-background-colour; - } - .govuk-file-upload-button__status { background-color: $empty-status-background-colour; } diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs index 21d365dbbb..b88fda6a53 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs @@ -186,7 +186,7 @@ export class FileUpload extends ConfigurableComponent { const buttonSpan = document.createElement('span') buttonSpan.className = - 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button' + 'govuk-button govuk-file-upload-button__pseudo-button' buttonSpan.innerText = this.i18n.t('chooseFilesButton') containerSpan.appendChild(buttonSpan) diff --git a/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss b/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss index 20cc9cd679..d9ba345e36 100644 --- a/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss +++ b/packages/govuk-frontend/src/govuk/components/panel/_mixin.scss @@ -15,6 +15,8 @@ text-align: center; + @include base.govuk-button-style(inverse); + @media #{base.govuk-until-breakpoint(tablet)} { padding: base.govuk-spacing(4) - base.$govuk-border-width; @@ -43,13 +45,29 @@ margin-bottom: base.govuk-spacing(6); } - // Remove bottom spacing from anything at the end of the Panel's body + // Remove bottom spacing from anything at the end of the Panel's content // to stop the Panel's padding spacing from becoming too large. .govuk-panel__title:last-child, - .govuk-panel__body > :last-child { + .govuk-panel__body > :last-child, + .govuk-panel__actions > :last-child { margin-bottom: 0; } + // On larger screens if the Panel actions have a button group, + // then we want to adjust the spacing a bit to avoid the button group + // making the Panel's padding spacing being too large. + @media #{base.govuk-from-breakpoint(tablet)} { + .govuk-panel__actions > .govuk-button-group:last-child { + margin-bottom: -1 * base.govuk-spacing(2); + } + } + + // When the panel shows some actions, make sure they have some spacing + // from the panel's content + .govuk-panel__body:not(:last-child) { + margin-bottom: base.govuk-spacing(7); + } + .govuk-panel--confirmation { --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)}; background: base.govuk-functional-colour(success); @@ -65,21 +83,6 @@ @include base.govuk-font-size($size: 36); margin-bottom: base.govuk-spacing(3); } - - // When the Button group is at the end of the Panel's body then, - // make sure it has some spacing away from the other body content. - .govuk-panel__body > .govuk-button-group:last-child { - margin-top: base.govuk-spacing(7); - } - - // On larger screens if the Interruption panel has a Button group at the end of the Panel's body, - // then we want to adjust the spacing a bit to avoid the Button group - // making the Panel's padding spacing being too large. - @media #{base.govuk-from-breakpoint(tablet)} { - &:has(.govuk-panel__body > .govuk-button-group:last-child) { - padding-bottom: base.govuk-spacing(5); - } - } } @media print { diff --git a/packages/govuk-frontend/src/govuk/components/panel/panel.yaml b/packages/govuk-frontend/src/govuk/components/panel/panel.yaml index f1125d6f75..c248b04811 100644 --- a/packages/govuk-frontend/src/govuk/components/panel/panel.yaml +++ b/packages/govuk-frontend/src/govuk/components/panel/panel.yaml @@ -31,6 +31,43 @@ params: type: object required: false description: HTML attributes (for example data attributes) to add to the panel container. + - name: actions + type: object + required: false + description: Can be used when creating an [interruption panel](https://design-system.service.gov.uk/components/panel/#interruption-panel) which will add a button or link. Default is `button` unless you set `href` which will show the action as a link. + params: + - name: items + type: array + required: false + params: + - name: text + type: string + required: true + description: The button or link text. + - name: type + type: string + required: false + description: The type of button – `"button"` or `"submit"`. If `href` is provided, set `type` to `"button"` render a link styled as a button. + - name: href + type: string + required: false + description: The `href` for a link. Set `type` to `"button"` and set `href` to render a link styled as a button. + - name: classes + type: string + required: false + description: The additional classes that you want to add to the button or link. + - name: attributes + type: object + required: false + description: The additional attributes that you want to add to the button or link. For example, data attributes. + - name: classes + type: string + required: false + description: The additional classes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. + - name: attributes + type: object + required: false + description: The additional attributes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. For example, data attributes. examples: - name: default @@ -44,12 +81,12 @@ examples: titleText: Is your age correct? html: |

You entered your age as 109.

-
- - Change my age -
+ actions: + items: + - type: button + text: Yes, this is correct + - href: '#' + text: Change my age - name: interruption-with-content-with-long-line-length options: classes: govuk-panel--interruption @@ -59,14 +96,14 @@ examples:

Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF

New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH

You can go back to undo this change.

-
- - - Go back to application - -
+ actions: + items: + - type: submit + text: Are you sure you want to change this? + attributes: + form: the-form-id + - href: '#' + text: Go back to application - name: interruption-with-headings-content-and-lists options: classes: govuk-panel--interruption @@ -82,15 +119,11 @@ examples:
  • enter their custody information
  • update the licence conditions section
    • -
    - - - Go back to application - -
    - + actions: + - type: submit + text: Continue to other sections + - href: '#' + text: Go back to application # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: title html as text hidden: true @@ -142,3 +175,82 @@ examples: classes: govuk-panel--interruption extra-class one-more-class titleText: Are you sure you want to change this? html:

    You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.

    + - name: confirmation, with actions + hidden: true + options: + titleText: Is your age correct? + actions: + items: + - type: button + text: Yes, this is correct + - href: '#' + text: Change my age + - name: interruption, with actions classes and attributes + hidden: true + options: + classes: govuk-panel--interruption + titleText: Is your age correct? + html: | +

    You entered your age as 109.

    + actions: + classes: extra-class one-more-class + attributes: + 'data-test': 1 + 'data-other-test': 'yes' + items: + - type: button + text: Yes, this is correct + - href: '#' + text: Change my age + - name: interruption, submit action + hidden: true + options: + classes: govuk-panel--interruption + titleText: Is your age correct? + html: | +

    You entered your age as 109.

    + actions: + items: + - type: submit + text: Yes, this is correct + attributes: + form: test-target-element + name: 'acknowledged' + value: '' + classes: 'extra-class one-more-class' + - href: '#' + text: Change my age + - name: interruption, button link + hidden: true + options: + classes: govuk-panel--interruption + titleText: Is your age correct? + html: | +

    You entered your age as 109.

    + actions: + classes: extra-class one-more-class + attributes: + 'data-test': 1 + 'data-other-test': 'yes' + items: + - type: button + text: Yes, this is correct + href: '?acknowledged=true' + - href: '#' + text: Change my age + - name: interruption, no actions + hidden: true + options: + classes: govuk-panel--interruption + titleText: Is your age correct? + html: | +

    You entered your age as 109.

    + - name: interruption, no actions items + hidden: true + options: + classes: govuk-panel--interruption + titleText: Is your age correct? + html: | +

    You entered your age as 109.

    + actions: + classes: 'extra-class' diff --git a/packages/govuk-frontend/src/govuk/components/panel/template.njk b/packages/govuk-frontend/src/govuk/components/panel/template.njk index c8979bcec4..87282a408f 100644 --- a/packages/govuk-frontend/src/govuk/components/panel/template.njk +++ b/packages/govuk-frontend/src/govuk/components/panel/template.njk @@ -1,4 +1,5 @@ {% from "../../macros/attributes.njk" import govukAttributes -%} +{% from "../button/macro.njk" import govukButton -%} {% set headingLevel = params.headingLevel if params.headingLevel else 1 -%} @@ -7,6 +8,23 @@ {#- The Panel component defaults to the Confirmation variant -#} {%- set defaultModifierClassName = "govuk-panel--confirmation" if not isInterruption -%} +{%- macro _panelAction(action) -%} + {%- if not action.href or action.type == "button" -%} + {{ govukButton({ + "text": action.text, + "type": action.type if action.type else "button", + "classes": action.classes if action.classes, + "href": action.href, + "attributes": action.attributes + }) }} + {%- else -%} + + {{- action.text -}} + + {%- endif -%} +{%- endmacro -%} +
    {% endif %} + {% if isInterruption and params.actions %} + {% set actions = params.actions %} +
    + + {%- if actions.items.length -%} +
    + {% for action in actions.items %} + {{ _panelAction(action) | safe | trim | indent(6) }} + {% endfor %} +
    + {%- endif -%} + +
    + {% endif %}
    diff --git a/packages/govuk-frontend/src/govuk/components/panel/template.test.js b/packages/govuk-frontend/src/govuk/components/panel/template.test.js index ab752bc3cd..65400e3ce1 100644 --- a/packages/govuk-frontend/src/govuk/components/panel/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/panel/template.test.js @@ -140,4 +140,129 @@ describe('Panel', () => { ) }) }) + + describe('actions', () => { + describe('as confirmation panel', () => { + it('does not render the actions', () => { + const $ = render('panel', examples['confirmation, with actions']) + + const $actions = $('.govuk-panel__actions') + expect($actions).toHaveLength(0) + }) + }) + + describe('as interruption panel', () => { + describe('the actions container', () => { + it('renders with a `govuk-button-group` wrapping the actions', () => { + const $ = render('panel', examples.interruption) + + const $actions = $( + '.govuk-panel__body + .govuk-panel__actions .govuk-button-group > *' + ) + expect($actions).toHaveLength(2) + }) + + it('accepts `classes` on `.govuk-panel__actions`', () => { + const $ = render( + 'panel', + examples['interruption, with actions classes and attributes'] + ) + + const $actions = $('.govuk-panel__actions') + expect($actions.attr('class')).toContain( + ' extra-class one-more-class' + ) + }) + + it('accepts `attributes` on `.govuk-panel__actions', () => { + const $ = render( + 'panel', + examples['interruption, with actions classes and attributes'] + ) + + const $actions = $('.govuk-panel__actions') + expect($actions.data()).toMatchObject({ + test: 1, + otherTest: 'yes' + }) + }) + + it('does not render if no `actions` are present', () => { + const $ = render('panel', examples['interruption, no actions']) + + const $actions = $('.govuk-panel__actions') + expect($actions).toHaveLength(0) + }) + + it('does not render the button group if no `actions.items` are present', () => { + const $ = render('panel', examples['interruption, no actions items']) + + const $actions = $('.govuk-panel__actions') + expect($actions).toHaveLength(1) + + const $buttonGroup = $actions.find('.govuk-button-group') + expect($buttonGroup).toHaveLength(0) + }) + }) + + describe('the actions', () => { + it('render as buttons when action type is `button`', () => { + const $ = render('panel', examples.interruption) + + const $actions = $( + '.govuk-panel__actions .govuk-button-group > button.govuk-button.govuk-button--inverse' + ) + expect($actions.text()).toContain('Yes, this is correct') + }) + + it('render as links when action has an `href` and no type', () => { + const $ = render('panel', examples.interruption) + + const $actions = $( + '.govuk-panel__actions .govuk-button-group > a.govuk-link.govuk-link--inverse' + ) + expect($actions.text()).toContain('Change my age') + }) + + it('render as submit buttons when action has a type: "submit"', () => { + const $ = render('panel', examples['interruption, submit action']) + + const $actions = $( + '.govuk-panel__actions .govuk-button-group > button[type="submit"]' + ) + expect($actions.text()).toContain('Yes, this is correct') + }) + + it('render as button links when action has an `href` and `type: "button"`', () => { + const $ = render('panel', examples.interruption) + + const $actions = $( + '.govuk-panel__actions .govuk-button-group > a.govuk-link.govuk-link--inverse' + ) + expect($actions.text()).toContain('Change my age') + }) + + it('accept extra `attributes`', () => { + const $ = render('panel', examples['interruption, submit action']) + + const $actions = $( + '.govuk-panel__actions .govuk-button-group > button[type="submit"]' + ) + expect($actions.attr('name')).toBe('acknowledged') + expect($actions.attr('value')).toBe('') + }) + + it('accept extra `classes`', () => { + const $ = render('panel', examples['interruption, submit action']) + + const $actions = $( + '.govuk-panel__actions .govuk-button-group > button[type="submit"]' + ) + expect($actions.attr('class')).toContain( + ' extra-class one-more-class' + ) + }) + }) + }) + }) })