Add application component and view style sheets

alphagov · Mar 14, 2023 · 96ba9e2 · 96ba9e2
1 parent 0e8b883
commit 96ba9e2
Show file tree

Hide file tree

Showing 31 changed files with 76 additions and 42 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -2,3 +2,17 @@
 //= link application.js
 //= link test-dependencies.js
 //= link application.css
+
+//= link components/_taxon-list.css
+//= link components/_topic-list.css
+
+//= link views/_browse.css
+//= link views/_colhub.css
+//= link views/_covid.css
+//= link views/_history_people.css
+//= link views/_organisation.css
+//= link views/_organisations.css
+//= link views/_taxons.css
+//= link views/_topical_events.css
+//= link views/_topics.css
+//= link views/_world_location_news.css
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,50 +1,9 @@
-$covid-grey: #272828;
-$covid-yellow: #fff500;
 $govuk-new-link-styles: true;
 
 // This flag stops the font from being included in this application's
 // stylesheet - the font is being served by Static across all of GOV.UK, so is
 // not needed here.
 $govuk-include-default-font-face: false;
 
-// gem components
 @import "govuk_publishing_components/govuk_frontend_support";
-// @import "govuk_publishing_components/component_support";
-// @import "govuk_publishing_components/components/accordion";
-// @import "govuk_publishing_components/components/action-link";
-// @import "govuk_publishing_components/components/big-number";
-// @import "govuk_publishing_components/components/cards";
-// @import "govuk_publishing_components/components/contents-list";
-// @import "govuk_publishing_components/components/details";
-// @import "govuk_publishing_components/components/document-list";
-// @import "govuk_publishing_components/components/govspeak";
-// @import "govuk_publishing_components/components/image-card";
-// @import "govuk_publishing_components/components/inset-text";
-// @import "govuk_publishing_components/components/intervention";
-// @import "govuk_publishing_components/components/inverse-header";
-// @import "govuk_publishing_components/components/lead-paragraph";
-// @import "govuk_publishing_components/components/metadata";
-// @import "govuk_publishing_components/components/notice";
-// @import "govuk_publishing_components/components/organisation-logo";
-// @import "govuk_publishing_components/components/phase-banner";
-// @import "govuk_publishing_components/components/previous-and-next-navigation";
-// @import "govuk_publishing_components/components/related-navigation";
-// @import "govuk_publishing_components/components/share-links";
-// @import "govuk_publishing_components/components/signup-link";
-// @import "govuk_publishing_components/components/step-by-step-nav";
-// @import "govuk_publishing_components/components/subscription-links";
-// @import "govuk_publishing_components/components/translation-nav";
-
 @import "helpers/margins";
