From 6e5270b316feccc6131f58ccd4107918036aba5a Mon Sep 17 00:00:00 2001
From: Joshua Waheed <joshua.waheed@gmail.com>
Date: Fri, 1 Jun 2018 17:02:12 +0100
Subject: [PATCH] [WEBDEV-557] Remove .list--details CSS-Class and HTML-Wrapper
 (#455)

---
 src/elements/_lists.pug                       | 98 ++++++++++---------
 src/elements/_utilities.pug                   | 15 ++-
 src/stylesheets/components/_card.scss         | 28 ++++--
 src/stylesheets/components/_list-styles.scss  | 19 ----
 src/stylesheets/elements/_headings.scss       | 15 +--
 src/stylesheets/settings/_mixins.scss         | 49 ++--------
 src/templates/prototypes/_headings.pug        |  9 +-
 src/templates/prototypes/_lists.pug           | 25 ++---
 src/templates/prototypes/_tracks.pug          | 49 +++++-----
 .../prototypes/guide-to-procedures.pug        | 50 ++++++----
 src/templates/prototypes/people-id.pug        | 18 ++--
 src/templates/prototypes/search-results.pug   | 27 ++---
 12 files changed, 185 insertions(+), 217 deletions(-)

diff --git a/src/elements/_lists.pug b/src/elements/_lists.pug
index b680436a..a3df00df 100644
--- a/src/elements/_lists.pug
+++ b/src/elements/_lists.pug
@@ -1,8 +1,8 @@
 //- List Box
 mixin list--block(name, constituency, party, image)
   li
-    if image
-      .card
+    .card
+      if image
         figure.avatar--round
           +link('#', '')(aria-hidden="true", tabIndex="-1")
             picture
@@ -15,72 +15,78 @@ mixin list--block(name, constituency, party, image)
             p= 'MP for ' + constituency
           p= party
 
-    else
-      .list--details
-        h2 #[+link('#', constituency)]
-        p= name
+      else
+        .card__details
+          h2 #[+link('#', constituency)]
+          p= name
 
 //- List Box Parties
 mixin list--block__parties(party, count)
   li
-    .list--details
-      h2 #[+link('#', party)]
-      p= 'All current ' + party + ' MPs'
-    .list--details
-      span.count= count
-      | MPs
+    .card
+      .card__details
+        h2 #[+link('#', party)]
+        p= 'All current ' + party + ' MPs'
+      .card__details
+        span.count= count
+        | MPs
 
 //- List Box Accessible
 mixin list--block__accessible(constituency, date)
   li
-    .list--details
-      if constituency
-        h2 #[+link('#', constituency)]
-          span.sr-only= 'constituency from ' + date
-        p
-          span(aria-hidden='true')= date
-      else
-        h2 #[+link('#', date)]
+    .card
+      .card__details
+        if constituency
+          h2 #[+link('#', constituency)]
+            span.sr-only= 'constituency from ' + date
+          p
+            span(aria-hidden='true')= date
+        else
+          h2 #[+link('#', date)]
 
 //- List Box Generic
 mixin list--block__generic(heading, content)
   li
-    .list--details
-      if list_box_h4
-        h4 #[+link('#', heading)]
-      else if list_box_h3
-        h3 #[+link('#', heading)]
-      else
-        h2 #[+link('#', heading)]
-      p= content
-      block
+    .card
+      .card__details
+        if list_box_h4
+          h4 #[+link('#', heading)]
+        else if list_box_h3
+          h3 #[+link('#', heading)]
+        else
+          h2 #[+link('#', heading)]
+        p= content
+        block
 
-//- List Box Inline
+//- List Block Inline
 mixin list--block__inline(name, count, inline_text)
   if inline_text
     li
-      .list--details__inline
-        h2 #[+link('#', name)]
-        p= '- ' + count + ' MPs'
+      .card--inline
+        .card__details
+          h2 #[+link('#', name)]
+          p= '- ' + count + ' MPs'
   else
     li
-      .list--details
-        h2 #[+link('#', name)]
-        p= count + ' MPs'
+      .card
+        .card__details
+          h2 #[+link('#', name)]
+          p= count + ' MPs'
 
 //- List Pipe
 mixin list--pipe(constituency, date, name)
   li
-    .list--details
-      if member
-        p= 'MP for '
-          +link('#', constituency)
-        p= date
-      else if name
-        h2 #[+link('#', name)]
-        p= date
-      else
-        p= date
+    .card
+      .card__details
+        if member
+          p= 'MP for '
+            +link('#', constituency)
+          p= date
+        else if name
+          h2 #[+link('#', name)]
+          p= date
+        else
+          p= date
 
 //- List Pipe Media
 mixin list--pipe__media(imgURL, imgAlt, heading, btnURL, btnText)
diff --git a/src/elements/_utilities.pug b/src/elements/_utilities.pug
index b4a5152b..936811db 100644
--- a/src/elements/_utilities.pug
+++ b/src/elements/_utilities.pug
@@ -1,13 +1,10 @@
 ul.list--inline
   li.visually-hidden(aria-hidden='true')
-    .list--details
-      include ../icons/print.svg
-      +link('#', 'Print page').btn--print
+    include ../icons/print.svg
+    +link('#', 'Print page').btn--print
   li
-    .list--details
-      include ../icons/download.svg
-      +link('#', 'Download as PDF')
+    include ../icons/download.svg
+    +link('#', 'Download as PDF')
   li
-    .list--details
-      include ../icons/share.svg
-      +link('#', 'Share')
+    include ../icons/share.svg
+    +link('#', 'Share')
diff --git a/src/stylesheets/components/_card.scss b/src/stylesheets/components/_card.scss
index 396ab894..7e91d2bc 100644
--- a/src/stylesheets/components/_card.scss
+++ b/src/stylesheets/components/_card.scss
@@ -1,3 +1,5 @@
+/*--- Card ---*/
+
 .card,
 [class*="card--"] {
   @include media($extra-small) {
@@ -5,16 +7,30 @@
   }
 }
 
+/*--- Card inline ---*/
+
+.card--inline .card__details * {
+  display: inline;
+}
+
+/*--- Card details ---*/
+
 .card__details {
+  @include first-child;
+  @include last-child;
+  @include media($extra-small) {
+    flex: 1 1 0;
+  }
   > * {
+    margin-top: $base-spacing-unit;
     margin-bottom: $base-spacing-unit;
   }
-  @include last-child();
+}
+
+.card__details + .card__details {
   @include media($extra-small) {
-    flex: 1 1 0;
-    > * {
-      flex-basis: 100%;
-      margin-bottom: $base-spacing-unit;
-    }
+    max-width: 25%;
+    align-self: center;
+    text-align: right;
   }
 }
diff --git a/src/stylesheets/components/_list-styles.scss b/src/stylesheets/components/_list-styles.scss
index d5779f2f..f1a4c597 100644
--- a/src/stylesheets/components/_list-styles.scss
+++ b/src/stylesheets/components/_list-styles.scss
@@ -167,25 +167,6 @@ dl, dt, dd {
   list-style-type: lower-alpha;
 }
 
-/*--- List Details Options ---*/
-
-.list--details {
-  @include list--details
-}
-
-.list--details__inline {
-  @include list--details__inline;
-}
-
-.list--details + .list--details {
-  @include media($extra-small) {
-    flex-basis: 25%;
-    text-align: right;
-    align-self: center;
-    margin-left: $base-spacing-unit;
-  }
-}
-
 /*--- Default Nested Lists [ul/ol] ---*/
 
 // List style for <ul> tags without any classes, nested
diff --git a/src/stylesheets/elements/_headings.scss b/src/stylesheets/elements/_headings.scss
index e2cd6bfe..fdf4141d 100644
--- a/src/stylesheets/elements/_headings.scss
+++ b/src/stylesheets/elements/_headings.scss
@@ -132,12 +132,6 @@ footer h2 {
   }
 }
 
