Merge pull request #34 from nhsevidence/feature/GW-40-Card-Author

GW-38 Add author field to card component
nice-digital · Feb 2, 2018 · cd125fd · cd125fd
2 parents 217566b + b161108
commit cd125fd
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/server/views/components/card.njk b/server/views/components/card.njk
@@ -12,6 +12,10 @@
 
 		{{ card({ heading: { text: "This is a card heading" }, href: "https://www.nice.org.uk/", metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" }, { key: "Metadata key", value: "Metadata value" } ] }) }}
 
+		<h2>Basic card with author</h2>
+
+		{{ card({ heading: { text: "This is a card heading" }, href: "https://www.nice.org.uk/", author: "Jane Viner, chief nurse at Torbay and South Devon NHS Foundation Trust and NICE fellow", metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" }, { key: "Metadata key", value: "Metadata value" } ] }) }}
+
 		<h2>Card (separator)</h2>
 
 		{{ card({ heading: { text: "This is a card heading" }, modifier: "separator", href: "https://www.nice.org.uk/", metadata: [ { key: "Published date", value: "March 2015", datetime: "2015-03" }, { key: "Metadata key", value: "Metadata value" } ] }) }}
@@ -28,11 +32,15 @@
 
 		{{ card({ heading: { text: "NICE final draft guidance recommends gene therapy for rare ‘bubble baby syndrome’" }, href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", summary: "Strimvelis, a treatment for an ultra-rare inherited immune deficiency condition that has been dubbed ‘bubble baby syndrome’ has been approved by NICE in final draft guidance.", metadata: [ { key: "Published", value: "03 January 2018", datetime: "2018-01-03" } ] }) }}
 
+		<h2>With summary and author</h2>
+
+		{{ card({ heading: { text: "NICE final draft guidance recommends gene therapy for rare ‘bubble baby syndrome’" }, href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", author: "Jane Viner, chief nurse at Torbay and South Devon NHS Foundation Trust and NICE fellow", summary: "Strimvelis, a treatment for an ultra-rare inherited immune deficiency condition that has been dubbed ‘bubble baby syndrome’ has been approved by NICE in final draft guidance.", metadata: [ { key: "Published", value: "03 January 2018", datetime: "2018-01-03" } ] }) }}
+
 		<h2>With image</h2>
 
 		<div class="grid">
 			<div data-g="12 md:6">
-				{{ card({ heading: { text: "NICE final draft guidance recommends gene therapy for rare ‘bubble baby syndrome’" }, href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", image: { source: "https://www.nice.org.uk/Media/Default/_Profiles/9d48f06b/fc168ad0/DNA%20-%20200x200-1.jpg?v=636443424909234740", alt: "DNA moleclule spiral" }, summary: "Strimvelis, a treatment for an ultra-rare inherited immune deficiency condition that has been dubbed ‘bubble baby syndrome’ has been approved by NICE in final draft guidance.", metadata: [ { key: "Published", value: "03 January 2018", datetime: "2018-01-03" } ] }) }}
+				{{ card({ heading: { text: "NICE final draft guidance recommends gene therapy for rare ‘bubble baby syndrome’" }, author: "Jane Viner, chief nurse at Torbay and South Devon NHS Foundation Trust and NICE fellow", href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", image: { source: "https://www.nice.org.uk/Media/Default/_Profiles/9d48f06b/fc168ad0/DNA%20-%20200x200-1.jpg?v=636443424909234740", alt: "DNA moleclule spiral" }, summary: "Strimvelis, a treatment for an ultra-rare inherited immune deficiency condition that has been dubbed ‘bubble baby syndrome’ has been approved by NICE in final draft guidance.", metadata: [ { key: "Published", value: "03 January 2018", datetime: "2018-01-03" } ] }) }}
 			</div>
 			<div data-g="12 md:6">
 				{{ card({ heading: { text: "Support people to make decisions if they have capacity but find it difficult, NICE says" }, href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", image: { source: "https://www.nice.org.uk/Media/Default/_Profiles/9d48f06b/b8bb6725/couple%20making%20decision%20-%20200x200.jpg?v=636493615990150776" }, summary: "Health and social care professionals should support people to make decisions who find it difficult, NICE says in new draft guidance.", metadata: [ { key: "Published", value: "20 December 2017", datetime: "2017-12-20" } ] }) }}

diff --git a/server/views/pages/topic-landing-page.njk b/server/views/pages/topic-landing-page.njk
@@ -166,7 +166,7 @@
 							Latest blogs on this topic
 						</h3>
 
-						{{ card({ heading: { text: "Support people to make decisions if they have capacity but find it difficult, NICE says" }, modifier: "flush", href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", image: { source: "https://www.nice.org.uk/Media/Default/_Profiles/9d48f06b/b8bb6725/couple%20making%20decision%20-%20200x200.jpg?v=636493615990150776" }, summary: "Health and social care professionals should support people to make decisions who find it difficult, NICE says in new draft guidance.", metadata: [ { key: "Published", value: "20 December 2017", datetime: "2017-12-20" } ] }) }}
+						{{ card({ heading: { text: "Support people to make decisions if they have capacity but find it difficult, NICE says" }, modifier: "flush", author: "Jane Viner, chief nurse at Torbay and South Devon NHS Foundation Trust and NICE fellow", href: "https://www.nice.org.uk/news/article/nice-approves-gene-therapy-for-rare-bubble-baby-syndrome", image: { source: "https://www.nice.org.uk/Media/Default/_Profiles/9d48f06b/b8bb6725/couple%20making%20decision%20-%20200x200.jpg?v=636493615990150776" }, summary: "Health and social care professionals should support people to make decisions who find it difficult, NICE says in new draft guidance.", metadata: [ { key: "Published", value: "20 December 2017", datetime: "2017-12-20" } ] }) }}
 
 					</div>
 				</div>

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -59,6 +59,17 @@
     }
   }
 
+  &__author {
+    @include font-size(-1);
+    color: $colour-nice-dark-grey;
+    margin: rem(0 0 $spacing-x-small 0);
+
+    dd {
+      display: block;
+      margin: 0;
+    }
+  }
+
   &__summary {
     margin: rem(0 0 $spacing-x-small 0);
   }

diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -17,8 +17,14 @@
 			{{ card.summary }}
 		</p>
 	{% endif %}
-	{% if card.metadata %}
+	{% if card.metadata or card.author %}
 		<dl class="card__metadata">
+			{% if card.author %}
+				<div class="card__author">
+					<dt class="visually-hidden">Written by: </dt>
+					<dd>{{ card.author }}</dd>
+				</div>
+			{% endif %}
 			{% if card.tag %}
 				<div class="card__metadatum">
 					<dt>