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> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
Allowed Allowed
<a href="/"> <Link href="/">
3272770 Appeal Decision.pdf <a>
</a> 3272770 Appeal Decision.pdf
</a>
</Link>
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
components/footer.js
+17
View File
@@ -20,6 +20,18 @@ export default function Footer(props) {
return ( return (
<footer className="govuk-footer " role="contentinfo"> <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-width-container ">
<div className="govuk-footer__meta"> <div className="govuk-footer__meta">
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow"> <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
@@ -35,6 +47,7 @@ export default function Footer(props) {
id="aTermsConds" id="aTermsConds"
className="govuk-footer__link" className="govuk-footer__link"
target="_blank" target="_blank"
rel="noreferrer"
> >
{t( {t(
"common:footer-terms-conditions-link" "common:footer-terms-conditions-link"
@@ -47,6 +60,7 @@ export default function Footer(props) {
id="aPrivacy" id="aPrivacy"
className="govuk-footer__link" className="govuk-footer__link"
target="_blank" target="_blank"
rel="noreferrer"
> >
{t("common:footer-privacy-link")} {t("common:footer-privacy-link")}
</a> </a>
@@ -57,6 +71,7 @@ export default function Footer(props) {
id="aCookies" id="aCookies"
className="govuk-footer__link" className="govuk-footer__link"
target="_blank" target="_blank"
rel="noreferrer"
> >
{t("common:footer-cookies-link")} {t("common:footer-cookies-link")}
</a> </a>
@@ -67,6 +82,7 @@ export default function Footer(props) {
className="govuk-footer__link" className="govuk-footer__link"
id="aAccess" id="aAccess"
target="_blank" target="_blank"
rel="noreferrer"
> >
{t("common:footer-accessibility-link")} {t("common:footer-accessibility-link")}
</a> </a>
@@ -76,6 +92,7 @@ export default function Footer(props) {
href="http://www.gov.uk/guidance/feedback" href="http://www.gov.uk/guidance/feedback"
id="feedback" id="feedback"
target="_blank" target="_blank"
rel="noreferrer"
> >
{t("common:footer-feedback-link")} {t("common:footer-feedback-link")}
</a> </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 Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
export default function Inspectorate() { export default function Inspectorate() {
let { t } = useTranslation(); let { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
return ( return (
<div className="card clear" id="inspectorate-card"> <div className="card clear" id="inspectorate-card">
<div className="card-body"> <div className="card-body">
<img src="assets/images/PINS_dual_logo_400.png" /> <Image
<p className="govuk-body-s"> alt="Planning Inspectorate"
{t("home:inspectorate-card-visit-label")}:{" "} src="/assets/images/PINS_dual_logo_400.png"
<Link href="/"> width="380px"
<a>{t("home:inspectorate-card-visit-link")}</a> height="58px"
</Link> layout="responsive"
</p> />
</div> <p className="govuk-body-s">
</div> {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" "webpack": "^5.40.0"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^7.29.0",
"eslint-config-next": "^11.0.1",
"prettier": "2.3.2" "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")} {t("search:page-title")} - {t("common:service-name")}
</title> </title>
</Head> </Head>
<div className=""> <div id="page_wrapper">
<CookieBanner /> <CookieBanner />
<Header courseName={t("common:service-name")} /> <Header courseName={t("common:service-name")} />
<div className="govuk-width-container"> <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")} {t("case:page-title")} - {t("common:service-name")}
</title> </title>
</Head> </Head>
<div className=""> <div id="page_wrapper">
<CookieBanner /> <CookieBanner />
<Header courseName={t("common:service-name")} /> <Header courseName={t("common:service-name")} />
<div className="govuk-width-container"> <div className="govuk-width-container">
pages/index.js
+20 -21
View File
@@ -1,4 +1,3 @@
import _ from "lodash"; import _ from "lodash";
import Head from "next/head"; import Head from "next/head";
import Header from "../components/header"; import Header from "../components/header";
@@ -16,28 +15,28 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
const Home = (props) => { const Home = (props) => {
const { footerLinks, pages } = props; const { footerLinks, pages } = props;
let { t,lang } = useTranslation(); let { t, lang } = useTranslation();
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
return ( return (
<div> <div>
<Head> <Head>
<title>{t("common:service-name")}</title> <title>{t("common:service-name")}</title>
</Head> </Head>
<div className=""> <div id="page_wrapper">
<CookieBanner /> <CookieBanner />
<Header courseName="Appeals Casework Portal" /> <Header courseName="Appeals Casework Portal" />
<div className="govuk-width-container"> <div className="govuk-width-container">
<Banner /> <Banner />
<Main pages={pages} /> <Main pages={pages} />
</div>
<Footer footerLinks={footerLinks} />
</div>
</div> </div>
<Footer footerLinks={footerLinks} /> );
</div>
</div>
);
}; };
// export const getServerSideProps = wrapper.getServerSideProps( // 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"; import useTranslation from "next-translate/useTranslation";
const Home = (props) => { const Home = (props) => {
const { footerLinks, pages } = props; const { footerLinks, pages } = props;
let { t,lang } = useTranslation(); let { t, lang } = useTranslation();
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
return ( return (
<div> <div>
<Head> <Head>
<title>{t("myportal:page-title")} - {t("common:service-name")}</title> <title>
</Head> {t("myportal:page-title")} - {t("common:service-name")}
<div className=""> </title>
<CookieBanner /> </Head>
<Header courseName={t("common:service-name")} /> <div id="page_wrapper">
<div className="govuk-width-container"> <CookieBanner />
<Banner /> <Header courseName={t("common:service-name")} />
<MyPortal/> <div className="govuk-width-container">
<Banner />
<MyPortal />
</div>
<Footer footerLinks={footerLinks} />
</div>
</div> </div>
<Footer footerLinks={footerLinks} /> );
</div>
</div>
);
}; };
// export const getServerSideProps = wrapper.getServerSideProps( // 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")} {t("search:page-title")} - {t("common:service-name")}
</title> </title>
</Head> </Head>
<div className=""> <div id="page_wrapper">
<CookieBanner /> <CookieBanner />
<Header courseName={t("common:service-name")} /> <Header courseName={t("common:service-name")} />
<div className="govuk-width-container"> <div className="govuk-width-container">
styles/sass/patterns/_card.scss
+163 -163
View File
@@ -1,210 +1,210 @@
.flex-container { .flex-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.card { .card {
flex-grow: 0; flex-grow: 0;
flex-basis: 100%; flex-basis: 100%;
margin-bottom: 2em; margin-bottom: 2em;
} }
@media screen and (min-width: 600px) and (max-width: 900px) { @media screen and (min-width: 600px) and (max-width: 900px) {
.card { .card {
flex-basis: 45.99%; flex-basis: 45.99%;
// Every card in the first row needs horizontal margin // Every card in the first row needs horizontal margin
&:nth-child(2n-1) { &:nth-child(2n-1) {
margin-right: 3%; margin-right: 3%;
} }
// Every card in the second row needs horizontal margin // Every card in the second row needs horizontal margin
&:nth-child(2n-2) { &:nth-child(2n-2) {
margin-left: 3%; margin-left: 3%;
} }
&.card-3 { &.card-3 {
flex-basis: 44%; flex-basis: 44%;
min-height: 300px; min-height: 300px;
// &:nth-child(3n-1) { // &:nth-child(3n-1) {
// margin-left: 3%; // margin-left: 3%;
// margin-right: 3%; // margin-right: 3%;
// } // }
}
} }
}
} }
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
.card { .card {
flex-basis: 46%; flex-basis: 48.2%;
&:nth-child(2n-2) { &:nth-child(2n-2) {
margin-left: 3%; 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 { html[data-useragent*="MSIE 10.0"] .flex-container {
.card { .card {
flex-basis: 46%; flex-basis: 46%;
margin: 3%; margin: 3%;
&.card-3 { &.card-3 {
flex-basis: 31%; flex-basis: 31%;
}
} }
}
} }
.card { .card {
border: 1px solid $govuk-border-colour; //$panel-colour; border: 1px solid $govuk-border-colour; //$panel-colour;
font-size: 16px; font-size: 16px;
background-color: govuk-colour("light-grey", $legacy: "grey-4"); background-color: govuk-colour("light-grey", $legacy: "grey-4");
&.inactive { &.inactive {
color: $govuk-secondary-text-colour; 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;
} }
&.active { .card-heading {
background-color: govuk-colour("light-grey", $legacy: "grey-4");
transition: 0.1s ease-in-out;
.card-heading a {
color: $govuk-link-colour;
margin-top: 0; margin-top: 0;
&:focus { }
color: govuk-colour("black", $legacy: "black");
outline: 3px solid transparent; .card-body {
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
padding: 12px;
*:last-child {
margin-bottom: 0;
} }
}
}
.detail-large { &.active {
color: $govuk-secondary-text-colour; background-color: govuk-colour("light-grey", $legacy: "grey-4");
font-size: 32px; transition: 0.1s ease-in-out;
font-weight: 600;
margin-bottom: 8px;
}
.detail { .card-heading a {
font-weight: 600; color: $govuk-link-colour;
margin-bottom: 8px; margin-top: 0;
} &:focus {
} color: govuk-colour("black", $legacy: "black");
outline: 3px solid transparent;
.card-action { box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
border-top: 0; }
padding: 12px; }
}
a {
display: inline; .detail-large {
border-bottom: 1px solid #c7dceb; color: $govuk-secondary-text-colour;
color: $govuk-link-colour; font-size: 32px;
line-height: 1.5em; font-weight: 600;
margin-bottom: 8px;
&:link, }
&:visited {
color: $govuk-link-colour; .detail {
} font-weight: 600;
margin-bottom: 8px;
&: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 { .card-action {
background-color: govuk-colour("white", $legacy: "white"); border-top: 0;
border: none; 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 { .js {
.card-body.active { .card-body.active {
&:hover { &:hover {
//background-color: $govuk-link-colour; //background-color: $govuk-link-colour;
color: $govuk-link-colour; color: $govuk-link-colour;
cursor: pointer; cursor: pointer;
transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;
transition-delay: 0.25s; transition-delay: 0.25s;
.card-heading, .card-heading,
p { p {
color: $govuk-link-colour; color: $govuk-link-colour;
transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;
transition-delay: 0.25s; transition-delay: 0.25s;
} }
.card-heading a { .card-heading a {
color: $govuk-link-colour; color: $govuk-link-colour;
transition-delay: 0.25s; transition-delay: 0.25s;
} }
.detail-large { .detail-large {
color: $govuk-link-colour; color: $govuk-link-colour;
transition-delay: 0.25s; transition-delay: 0.25s;
} }
}
a {
text-decoration: none;
}
} }
a {
text-decoration: none;
}
}
} }
#inspectorate-card .card-body { #inspectorate-card .card-body {
padding-top: 20%; padding-top: 20%;
} }
.card-3 .card-body { .card-3 .card-body {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
min-height: 30vh; min-height: 30vh;
.cardVieAll { .cardVieAll {
margin-top: auto; margin-top: auto;
} }
} }
styles/sass/styles.scss
+4 -4
View File
@@ -1,6 +1,9 @@
@import "node_modules/govuk-frontend/govuk/all"; @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";
@import "welshgov/application_old";
// global styles for <a> and <p> tags // global styles for <a> and <p> tags
$govuk-global-styles: true; $govuk-global-styles: true;
@@ -23,6 +26,3 @@ $govuk-assets-path: "/govuk/assets/";
// Components that aren't in Frontend // Components that aren't in Frontend
@import "components/cookie-banner"; @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; font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
} }
.govuk-header { .govuk-header {
background-color: #323232; 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 { .languageSwitch {
margin-top: 15px; margin-top: 15px;
text-align: right; text-align: right;
@@ -16,7 +94,18 @@
top: 10px; top: 10px;
right: -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 { .header__logo {
float: left; float: left;
margin: 0; margin: 0;
@@ -31,11 +120,19 @@
border: none; border: none;
} }
.govuk-header__logo {
width: 22% !important;
}
nav { nav {
margin-top: 60px; margin-top: 60px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.govuk-footer {
padding-top: 0px;
}
#footer_logo { #footer_logo {
margin-top: 60px; margin-top: 60px;
margin-bottom: 40px; 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