Merge pull request #26 from nhsevidence/gw-32-updates

GW-32 Minor styling updates & bug fixes
nice-digital · Jan 23, 2018 · 313cdd2 · 313cdd2
2 parents aaf9b6e + 8ffce61
commit 313cdd2
Show file tree

Hide file tree

Showing 18 changed files with 159 additions and 53 deletions.
diff --git a/server/views/components/page-header.njk b/server/views/components/page-header.njk
@@ -0,0 +1,21 @@
+{% extends "layouts/_layout.njk" %}
+{% set title = "Page header" %}
+{% from "page-header/page-header.njk" import pageHeader %}
+
+{% block body %}
+
+	<div class="container">
+
+		<h1>Page header</h1>
+
+		<h2>Default</h2>
+
+		{{ pageHeader({ heading: "Breast cancer", lead: "Everything NICE has produced on the topic of breast cancer. Includes related guidelines, NICE Pathways, quality standards and advice." }) }}
+
+		<h2>With CTA</h2>
+
+		{{ pageHeader({ heading: "Breast cancer", lead: "Everything NICE has produced on the topic of breast cancer. Includes related guidelines, NICE Pathways, quality standards and advice.", cta: { text: "Register as a stakeholder", href: "/register" } }) }}
+
+	</div>
+
+{% endblock %}
diff --git a/server/views/components/tag.njk b/server/views/components/tag.njk
@@ -21,8 +21,11 @@
 			<li>Impact {{ tag({ label: "Impact", modifier: "impact" }) }}</li>
 			<li>Impact alpha {{ tag({ label: "Alpha", modifiers: ["impact", "alpha"] }) }}</li>
 			<li>Flush {{ tag({ label: "Flush (no margin)", modifier: "flush" }) }}</li>
+			<li><span class="h2">Super {{ tag({ label: "Super", modifier: "super" }) }}</span></li>
 		</ul>
 
+		<h2>Tag on a heading {{ tag({ label: "Live", modifiers: ["live", "super"] }) }}</h2>
+
 	</div>
 
 {% endblock %}
diff --git a/server/views/index.njk b/server/views/index.njk
@@ -20,6 +20,7 @@
 					<li><a href="/components/hero/">Hero</a></li>
 					<li><a href="/components/in-page-nav/">In page nav</a></li>
 					<li><a href="/components/lists/">Lists</a></li>
+					<li><a href="/components/page-header/">Page header</a></li>
 					<li><a href="/components/panels/">Panels</a></li>
 					<li><a href="/components/phase/">Phase banners</a></li>
 					<li><a href="/components/quote/">Quote</a></li>

diff --git a/server/views/pages/topic-landing-page.njk b/server/views/pages/topic-landing-page.njk
@@ -3,6 +3,7 @@
 {% from "stacked-nav/stacked-nav.njk" import stackedNav %}
 {% from "card/card.njk" import card %}
 {% from "footer/footer.njk" import footer %}
+{% from "page-header/page-header.njk" import pageHeader %}
 
 {% block body %}
 
@@ -46,15 +47,7 @@
 			</ol>
 		</nav>
 
-		<h1>Breast cancer</h1>
-
-		<p class="lead">
-			Everything NICE has produced on the topic of breast cancer. Includes related guidelines, NICE Pathways, quality standards and advice.
-		</p>
-
-		<p>
-			<a href="https://www.nice.org.uk/get-involved/stakeholder-registration">Register as a stakeholder</a>
-		</p>
+		{{ pageHeader({ heading: "Breast cancer", lead: "Everything NICE has produced on the topic of breast cancer. Includes related guidelines, NICE Pathways, quality standards and advice.", cta: { text: "Register as a stakeholder", href: "/register" } }) }}
 
 	</div>
 

diff --git a/src/components/_components.scss b/src/components/_components.scss
@@ -8,6 +8,7 @@
 'in-page-nav/in-page-nav',
 'stacked-nav/stacked-nav',
 'maintain-ratio/maintain-ratio',
