Merge pull request #395 from uktrade/feature/investment-project-stages

Investment project stages

assets/stylesheets/_components.scss

@@ -12,13 +12,14 @@
 @import "components/local-nav";
 @import "components/messages";
 @import "components/meta-item";
+@import "components/meta-list";
 @import "components/metadata-list";
 @import "components/pagination";
 @import "components/phase-badge";
+@import "components/progress";
 @import "components/proposition-menu";
 @import "components/results";
 @import "components/results-summary";
-@import "components/status-bar";
 
 // Style examples on components page
 @import "components/.example";

assets/stylesheets/components/_local-header.scss

@@ -18,14 +18,15 @@
     margin-bottom: $default-spacing-unit;
   }
 
-  .status-bar {
-    margin-top: $default-spacing-unit * 2;
-    margin-bottom: -$default-spacing-unit;
-  }
-
   .c-entity-search__aggregations {
     margin-bottom: -$default-spacing-unit * 2;
   }
+
+  .c-progress__stage {
+    &::before {
+      outline-color: $grey-4;
+    }
+  }
 }
 
 .c-local-header__heading-before {

assets/stylesheets/components/_meta-list.scss

@@ -0,0 +1,11 @@
+@import "../settings";
+
+.c-meta-list {
+  .c-meta-item + .c-meta-item {
+    margin-left: $default-spacing-unit;
+  }
+
+  .c-meta-item__label {
+    display: block;
+  }
+}

assets/stylesheets/components/_progress.scss

@@ -0,0 +1,86 @@
+@import "../settings";
+@import "../tools";
+
+$_section-width: 25%;
+
+.c-progress {
+  margin: $default-spacing-unit * 2 $default-spacing-unit / 2;
+
+  @include media(tablet) {
+    margin: $default-spacing-unit * 2;
+    padding-bottom: $default-spacing-unit / 2;
+  }
+}
+
+.c-progress-bar {
+  @include media(tablet) {
+    display: table;
+    width: 100%;
+    position: relative;
+  }
+}
+
+.c-progress__stage {
+  @include core-font(14);
+  position: relative;
+  border-color: $grey-3;
+  border-width: 0 0 0 2px;
+  border-style: solid;
+
+  @include media(tablet) {
+    display: table-cell;
+    width: $_section-width;
+    border-width: 2px 0 0;
+  }
+
+  &::before {
+    position: absolute;
+    left: -8px;
+    width: 14px;
+    height: 14px;
+    content: "";
+    border-radius: 20px;
+    background-color: $white;
+    border: 2px solid $grey-3;
+    outline: 2px solid $white;
+    display: block;
+    z-index: 30;
+
+    @include media(tablet) {
+      top: -8px;
+    }
+  }
+
+  &.is-complete {
+    border-color: $govuk-blue;
+
+    &::before {
+      background-color: $govuk-blue;
+      border: 2px solid $govuk-blue;
+    }
+  }
+
+  &.is-active {
+    &::before {
+      background-color: $white;
+      border: 2px solid $govuk-blue;
+    }
+  }
+
+  &:last-child {
+    border-color: transparent;
+  }
+}
+
+.c-progress__stage-title {
+  display: block;
+  padding: 0 0 $default-spacing-unit $default-spacing-unit;
+
+  @include media(tablet) {
+    position: absolute;
+    left: -50px;
+    width: 100px;
+    text-align: center;
+    padding: $default-spacing-unit 0 0;
+  }
+}

assets/stylesheets/components/form/_form-control.scss

@@ -62,3 +62,11 @@ select.c-form-control {
 .c-form-control--short {
   max-width: 10em;
 }
+
+.c-form-control--shorter {
+  max-width: 4em;
+}
+
+.c-form-control--shortest {
+  max-width: 2.6em;
+}

assets/stylesheets/components/form/_form-fieldset.scss

@@ -1,4 +1,5 @@
 @import "../../settings";
+@import "../../tools";
 
 .c-form-fieldset {
   border: 1px solid $grey-2;
@@ -16,6 +17,12 @@
   margin: 0 $default-spacing-unit / 2;
 }
 
+.c-form-fieldset__hint {
+  display: block;
+  margin-bottom: $default-spacing-unit;
+  color: $grey-1;
+}
+
 // Modifiers
 .c-form-fieldset--subfield {
   position: relative;

assets/stylesheets/components/form/_form-group.scss

@@ -5,7 +5,8 @@
   max-width: 40em;
 
   [type="hidden"] + &,
-  .c-form-fieldset__legend + & {
+  .c-form-fieldset__legend + &,
+  .c-form-fieldset__hint + & {
     margin-top: 0;
   }
 }
@@ -68,15 +69,10 @@
 .c-form-group--inline:not(fieldset) {
   @include media(tablet) {
     vertical-align: top;
-
-    &,
-    .c-form-group__inner {
-      display: inline-block;
-    }
+    display: inline-block;
 
     .c-form-group__label:not(legend) {
       display: inline-block;
-      margin-bottom: 0;
       margin-right: $default-spacing-unit / 2;
     }
 
@@ -106,6 +102,12 @@
   }
 }
 
+.c-form-group--soft {
+  .c-form-group__label-text {
+    font-weight: normal;
+  }
+}
+
 .c-form-group--small,
 .c-form-group--smaller {
   font-size: 16px;

assets/stylesheets/components/form/_multiple-choice.scss

@@ -1,4 +1,5 @@
 @import "../../settings";
+@import "../../tools";
 
 .c-multiple-choice {
   position: relative;
@@ -92,9 +93,20 @@
 }
 
 .c-multiple-choice__hint {
+  @include core-font(16);
   display: block;
   margin-top: 5px;
   color: $grey-1;
+
+  a {
+    &,
+    &:active,
+    &:link,
+    &:hover,
+    &:visited {
+      color: $grey-1;
+    }
+  }
 }
 
 // Modifiers

assets/stylesheets/layout/_assemblies.scss

@@ -38,6 +38,10 @@
     margin-top: $default-spacing-unit * 2;
     margin-bottom: $default-spacing-unit * 2;
   }
+
+  .c-meta-list {
+    margin-top: $default-spacing-unit;
+  }
 }
 
 [type="hidden"] + .c-form-group {

src/apps/companies/views/investments.njk

@@ -6,7 +6,7 @@
 
   <div class="split-header">
     <h2 class="heading-medium">{{ projects.count }} investment {{ 'project' | pluralise(projects.count) }}</h2>
-    <a class="button button-secondary" href="/investment-projects/create/1?client-company={{ company.id }}">Add investment project</a>
+    <a class="button button-secondary" href="/investment-projects/create/{{ company.id }}">Add investment project</a>
   </div>
 
   {% if projects.results %}

src/apps/components/controllers.js

@@ -94,6 +94,21 @@ async function renderEntityList (req, res) {
     })
 }
 
+function renderProgress (req, res) {
+  return res
+    .breadcrumb('Progress')
+    .render('components/views/progress', {
+      stageNames: [
+        'one',
+        'two',
+        'three',
+        'four',
+        'five',
+      ],
+      currentStageName: 'three',
+    })
+}
+
 module.exports = {
   renderEntityList,
   renderFormElements,
@@ -102,5 +117,6 @@ module.exports = {
   renderLocalHeader,
   renderBreadcrumbs,
   renderPagination,
+  renderProgress,
   renderResults,
 }

src/apps/components/middleware.js

@@ -10,6 +10,7 @@ function handleFormPost (req, res, next) {
         country: ['Country is required'],
         averageSalary: ['Select an option'],
         foreignOtherCompany: ['Select a company type'],
+        estimated_date: ['Date is required'],
       },
     },
   })