-.list--details, .list--details__inline {
-  h2, h3, h4, h5, h6 {
-    margin-top: 0;
-  }
-}
-
 /*--- List Events ---*/
 
 .list--events > li > {
@@ -235,15 +229,8 @@ article + aside > h2 {
 .card,
 [class*="card--"] {
   h2, h3, h4, h5, h6 {
-    @extend .epsilon;
+    @include epsilon;
     flex-basis: 100%;
     color: $grey-1;
-    margin: 0 0 $base-spacing-unit;
-
-    @include media($extra-small) {
-      ~ * {
-        margin-top: $base-spacing-unit;
-      }
-    }
   }
 }
diff --git a/src/stylesheets/settings/_mixins.scss b/src/stylesheets/settings/_mixins.scss
index 969d038e..0992dce0 100644
--- a/src/stylesheets/settings/_mixins.scss
+++ b/src/stylesheets/settings/_mixins.scss
@@ -113,7 +113,13 @@
 
 /*--- Remove top/bottom margins ---*/
 
-@mixin last-child() {
+@mixin first-child {
+  :first-child {
+    margin-top: 0;
+  }
+}
+
+@mixin last-child {
   :last-child {
     margin-bottom: 0;
   }
@@ -393,15 +399,6 @@
   > li {
     width: 100%;
     @include block;
-    @include media($extra-small) {
-      display: inline-flex;
-    }
-    /* IE11 Fix */
-    @media(-ms-high-contrast: none) {
-      *::-ms-backdrop, figure + .list--details {
-        padding-left: $base-spacing-unit-small;
-      }
-    }
   }
 }
 
@@ -415,43 +412,12 @@
     background: transparent;
     border-bottom: solid 1px $grey-3;
     padding: $base-spacing-unit-tiny 0 ($base-spacing-unit-tiny - 1) 0;
-    @include media($extra-small) {
-      display: inline-flex;
-    }
-    /* IE11 Fix */
-    @media(-ms-high-contrast: none) {
-      *::-ms-backdrop, figure + .list--details {
-        padding-left: $base-spacing-unit-large;
-      }
-    }
   }
   > li:first-of-type {
     border-top: solid 1px $grey-3;
   }
 }
 
-@mixin list--details {
-  margin-top: 0;
-  word-break: break-word;
-  @include media($extra-small) {
-    flex-basis: 100%;
-    display: inline-block;
-  }
-  * {
-    margin-bottom: $base-spacing-unit;
-  }
-  :last-child {
-    margin-bottom: 0;
-  }
-}
-
-@mixin list--details__inline {
-  @include list--details;
-  * {
-    display: inline;
-  }
-}
-
 /*--- Card Mixins ---*/
 
 @mixin card {
@@ -459,6 +425,7 @@
   flex-wrap: wrap;
   flex-basis: 100%;
   align-items: flex-start;
+  @include headings-margin-top(0);
 }
 
 /*--- Avatar Mixins ---*/
diff --git a/src/templates/prototypes/_headings.pug b/src/templates/prototypes/_headings.pug
index 66081b0d..e831b483 100644
--- a/src/templates/prototypes/_headings.pug
+++ b/src/templates/prototypes/_headings.pug
@@ -22,10 +22,11 @@ block content
         h2 Heading preceding a heading
         ul.list--block
           li
-            .list--details
-              h5 MP for #[+link('#', 'Hackney North and Stoke Newington')]
-              p Parliamentary role
-              p 8 Jun 2017 to present
+            .card
+              .card__details
+                h5 MP for #[+link('#', 'Hackney North and Stoke Newington')]
+                p Parliamentary role
+                p 8 Jun 2017 to present
         h2 Heading preceding content
         p Paragraph preceding a heading
         h2 Heading ending timeline
diff --git a/src/templates/prototypes/_lists.pug b/src/templates/prototypes/_lists.pug
index 7d19852e..f38884a5 100644
--- a/src/templates/prototypes/_lists.pug
+++ b/src/templates/prototypes/_lists.pug
@@ -91,10 +91,11 @@ block content
         -var member = true
         +list--pipe('Windsor', '8 Jun 2017 to present')
         li
-          .list--details
-            h3.milli House of Commons Role
-            h4 MP for Hackney North and Stoke Newington
-            p Jun 1986 to present
+          .card
+            .card__details
+              small House of Commons Role
+              h4 MP for Hackney North and Stoke Newington
+              p Jun 1986 to present
 
       h3 Media
       ol.list--pipe
@@ -128,12 +129,12 @@ block content
             li
               .card
                 .card__details
-                  span.milli Home Office
+                  small Home Office
                   h5 #[+link('#', 'Immigrants: Commonwealth')]
             li
               .card
                 .card__details
-                  span.milli Department for Business, Energy and Industrial Strategy
+                  small Department for Business, Energy and Industrial Strategy
                   h5 #[+link('#', 'Housing: Heating')]
         li
           h4
@@ -142,12 +143,12 @@ block content
             li
               .card
                 .card__details
-                  span.milli Home Office
+                  small Home Office
                   h5 #[+link('#', 'Asylum: Finance')]
             li
               .card
                 .card__details
-                  span.milli Home Office
+                  small Home Office
                   h5 #[+link('#', 'Immigration: Caribbean')]
 
       h3 Block style
@@ -159,12 +160,12 @@ block content
             li
               .card
                 .card__details
-                  span.milli Home Office
+                  small Home Office
                   h5 #[+link('#', 'Immigrants: Commonwealth')]
             li
               .card
                 .card__details
-                  span.milli Department for Business, Energy and Industrial Strategy
+                  small Department for Business, Energy and Industrial Strategy
                   h5 #[+link('#', 'Housing: Heating')]
         li
           h4
@@ -173,12 +174,12 @@ block content
             li
               .card
                 .card__details
-                  span.milli Home Office
+                  small Home Office
                   h5 #[+link('#', 'Asylum: Finance')]
             li
               .card
                 .card__details
-                  span.milli Home Office
+                  small Home Office
                   h5 #[+link('#', 'Immigration: Caribbean')]
 
   section
diff --git a/src/templates/prototypes/_tracks.pug b/src/templates/prototypes/_tracks.pug
index ce439467..e6405a08 100644
--- a/src/templates/prototypes/_tracks.pug
+++ b/src/templates/prototypes/_tracks.pug
@@ -12,25 +12,22 @@ block content
         h3 Held currently
         ul.list--block
           li
-            .list--details
-              h4 MP for #[+link('#', 'Waveney')]
-              p Elected 3 times
-              ul
-                li 8 Jun 2017 to present
-                li 7 May 2015 to 3 May 2017
-                li 6 May 2010 to 30 Mar 2015
+            h4 MP for #[+link('#', 'Waveney')]
+            p Elected 3 times
+            ul
+              li 8 Jun 2017 to present
+              li 7 May 2015 to 3 May 2017
+              li 6 May 2010 to 30 Mar 2015
         h3 Held in the last 10 years
         ul.list--block
           li
-            .list--details
-              h4 Member of the Environmental Audit Committee
-              p Committee role
-              p 20 Jul 2015 to 3 May 2017
+            h4 Member of the Environmental Audit Committee
+            p Committee role
+            p 20 Jul 2015 to 3 May 2017
           li
-            .list--details
-              h4 Member of the Environmental Audit Committee
-              p Committee role
-              p 26 Jul 2010 to 30 Mar 2015
+            h4 Member of the Environmental Audit Committee
+            p Committee role
+            p 26 Jul 2010 to 30 Mar 2015
         h3 2010
 
   section
@@ -40,18 +37,20 @@ block content
         h3 First heading with list block
         ul.list--block
           li
-            .list--details
-              h4 #[+link('#', 'Heading 4')]
-              p Paragraph content
+            .card
+              .card__details
+                h4 #[+link('#', 'Heading 4')]
+                p Paragraph content
 
         h3 Single heading [no content]
         h3 Last heading with list pipe
         ul.list--pipe
           li
-            .list--details
-              h4 #[+link('#', 'Heading 4')]
-              p Paragraph content
-              ul
-                li Item 1
-                li Item 2
-                li Item 3
+            .card
+              .card__details
+                h4 #[+link('#', 'Heading 4')]
+                p Paragraph content
+                ul
+                  li Item 1
+                  li Item 2
+                  li Item 3
diff --git a/src/templates/prototypes/guide-to-procedures.pug b/src/templates/prototypes/guide-to-procedures.pug
index dd2872b5..ee99e070 100644
--- a/src/templates/prototypes/guide-to-procedures.pug
+++ b/src/templates/prototypes/guide-to-procedures.pug
@@ -54,32 +54,42 @@ block content
         .block
           ul.list--pipe
             li
-              .list--details
-                +link('#', 'How to submit an oral question online')
+              .card
+                .card__details
+                  +link('#', 'How to submit an oral question online')
             li.active
-              .list--details
-                | How to submit an oral question on paper
+              .card
+                .card__details
+                  | How to submit an oral question on paper
             li
-              .list--details
-                +link('#', 'Deadlines for oral questions')
+              .card
+                .card__details
+                  +link('#', 'Deadlines for oral questions')
             li
-              .list--details
-                +link('#', 'What happens after your oral question has been tabled')
+              .card
+                .card__details
+                  +link('#', 'What happens after your oral question has been tabled')
             li
-              .list--details
-                +link('#', 'What happens in the Chamber if you have an oral question')
+              .card
+                .card__details
+                  +link('#', 'What happens in the Chamber if you have an oral question')
             li
-              .list--details
-                +link('#', 'Grouping of oral questions')
+              .card
+                .card__details
+                  +link('#', 'Grouping of oral questions')
             li
-              .list--details
-                +link('#', 'Taking part in Question Time if you haven\'t got a question on the Order Paper')
+              .card
+                .card__details
+                  +link('#', 'Taking part in Question Time if you haven\'t got a question on the Order Paper')
             li
-              .list--details
-                +link('#', 'Opposition spokespeople and Question Time')
+              .card
+                .card__details
+                  +link('#', 'Opposition spokespeople and Question Time')
             li
-              .list--details
-                +link('#', 'Withdrawing an oral question')
+              .card
+                .card__details
+                  +link('#', 'Withdrawing an oral question')
             li
-              .list--details
-                +link('#', 'Backbenchers who answer oral questions')
+              .card
+                .card__details
+                  +link('#', 'Backbenchers who answer oral questions')
diff --git a/src/templates/prototypes/people-id.pug b/src/templates/prototypes/people-id.pug
index b2d40436..db614d14 100644
--- a/src/templates/prototypes/people-id.pug
+++ b/src/templates/prototypes/people-id.pug
@@ -44,15 +44,17 @@ block content
       h2 Roles
       ul.list--pipe
         li
-          .list--details
-            h3.milli House of Commons Role
-            h4.lead MP for Hackney North and Stoke Newington
-            p Jun 1986 to present
+          .card
+            .card__details
+              small House of Commons Role
+              h4.lead MP for Hackney North and Stoke Newington
+              p Jun 1986 to present
         li
-          .list--details
-            h3.milli Committee Role
-            h4 Member of the Merits of Statutory Instruments Committee
-            p May 2011 to present
+          .card
+            .card__details
+              small Committee Role
+              h4 Member of the Merits of Statutory Instruments Committee
+              p May 2011 to present
       +dropdownToggle("Show history")
         .track
           h3 Held currently
diff --git a/src/templates/prototypes/search-results.pug b/src/templates/prototypes/search-results.pug
index fd3a11cc..5e9a7b7f 100644
--- a/src/templates/prototypes/search-results.pug
+++ b/src/templates/prototypes/search-results.pug
@@ -26,19 +26,20 @@ block content
       ol.list--block
         each object, index in [{url: 'https://www.parliament.uk/edm/2017-19/663', title: 'Early day motion 663 - ROYAL HOSPITAL ... - parliament.uk', hint: 'Beta', hintCount:'1', formatted_url: 'https://www.parliament.uk/edm/2017-19/663', description: 'That this House congratulates The Dairy Council in staging the 2017 Annual Ceremony of the Christmas Cheeses, which forms the beginning of the Chelsea...'}, {url: 'http://www.parliament.uk/edm/2015-16/659', title: 'Early day motion 659 - CHEESE WARS AND ENGLISH STILTON ...', hint: '', hintCount:'', formatted_url: 'www.parliament.uk/edm/2015-16/659', description: 'That this House notes the 250th anniversary of the Cheese Wars that led to rioting in Leicestershire and Derbyshire, which forced local militia forces being...'}, {url: 'https://www.parliament.uk/documents/commons-catering/menus/MenusSpringSummer2017/May-Cheese.pdf', title: 'Cheese Selection - parliament.uk', hint: 'pdf', hintCount:'1', formatted_url: 'https://www.parliament.uk/.../MenusSpringSummer2017/May-Cheese.pdf', description: 'Cheese Selection This May our cheese trolley features a range of cheeses from within the British Isles, with a choice of well-considered accompaniments.'}, {url: 'http://researchbriefings.files.parliament.uk/documents/SN02721/SN02721.pdf', title: 'UK Dairy Industry Statistics', hint: 'pdf', hintCount:'1', formatted_url: 'researchbriefings.files.parliament.uk/documents/SN02721/SN02721.pdf', description: 'cheese, but a positive trade balance in milk and cream. &bull; Farm-gate milk prices for August 2015 were 23.3 pence per litre, ... 9 UK Dairy Industry Statistics . 5.'}, {url: 'http://www.parliament.uk/documents/facilities/Proativepublication-menus/October%202015%20menus/Smoking-Room-Afternoon-Tea-Menu-October-12-2015.pdf', title: 'House of Commons Cheese and - UK Parliament', hint: 'pdf', hintCount:'1', formatted_url: 'www.parliament.uk/documents/facilities/Proativepublication-menus...', description: 'Available 15.00 &ndash; 17.30, Monday to Wednesday Assorted sandwiches &pound;3.50 per round Home-made scone with butter and conserve &pound;2.75 with clotted cream &pound;2.75'}]
           li
-            .list--details
-              h2
-                if object.hintCount !== ''
-                  a(data-tracking='appInsights', data-search-result=(index + 1), data-search-hint=object.hint, data-search-hint-count=object.hintCount, href=object.url)= object.title
-                else
-                  a(data-tracking='appInsights', data-search-result=(index + 1), href=object.url)= object.title
-              ul.list--inline
-                if object.hint == 'pdf'
-                  li.hint.theme--grey-4= object.hint
-                if object.hint == 'Beta'
-                  li.hint= object.hint
-                li.url(data-testable='')= object.formatted_url
-              p= object.description
+            .card
+              .card__details
+                h2
+                  if object.hintCount !== ''
+                    a(data-tracking='appInsights', data-search-result=(index + 1), data-search-hint=object.hint, data-search-hint-count=object.hintCount, href=object.url)= object.title
+                  else
+                    a(data-tracking='appInsights', data-search-result=(index + 1), href=object.url)= object.title
+                ul.list--inline
+                  if object.hint == 'pdf'
+                    li.hint.theme--grey-4= object.hint
+                  if object.hint == 'Beta'
+                    li.hint= object.hint
+                  li.url(data-testable='')= object.formatted_url
+                p= object.description
 
 
   section