[WEBSITE-1114] Refactoring of collection lists within article (#553)

ukparliament · Dec 14, 2018 · f89f751 · f89f751
1 parent 3877e1b
commit f89f751
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 166 deletions.
diff --git a/src/components/collections.pug b/src/components/collections.pug
@@ -1,18 +1,35 @@
-h2
-  +link('#', 'Collection one')
-ol
-  li #[+link('#', 'Article one')]
-  li #[+link('#', 'Article two')]
-  li #[+link('#', 'Article three')]
-  li Article header
-  li #[+link('#', 'Article five')]
-  li #[+link('#', 'Article ')]
+h2 More in:  #[+link('#', 'Collection one')]
+ol.list--2
+  li
+    .card
+      .card__details
+        small Article
+        h2 #[+link('#', 'Article one')]
+  li
+    .card
+      .card__details
+        small Article
+        h2 #[+link('#', 'Article two')]
+  li
+    .card
+      .card__details
+        small Collection
+        h2 #[+link('#', 'Collection one')]
+  li
+    .card
+      .card__details
+        small Collection
+        h2 #[+link('#', 'Collection two')]
 
-h2
-  +link('#', 'Collection two')
-ol
-  li #[+link('#', 'Article one')]
-  li Article header
-  li #[+link('#', 'Article two')]
-  li #[+link('#', 'Article three')]
-  li #[+link('#', 'Article four')]
+h2 More in:  #[+link('#', 'Collection two')]
+ol.list--2
+  li
+    .card
+      .card__details
+        small Article
+        h2 #[+link('#', 'Article one')]
+  li
+    .card
+      .card__details
+        small Collection
+        h2 #[+link('#', 'Collection one')]
diff --git a/src/components/meta.pug b/src/components/meta.pug
@@ -1,7 +1,9 @@
 if article
   dl.meta
-    dt Publisher/s
-    dd #[+link('#', 'Name of publisher')], #[+link('#', 'Name of second publisher')]
+    dt Author
+    dd #[+link('#', 'Author name')]
+    dt Publisher
+    dd #[+link('#', 'team')], #[+link('#', 'department')], #[+link('#', 'house')], #[+link('#', 'committee')], #[+link('#', 'sub-brand')]
     dt Date published
     dd
       time(datetime="2018-09-18") 18 September 2018

diff --git a/src/stylesheets/components/_list-styles.scss b/src/stylesheets/components/_list-styles.scss
@@ -59,10 +59,7 @@ dl, dt, dd {
 /*--- List Column Options ---*/
 
 .list--2 {
-  @include col--2;
-  @include media($medium) {
-    @include last-row(2);
-  }
+  @include list--2;
 }
 
 section:not([class*="section--wide"] ) .list--3 {
@@ -280,14 +277,6 @@ article [role='main'] {
   }
 }
 
-aside [class*="list"] li {
-  display: block;
-  width: auto;
-  &.active {
-    background-color: $grey-3;
-  }
-}
-
 footer .list {
   margin: 0;
   padding: 0;
@@ -324,17 +313,5 @@ footer .list {
 }
 
 article aside ol {
-  @include list;
-  margin-bottom: $base-spacing-unit-large;
-}
-
-article aside li:before {
-  /* Dash preceeding a collection list item */
-  content: "\002014";
-  color: $grey-2;
-  margin-right: $base-spacing-unit;
-}
-
-article aside li {
-  @include typography--heavy;
+  @include list--block;
 }
diff --git a/src/stylesheets/elements/_headings.scss b/src/stylesheets/elements/_headings.scss
@@ -212,6 +212,11 @@ article + aside > h2 {
   margin-bottom: 0;
 }
 
+article aside h2 {
+  @include epsilon;
+  @include typography--light;
+}
+
 /*--- Card styles ---*/
 
 .card,

diff --git a/src/stylesheets/elements/_links.scss b/src/stylesheets/elements/_links.scss
@@ -179,8 +179,8 @@ figure a :hover {
   opacity: 0.8;
 }
 
-/*--- Article styles---*/
+/*--- Component Specific ---*/
 
-article aside li a {
-  @include typography--light;
+article aside h2 a {
+  @include typography--heavy;
 }
diff --git a/src/stylesheets/settings/_mixins.scss b/src/stylesheets/settings/_mixins.scss
@@ -389,6 +389,13 @@
   }
 }
 
+@mixin list--2 {
+  @include col--2;
+  @include media($medium) {
+    @include last-row(2);
+  }
+}
+
 /*--- Global Typography Mixins ---*/
 
 @mixin alpha {

diff --git a/src/templates/index.pug b/src/templates/index.pug
@@ -14,7 +14,6 @@ html(lang="en")
           h2 Templates
           ul
             li #[+link('/templates/prototypes/article.html', 'Article')]
-            li #[+link('/templates/prototypes/article-new.html', 'Article New')]
             li #[+link('/templates/prototypes/front-page.html', 'Front Page')]
             li #[+link('/templates/prototypes/people-id.html', 'People ID')]
             li #[+link('/templates/prototypes/people-constituency.html', 'People Constituency')]
@@ -23,8 +22,6 @@ html(lang="en")
             li #[+link('/templates/prototypes/guide-to-procedures.html', 'Guide to Procedures (Short form)')]
             li #[+link('/templates/prototypes/questions.html', 'Questions')]
             li #[+link('/templates/prototypes/search-results.html', 'Search results')]
-            li #[+link('/templates/prototypes/visiting-security.html', 'Visiting Security')]
-            li #[+link('/templates/prototypes/gtp-meeting-times.html', 'Guide to procedure meeting times')]
 
 
       section

diff --git a/src/templates/prototypes/article-new.pug b/src/templates/prototypes/article-new.pug
diff --git a/src/templates/prototypes/article.pug b/src/templates/prototypes/article.pug
@@ -6,76 +6,44 @@ block content
   article(tabindex=0)#content
     header
       .container
-        small #[+link('#', 'Article Type [Article, News, Guidance]')]
+        small #[+link('#', 'Article')] #[+link('#', 'News')] #[+link('#', 'Guidance')]
         h1
-          span Article header
-          span.context Context
-        p A demo of how html content will display in the article tag
+          span Article heading
+        p Summary is a brief overview of what the content is about.
+        p If you want to find out what what's happening on a particular day in the Chamber the best way is to look at the Order Paper, which is the daily agenda.
 
         include ../../components/meta
 
     div(role='main')
       .container
-        h1
-          span Heading 1
-        h2 Heading 2
-        h3 Heading 3
-        h4 Heading 4
-        h5 Heading 5
-        h6 Heading 6
-
-        h2 Links
-        p #[+link('#', 'A link')]
-        p This is #[+link('#', 'another link')]
-
-        h2 Emphasis
-        p
-          strong This text is bold
-        p
-          em This text is italic
-        p
-          del This text has a strikethrough
-
-        h2 Blockquotes
-        blockquote
-          p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-        h2 Lists
-
-        h3 Ordered
-        ol
-          li List item 1
-          li List item 2
-          li List item 3
-
-        h3 Unordered
-        ul
-          li List item
-          li List item
-          li List item
+        // Lead image component //
+        figure
+          picture
+            source(srcset="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=CU_5:2&width=732&quality=80, https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=CU_5:2&width=1464&quality=80 2x" media="(min-width: 480px)")
+            source(srcset="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=MCU_3:2&width=444&quality=80, https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=MCU_3:2&width=888&quality=80 2x")
+            img(src="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?width=732&quality=80", alt="Margot James")
+          figcaption Lead image (optional) #[+link('#','example link to resource')]
+
+        // Headless CMS content
+        p You can speak in debates in the Chamber and Westminster Hall. You should be aware of the Rules of behaviour and courtesies in the House, issued by the Speaker, before you do so.
+        p The House reaches its decisions or highlights its opinions by debating motions. MPs argue for or against a specific motion and then reach a decision, with or without the need for a vote. Motions are listed on the Order Paper, along with the names of the MPs who support them.
+        p A general motion is neutrally worded. It usually begins, “That this House has considered”. It lets the House discuss an issue without giving an opinion or taking action on it. You can’t amend this kind of motion.
+        p A substantive motion calls on the House to take action or express an opinion. You can amend a substantive motion.
+        p Although most motions that are debated are tabled by the Government, there are opportunities for backbenchers to hold debates too:
 
-        h3 Unordered in ordered
         ol
-          li List item 1
-          li List item 2
-            ul
-              li List item
-              li List item
-              li List item
-          li List item 3
+          li adjournment debates
+          li Westminster Hall debates
+          li Backbench Business Committee debates
+          li emergency debates
 
-        h3 Ordered in unordered
         ul
-          li List item
-          li List item
-            ol
-              li List item 1
-              li List item 2
-              li List item 3
-          li List item
+          li adjournment debates
+          li Westminster Hall debates
+          li Backbench Business Committee debates
+          li emergency debates
 
-        h2 Images
-        img(src="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?width=732&quality=80" alt="Margot James")
+        p The main Opposition parties get a chance to hold debates on their motions on Opposition days.
 
     footer
       .container

diff --git a/test/paths.json b/test/paths.json
@@ -4,7 +4,6 @@
   },
   "urls": [
     "http://localhost:5000/templates/prototypes/article.html",
-    "http://localhost:5000/templates/prototypes/article-new.html",
     "http://localhost:5000/templates/prototypes/front-page.html",
     "http://localhost:5000/templates/prototypes/people-id.html",
     "http://localhost:5000/templates/prototypes/people-constituency.html",
@@ -26,8 +25,6 @@
     "http://localhost:5000/templates/prototypes/_navigations.html",
     "http://localhost:5000/templates/prototypes/_tables.html",
     "http://localhost:5000/templates/prototypes/_toggles.html",
-    "http://localhost:5000/templates/prototypes/_tracks.html",
-    "http://localhost:5000/templates/prototypes/gtp-meeting-times.html",
-    "http://localhost:5000/templates/prototypes/visiting-security.html"
+    "http://localhost:5000/templates/prototypes/_tracks.html"
   ]
 }