chore(docs): install and document leaflet docs

docs/components/contacts-block.md

@@ -2,8 +2,12 @@
 title: Contact block
 ---
 
+import PreviewArea from "../../src/PreviewArea"
+
 ## With a map
 
+<PreviewArea>
+
 <section class="lbh-contact">
 <h2 class="lbh-heading-large-light lbh-contact__title">Service Name Centre</h2>
 <div class="lbh-contact__social">
@@ -110,6 +114,20 @@ title: Contact block
 </div>
 </section>
 
+</PreviewArea>
+
+### Include Leaflet Sass and JS
+
+Maps in the contact block require [Leaflet](https://leafletjs.com), which you can install with `npm leaflet` and then add the Sass and JavaScript to your app:
+
+```js
+import L from "leaflet";
+```
+
+```scss
+@import "../node_modules/leaflet/dist/leaflet.css";
+```
+
 ### HTML
 
 ```html
@@ -368,7 +386,7 @@ title: Contact block
   <div class="lbh-contact__details">
       <div class="lbh-contact__block">
         <h4 class="lbh-heading-h4 lbh-contact__block-title lbh-contact__block-title--telephone">Telephone</h4>
-            <a href="tel:" class="lbh-contact__telephone" title="Call us on"></a>
+            <a href="tel:" class="lbh-contact__telephone" title="Call us on "></a>
       </div>
       <div class="lbh-contact__block">
         <h4 class="lbh-heading-h4 lbh-contact__block-title lbh-contact__block-title--email">Email</h4>
@@ -396,7 +414,7 @@ title: Contact block
       >
         Telephone
       </h4>
-      <a href="tel:" class="lbh-contact__telephone" title="Call us on"></a>
+      <a href="tel:" class="lbh-contact__telephone" title="Call us on "></a>
     </div>
     <div class="lbh-contact__block">
       <h4

package.json

@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "govuk-frontend": "^3.11.0",
+    "leaflet": "^1.7.1",
     "underscore": "^1.9.1"
   },
   "sasslintConfig": "config/.sass-lint.yml",

src/docs.js

@@ -1,3 +1,5 @@
+import L from "leaflet";
+
 if (typeof window !== "undefined") {
   document.body.className = document.body.className
     ? document.body.className + " js-enabled"

src/docs.scss

@@ -1,3 +1,5 @@
+@import "../node_modules/leaflet/dist/leaflet.css";
+
 /* stylelint-disable docusaurus/copyright-header */
 /**
  * Any CSS included here will be global. The classic template
@@ -60,7 +62,7 @@ html[data-theme="dark"] .hero img {
   }
 }
 
-.colour-preview{
+.colour-preview {
   height: 35px;
   width: 35px;
   border-radius: 100%;