From c3d5d1433cac67e0b2ac1ccf457827ae69fa14c3 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Wed, 27 Dec 2023 21:17:04 +0000 Subject: [PATCH] Use related navigation styles from GOV.UK Prototype Components --- guide/content/building-blocks/fieldsets.slim | 2 +- guide/content/form-elements/checkboxes.slim | 2 +- guide/content/form-elements/date-input.slim | 2 +- guide/content/form-elements/file-upload.slim | 2 +- guide/content/form-elements/radios.slim | 2 +- guide/content/form-elements/select.slim | 2 +- guide/content/form-elements/submit.slim | 2 +- guide/content/form-elements/text-input.slim | 2 +- guide/content/form-elements/textarea.slim | 2 +- guide/content/introduction/error-handling.slim | 2 +- guide/content/stylesheets/application.scss | 1 + guide/layouts/partials/related-info.slim | 5 ----- guide/layouts/partials/related-navigation.slim | 10 ++++++++++ 13 files changed, 21 insertions(+), 15 deletions(-) delete mode 100644 guide/layouts/partials/related-info.slim create mode 100644 guide/layouts/partials/related-navigation.slim diff --git a/guide/content/building-blocks/fieldsets.slim b/guide/content/building-blocks/fieldsets.slim index aba7c7ea..1197f32d 100644 --- a/guide/content/building-blocks/fieldsets.slim +++ b/guide/content/building-blocks/fieldsets.slim @@ -18,4 +18,4 @@ p.govuk-body for screen reader users, the screen reader will announce the legend before reading the individual field labels. -== render('/partials/related-info.*', links: fieldset_info) +== render('/partials/related-navigation.*', links: fieldset_info) diff --git a/guide/content/form-elements/checkboxes.slim b/guide/content/form-elements/checkboxes.slim index f706fd28..04f656fe 100644 --- a/guide/content/form-elements/checkboxes.slim +++ b/guide/content/form-elements/checkboxes.slim @@ -98,4 +98,4 @@ p.govuk-body | It usually makes sense to separate exclusive checkboxes from the others with a divider. -== render('/partials/related-info.*', links: checkbox_info) +== render('/partials/related-navigation.*', links: checkbox_info) diff --git a/guide/content/form-elements/date-input.slim b/guide/content/form-elements/date-input.slim index eb550aa3..8f3e6071 100644 --- a/guide/content/form-elements/date-input.slim +++ b/guide/content/form-elements/date-input.slim @@ -65,4 +65,4 @@ ul.govuk-list.govuk-list--bullet This will default the day and month inputs to 2 characters and the year input to 4 characters. -== render('/partials/related-info.*', links: date_info) +== render('/partials/related-navigation.*', links: date_info) diff --git a/guide/content/form-elements/file-upload.slim b/guide/content/form-elements/file-upload.slim index 78666dcf..bb8962b6 100644 --- a/guide/content/form-elements/file-upload.slim +++ b/guide/content/form-elements/file-upload.slim @@ -14,4 +14,4 @@ p.govuk-body caption: 'File upload with label and hint', code: file_upload) -== render('/partials/related-info.*', links: file_info) +== render('/partials/related-navigation.*', links: file_info) diff --git a/guide/content/form-elements/radios.slim b/guide/content/form-elements/radios.slim index a2c71dfc..05454da4 100644 --- a/guide/content/form-elements/radios.slim +++ b/guide/content/form-elements/radios.slim @@ -104,4 +104,4 @@ p.govuk-body argument, item, which is object representing the radio button. -== render('/partials/related-info.*', links: radios_info) +== render('/partials/related-navigation.*', links: radios_info) diff --git a/guide/content/form-elements/select.slim b/guide/content/form-elements/select.slim index 7bffec37..ee3fd5e4 100644 --- a/guide/content/form-elements/select.slim +++ b/guide/content/form-elements/select.slim @@ -42,4 +42,4 @@ p.govuk-body li | manually specifying the options using a block of HTML -== render('/partials/related-info.*', links: select_info) +== render('/partials/related-navigation.*', links: select_info) diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim index faedfc81..9db56199 100644 --- a/guide/content/form-elements/submit.slim +++ b/guide/content/form-elements/submit.slim @@ -49,4 +49,4 @@ p.govuk-body passed in as a block will be rendered in-line with the primary submit button. -== render('/partials/related-info.*', links: submit_info) +== render('/partials/related-navigation.*', links: submit_info) diff --git a/guide/content/form-elements/text-input.slim b/guide/content/form-elements/text-input.slim index 417246b9..b2d45b9e 100644 --- a/guide/content/form-elements/text-input.slim +++ b/guide/content/form-elements/text-input.slim @@ -154,4 +154,4 @@ p.govuk-body text in the field more readable by adding some extra spacing between characters. -== render('/partials/related-info.*', links: text_field_info) +== render('/partials/related-navigation.*', links: text_field_info) diff --git a/guide/content/form-elements/textarea.slim b/guide/content/form-elements/textarea.slim index 55b0e65c..ad57b871 100644 --- a/guide/content/form-elements/textarea.slim +++ b/guide/content/form-elements/textarea.slim @@ -36,4 +36,4 @@ p.govuk-body | To do this, set the threshold parameter in conjunction with a word or character limit. -== render('/partials/related-info.*', links: text_area_info) +== render('/partials/related-navigation.*', links: text_area_info) diff --git a/guide/content/introduction/error-handling.slim b/guide/content/introduction/error-handling.slim index a9cbb333..25469609 100644 --- a/guide/content/introduction/error-handling.slim +++ b/guide/content/introduction/error-handling.slim @@ -63,4 +63,4 @@ p.govuk-body will be instantiated with the associated object’s #errors.messages. -== render('/partials/related-info.*', links: error_handling_info) +== render('/partials/related-navigation.*', links: error_handling_info) diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index cc0ba998..6623cbdf 100644 --- a/guide/content/stylesheets/application.scss +++ b/guide/content/stylesheets/application.scss @@ -13,6 +13,7 @@ $govuk-page-width: 1100px; // Import GOV.UK Prototype Components @import "x-govuk/components/masthead/masthead"; +@import "x-govuk/components/related-navigation/related-navigation"; @import "x-govuk/components/sub-navigation/sub-navigation"; // Application components diff --git a/guide/layouts/partials/related-info.slim b/guide/layouts/partials/related-info.slim deleted file mode 100644 index 12d60a10..00000000 --- a/guide/layouts/partials/related-info.slim +++ /dev/null @@ -1,5 +0,0 @@ -h2 class="govuk-heading-m govuk-!-font-size-27 govuk-!-margin-top-8" Related information - -ul.govuk-list - - links.each do |text, link| - li== link_to text, link diff --git a/guide/layouts/partials/related-navigation.slim b/guide/layouts/partials/related-navigation.slim new file mode 100644 index 00000000..2f9fc9bd --- /dev/null +++ b/guide/layouts/partials/related-navigation.slim @@ -0,0 +1,10 @@ +.x-govuk-related-navigation class="govuk-!-margin-top-9" + nav.x-govuk-related-navigation__nav-section role="navigation" aria-labelledby="related" + h2#related.x-govuk-related-navigation__main-heading + | Related information + + ul.x-govuk-related-navigation__link-list + - links.each do |name, path| + li.x-govuk-related-navigation__link + a.x-govuk-related-navigation__section-link.govuk-link href="#{path}" + | #{name}