Merged PR 342: Update ui framework for Gov.Wales standards

Related work items: #5173

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

components/case/summary.js

@@ -133,9 +133,11 @@ export default function CaseSummary() {
                                         </dt>
                                         <dd className="govuk-summary-list__value">
                                             Allowed
-                                            <a href="/">
+                                            <Link href="/">
+                                                <a>
                                                     3272770 Appeal Decision.pdf
                                                 </a>
+                                            </Link>
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">

components/footer.js

@@ -20,6 +20,18 @@ export default function Footer(props) {
 
     return (
         <footer className="govuk-footer " role="contentinfo">
+            <div className="sharebar" id="sharebar">
+                <div className="sharebar__components container-fluid">
+                    <div className="main__sharebar">
+                        <div
+                            id="sharebar__backtotop"
+                            className="btn--outlined btn--arrow-up"
+                        >
+                            <a href="#page_wrapper">Back to top</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div className="govuk-width-container ">
                 <div className="govuk-footer__meta">
                     <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
@@ -35,6 +47,7 @@ export default function Footer(props) {
                                         id="aTermsConds"
                                         className="govuk-footer__link"
                                         target="_blank"
+                                        rel="noreferrer"
                                     >
                                         {t(
                                             "common:footer-terms-conditions-link"
@@ -47,6 +60,7 @@ export default function Footer(props) {
                                         id="aPrivacy"
                                         className="govuk-footer__link"
                                         target="_blank"
+                                        rel="noreferrer"
                                     >
                                         {t("common:footer-privacy-link")}
                                     </a>
@@ -57,6 +71,7 @@ export default function Footer(props) {
                                         id="aCookies"
                                         className="govuk-footer__link"
                                         target="_blank"
+                                        rel="noreferrer"
                                     >
                                         {t("common:footer-cookies-link")}
                                     </a>
@@ -67,6 +82,7 @@ export default function Footer(props) {
                                         className="govuk-footer__link"
                                         id="aAccess"
                                         target="_blank"
+                                        rel="noreferrer"
                                     >
                                         {t("common:footer-accessibility-link")}
                                     </a>
@@ -76,6 +92,7 @@ export default function Footer(props) {
                                         href="http://www.gov.uk/guidance/feedback"
                                         id="feedback"
                                         target="_blank"
+                                        rel="noreferrer"
                                     >
                                         {t("common:footer-feedback-link")}
                                     </a>

components/header.js

@@ -15,11 +15,9 @@ export default function Header({ courseName }) {
             data-module="govuk-header"
         >
             <div className="govuk-header__container govuk-width-container">
-                <div className="govuk-header__logo">
+                <div className="govuk-header__logo govuk-!-width-one-quarter">
-                    <a
+                    <Link href="/">
-                        href="/"
+                        <a className="govuk-header__link govuk-header__link--homepage">
-                        className="govuk-header__link govuk-header__link--homepage"
-                    >
                             <span className="govuk-header__logotype header__logo">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
@@ -59,11 +57,12 @@ export default function Header({ courseName }) {
                                 </svg>
                             </span>
                         </a>
+                    </Link>
                 </div>
 
-                <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
+                <div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
+                    <Link href="/">
                         <a
-                        href="/"
                             onClick={() => {
                                 window.localStorage.clear();
                             }}
@@ -71,6 +70,7 @@ export default function Header({ courseName }) {
                         >
                             {t("common:service-name")}
                         </a>
+                    </Link>
                 </div>
                 <div className="languageSwitch">
                     {router.path}

components/homepage/inspectorate.js

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
@@ -10,7 +11,13 @@ export default function Inspectorate() {
     return (
         <div className="card clear" id="inspectorate-card">
             <div className="card-body">
-        <img src="assets/images/PINS_dual_logo_400.png" />
+                <Image
+                    alt="Planning Inspectorate"
+                    src="/assets/images/PINS_dual_logo_400.png"
+                    width="380px"
+                    height="58px"
+                    layout="responsive"
+                />
                 <p className="govuk-body-s">
                     {t("home:inspectorate-card-visit-label")}:{" "}
                     <Link href="/">

package.json

@@ -32,6 +32,8 @@
     "webpack": "^5.40.0"
   },
   "devDependencies": {
+    "eslint": "^7.29.0",
+    "eslint-config-next": "^11.0.1",
     "prettier": "2.3.2"
   }
 }

pages/advancedsearch.js

@@ -28,7 +28,7 @@ const Home = (props) => {
                     {t("search:page-title")} - {t("common:service-name")}
                 </title>
             </Head>
-            <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">

pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default (req, res) => {
-  res.status(200).json({ name: 'John Doe' })
-}

pages/case.js

@@ -29,7 +29,7 @@ const Home = (props) => {
                     {t("case:page-title")} - {t("common:service-name")}
                 </title>
             </Head>
-            <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">

pages/index.js

@@ -1,4 +1,3 @@
-
 import _ from "lodash";
 import Head from "next/head";
 import Header from "../components/header";
@@ -27,7 +26,7 @@ const Home = (props) => {
             <Head>
                 <title>{t("common:service-name")}</title>
             </Head>
-      <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName="Appeals Casework Portal" />
                 <div className="govuk-width-container">
@@ -74,4 +73,4 @@ const Home = (props) => {
 //   };
 // };
 
-export default Home//connect(mapStateToProps)(Home);
+export default Home; //connect(mapStateToProps)(Home);

pages/myportal.js

@@ -24,9 +24,11 @@ const Home = (props) => {
     return (
         <div>
             <Head>
-        <title>{t("myportal:page-title")} - {t("common:service-name")}</title>
+                <title>
+                    {t("myportal:page-title")} - {t("common:service-name")}
+                </title>
             </Head>
-      <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
@@ -73,5 +75,4 @@ const Home = (props) => {
 //   };
 // };
 
-export default Home//connect(mapStateToProps)(Home);
+export default Home; //connect(mapStateToProps)(Home);
-

pages/searchresults.js

@@ -28,7 +28,7 @@ const Home = (props) => {
                     {t("search:page-title")} - {t("common:service-name")}
                 </title>
             </Head>
-            <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">

styles/sass/patterns/_card.scss

@@ -35,7 +35,7 @@
 
 @media screen and (min-width: 900px) {
     .card {
-    flex-basis: 46%;
+        flex-basis: 48.2%;
 
         &:nth-child(2n-2) {
             margin-left: 3%;

styles/sass/styles.scss

@@ -1,6 +1,9 @@
 @import "node_modules/govuk-frontend/govuk/all";
-//@import "prevent-training/_application";
+
+// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
+@import "welshgov/_variables";
 @import "welshgov/_application";
+@import "welshgov/application_old";
 
 // global styles for <a> and <p> tags
 $govuk-global-styles: true;
@@ -23,6 +26,3 @@ $govuk-assets-path: "/govuk/assets/";
 
 // Components that aren't in Frontend
 @import "components/cookie-banner";
-
-// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
-@import "prevent-training/application";

styles/sass/welshgov/_application.scss

@@ -1,11 +1,89 @@
+html {
+    scroll-behavior: smooth;
+}
+
 *,
-.govuk-body-s {
+.govuk-body,
+.govuk-body-s,
+.govuk-body-m,
+.govuk-heading-xl,
+.govuk-heading-l,
+.govuk-heading-m,
+.govuk-header-l,
+.govuk-header-m,
+.govuk-header__link,
+.govuk-button,
+.govuk-label,
+.govuk-select,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+a {
     font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
 }
 .govuk-header {
     background-color: #323232;
 }
 
+.govuk-button {
+    background-color: $red;
+
+    &.govuk-button--secondary {
+        background-color: $white;
+        color: $red;
+        border: 1px solid red;
+
+        &:hover {
+            background-color: $red;
+            color: $white;
+        }
+    }
+}
+
+.govuk-button:hover {
+    background-color: $lightred;
+}
+
+.sharebar {
+    background: #e5e5e5;
+    margin: 0;
+    padding: 15px;
+    clear: both;
+}
+
+.sharebar__components.container-fluid {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 60px;
+    padding-right: 20px;
+}
+
+.btn--arrow-up a {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22159.5%22 height=%22102.4%22 viewBox=%220 0 159.5 102.4%22%3E%3Ctitle%3Eblack-arrow-up%3C/title%3E%3Cpath d=%22M159.5,79.8,79.8,0,0,79.8l22.6,22.6L79.7,45.3l57.1,57.1Z%22/%3E%3C/svg%3E");
+    background-size: 18px 13px;
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    padding-left: 36px;
+    margin-top: 1px;
+}
+
+.btn--outlined a {
+    text-decoration: none;
+    color: #323232;
+    background: none;
+    padding: 12px;
+    font-size: 1em;
+    font-weight: bold;
+    display: inline-block;
+    border: 1px solid #999999;
+    line-height: 17px;
+    line-height: 1.0625rem;
+}
+
 .languageSwitch {
     margin-top: 15px;
     text-align: right;
@@ -16,7 +94,18 @@
         top: 10px;
         right: -10px;
     }
+    a.govuk-header__link {
+        background-color: black;
+        padding: 10px;
     }
+    a.govuk-header__link:focus {
+        background-color: black;
+        padding: 10px;
+        color: #fff;
+        box-shadow: none;
+    }
+}
+
 .header__logo {
     float: left;
     margin: 0;
@@ -31,11 +120,19 @@
     border: none;
 }
 
+.govuk-header__logo {
+    width: 22% !important;
+}
+
 nav {
     margin-top: 60px;
     margin-bottom: 40px;
 }
 
+.govuk-footer {
+    padding-top: 0px;
+}
+
 #footer_logo {
     margin-top: 60px;
     margin-bottom: 40px;

styles/sass/welshgov/_variables.scss

@@ -0,0 +1,11 @@
+//gov.wales pallete variables
+
+$white: #ffffff;
+$red: #aa1111;
+$lightred: #d81f1f;
+
+$lightgrey_dark: #cccccc;
+$lightgrey_mid: #dddddd;
+$lightgrey_semi: #e5e5e5;
+$lightgrey_light: #eeeeee;
+$lightgrey_offwhite: #f1f1f1;