src/apps/components/router.js

@@ -9,6 +9,7 @@ const {
   renderLocalHeader,
   renderBreadcrumbs,
   renderPagination,
+  renderProgress,
   renderResults,
 } = require('./controllers')
 
@@ -24,6 +25,7 @@ router
   .get('/local-header', renderLocalHeader)
   .get('/pagination', renderPagination)
   .get('/results', getInvestmentProjectsCollection, renderResults)
+  .get('/progress', renderProgress)
   .get('/form', handleEntitySearch, renderFormElements)
   .post('/form', handleFormPost, renderFormElements)
 

src/apps/components/views/form.njk

@@ -180,6 +180,17 @@
           value: form.state.lastName
         }) }}
       {% endcall %}
+
+      {{ DateFieldset({
+        name: 'estimated_date',
+        label: 'What is your favourite day?',
+        hint: 'A day you really like',
+        error: form.errors.messages.estimated_date,
+        value: {
+          year: form.state.estimated_date_year,
+          month: form.state.estimated_date_month
+        }
+      }) }}
     {% endcall %}
   {% endcall %}
 

src/apps/components/views/index.njk

@@ -18,6 +18,9 @@
     <li>
       <a href="components/pagination">Pagination</a>
     </li>
+    <li>
+      <a href="components/progress">Progress</a>
+    </li>
     <li>
       <a href="components/local-header">Local header</a>
     </li>

src/apps/components/views/progress.njk

@@ -0,0 +1,10 @@
+{% extends "./_layout.njk" %}
+
+{% block body_main_content %}
+  {% call Example('Progress') %}
+    {{ Progress({
+      stageNames: stageNames,
+      currentStageName: currentStageName
+    }) }}
+  {% endcall %}
+{% endblock %}