diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index dbcea6600..e836c7883 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -915,7 +915,8 @@ } } -.help-header { +.help-header, +.section-header { background: #fafafa; border-bottom: 1px solid #eee; margin-top: -$line-height; diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index 1efb09297..82d8a5cd6 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -1,5 +1,22 @@ .sdg-goals-index { + .section-header { + + h1 { + @include grid-row; + @include grid-column-gutter; + + &::before { + @extend %font-icon; + + background: image-url("sdg.svg"); + display: inline-block; + height: 1.5em; + width: 1.5em; + } + } + } + .sdg-goal-list { @extend %sdg-goal-list; @include grid-row; diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb index 7769fb03d..81c7c3c02 100644 --- a/app/components/sdg/goals/index_component.html.erb +++ b/app/components/sdg/goals/index_component.html.erb @@ -1,6 +1,10 @@ <% provide(:title) { title } %>
+
+

<%= title %>

+
+ <%= render Shared::BannerComponent.new("sdg") %> <%= link_list(*goal_links, class: "sdg-goal-list") %> diff --git a/spec/components/sdg/goals/index_component_spec.rb b/spec/components/sdg/goals/index_component_spec.rb new file mode 100644 index 000000000..2c756ccff --- /dev/null +++ b/spec/components/sdg/goals/index_component_spec.rb @@ -0,0 +1,25 @@ +require "rails_helper" + +describe SDG::Goals::IndexComponent, type: :component do + let!(:goals) { SDG::Goal.all } + let!(:phases) { SDG::Phase.all } + let!(:component) { SDG::Goals::IndexComponent.new(goals, phases) } + + before do + Setting["feature.sdg"] = true + end + + it "renders a heading" do + render_inline component + + expect(page).to have_css "h1", exact_text: "Sustainable Development Goals" + end + + it "renders phases" do + render_inline component + + expect(page).to have_content "Sensitization" + expect(page).to have_content "Planning" + expect(page).to have_content "Monitoring" + end +end