fix(core): spacing tweaks and new page announcement variations (#160)

* fix(core): tweak spacing and margins on several components

* add captions to docs

* add link styles to docs

* fix(core): spacing tweaks and docs updates

* fix(pagination): improve spacing

* fix(core): use a consistent focus colour on all components

* fix(pagination): use a more consistent focus style

* fix(page-announcement): add variations to page announcement component

* fix(page-announcement): spacing tweaks

* update docs

Author: jhackett1

Diff for: docs/components/back-link.md

@@ -2,9 +2,11 @@
 title: Back link
 ---
 
-<div className="lbh-container">
-    <a href="#" className="govuk-back-link lbh-back-link">Back to home</a>
-</div>
+import PreviewArea from "../../src/PreviewArea"
+
+<PreviewArea>
+  <a href="#" className="govuk-back-link lbh-back-link">Back to home</a>
+</PreviewArea>
 
 ```html
 <div class="lbh-container">

Diff for: docs/components/page-announcement.md

@@ -2,16 +2,50 @@
 title: Page announcement
 ---
 
+Use a page annoucement to alert a user to important new information. Colour variations are possible for different kinds of content.
+
+<section className="lbh-page-announcement">
+  <h3 className="lbh-page-announcement__title">Payment successful</h3>
+  <div className="lbh-page-announcement__content">
+    More detail about the announcement.
+  </div>
+</section>
+
+```html
 <section class="lbh-page-announcement">
   <h3 class="lbh-page-announcement__title">I am a page announcement</h3>
-  <div class="lbh-page-announcement__content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p><ul><li>I am a list lorem ipsum dolor sit amet</li><li>I am a list lorem ipsum dolor sit amet</li><li><a href="#">I am a link</a></li></ul></div>
+  <div class="lbh-page-announcement__content">
+    More detail about the announcement.
+  </div>
 </section>
+```
 
-### HTML
+## Warning
+
+<section className="lbh-page-announcement lbh-page-announcement--warning">
+  <h3 className="lbh-page-announcement__title">Payment unsuccessful</h3>
+  <div className="lbh-page-announcement__content">More detail about the announcement.</div>
+</section>
 
 ```html
-<section class="lbh-page-announcement">
-  <h3 class="lbh-page-announcement__title">I am a page announcement</h3>
+<section class="lbh-page-announcement lbh-page-announcement--warning">
+  <h3 class="lbh-page-announcement__title">I am a warning</h3>
+  <div class="lbh-page-announcement__content">
+    More detail about the announcement.
+  </div>
+</section>
+```
+
+## Information
+
+<section className="lbh-page-announcement lbh-page-announcement--info">
+  <h3 className="lbh-page-announcement__title">I am information</h3>
+ <div className="lbh-page-announcement__content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p><ul><li>I am a list lorem ipsum dolor sit amet</li><li>I am a list lorem ipsum dolor sit amet</li><li><a href="#">I am a link</a></li></ul></div>
+</section>
+
+```html
+<section class="lbh-page-announcement lbh-page-announcement--info">
+  <h3 class="lbh-page-announcement__title">I am information</h3>
   <div class="lbh-page-announcement__content">
     <p>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium

Diff for: docs/developing/react.md

@@ -27,9 +27,9 @@ One option is to call the component's init function in a [`useEffect`](https://r
 ```jsx
 useEffect(() => {
   if (typeof window !== "undefined") {
-    require("lbh-frontend").initAll();
+    require("lbh-frontend").initAll()
   }
-}, []);
+}, [])
 ```
 
 ### Server-side rendering
@@ -42,7 +42,7 @@ You can solve this issue by wrapping your component init calls in an `if` statem
 
 ```jsx
 if (typeof window !== "undefined") {
-  require("lbh-frontend").initAll();
+  require("lbh-frontend").initAll()
 }
 ```
 
@@ -64,3 +64,5 @@ This advice might change as the design system grows.
 In the past Hackney has tried to make React ports of this design system, but it's always been more trouble than it's worth to maintain them.
 
 The alternative would be to go all-in with React, but this wouldn't work for the many non-React apps we still need to maintain.
+
+The design system includes two components that only work with React: the [dialog](/components/dialog) and [tip](/components/tip).

Diff for: lbh/_base.scss

@@ -10,5 +10,9 @@ $lbh-font-family: "Open Sans";
 
 $govuk-asset-path: $lbh-asset-path;
 
+$govuk-focus-colour: lbh-colour("lbh-primary-focus");
+$govuk-focus-text-colour: lbh-colour("lbh-text");
+$govuk-link-colour: lbh-colour("lbh-link");
+
 @import "tools/all";
 @import "helpers/all";

Diff for: lbh/components/lbh-page-announcement/_page-announcement.scss

@@ -1,7 +1,7 @@
 @include lbh-exports("lbh/component/page-announcement") {
   .lbh-page-announcement {
     @include lbh-rem(margin-bottom, 36);
-    @include lbh-rem(padding, 36, 36, 36, 24);
+    @include lbh-rem(padding, 25, 25, 25, 25);
     border: 1px solid lbh-colour("lbh-a03");
     border-left: 6px solid lbh-colour("lbh-a03");
     background: rgba(lbh-colour("lbh-a04"), 0.3);
@@ -13,6 +13,7 @@
 
     &__content {
       @include lbh-body-m;
+      margin-top: 0;
 
       a {
         @include lbh-link;
@@ -24,5 +25,18 @@
         @include lbh-body-m;
       }
     }
+
+    &--warning {
+      border: 1px solid lbh-colour("lbh-f02");
+      border-left: 6px solid lbh-colour("lbh-f02");
+      background: rgba(lbh-colour("lbh-f03"), 0.2);
+    }
+
+    &--info {
+      border: 1px solid lbh-colour("lbh-link");
+      border-left: 6px solid lbh-colour("lbh-link");
+      background: rgba(lbh-colour("lbh-link-hover"), 0.1);
+      @include lbh-rem(padding, 36, 36, 36, 25);
+    }
   }
 }

Diff for: lbh/components/lbh-pagination/_pagination.scss

@@ -4,6 +4,7 @@
     flex-direction: column;
     @include lbh-rem(margin-top, 6);
     @include lbh-body-m;
+    padding: 10px 0px;
 
     @include govuk-media-query($from: desktop) {
       flex-direction: row;
@@ -30,41 +31,34 @@
     }
 
     &__link {
-      color: lbh-colour("lbh-link");
+      @include lbh-link;
       padding: 0px 5px;
       text-decoration: none;
       display: inline-block;
 
-      &:hover {
-        color: lbh-colour("lbh-link-hover");
-      }
-
-      &:focus {
-        outline: 3px solid lbh-colour("lbh-primary-focus");
-      }
-
-      &:active {
-        color: lbh-colour("lbh-link-active");
+      &:visited {
+        color: lbh-colour("lbh-link");
       }
 
       &--current {
-        color: lbh-colour("lbh-text");
         font-weight: 700;
         pointer-events: none;
         cursor: default;
 
+        &:link,
         &:hover,
-        &:focus {
+        &:focus,
+        &:visited {
           color: lbh-colour("lbh-text");
         }
       }
     }
 
     &__summary {
-      margin: 10px 0px;
+      margin-bottom: 10px;
       @include govuk-media-query($from: desktop) {
         order: 2;
-        margin: 0px;
+        margin-bottom: 0px;
       }
     }
   }