Matthew Phelan
3 years ago
9 changed files with 136 additions and 12 deletions
@ -0,0 +1,82 @@ |
|||||||
|
|
||||||
|
// Task list pattern |
||||||
|
|
||||||
|
.app-task-list { |
||||||
|
list-style-type: none; |
||||||
|
padding-left: 0; |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
min-width: 550px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__section { |
||||||
|
display: table; |
||||||
|
@include govuk-font($size:24, $weight: bold); |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__section-number { |
||||||
|
display: table-cell; |
||||||
|
|
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
min-width: govuk-spacing(6); |
||||||
|
padding-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__items { |
||||||
|
@include govuk-font($size: 19); |
||||||
|
@include govuk-responsive-margin(9, "bottom"); |
||||||
|
list-style: none; |
||||||
|
padding-left: 0; |
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
padding-left: govuk-spacing(6); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__item { |
||||||
|
border-bottom: 1px solid $govuk-border-colour; |
||||||
|
margin-bottom: 0 !important; |
||||||
|
padding-top: govuk-spacing(2); |
||||||
|
padding-bottom: govuk-spacing(2); |
||||||
|
@include govuk-clearfix; |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__item:first-child { |
||||||
|
border-top: 1px solid $govuk-border-colour; |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__task-name { |
||||||
|
display: block; |
||||||
|
@include govuk-media-query($from: 450px) { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// The `app-task-list__task-completed` class was previously used on the task |
||||||
|
// list for the completed tag (changed in 86c90ec) – it's still included here to |
||||||
|
// avoid breaking task lists in existing prototypes. |
||||||
|
.app-task-list__tag, |
||||||
|
.app-task-list__task-completed { |
||||||
|
margin-top: govuk-spacing(2); |
||||||
|
margin-bottom: govuk-spacing(1); |
||||||
|
|
||||||
|
@include govuk-media-query($from: 450px) { |
||||||
|
float: right; |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//custom |
||||||
|
.app-task-list { |
||||||
|
&__item:target { |
||||||
|
} |
||||||
|
&--no-numbers &__items { |
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -1,3 +1,3 @@ |
|||||||
class CaseLog < ApplicationRecord |
class CaseLog < ApplicationRecord |
||||||
enum status: ["in progress", "submitted"] |
enum status: { "in progress" => 0, "submitted" => 1 } |
||||||
end |
end |
||||||
|
@ -0,0 +1,28 @@ |
|||||||
|
<%# Placeholder until we have a real form schema %> |
||||||
|
<% |
||||||
|
sections = { |
||||||
|
"About the household" => ["Household characteristics", "Household situation", "Household needs"], |
||||||
|
"Tenancy and property information" => ["Tenancy information", "Property information"], |
||||||
|
"Rent and charges" => ["Income & benefits", "Rent"], |
||||||
|
"Local Authority" => ["Local authority"], |
||||||
|
"Submission" => ["Declaration"] |
||||||
|
} |
||||||
|
%> |
||||||
|
|
||||||
|
<ol class="app-task-list app-task-list--no-numbers"> |
||||||
|
<% sections.map do |section, subsections| %> |
||||||
|
<li> |
||||||
|
<h2 class="app-task-list__section"> |
||||||
|
<span class="app-task-list__section-number"><%= section %></span> |
||||||
|
</h2> |
||||||
|
<ul class="app-task-list__items"> |
||||||
|
<% subsections.map do |subsection| %> |
||||||
|
<li class="app-task-list__item"> |
||||||
|
<a class="task-name" href="#"><%= subsection %></a> |
||||||
|
<strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong> |
||||||
|
</li> |
||||||
|
<% end %> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<% end %> |
||||||
|
</ol> |
@ -1,3 +1,15 @@ |
|||||||
<h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1> |
<div class="govuk-grid-row"> |
||||||
|
<div class="govuk-grid-column-two-thirds"> |
||||||
|
<h1 class="govuk-heading-xl">Tasklist for log |
||||||
|
<%= @case_log.id %></h1> |
||||||
|
|
||||||
<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is <%= @case_log.status %></h2> |
<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is |
||||||
|
<%= @case_log.status %></h2> |
||||||
|
<p class="govuk-body govuk-!-margin-bottom-7">You've completed 0 of 9 sections.</p> |
||||||
|
<p class="govuk-body govuk-!-margin-bottom-7"> |
||||||
|
<a href="#">Skip to next incomplete section</a> |
||||||
|
</p> |
||||||
|
|
||||||
|
<%= render "tasklist" %> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
@ -1,6 +1,6 @@ |
|||||||
FactoryBot.define do |
FactoryBot.define do |
||||||
factory :case_log do |
factory :case_log do |
||||||
id { 342351 } |
id { 342_351 } |
||||||
status { 0 } |
status { 0 } |
||||||
end |
end |
||||||
end |
end |
||||||
|
@ -1,11 +1,12 @@ |
|||||||
require "rails_helper" |
require "rails_helper" |
||||||
RSpec.describe "Test Features" do |
RSpec.describe "Test Features" do |
||||||
let!(:case_log){ FactoryBot.create(:case_log) } |
let!(:case_log) { FactoryBot.create(:case_log) } |
||||||
let(:id){ case_log.id } |
let(:id) { case_log.id } |
||||||
let(:status) { case_log.status } |
let(:status) { case_log.status } |
||||||
|
|
||||||
it "Displays a tasklist header" do |
it "Displays a tasklist header" do |
||||||
visit("/case_logs/342351") |
visit("/case_logs/342351") |
||||||
expect(page).to have_content("Tasklist for log 342351") |
expect(page).to have_content("Tasklist for log #{id}") |
||||||
|
expect(page).to have_content("This submission is #{status}") |
||||||
end |
end |
||||||
end |
end |
||||||
|
Loading…
Reference in new issue