robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Related work items: #5173
This commit is contained in:
Robert Bond
2021-07-02 12:12:28 +00:00
parent 2a9fb1a364 66744b5974
commit 7912f8a46a
18 changed files with 1433 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "next"
}
components/case/summary.js
+5 -3
View File
@@ -133,9 +133,11 @@ export default function CaseSummary() {
</dt>
<dd className="govuk-summary-list__value">
Allowed
<a href="/">
3272770 Appeal Decision.pdf
</a>
<Link href="/">
<a>
3272770 Appeal Decision.pdf
</a>
</Link>
</dd>
</div>
<div className="govuk-summary-list__row">
components/footer.js
+17
View File
@@ -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
+54 -54
View File
File diff suppressed because one or more lines are too long
components/homepage/inspectorate.js
+23 -16
View File
@@ -1,23 +1,30 @@
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function Inspectorate() {
let { t } = useTranslation();
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card clear" id="inspectorate-card">
<div className="card-body">
<img src="assets/images/PINS_dual_logo_400.png" />
<p className="govuk-body-s">
{t("home:inspectorate-card-visit-label")}:{" "}
<Link href="/">
<a>{t("home:inspectorate-card-visit-link")}</a>
</Link>
</p>
</div>
</div>
);
const router = useRouter();
const { locale } = router;
return (
<div className="card clear" id="inspectorate-card">
<div className="card-body">
<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="/">
<a>{t("home:inspectorate-card-visit-link")}</a>
</Link>
</p>
</div>
</div>
);
}
package.json
+2
View File
@@ -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
+1 -1
View File
@@ -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
-5
View File
@@ -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
+1 -1
View File
@@ -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
+20 -21
View File
@@ -1,4 +1,3 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../components/header";
@@ -16,28 +15,28 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t,lang } = useTranslation();
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const router = useRouter();
const { locale } = router;
return (
<div>
<Head>
<title>{t("common:service-name")}</title>
</Head>
<div className="">
<CookieBanner />
<Header courseName="Appeals Casework Portal" />
<div className="govuk-width-container">
<Banner />
<Main pages={pages} />
return (
<div>
<Head>
<title>{t("common:service-name")}</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header courseName="Appeals Casework Portal" />
<div className="govuk-width-container">
<Banner />
<Main pages={pages} />
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
);
};
// export const getServerSideProps = wrapper.getServerSideProps(
@@ -74,4 +73,4 @@ const Home = (props) => {
// };
// };
export default Home//connect(mapStateToProps)(Home);
export default Home; //connect(mapStateToProps)(Home);
pages/myportal.js
+22 -21
View File
@@ -15,28 +15,30 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t,lang } = useTranslation();
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const router = useRouter();
const { locale } = router;
return (
<div>
<Head>
<title>{t("myportal:page-title")} - {t("common:service-name")}</title>
</Head>
<div className="">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<MyPortal/>
return (
<div>
<Head>
<title>
{t("myportal:page-title")} - {t("common:service-name")}
</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<MyPortal />
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
);
};
// export const getServerSideProps = wrapper.getServerSideProps(
@@ -73,5 +75,4 @@ const Home = (props) => {
// };
// };
export default Home//connect(mapStateToProps)(Home);
export default Home; //connect(mapStateToProps)(Home);
pages/searchresults.js
+1 -1
View File
@@ -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
+163 -163
View File
@@ -1,210 +1,210 @@
.flex-container {
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.card {
flex-grow: 0;
flex-basis: 100%;
margin-bottom: 2em;
flex-grow: 0;
flex-basis: 100%;
margin-bottom: 2em;
}
@media screen and (min-width: 600px) and (max-width: 900px) {
.card {
flex-basis: 45.99%;
// Every card in the first row needs horizontal margin
&:nth-child(2n-1) {
margin-right: 3%;
}
// Every card in the second row needs horizontal margin
&:nth-child(2n-2) {
margin-left: 3%;
}
.card {
flex-basis: 45.99%;
// Every card in the first row needs horizontal margin
&:nth-child(2n-1) {
margin-right: 3%;
}
// Every card in the second row needs horizontal margin
&:nth-child(2n-2) {
margin-left: 3%;
}
&.card-3 {
flex-basis: 44%;
min-height: 300px;
&.card-3 {
flex-basis: 44%;
min-height: 300px;
// &:nth-child(3n-1) {
// margin-left: 3%;
// margin-right: 3%;
// }
// &:nth-child(3n-1) {
// margin-left: 3%;
// margin-right: 3%;
// }
}
}
}
}
@media screen and (min-width: 900px) {
.card {
flex-basis: 46%;
.card {
flex-basis: 48.2%;
&:nth-child(2n-2) {
margin-left: 3%;
&:nth-child(2n-2) {
margin-left: 3%;
}
&.card-3 {
flex-basis: 31%;
min-height: 300px;
&:nth-child(2n-2) {
margin-left: 0%;
}
&:nth-child(3n-1) {
margin-left: 3%;
margin-right: 3%;
}
}
}
&.card-3 {
flex-basis: 31%;
min-height: 300px;
&:nth-child(2n-2) {
margin-left: 0%;
}
&:nth-child(3n-1) {
margin-left: 3%;
margin-right: 3%;
}
}
}
}
html[data-useragent*="MSIE 10.0"] .flex-container {
.card {
flex-basis: 46%;
margin: 3%;
.card {
flex-basis: 46%;
margin: 3%;
&.card-3 {
flex-basis: 31%;
&.card-3 {
flex-basis: 31%;
}
}
}
}
.card {
border: 1px solid $govuk-border-colour; //$panel-colour;
font-size: 16px;
background-color: govuk-colour("light-grey", $legacy: "grey-4");
border: 1px solid $govuk-border-colour; //$panel-colour;
font-size: 16px;
background-color: govuk-colour("light-grey", $legacy: "grey-4");
&.inactive {
color: $govuk-secondary-text-colour;
}
.card-heading {
margin-top: 0;
}
.card-body {
//border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
padding: 12px;
*:last-child {
margin-bottom: 0;
&.inactive {
color: $govuk-secondary-text-colour;
}
&.active {
background-color: govuk-colour("light-grey", $legacy: "grey-4");
transition: 0.1s ease-in-out;
.card-heading a {
color: $govuk-link-colour;
.card-heading {
margin-top: 0;
&:focus {
color: govuk-colour("black", $legacy: "black");
outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}
.card-body {
//border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
padding: 12px;
*:last-child {
margin-bottom: 0;
}
}
}
.detail-large {
color: $govuk-secondary-text-colour;
font-size: 32px;
font-weight: 600;
margin-bottom: 8px;
}
&.active {
background-color: govuk-colour("light-grey", $legacy: "grey-4");
transition: 0.1s ease-in-out;
.detail {
font-weight: 600;
margin-bottom: 8px;
}
}
.card-action {
border-top: 0;
padding: 12px;
a {
display: inline;
border-bottom: 1px solid #c7dceb;
color: $govuk-link-colour;
line-height: 1.5em;
&:link,
&:visited {
color: $govuk-link-colour;
}
&:hover {
text-decoration: none;
border-bottom: 1px solid $govuk-link-colour;
color: #2e8aca;
}
&:focus {
color: govuk-colour("black", $legacy: "black");
outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}
}
ul {
margin: 0;
li {
margin: 0 0 1em;
&:last-child {
margin-bottom: 0;
.card-heading a {
color: $govuk-link-colour;
margin-top: 0;
&:focus {
color: govuk-colour("black", $legacy: "black");
outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}
}
}
.detail-large {
color: $govuk-secondary-text-colour;
font-size: 32px;
font-weight: 600;
margin-bottom: 8px;
}
.detail {
font-weight: 600;
margin-bottom: 8px;
}
}
}
}
&.clear {
background-color: govuk-colour("white", $legacy: "white");
border: none;
}
.card-action {
border-top: 0;
padding: 12px;
a {
display: inline;
border-bottom: 1px solid #c7dceb;
color: $govuk-link-colour;
line-height: 1.5em;
&:link,
&:visited {
color: $govuk-link-colour;
}
&:hover {
text-decoration: none;
border-bottom: 1px solid $govuk-link-colour;
color: #2e8aca;
}
&:focus {
color: govuk-colour("black", $legacy: "black");
outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
}
}
ul {
margin: 0;
li {
margin: 0 0 1em;
&:last-child {
margin-bottom: 0;
}
}
}
}
&.clear {
background-color: govuk-colour("white", $legacy: "white");
border: none;
}
}
.js {
.card-body.active {
&:hover {
//background-color: $govuk-link-colour;
color: $govuk-link-colour;
cursor: pointer;
transition: 0.1s ease-in-out;
transition-delay: 0.25s;
.card-body.active {
&:hover {
//background-color: $govuk-link-colour;
color: $govuk-link-colour;
cursor: pointer;
transition: 0.1s ease-in-out;
transition-delay: 0.25s;
.card-heading,
p {
color: $govuk-link-colour;
transition: 0.1s ease-in-out;
transition-delay: 0.25s;
}
.card-heading,
p {
color: $govuk-link-colour;
transition: 0.1s ease-in-out;
transition-delay: 0.25s;
}
.card-heading a {
color: $govuk-link-colour;
transition-delay: 0.25s;
}
.card-heading a {
color: $govuk-link-colour;
transition-delay: 0.25s;
}
.detail-large {
color: $govuk-link-colour;
transition-delay: 0.25s;
}
.detail-large {
color: $govuk-link-colour;
transition-delay: 0.25s;
}
}
a {
text-decoration: none;
}
}
a {
text-decoration: none;
}
}
}
#inspectorate-card .card-body {
padding-top: 20%;
padding-top: 20%;
}
.card-3 .card-body {
display: inline-flex;
flex-direction: column;
min-height: 30vh;
display: inline-flex;
flex-direction: column;
min-height: 30vh;
.cardVieAll {
margin-top: auto;
}
.cardVieAll {
margin-top: auto;
}
}
styles/sass/styles.scss
+4 -4
View File
@@ -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
+98 -1
View File
@@ -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/prevent-training/_application.scss → styles/sass/welshgov/_application_old.scss
View File
styles/sass/welshgov/_variables.scss
+11
View File
@@ -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;
yarn.lock
+1008 -22
View File
File diff suppressed because it is too large Load Diff