<% content_for :title, "#{@component_doc.name} component" %> <% content_for :application_stylesheet do %> <% if @component_doc.source == "application" && application_stylesheet_in_use? %> <%= render 'application_stylesheet' %> <% end %> <% end %> <%= render 'govuk_publishing_components/components/heading', { text: @component_doc.name, context: "Component", heading_level: 1, font_size: "xl", margin_bottom: 8 } %>
<% if !@component_doc.accessibility_criteria.present? %>

This component is not valid

Please define accessibility acceptance criteria for this component.
<% end %> <%= render 'govuk_publishing_components/components/lead_paragraph', text: @component_doc.description %> <% if @component_doc.body.present? %>
<%= raw(@component_doc.html_body) %>
<% end %>

<%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.

<% other_examples_links = [] other_examples_links << { href: "#standard-options", text: "Standard options" } if @component_doc.uses_component_wrapper_helper? other_examples_links.concat(@component_doc.other_examples.map do | example | { href: "##{example.id}", text: example.name } end) content_items = [ { href: "#how-it-looks", text: "How it looks" }, { href: "#how-to-call-this-component", text: "How to call this component" }, ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?), ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?), ({ href: "#other-examples", text: "Other examples", items: other_examples_links } if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper?), ].compact %> <%= render "govuk_publishing_components/components/contents_list", { contents: content_items } %>

" class="govuk-link">How it looks (" class="govuk-link">preview) (preview all)

<%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>

How to call this component

<%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %> <% if @component_doc.govuk_frontend_components.any? %>

GOV.UK Design System

This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:

<% end %> <% if @component_doc.accessibility_criteria.present? %>

Accessibility acceptance criteria

<%= raw(@component_doc.html_accessibility_criteria) %>
<% end %> <% if @component_doc.other_examples.any? or @component_doc.uses_component_wrapper_helper? %>

Other examples

<% if @component_doc.uses_component_wrapper_helper? %>

Standard options

<%= raw(@component_doc.html_component_wrapper_options) %>
<% end %> <% @component_doc.other_examples.each do |example| %>

<%= example.name %> (preview)

<%= raw(example.html_description) %>
<% code_example = capture do %> <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: example %> <% end %> <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %> <%= code_example %>
<% end %>
<% end %>