diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ceac4e93c..8dd1f8ef28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * Add inverse option for organisation logo ([PR #4284](https://github.com/alphagov/govuk_publishing_components/pull/4284)) +* New options for contents-list component ([PR #4305](https://github.com/alphagov/govuk_publishing_components/pull/4305)) ## 44.3.0 diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss index dd595dee5a..93beff35e9 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss @@ -27,13 +27,13 @@ } .gem-c-contents-list__link { - .gem-c-contents-list__list-item--parent > & { - font-weight: bold; - } - @include govuk-template-link-focus-override; } +.gem-c-contents-list__list-item--parent > .gem-c-contents-list__link { + font-weight: $govuk-font-weight-bold; +} + .gem-c-contents-list__list-item { padding-top: govuk-spacing(2); line-height: 1.3; @@ -50,7 +50,7 @@ padding-left: $contents-spacing; padding-right: $contents-spacing; - & span::before { + .gem-c-contents-list__list-item-dash::before { content: "—"; position: absolute; left: 0; @@ -76,6 +76,29 @@ } } +.gem-c-contents-list--alternative-line-style { + .gem-c-contents-list__title { + margin-bottom: govuk-spacing(3); + } + + .gem-c-contents-list__list-item { + padding: govuk-spacing(2) 0; + margin: 0; + } + + .gem-c-contents-list__list-item-dash::before { + display: none; + } + + .gem-c-contents-list__list-item--active { + padding: govuk-spacing(1) govuk-spacing(2); + margin: govuk-spacing(1) 0; + border-left: 4px solid govuk-colour("blue"); + color: govuk-colour("blue"); + font-weight: $govuk-font-weight-bold; + } +} + @include govuk-media-query($media-type: print) { // Override default browser indentation .gem-c-contents-list__list, diff --git a/app/views/govuk_publishing_components/components/_contents_list.html.erb b/app/views/govuk_publishing_components/components/_contents_list.html.erb index afe6c5fb25..dbb984da5e 100644 --- a/app/views/govuk_publishing_components/components/_contents_list.html.erb +++ b/app/views/govuk_publishing_components/components/_contents_list.html.erb @@ -4,6 +4,8 @@ cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns) underline_links ||= false format_numbers ||= false + alternative_line_style ||= false + title ||= nil brand ||= false brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en") @@ -22,6 +24,8 @@ local_assigns[:aria] ||= {} component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}") + component_helper.add_class("gem-c-contents-list--alternative-line-style") if alternative_line_style + component_helper.add_class("gem-c-contents-list--custom-title") if title component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4 component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label] component_helper.add_role("navigation") @@ -33,14 +37,14 @@ title_fallback == "en" ? {:lang => "en",} : {} ) ) do %> - <%= t("components.contents_list.contents") %> + <%= title || t("components.contents_list.contents") %> <% end %>