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 %> 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