Merge pull request #8601 from alphagov/component-conventions

Rename component files

app/assets/stylesheets/application.scss

@@ -12,7 +12,7 @@ $govuk-page-width: 1140px;
 @import "./components/select-with-search";
 @import "./components/single-image-upload";
 @import "./components/sub-navigation";
-@import "./components/summary-card-component";
+@import "./components/summary-card";
 
 @import "./admin/overrides";
 @import "./admin/layout";

app/assets/stylesheets/components/_summary-card-component.scss → app/assets/stylesheets/components/_summary-card.scss

@@ -1,4 +1,4 @@
-.app-c-summary-card-component {
+.app-c-summary-card {
   .govuk-summary-list__key {
     vertical-align: top;
   }

app/views/admin/attachments/_form.html.erb

@@ -42,7 +42,7 @@
       </div>
 
       <div class="govuk-!-margin-bottom-8 app-view-attachments__form-body js-locale-switcher-field">
-        <%= render "components/govspeak-editor", {
+        <%= render "components/govspeak_editor", {
           label: {
             heading_size: "l",
             text: "Body (required)",

app/views/admin/call_for_evidence_responses/_form.html.erb

@@ -34,7 +34,7 @@
     } %>
   <% end %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       heading_size: "l",
       text: "Summary (required)",

app/views/admin/consultation_responses/_form.html.erb

@@ -35,7 +35,7 @@
     } %>
   <% end %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       heading_size: "l",
       text: "Summary (required)",

app/views/admin/corporate_information_pages/_standard_fields.html.erb

@@ -3,7 +3,7 @@
   <%= form.hidden_field :lock_version %>
 
   <% unless form.object.persisted? %>
-    <%= render "components/select-with-search", {
+    <%= render "components/select_with_search", {
       id: "edition_corporate_information_page_type_id",
       name: "edition[corporate_information_page_type_id]",
       label: "Type",
@@ -34,7 +34,7 @@
     maxlength: 160,
   } %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       text: "Body (required)",
       heading_size: "l",

app/views/admin/document_collection_email_subscriptions/_taxonomy_choice.html.erb

@@ -1,6 +1,6 @@
 <div>
   <h4 class="govuk-heading-s govuk-!-margin-bottom-2">Choose the topic</h4>
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
       label: "Choose a topic from the topic taxonomy. You can only choose one.",
       error_message: flash["selected_taxon_content_id"],
       error_id: flash["selected_taxon_content_id"],

app/views/admin/document_collection_groups/_form.html.erb

@@ -11,7 +11,7 @@
     hint: "Name of the group that holds all associated documents",
   } %>
 
-   <%= render "components/govspeak-editor", {
+   <%= render "components/govspeak_editor", {
     label: {
       heading_size: "l",
       text: "Description",

app/views/admin/edition_images/crop.html.erb

@@ -11,7 +11,7 @@
 
       <p class="govuk-body govuk-!-margin-bottom-7 app-js-only">Use your cursor or the arrow keys and “<kbd>+</kbd>” and “<kbd>-</kbd>” to select a part of the image. The part you select will be resized for GOV.UK. The shape is fixed.</p>
 
-      <%= render "components/image-cropper", {
+      <%= render "components/image_cropper", {
         name: "image[image_data][file]",
         src: @data_url,
         filename: @new_image.filename,

app/views/admin/edition_unpublishing/edit.html.erb

@@ -15,7 +15,7 @@
     <p class="govuk-body govuk-!-margin-bottom-6"><%= @unpublishing.unpublishing_reason.as_sentence.capitalize %></p>
 
     <%= form_for @unpublishing, url: admin_edition_unpublishing_path(@unpublishing.edition) do |f| %>
-      <%= render "components/govspeak-editor", {
+      <%= render "components/govspeak_editor", {
         label: {
           heading_size: "l",
           text: "Public explanation",

app/views/admin/edition_workflow/confirm_unpublish.html.erb

@@ -23,7 +23,7 @@
     },
   }
 
-  withdrawal_public_explanation_field = render("components/govspeak-editor", {
+  withdrawal_public_explanation_field = render("components/govspeak_editor", {
     label: {
       text: "Public explanation",
       bold: true,
@@ -150,7 +150,7 @@
           ],
         } %>
 
-        <%= render "components/govspeak-editor", {
+        <%= render "components/govspeak_editor", {
           label: {
             text: "Public explanation",
             bold: true,

app/views/admin/edition_world_tags/edit.html.erb

@@ -25,7 +25,7 @@
     ) do |form| %>
       <%= form.hidden_field :previous_version %>
 
-      <%= render partial: "/components/miller-columns", locals: {
+      <%= render partial: "/components/miller_columns", locals: {
         id: "taxonomy_tag_form[taxons]",
         searchable: true,
         items: @world_taxonomy.all_world_taxons_transformed(@tag_form.selected_taxons),

app/views/admin/editions/_filter_options.html.erb

@@ -24,7 +24,7 @@
     <% end %>
 
     <% if filter_by.include?(:author) %>
-      <%= render "components/select-with-search", {
+      <%= render "components/select_with_search", {
         label: "Author",
         id: "author_filter",
         name: "author",
@@ -40,7 +40,7 @@
     <% end %>
 
     <% if filter_by.include?(:organisation) %>
-      <%= render "components/select-with-search", {
+      <%= render "components/select_with_search", {
         label: "Organisation",
         id: "organisation_filter",
         name: "organisation",
@@ -50,7 +50,7 @@
     <% end %>
 
     <% if filter_by.include?(:world_location) %>
-      <%= render "components/select-with-search", {
+      <%= render "components/select_with_search", {
         label: "World location",
         id: "world_location_filter",
         name: "world_location",
@@ -66,7 +66,7 @@
     <% end %>
 
     <% if filter_by.include?(:type) %>
-      <%= render "components/select-with-search", {
+      <%= render "components/select_with_search", {
         label: "Document type",
         id: "type_filter",
         name: "type",
@@ -76,7 +76,7 @@
     <% end %>
 
     <% if filter_by.include?(:state) %>
-      <%= render "components/select-with-search", {
+      <%= render "components/select_with_search", {
         label: "State",
         id: "state_filter",
         name: "state",

app/views/admin/editions/_locale_fields.html.erb

@@ -12,7 +12,7 @@
         label: "Create a foreign language only #{edition.model_name.human.downcase}",
         value: "1",
         checked: form.object.primary_locale != "en",
-        conditional: (render "components/select-with-search", {
+        conditional: (render "components/select_with_search", {
           id: "edition_primary_locale",
           name: "edition[primary_locale]",
           label: "Document language",

app/views/admin/editions/_operational_field_fields.html.erb

@@ -1,4 +1,4 @@
-<%= render "components/select-with-search", {
+<%= render "components/select_with_search", {
   id: "edition_operational_field_id",
   label: "Field of operation (required)",
   name: "edition[operational_field_id]",

app/views/admin/editions/_organisation_fields.html.erb

@@ -10,7 +10,7 @@
       <% 0.upto(3) do |index| %>
         <% lead_organisation_id = lead_organisation_id_at_index(edition, index) %>
         <% cache_if lead_organisation_id.nil?, "#{taggable_organisations_cache_digest}-lead" do %>
-          <%= render "components/select-with-search", {
+          <%= render "components/select_with_search", {
               id: "edition_lead_organisation_ids_#{index + 1}",
               name: "edition[lead_organisation_ids][]",
               label: "Lead organisation #{index + 1}",

app/views/admin/editions/_standard_fields.html.erb

@@ -64,7 +64,7 @@
   </div>
 
   <div class="govuk-!-margin-bottom-8 js-locale-switcher-field">
-    <%= render "components/govspeak-editor", {
+    <%= render "components/govspeak_editor", {
       label: {
         text: "Body" + "#{' (required)' if form.object.body_required?}",
         heading_size: "m",

app/views/admin/historical_accounts/_form.html.erb

@@ -58,7 +58,7 @@
         error_items: errors_for_input(historical_account.errors, :died),
       } %>
 
-      <%= render "components/govspeak-editor", {
+      <%= render "components/govspeak_editor", {
         label: {
           heading_size: "l",
           text: "Body (required)",

app/views/admin/news_articles/_news_article_type_fields.html.erb

@@ -1,5 +1,5 @@
 <div class="app-view-edition-form__subtype-fields js-app-view-edition-form__subtype-fields" data-format-advice="<%= NewsArticleType::FORMAT_ADVICE %>">
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     name: "edition[news_article_type_id]",
     id: "edition_news_article_type_id",
     label: "News article type (required)",

app/views/admin/operational_fields/_form.html.erb

@@ -11,7 +11,7 @@
     error_items: errors_for(operational_field.errors, :name),
   } %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       text: "Description",
       heading_size: "l",

app/views/admin/organisations/_closed_fields.html.erb

@@ -1,4 +1,4 @@
-<%= render "components/select-with-search", {
+<%= render "components/select_with_search", {
   label: "Reason for closure (required)",
   name: "organisation[govuk_closed_status]",
   id: "organisation_govuk_closed_status",

app/views/admin/organisations/_form.html.erb

@@ -37,7 +37,7 @@
     error_items: errors_for(organisation.errors, :logo_formatted_name),
   } %>
 
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     label: "Logo crest (required)",
     name: "organisation[organisation_logo_type_id]",
     id: "organisation_organisation_logo_type_id",
@@ -54,7 +54,7 @@
   } %>
 
   <div class="app-view-organisation__form__custom_logo js-view-organisation__form__custom_logo <%= "app-view-organisation__form__custom_logo--hidden" unless organisation.organisation_logo_type_id == OrganisationLogoType::CustomLogo.id %>">
-    <%= render "components/single-image-upload", {
+    <%= render "components/single_image_upload", {
       title: "Custom logo (required)",
       name: "organisation",
       id: "organisation",
@@ -70,7 +70,7 @@
     } %>
   </div>
 
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     label: "Brand colour",
     name: "organisation[organisation_brand_colour_id]",
     id: "organisation_organisation_brand_colour_id",
@@ -87,7 +87,7 @@
   } %>
 
   <%= form.fields_for :default_news_image do |_image_fields| %>
-    <%= render "components/single-image-upload", {
+    <%= render "components/single_image_upload", {
       title: "Default news image",
       name: "organisation[default_news_image_attributes]",
       id: "organisation_default_news_image",
@@ -114,7 +114,7 @@
     error_items: errors_for(organisation.errors, :url),
   } %>
 
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     label: "Organisation type (required)",
     name: "organisation[organisation_type_key]",
     id: "organisation_organisation_type_key",
@@ -265,7 +265,7 @@
       <%= hidden_field_tag "organisation[topical_event_organisations_attributes][][ordering]", topical_event_organisation.ordering %>
       <%= hidden_field_tag "organisation[topical_event_organisations_attributes][][id]", topical_event_organisation.id %>
 
-      <%= render "components/select-with-search", {
+      <%= render "components/select_with_search", {
         label: "Topical Event #{topical_event_organisation.ordering + 1}",
         name: "organisation[topical_event_organisations_attributes][][topical_event_id]",
         id: "organisation_topical_event_ids_#{topical_event_organisation.ordering}",

app/views/admin/people/_form.html.erb

@@ -58,7 +58,7 @@
   } %>
 
   <%= form.fields_for :image do |_image_fields| %>
-    <%= render "components/single-image-upload", {
+    <%= render "components/single_image_upload", {
       title: "Image",
       name: "person[image_attributes]",
       id: "person_image",
@@ -74,7 +74,7 @@
     } %>
   <% end %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       text: "Biography",
       heading_size: "l",

app/views/admin/policy_groups/_form.html.erb

@@ -33,7 +33,7 @@
     rows: 4,
   } %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       heading_size: "l",
       text: "Description",

app/views/admin/promotional_feature_items/_form_fields.html.erb

@@ -44,7 +44,7 @@
       value: "image",
       text: "Image",
       checked: promotional_feature_item.image.present? || params.dig("promotional_feature", "promotional_feature_items_attributes", "0", "image_or_youtube_video_url") == "image",
-      conditional: render("components/single-image-upload", {
+      conditional: render("components/single_image_upload", {
         name: name,
         id: id,
         page_errors: form.object.errors.any?,

app/views/admin/publications/_publication_type_fields.html.erb

@@ -1,5 +1,5 @@
 <div class="app-view-edition-form__subtype-fields js-app-view-edition-form__subtype-fields" data-format-advice="<%= PublicationType::FORMAT_ADVICE %>">
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     id: "edition_publication_type_id",
     name: "edition[publication_type_id]",
     label: "Publication type (required)",

app/views/admin/role_appointments/_form.html.erb

@@ -1,4 +1,4 @@
-<%= render "/components/select-with-search", {
+<%= render "/components/select_with_search", {
   id: "role_appointment_person_id",
   label: "Person (required)",
   heading_size: "l",

app/views/admin/roles/_form.html.erb

@@ -100,7 +100,7 @@
     },
   } %>
 
-  <%= render "components/govspeak-editor", {
+  <%= render "components/govspeak_editor", {
     label: {
       text: "Responsibilities",
       heading_size: "l",

app/views/admin/shared/tagging/_taxonomy_group_selector.html.erb

@@ -1,5 +1,5 @@
 <% if @topic_taxonomy.ordered_taxons_transformed(tag_form.selected_taxons).count() %>
-  <%= render "/components/miller-columns", {
+  <%= render "/components/miller_columns", {
     id: "taxonomy_tag_form[taxons]",
     searchable: true,
     items: @topic_taxonomy.ordered_taxons_transformed(tag_form.selected_taxons),

app/views/admin/social_media_accounts/_form.html.erb

@@ -2,7 +2,7 @@
   <div class="govuk-grid-column-two-thirds">
     <%= form_for [:admin, socialable, social_media_account] do |form| %>
       <% if I18n.locale == I18n.default_locale %>
-        <%= render "components/select-with-search", {
+        <%= render "components/select_with_search", {
           label: "Service (required)",
           id: "social_media_account_social_media_service_id",
           name: "social_media_account[social_media_service_id]",

app/views/admin/speeches/_speaker_select_field.html.erb

@@ -1,5 +1,5 @@
 <% cache_if edition.role_appointment_id.nil?, "#{taggable_role_appointments_cache_digest}-design-system" do %>
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     id: "edition_role_appointment_id",
     name: "edition[role_appointment_id]",
     label: "",

app/views/admin/speeches/_speech_type_fields.html.erb

@@ -1,5 +1,5 @@
 <div class="app-view-edition-form__subtype-fields js-app-view-edition-form__subtype-fields" data-format-advice="<%= SpeechType::FORMAT_ADVICE %>">
-  <%= render "components/select-with-search", {
+  <%= render "components/select_with_search", {
     name: "edition[speech_type_id]",
     id: "edition_speech_type_id",
     label: "Speech type",

app/views/admin/statistics_announcements/_filter_options.html.erb

@@ -15,7 +15,7 @@
       value: @filter.options[:title],
     } %>
 
-    <%= render "components/select-with-search", {
+    <%= render "components/select_with_search", {
       label: "Organisation",
       id: "organisation_filter",
       name: "organisation_id",

app/views/admin/take_part_pages/_form.html.erb

@@ -37,7 +37,7 @@
         id: "take_part_page_summary",
       } %>
 
-      <%= render "components/govspeak-editor", {
+      <%= render "components/govspeak_editor", {
         label: {
           heading_size: "l",
           text: "Body (required)",
@@ -50,7 +50,7 @@
       } %>
 
       <%= form.fields_for :image do |_image_fields| %>
-        <%= render "components/single-image-upload", {
+        <%= render "components/single_image_upload", {
           name: "take_part_page[image_attributes]",
           id: "take_part_page_image",
           image_id: "take_part_page_image_file",