From ac236339d461b2bf1e15d47fc9eb512723036450 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Tue, 10 Aug 2021 10:06:32 +0100
Subject: [PATCH] added in map and links on contact page

---
 components/dns/homepage/dnsLinks.js    |  2 +-
 pages/dns/contact-us.js                | 36 ++++++++++++++++++++++----
 styles/sass/welshgov/_application.scss | 15 +++++++++++
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/components/dns/homepage/dnsLinks.js b/components/dns/homepage/dnsLinks.js
index e2712b4e..861e4ac9 100644
--- a/components/dns/homepage/dnsLinks.js
+++ b/components/dns/homepage/dnsLinks.js
@@ -59,7 +59,7 @@ const DNSLinks = (props) => {
                         <h3 className="govuk-heading-l govuk-!-font-size-27">
                             <a
                                 className="govuk-link govuk-link--no-underline"
-                                href="#"
+                                href="/dns/contact-us"
                             >
                                 Contact us{" "}
                             </a>
diff --git a/pages/dns/contact-us.js b/pages/dns/contact-us.js
index 574f4779..78c193e7 100644
--- a/pages/dns/contact-us.js
+++ b/pages/dns/contact-us.js
@@ -57,6 +57,20 @@ const Home = (props) => {
                                 </p>
                             </div>
                         </div>
+                        <div className="govuk-row">
+                            <div class="map-responsive">
+                                <iframe
+                                    width="600"
+                                    height="500"
+                                    id="gmap_canvas"
+                                    src="https://maps.google.com/maps?q=CF10%203NQ&t=&z=17&ie=UTF8&iwloc=&output=embed"
+                                    frameborder="0"
+                                    scrolling="no"
+                                    marginheight="0"
+                                    marginwidth="0"
+                                ></iframe>
+                            </div>
+                        </div>
                         <div className="govuk-row">
                             <p>
                                 {" "}
@@ -65,11 +79,17 @@ const Home = (props) => {
                                 following details:
                             </p>
                             <p>
-                                Tel: 03034 445 940
+                                Tel: <a href="tel:03034445940">03034 445 940</a>
                                 <br />
-                                E-mail: dns.wales@planninginspectorate.gov.uk
+                                E-mail:{" "}
+                                <a href="mailto:dns.wales@planninginspectorate.gov.uk">
+                                    dns.wales@planninginspectorate.gov.uk
+                                </a>
                                 <br />
-                                Follow us on Twitter @PINSgov
+                                Follow us on Twitter{" "}
+                                <a href="https://twitter.com/pinsgov">
+                                    @PINSgov
+                                </a>
                             </p>
                             <p>
                                 Further information about contacting the
@@ -115,8 +135,14 @@ const Home = (props) => {
                                 office directly:{" "}
                             </p>
                             <p>
-                                Telephone: 0303 444 5004 or 0303 444 5005 <br />
-                                Email: press.office@planninginspectorate.gov.uk
+                                Telephone:{" "}
+                                <a href="tel:03034445004">0303 444 5004</a> or{" "}
+                                <a href="tel:03034445005">0303 444 5005</a>{" "}
+                                <br />
+                                Email:{" "}
+                                <a href="mailto:press.office@planninginspectorate.gov.uk">
+                                    press.office@planninginspectorate.gov.uk
+                                </a>
                             </p>
                         </div>
                     </main>
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 0dfa5637..18d885c3 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -744,3 +744,18 @@ ul#sharePageLinks.active {
         color: #fff;
     }
 }
+
+.map-responsive {
+    overflow: hidden;
+    padding-bottom: 56.25%;
+    position: relative;
+    height: 0;
+}
+
+.map-responsive iframe {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}