From 676283c27c89ae7d1cb5e586aca4d09768ac8a2a Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 12 Dec 2024 12:48:22 +0000 Subject: [PATCH 1/2] Document component wrapper helper - was missing documentation for a few of the options --- docs/component-wrapper-helper.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/component-wrapper-helper.md b/docs/component-wrapper-helper.md index 79d41fbfcd..666e1ee5e9 100644 --- a/docs/component-wrapper-helper.md +++ b/docs/component-wrapper-helper.md @@ -32,6 +32,9 @@ These options can be passed to any component that uses the component wrapper. - `role` - accepts a space separated string of roles - `lang` - accepts a language attribute value - `open` - accepts an open attribute value (true or false) +- `hidden` - accepts an empty string, 'hidden', or 'until-found' +- `tabindex` - accepts an integer. The integer can also be passed as a string. +- `dir` - accepts 'rtl', 'ltr', or 'auto'. To prevent breaking [component isolation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_principles.md#a-component-is-isolated-when), passed classes should only be used for JavaScript hooks and not styling. All component styling should be included only in the component itself. Any passed classes should be prefixed with `js-`. To allow for extending this option, classes prefixed with `gem-c-`, `govuk-`, `app-c-`, `brand--`, or `brand__` are also permitted, as well as an exact match of `direction-rtl`, but these classes should only be used within the component and not passed to it. @@ -73,6 +76,8 @@ The component wrapper includes several methods to make managing options easier, component_helper.add_role("button") # works like 'add_class' component_helper.set_lang("en") # works like 'set_id' (can only have one lang) component_helper.set_open(true) # can pass true or false + component_helper.set_tabindex(1) + component_helper.set_dir("rtl") %> <%= tag.div(**component_helper.all_attributes) do %> component content From 4e241f84bf27d0253768903006cd710a81e85740 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 12 Dec 2024 13:01:34 +0000 Subject: [PATCH 2/2] Make component wrapper options appear always if present - some components use the component wrapper helper but don't have more than one, default example of their appearance in the component guide. A bug meant that in this case the detail of the component wrapper helper wasn't automatically being shown at the top of the list of other examples (because there were no other examples) - correcting and updating the jump link list at the top to also include this as an item --- .../govuk_publishing_components/component_guide/show.html.erb | 4 ++-- .../components/_contextual_guidance.html.erb | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/views/govuk_publishing_components/component_guide/show.html.erb b/app/views/govuk_publishing_components/component_guide/show.html.erb index c5c664b40a..819416182d 100644 --- a/app/views/govuk_publishing_components/component_guide/show.html.erb +++ b/app/views/govuk_publishing_components/component_guide/show.html.erb @@ -50,7 +50,7 @@ href: "#other-examples", text: "Other examples", items: other_examples_links - } if @component_doc.other_examples.any?), + } if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper?), ].compact %> <%= render "govuk_publishing_components/components/contents_list", { @@ -92,7 +92,7 @@ <% end %> - <% if @component_doc.other_examples.any? %> + <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>

Other examples

diff --git a/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb b/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb index b16d7aac32..3837c51cfa 100644 --- a/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb +++ b/app/views/govuk_publishing_components/components/_contextual_guidance.html.erb @@ -10,9 +10,7 @@ component_helper.set_id(id) component_helper.add_class("gem-c-contextual-guidance") component_helper.add_data_attribute({ module: "contextual-guidance" }) - %> - <%= tag.div(**component_helper.all_attributes) do %> <%= tag.div class: "govuk-grid-row" do %> <%= tag.div class: "govuk-grid-column-two-thirds" do %>