[WEBSITE-1765][WEBSITE-1707] Updated styling for MP page and dropdowns (

#282)

* [WEBSITE-1765][WEBSITE-1707] Updated styling for MP page and dropdowns

* [WEBSITE-1707] Added container--offset for content page

src/stylesheets/components/_dropdown.scss

@@ -9,11 +9,14 @@
 }
 
 .dropdown__content {
+  font-weight: 400;
+  border: solid $grey-3;
+  border-width: 1px 0 0;
   opacity: 1;
   height: auto;
   overflow: hidden;
   transition: all 0.1s linear;
-  padding: 0 $base-spacing-unit-small $base-spacing-unit-small;
+  padding: $base-spacing-unit-small;
   @include first-child__last-child;
 
   &.active {
@@ -24,3 +27,22 @@
 .dropdown__content.visually-hidden {
   padding: 0 $base-spacing-unit-small;
 }
+
+/*--- Component Rules ---*/
+
+.block {
+  .dropdown {
+    background-color: transparent;
+    .dropdown__toggle {
+      &.open {
+        margin-bottom: $base_spacing_unit_tiny;
+      }
+    }
+    * {
+      padding-left: 0;
+    }
+  }
+  .dropdown__content {
+    border-bottom: 1px solid $grey-3;
+  }
+}

src/stylesheets/components/_list-styles.scss

@@ -154,6 +154,22 @@ dl, dt, dd {
     padding: ($base-spacing-unit + 2) 0;
   }
 }
+.list--bullet {
+  @extend .list;
+  li {
+    font-weight: 400;
+    @include fontsize(16);
+    @include media($tablet) {
+      @include fontsize(18);
+    }
+    &:before {
+      content: '\2022';
+      line-height: 1;
+      @include fontsize(24);
+      margin: 0 $base-spacing-unit-tiny 0 $base-spacing-unit-small;
+    }
+  }
+}
 
 // List Combination Settings
 

src/stylesheets/elements/_form.scss

@@ -4,6 +4,7 @@
 
 form {
   width: 100%;
+  margin-bottom: $base-spacing-unit-tiny;
 }
 
 label {

src/stylesheets/elements/_headings.scss

@@ -8,6 +8,12 @@ h1, h2, h3, h4, h5, h6 {
   @include media($desktop) {
     margin-top: $base-spacing-unit-large;
   }
+  &.content--xs {
+    @extend .content--xs;
+  }
+  &.lead {
+    @extend .lead;
+  }
 }
 
 // fontsize mixin creates 'font-size' in both REM & Pixels

src/stylesheets/elements/_links.scss

@@ -36,14 +36,17 @@ footer a  {
   @include links(
     $grey-1, 			// a:link colour
     none,				// a:link decoration
-    $purple, 		// a:visited color
+    $grey-1, 		// a:visited color
     $grey-1 // a:hover color
   );
   &:focus {
     text-decoration: underline;
     background-color: transparent;
     outline: none;
   }
+  &:hover {
+    text-decoration: underline;
+  }
   &:after {
     content: "";
     position: absolute;
@@ -61,10 +64,14 @@ footer a  {
     border-bottom: 6px solid $grey-1;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    top: calc(50% - 5px); // Vertical centering (50% of the parent div height - (arrow size / 2))
+    top: calc(50% - 3px); // Vertical centering (50% of the parent div height - (arrow size / 2))
   }
 }
 
+.block .dropdown .dropdown__toggle a {
+  padding: 0;
+}
+
 /*--- Maps ---*/
 
 .map .leaflet-bar a {

src/stylesheets/elements/_typography.scss

@@ -23,6 +23,12 @@ p {
   }
 }
 
+.content--xs {
+  color: $grey-2;
+  font-weight: 400;
+  @include fontsize(14);
+}
+
 // Component Typography Settings (pixels)
 
 header {

src/stylesheets/objects/_content-layouts.scss

@@ -39,6 +39,12 @@
   max-width: $max-width;
 }
 
+.container--offset {
+  @extend .container;
+  @include media($desktop) {
+    padding-right: 216px;
+  }
+}
 .section--primary__container {
   @include clearfix;
 }

src/templates/prototypes/people-id.pug

@@ -18,6 +18,16 @@ block content
     .container
       .block
         h2 Contact
+        +dropdownToggle("When to contact an MP")
+          p MPs can help with issues that are the responsibility of UK Parliament. They represent their constituencies and can help with issues such as:
+          ul.list--bullet
+            li Hospitals and the NHS
+            li Problems with benefits, pensions and national insurance
+            li Immigration
+            li School closures and funding
+            li Transport facilities
+          p #[+link('#', 'Who else can help with my issue?')]
+
         p Please include your postcode when contacting your MP.
         dl.list--definition
           dt Email:
@@ -35,11 +45,32 @@ block content
 
   section
     .container
-      //- Membership History
       h2 Roles
-      h3 MP
-      ol.list--pipe
-        -var member = true
-        +list--pipe('Stourbridge', '7 Jun 2017 to present')
-        +list--pipe('Stourbridge', '7 May 2015 to 3 May 2017')
-        +list--pipe('Stourbridge', '6 May 2010 to 30 Mar 2015')
+      ul.list--pipe
+        li
+          .list--details
+            h3.content--xs House of Commons Role
+            h4.lead MP for Hackney North and Stoke Newington
+            p Jun 1986 to present
+        li
+          .list--details
+            h3.content--xs Committee Role
+            h4.lead Member of the Merits of Statutory Instruments Committee
+            p May 2011 to present
+      +dropdownToggle("Show history")
+        h3 Elected Roles
+        ul.list--block
+          +list--block('MP for Islington North', 'Elected Role', '6 May 2010 to present')
+          +list--block('MP for Islington North (1997 to 2010)', 'Elected Role', '1 May 1997 to 6 May 2010')
+          +list--block('MP for Islington North (1993 to 1997)', 'Elected Role', '9 June 1983 to 1 May 1997')
+        h3 Parliamentary Roles
+        ul.list--block
+          +list--block('Leader of the Opposition', 'Parliamentary Role', 'Sept 2015 to present')
+        h3 Committee Roles
+        ul.list--block
+          +list--block('Justice Committee', 'Select Committee Role', '6 May 2010 to present')
+          +list--block('London Regional Select Committee', 'Select Committee Role', 'Dec 2009 to May 2010')
+          +list--block('Social Security', 'Select Committee Role', 'Apr 1992 to Mar 1997')
+
+
+