+'page-header/page-header',
 'panel/panel',
 'phase-banner/phase-banner',
 'table/table',

diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss
@@ -17,8 +17,10 @@
   margin: em(0 $spacing-small $spacing-small -4px); // Negative left margin to combat inline-block gaps
   padding: em($spacing-small $spacing-medium);
   position: relative;
+  text-align: left;
   text-decoration: none !important; // sass-lint:disable-line no-important
   vertical-align: top;
+  white-space: nowrap;
 
   &:first-child {
     margin-left: 0;

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -44,8 +44,7 @@
   }
 
   &__tag {
-    @include font-size(-1);
-    margin-right: rem($spacing-x-small);
+    @include font-size(-1, true);
   }
 
   &__metadata {

diff --git a/src/components/page-header/_page-header.scss b/src/components/page-header/_page-header.scss
@@ -0,0 +1,47 @@
+////
+/// @group components
+////
+
+/// Page header component.
+/// Used at the top of a page to contain an h1 and optional
+/// lead intro paragraph and call-to-action.
+///
+/// @example html
+///   <header class="page-header">
+///     <h1 class="page-header__heading">
+///       Breast cancer
+///     </h1>
+///     <p class="page-header__lead">
+///       Everything NICE has produced on the topic of breast cancer.
+///       Includes related guidelines, NICE Pathways, quality standards and advice.
+///     </p>
+///     <p class="page-header__cta">
+///       <a href="/some-action.html">Register as a stakeholder</a>
+///     </p>
+///   </header>
+/// @since 0.4.0
+.page-header {
+  margin: rem(0 0 $spacing-x-large 0);
+
+  &__heading {
+    @include font-size(h1);
+    margin: rem(0 0 $spacing-small 0);
+  }
+
+  &__lead {
+    @include font-size(lead);
+    margin: rem(0 0 $spacing-small 0);
+  }
+
+  &__cta {
+    @include font-size(p);
+    display: block;
+    margin: 0;
+  }
+
+  @media print {
+    &__cta {
+      display: none;
+    }
+  }
+}
diff --git a/src/components/page-header/page-header.njk b/src/components/page-header/page-header.njk
@@ -0,0 +1,15 @@
+{% macro pageHeader(pageHeader) %}
+	<div class="page-header">
+		<h1 class="page-header__heading">
+			{{ pageHeader.heading }}
+		</h1>
+		<p class="page-header__lead">
+			{{ pageHeader.lead }}
+		</p>
+		{% if pageHeader.cta %}
+			<p class="page-header__cta">
+				<a href="{{ pageHeader.cta.href }}">{{ pageHeader.cta.text }}</a>
+			</p>
+		{% endif %}
+	</div>
+{% endmacro %}
diff --git a/src/components/phase-banner/_phase-banner.scss b/src/components/phase-banner/_phase-banner.scss
@@ -15,7 +15,7 @@
 .phase-banner {
   border-bottom: 1px solid $colour-border;
   display: table;
-  margin: em(0 0 $spacing-medium);
+  margin: em(0 0 $spacing-small);
   max-width: 100%;
   padding: em($spacing-small 0);
   width: 100%;

diff --git a/src/components/stacked-nav/_stacked-nav.scss b/src/components/stacked-nav/_stacked-nav.scss
@@ -6,7 +6,7 @@
 /// Expands to fill the available space.
 /// Usually full width on mobile and 1/3 on wider screens.
 .stacked-nav {
-  background: #fafafa;
+  background: $colour-nice-white;
   border: 1px solid $colour-border;
   margin: em(0 0 $spacing-large);
 

diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss
@@ -6,7 +6,8 @@
 /// and also used within alpha/beta phase banners.
 ///
 /// BEM modifiers:
-///   - `--impact` Larger tag, used for impact
+///   - `--impact` Bolder tag, used for higher impact
+///   - `--super`  Super aligned, useful for tagging headings
 ///   - `--alpha` Alpha
 ///   - `--beta`  Beta
 ///   - `--live`  Live
@@ -16,6 +17,7 @@
 ///   - `--flush`  No margin
 /// @since 0.3.1
 .tag {
+  @include font-size(0);
   background-color: $colour-panel-inverse;
   border-radius: em($spacing-xx-small);
   color: $colour-text-inverse;
@@ -34,13 +36,16 @@
   }
 
   &--impact {
-    @include font-size(-1);
     font-weight: 900;
     letter-spacing: 1px;
     padding: em($spacing-xx-small $spacing-small);
     text-transform: uppercase;
   }
 
+  &--super {
+    vertical-align: super;
+  }
+
   &--alpha {
     background-color: $colour-alpha;
     color: $colour-text-inverse;

diff --git a/src/stylesheets/grid/_grid.scss b/src/stylesheets/grid/_grid.scss
@@ -74,55 +74,60 @@
 .grid {
   @include grid;
 
-  @include modifier('rev') {
+  &--rev {
     @include grid-reverse;
   }
 
-  @include modifier('gutterless') {
+  &--gutterless {
     @include grid-gutterless;
 
-    [data-g] {
+    // sass-lint:disable-block no-combinators
+    > [data-g] {
       @include grid-item-gutterless;
     }
   }
 
-  @include modifier('compact') {
+  &--compact {
     @include grid-compact;
 
-    [data-g] {
+    // sass-lint:disable-block no-combinators
+    > [data-g] {
       @include grid-item-compact;
     }
   }
 
-  @include modifier('loose') {
+  &--loose {
     @include grid-loose;
 
-    [data-g] {
+    // sass-lint:disable-block no-combinators
+    > [data-g] {
       @include grid-item-loose;
     }
   }
 
-  @include modifier('right') {
+  &--right {
     @include grid-right;
   }
 
-  @include modifier('center') {
+  &--center {
     @include grid-center;
   }
 
-  @include modifier('middle') {
-    [data-g] {
+  &--middle {
+    // sass-lint:disable-block no-combinators
+    > [data-g] {
       @include grid-item-middle;
     }
   }
 
-  @include modifier('bottom') {
-    [data-g] {
+  &--bottom {
+    // sass-lint:disable-block no-combinators
+    > [data-g] {
       @include grid-item-bottom;
     }
   }
 
-  @include modifier('debug') {
+  &--debug {
     @include grid-debug;
 
     [data-g] {

diff --git a/src/stylesheets/settings/_settings-variables.scss b/src/stylesheets/settings/_settings-variables.scss
@@ -76,7 +76,7 @@ $nice-root-font-size-min: 15;
 
 /// The maximum root font size, used from breakpoint `$nice-root-font-size-max-breakpoint`
 /// @since 0.2.13
-$nice-root-font-size-max: 19;
+$nice-root-font-size-max: 18;
 
 /// The breakpoint at which the root font size starts changing from minimum
 /// towards maximum.

diff --git a/src/stylesheets/typography/_typography-headings.scss b/src/stylesheets/typography/_typography-headings.scss
@@ -20,6 +20,7 @@ h6,
 .heading {
   &--separator {
     border-bottom: 1px solid $colour-border;
+    padding-bottom: rem($spacing-x-small);
   }
 }
 
@@ -66,37 +67,31 @@ h6,
 }
 
 h1,
-.h1,
-.heading--primary {
+.h1 {
   @include h1;
 }
 
 h2,
-.h2,
-.heading--secondary {
+.h2 {
   @include h2;
 }
 
 h3,
-.h3,
-.heading--tertiary {
+.h3 {
   @include h3;
 }
 
 h4,
-.h4,
-.heading--quaternary {
+.h4 {
   @include h4;
 }
 
 h5,
-.h5,
-.heading--quinary {
+.h5 {
   @include h5;
 }
 
 h6,
-.h6,
-.heading--senary {
+.h6 {
   @include h6;
 }