-@import "components/*";
-
-@import "views/browse";
-@import "views/history_people";
-@import "views/topics";
-@import "views/topical_events";
-@import "views/taxons";
-@import "views/organisations";
-@import "views/organisation";
-@import "views/covid";
-@import "views/colhub";
-@import "views/world_location_news";
diff --git a/app/assets/stylesheets/components/_taxon-list.scss b/app/assets/stylesheets/components/_taxon-list.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .app-c-taxon-list__item {
   @include govuk-font(19);
   list-style: none;

diff --git a/app/assets/stylesheets/components/_topic-list.scss b/app/assets/stylesheets/components/_topic-list.scss
@@ -1,8 +1,11 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .app-c-topic-list__item {
   @include govuk-font(19, $weight: bold);
 }
 
-.app-c-topic-list > li { // Needed to override `.govuk-list > li`
+.app-c-topic-list > li {
+  // Needed to override `.govuk-list > li`
   margin-bottom: govuk-spacing(2);
 }
 

diff --git a/app/assets/stylesheets/views/_browse.scss b/app/assets/stylesheets/views/_browse.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 // This dark grey is the background colour for the browse pages.
 //
 // White text on this background gives a contrast ratio of 13.35 - this meets AA

diff --git a/app/assets/stylesheets/views/_colhub.scss b/app/assets/stylesheets/views/_colhub.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .colhub__announcement {
   background-color: govuk-colour("light-grey");
   padding: govuk-spacing(5) 0;

diff --git a/app/assets/stylesheets/views/_covid.scss b/app/assets/stylesheets/views/_covid.scss
@@ -1,3 +1,7 @@
+@import "govuk_publishing_components/individual_component_support";
+
+$covid-grey: #272828;
+$covid-yellow: #fff500;
 $c19-landing-page-header-background: govuk-colour("blue");
 
 .covid__page {

diff --git a/app/assets/stylesheets/views/_history_people.scss b/app/assets/stylesheets/views/_history_people.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .historic-people-index__section-row-header {
   @include govuk-media-query($from: tablet) {
     margin-top: govuk-spacing(2);

diff --git a/app/assets/stylesheets/views/_organisation.scss b/app/assets/stylesheets/views/_organisation.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .organisation__brand-border-top {
   border-top-width: 5px;
   border-top-style: solid;

diff --git a/app/assets/stylesheets/views/_organisations.scss b/app/assets/stylesheets/views/_organisations.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .organisations {
   .organisations-list__section {
     margin-bottom: govuk-spacing(6) * 2;

diff --git a/app/assets/stylesheets/views/_taxons.scss b/app/assets/stylesheets/views/_taxons.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .content-list__sticky {
   @include govuk-media-query($from: tablet) {
     position: -webkit-sticky;

diff --git a/app/assets/stylesheets/views/_topical_events.scss b/app/assets/stylesheets/views/_topical_events.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .topical-events-show {
   .topical-event-logo {
     img {

diff --git a/app/assets/stylesheets/views/_topics.scss b/app/assets/stylesheets/views/_topics.scss
@@ -1,3 +1,5 @@
+@import "govuk_publishing_components/individual_component_support";
+
 .topics-page {
   .page-header {
     h2 {

diff --git a/app/views/browse/index.html.erb b/app/views/browse/index.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("browse") %>
+
 <% content_for :title, t("browse.title") %>
 
 <% content_for :meta_tags do %>

diff --git a/app/views/browse/show.html.erb b/app/views/browse/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("browse") %>
+
 <% content_for :title, page.title %>
 
 <%= render 'shared/tag_meta', tag: page %>

diff --git a/app/views/components/_taxon-list.html.erb b/app/views/components/_taxon-list.html.erb
@@ -1,3 +1,5 @@
+<% add_app_component_stylesheet("taxon-list") %>
+
 <%
   if !local_assigns[:heading_level]
     heading_level = :h2

diff --git a/app/views/components/_topic-list.html.erb b/app/views/components/_topic-list.html.erb
@@ -1,3 +1,5 @@
+<% add_app_component_stylesheet("topic-list") %>
+
 <%
   items ||= []
   see_more_link ||= false

diff --git a/app/views/coronavirus_landing_page/show.html.erb b/app/views/coronavirus_landing_page/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("covid") %>
+
 <%= render partial: "coronavirus_landing_page/components/shared/meta_tags", locals: {
   metadata: details.metadata,
   corona_opengraph_images: true

diff --git a/app/views/cost_of_living_landing_page/show.html.erb b/app/views/cost_of_living_landing_page/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("colhub") %>
+
 <%= render partial: "cost_of_living_landing_page/components/shared/meta_tags", locals: {
   metadata: content.metadata
 } %>

diff --git a/app/views/organisations/court.html.erb b/app/views/organisations/court.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("organisation") %>
+
 <%= render partial: 'meta', locals: { organisation: @organisation } %>
 <%= render partial: 'breadcrumb' %>
 <%= render partial: 'courts_header' %>

diff --git a/app/views/organisations/index.html.erb b/app/views/organisations/index.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("organisations") %>
+
 <% content_for :title, t("organisations.index_title", title: @presented_organisations.title) %>
 
 <% content_for :meta_tags do %>

diff --git a/app/views/organisations/separate_website.html.erb b/app/views/organisations/separate_website.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("organisation") %>
+
 <%= render partial: 'meta', locals: { organisation: @organisation } %>
 <%= render partial: 'breadcrumb' %>
 <%= render partial: 'header' %>

diff --git a/app/views/organisations/show.html.erb b/app/views/organisations/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("organisation") %>
+
 <%= render partial: 'meta', locals: { organisation: @organisation } %>
 <%= render partial: 'breadcrumb' %>
 <%= render partial: 'header' %>

diff --git a/app/views/past_chancellors/index.html.erb b/app/views/past_chancellors/index.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("history_people") %>
+
 <% content_for :title, @content_item["title"] %>
 
 <% page_class "historic-appointments-index historical-past-chancellors govuk-width-container" %>

diff --git a/app/views/past_foreign_secretaries/index.html.erb b/app/views/past_foreign_secretaries/index.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("history_people") %>
+
 <% content_for :title, @content_item["title"] %>
 
 <% page_class "historic-appointments-index govuk-width-container" %>

diff --git a/app/views/services_and_information/index.html.erb b/app/views/services_and_information/index.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("topics") %>
+
 <% content_for :title, t("services_and_information.organisation_title", title: organisation["title"]) %>
 <% content_for :page_class, "topics-page" %>
 

diff --git a/app/views/subtopics/_subtopic.html.erb b/app/views/subtopics/_subtopic.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("topics") %>
+
 <% content_for :page_class, "topics-page" %>
 
 <header class="page-header group">

diff --git a/app/views/taxons/show.html.erb b/app/views/taxons/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("taxons") %>
+
 <% content_for :page_class, "taxon-page taxon-page--grid" %>
 <%=
   render(

diff --git a/app/views/topical_events/show.html.erb b/app/views/topical_events/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("topical_events") %>
+
 <% content_for :title, @topical_event.title %>
 <% page_class "topical-events-show" %>
 

diff --git a/app/views/topics/index.html.erb b/app/views/topics/index.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("topics") %>
+
 <% title_with_suffix = t("shared.topics.title", title: topic.title) %>
 <% content_for :title, title_with_suffix %>
 <%= render 'shared/tag_meta', tag: topic %>

diff --git a/app/views/world_location_news/show.html.erb b/app/views/world_location_news/show.html.erb
@@ -1,3 +1,5 @@
+<% add_view_stylesheet("world_location_news") if @world_location_news.contacts %>
+
 <% content_for :title, @world_location_news.title %>
 <% page_class "world-location-news-show" %>