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

updated sass and npm packages

Browse Source
This commit is contained in:
robbond
2023-12-12 09:24:01 +00:00
parent 1f677139f1
commit e7f4c5d847
7 changed files with 164 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cookieBanner.js
+89 -88
View File
@@ -1,4 +1,4 @@
import CookieConsent from "react-cookie-consent"; import { CookieConsent } from "react-cookie-consent";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
@@ -36,102 +36,103 @@ const CookieBanner = () => {
setBannerVisible(false); setBannerVisible(false);
}; };
return <> return (
{bannerVisible ? ( <>
<CookieConsent {bannerVisible ? (
style={{ <CookieConsent
position: "inherit", style={{
background: "#eeeeee", position: "inherit",
display: "block", background: "#eeeeee",
}} display: "block",
containerClasses="app-cookie-banner" }}
buttonClasses="cookies-banner__button" containerClasses="app-cookie-banner"
buttonWrapperClasses="govuk-width-container consentBanner hidden" buttonClasses="cookies-banner__button"
declineButtonClasses="cookies-banner__button" buttonWrapperClasses="govuk-width-container consentBanner hidden"
buttonText={t("common:cookie-banner-accept")} declineButtonClasses="cookies-banner__button"
declineButtonText={t("common:cookie-banner-decline")} buttonText={t("common:cookie-banner-accept")}
disableStyles={true} declineButtonText={t("common:cookie-banner-decline")}
enableDeclineButton={true} disableStyles={true}
flipButtons={true} enableDeclineButton={true}
hideOnAccept={true} flipButtons={true}
cookieName="planning_casework" hideOnAccept={true}
> cookieName="planning_casework"
<div className="app-cookie-banner"> >
<div <div className="app-cookie-banner">
id="global-cookie-message" <div
className="govuk-clearfix" id="global-cookie-message"
data-module="cookie-banner" className="govuk-clearfix"
role="region" data-module="cookie-banner"
aria-label="cookie banner" role="region"
data-nosnippet="" aria-label="cookie banner"
> data-nosnippet=""
<div className="govuk-width-container"> >
<div className="govuk-grid-row"> <div className="govuk-width-container">
<div className="govuk-grid-column-two-thirds"> <div className="govuk-grid-row">
<div className=""> <div className="govuk-grid-column-two-thirds">
<p className="cookies-banner__description"> <div className="">
{t( <p className="cookies-banner__description">
"common:cookie-banner-line-1"
)}
</p>
<ul className="cookies-banner__description">
<li>
{" "}
{t( {t(
"common:cookie-banner-list-item-1" "common:cookie-banner-line-1"
)} )}
</li> </p>
</ul> <ul className="cookies-banner__description">
<p className="cookies-banner__description"> <li>
{t( {" "}
"common:cookie-banner-line-2" {t(
)} "common:cookie-banner-list-item-1"
</p> )}
<ul className="cookies-banner__description"> </li>
<li> </ul>
<p className="cookies-banner__description">
{t( {t(
"common:cookie-banner-list-item-2" "common:cookie-banner-line-2"
)} )}
</li> </p>
<li> <ul className="cookies-banner__description">
{t( <li>
"common:cookie-banner-list-item-3" {t(
)} "common:cookie-banner-list-item-2"
</li> )}
</ul> </li>
<li>
{t(
"common:cookie-banner-list-item-3"
)}
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="govuk-width-container consentBannerShow">
<button
className="cookies-banner__button"
id="rcc-confirm-button"
aria-label="Accept cookies"
onClick={() => {
accept();
}}
>
{t("common:cookie-banner-accept")}
</button>
<Link
href="/help/cookies"
className="cookies-banner__button govuk-link--no-underline"
id="rcc-decline-button"
aria-label="Decline cookies"
>
{t("common:cookie-banner-change-settings")}
</Link>
</div>
</div> </div>
<div className="govuk-width-container consentBannerShow"> </CookieConsent>
<button ) : (
className="cookies-banner__button" ""
id="rcc-confirm-button" )}
aria-label="Accept cookies" </>
onClick={() => { );
accept();
}}
>
{t("common:cookie-banner-accept")}
</button>
<Link
href="/help/cookies"
className="cookies-banner__button govuk-link--no-underline"
id="rcc-decline-button"
aria-label="Decline cookies">
{t("common:cookie-banner-change-settings")}
</Link>
</div>
</div>
</CookieConsent>
) : (
""
)}
</>;
}; };
export default CookieBanner; export default CookieBanner;
package.json
+29 -29
View File
@@ -14,31 +14,31 @@
"child_process": false "child_process": false
}, },
"dependencies": { "dependencies": {
"@auth/prisma-adapter": "^1.0.1", "@auth/prisma-adapter": "^1.0.10",
"@azure/identity": "^3.2.4", "@azure/identity": "^4.0.0",
"@azure/storage-blob": "^12.12.0", "@azure/storage-blob": "^12.17.0",
"@azure/storage-queue": "^12.11.0", "@azure/storage-queue": "^12.16.0",
"@next-auth/prisma-adapter": "^1.0.4", "@next-auth/prisma-adapter": "^1.0.7",
"@prisma/client": "^5.0.0", "@prisma/client": "^5.7.0",
"@react-pdf/renderer": "^3.1.12", "@react-pdf/renderer": "^3.1.14",
"@redux-devtools/extension": "^3.2.5", "@redux-devtools/extension": "^3.3.0",
"@xmldom/xmldom": "^0.8.10", "@xmldom/xmldom": "^0.8.10",
"applicationinsights": "^2.2.0", "applicationinsights": "^2.9.1",
"axios": "^0.24.0", "axios": "^1.6.2",
"compression": "^1.7.4", "compression": "^1.7.4",
"cookie-cutter": "^0.2.0", "cookie-cutter": "^0.2.0",
"crypto-js": "^4.1.1", "crypto-js": "^4.2.0",
"date-fns": "^2.28.0", "date-fns": "^2.30.0",
"dom": "^0.0.3", "dom": "^0.0.3",
"express": "^4.17.2", "express": "^4.18.2",
"fs": "0.0.2", "fs": "0.0.2",
"google-map-react": "^2.1.10", "google-map-react": "^2.2.1",
"govuk-frontend": "3.13.0", "govuk-frontend": "^5.0.0",
"jsonpath": "^1.1.1", "jsonpath": "^1.1.1",
"leaflet": "^1.7.1", "leaflet": "^1.9.4",
"leaflet-defaulticon-compatibility": "^0.1.1", "leaflet-defaulticon-compatibility": "^0.1.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"moment": "^2.29.1", "moment": "^2.29.4",
"multiparty": "^4.2.3", "multiparty": "^4.2.3",
"mysql": "^2.18.1", "mysql": "^2.18.1",
"nanoid": "^3.2.0", "nanoid": "^3.2.0",
@@ -49,9 +49,9 @@
"next-redux-wrapper": "^7.0.5", "next-redux-wrapper": "^7.0.5",
"next-swagger-doc": "^0.4.0", "next-swagger-doc": "^0.4.0",
"next-translate": "^2.6.2", "next-translate": "^2.6.2",
"nodemailer": "^6.9.1", "nodemailer": "^6.9.7",
"nookies": "^2.5.2", "nookies": "^2.5.2",
"notifications-node-client": "^5.1.1", "notifications-node-client": "^7.0.6",
"ospoint": "^0.2.1", "ospoint": "^0.2.1",
"path": "^0.12.7", "path": "^0.12.7",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
@@ -59,13 +59,13 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-accessible-accordion": "^5.0.0", "react-accessible-accordion": "^5.0.0",
"react-autosuggest": "^10.1.0", "react-autosuggest": "^10.1.0",
"react-cookie-consent": "^7.2.1", "react-cookie-consent": "^9.0.0",
"react-datepicker": "4.10.0", "react-datepicker": "4.24.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-dropzone": "^11.5.1", "react-dropzone": "^14.2.3",
"react-idle-timer": "4.6.4", "react-idle-timer": "4.6.4",
"react-leaflet": "^4.2.1", "react-leaflet": "^4.2.1",
"react-pdf": "^7.3.3", "react-pdf": "^7.6.0",
"react-pdf-html": "^1.1.18", "react-pdf-html": "^1.1.18",
"react-quill": "^2.0.0", "react-quill": "^2.0.0",
"react-redux": "^7.2.6", "react-redux": "^7.2.6",
@@ -73,10 +73,10 @@
"redux-form": "^8.3.9", "redux-form": "^8.3.9",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2", "redux-thunk": "^2.4.2",
"sass": "1.32", "sass": "1.69",
"sass-loader": "13.2.0", "sass-loader": "13.3.2",
"swagger-ui": "^4.17.1", "swagger-ui": "^5.10.3",
"swagger-ui-react": "^4.17.0", "swagger-ui-react": "^5.10.3",
"typescript": "^5.3.2", "typescript": "^5.3.2",
"uuid": "9.0.0", "uuid": "9.0.0",
"webpack": "^5.66.0", "webpack": "^5.66.0",
@@ -89,4 +89,4 @@
"next-translate-plugin": "^2.6.2", "next-translate-plugin": "^2.6.2",
"prisma": "^5.0.0" "prisma": "^5.0.0"
} }
} }
styles/sass/patterns/_card.scss
+4 -4
View File
@@ -117,7 +117,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
} }
&.active { &.active {
background-color: govuk-colour("light-grey", $legacy: "grey-4"); background-color: govuk-colour("light-grey");
transition: 0.1s ease-in-out; transition: 0.1s ease-in-out;
.card-heading a { .card-heading a {
@@ -125,7 +125,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
margin-top: 0; margin-top: 0;
&:focus { &:focus {
color: govuk-colour("black", $legacy: "black"); color: govuk-colour("black");
outline: 3px solid transparent; outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
} }
@@ -167,7 +167,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
} }
&:focus { &:focus {
color: govuk-colour("black", $legacy: "black"); color: govuk-colour("black");
outline: 3px solid transparent; outline: 3px solid transparent;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
} }
@@ -187,7 +187,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
} }
&.clear { &.clear {
background-color: govuk-colour("white", $legacy: "white"); background-color: govuk-colour("white");
border: none; border: none;
} }
} }
styles/sass/patterns/_step-by-step-header.scss
+4 -4
View File
@@ -5,9 +5,9 @@
@include govuk-text-colour; @include govuk-text-colour;
position: relative; position: relative;
padding: 10px; padding: 10px;
background: govuk-colour("light-grey", $legacy: "grey-4"); background: govuk-colour("light-grey");
border-top: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); border-top: solid 1px govuk-colour("mid-grey");
border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2"); border-bottom: solid 1px govuk-colour("mid-grey");
@include govuk-media-query($from: tablet) { @include govuk-media-query($from: tablet) {
padding: govuk-spacing(3); padding: govuk-spacing(3);
@@ -28,4 +28,4 @@
@include govuk-font(24, $weight: bold); @include govuk-font(24, $weight: bold);
} }
// scss-lint:enable SelectorFormat // scss-lint:enable SelectorFormat
styles/sass/patterns/_step-by-step-nav.scss
+23 -31
View File
@@ -5,7 +5,7 @@ $stroke-width: 2px;
$stroke-width-large: 3px; $stroke-width-large: 3px;
$number-circle-size: 26px; $number-circle-size: 26px;
$number-circle-size-large: 35px; $number-circle-size-large: 35px;
$top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3"); $top-border: solid 2px govuk-colour("mid-grey");
@mixin step-nav-vertical-line($line-style: solid) { @mixin step-nav-vertical-line($line-style: solid) {
content: ""; content: "";
@@ -13,8 +13,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
z-index: 2; z-index: 2;
width: 0; width: 0;
height: 100%; height: 100%;
border-left: $line-style $stroke-width border-left: $line-style $stroke-width govuk-colour("mid-grey");
govuk-colour("mid-grey", $legacy: "grey-2");
background: govuk-colour("white"); background: govuk-colour("white");
} }
@@ -32,13 +31,11 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
// custom mixin as govuk-font does undesirable things at different breakpoints // custom mixin as govuk-font does undesirable things at different breakpoints
// we want to ensure that both large and small step navs have the same size font on mobile // we want to ensure that both large and small step navs have the same size font on mobile
// this will stop text resizing if compatibility mode is turned off // this will stop text resizing if compatibility mode is turned off
@mixin step-nav-font( @mixin step-nav-font($size,
$size,
$tablet-size: $size, $tablet-size: $size,
$weight: normal, $weight: normal,
$line-height: 1.3, $line-height: 1.3,
$tablet-line-height: $line-height $tablet-line-height: $line-height) {
) {
@include govuk-typography-common(); @include govuk-typography-common();
font-size: $size + px; font-size: $size + px;
font-weight: $weight; font-weight: $weight;
@@ -95,12 +92,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
color: govuk-colour("black"); color: govuk-colour("black");
.app-step-nav--large & { .app-step-nav--large & {
@include step-nav-font( @include step-nav-font(19,
19,
$tablet-size: 24, $tablet-size: 24,
$weight: bold, $weight: bold,
$line-height: 1.4 $line-height: 1.4);
);
} }
} }
@@ -146,6 +141,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
} }
.app-step-nav__step:last-child { .app-step-nav__step:last-child {
// little dash at the bottom of the line // little dash at the bottom of the line
&:before { &:before {
content: ""; content: "";
@@ -156,8 +152,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
margin-left: $number-circle-size / 4; margin-left: $number-circle-size / 4;
width: $number-circle-size / 2; width: $number-circle-size / 2;
height: 0; height: 0;
border-bottom: solid $stroke-width border-bottom: solid $stroke-width govuk-colour("mid-grey");
govuk-colour("mid-grey", $legacy: "grey-2");
} }
&:after { &:after {
@@ -189,6 +184,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
} }
.app-step-nav__step--active { .app-step-nav__step--active {
&:last-child:before, &:last-child:before,
.app-step-nav__circle--number, .app-step-nav__circle--number,
&:after, &:after,
@@ -221,16 +217,14 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
.app-step-nav__circle--number { .app-step-nav__circle--number {
@include step-nav-font(16, $weight: bold, $line-height: 23px); @include step-nav-font(16, $weight: bold, $line-height: 23px);
border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2"); border: solid $stroke-width govuk-colour("mid-grey");
.app-step-nav--large & { .app-step-nav--large & {
@include step-nav-font( @include step-nav-font(16,
16,
$tablet-size: 19, $tablet-size: 19,
$weight: bold, $weight: bold,
$line-height: 23px, $line-height: 23px,
$tablet-line-height: 30px $tablet-line-height: 30px);
);
@include govuk-media-query($from: tablet) { @include govuk-media-query($from: tablet) {
border-width: $stroke-width-large; border-width: $stroke-width-large;
@@ -242,13 +236,11 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
@include step-nav-font(16, $weight: bold, $line-height: 28px); @include step-nav-font(16, $weight: bold, $line-height: 28px);
.app-step-nav--large & { .app-step-nav--large & {
@include step-nav-font( @include step-nav-font(16,
16,
$tablet-size: 19, $tablet-size: 19,
$weight: bold, $weight: bold,
$line-height: 28px, $line-height: 28px,
$tablet-line-height: 34px $tablet-line-height: 34px);
);
} }
} }
@@ -264,8 +256,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
// to make numbers readable for users zooming text only in browsers such as Firefox // to make numbers readable for users zooming text only in browsers such as Firefox
text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour, text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour,
$shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour, $shadow-offset 0 0 $shadow-colour,
-#{$shadow-offset} 0 0 $shadow-colour; 0 $shadow-offset 0 $shadow-colour,
-#{$shadow-offset} 0 0 $shadow-colour;
} }
.app-step-nav__circle-step-label, .app-step-nav__circle-step-label,
@@ -292,6 +285,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
} }
&:hover { &:hover {
.app-step-nav__button:not(:focus), .app-step-nav__button:not(:focus),
.app-step-nav__circle { .app-step-nav__circle {
color: $govuk-link-colour; color: $govuk-link-colour;
@@ -315,12 +309,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
margin: 0; margin: 0;
.app-step-nav--large & { .app-step-nav--large & {
@include step-nav-font( @include step-nav-font(19,
19,
$tablet-size: 24, $tablet-size: 24,
$weight: bold, $weight: bold,
$line-height: 1.4 $line-height: 1.4);
);
} }
} }
@@ -355,7 +347,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
margin: 0; margin: 0;
font-size: inherit; font-size: inherit;
+ .app-step-nav__list { +.app-step-nav__list {
margin-top: -5px; margin-top: -5px;
.app-step-nav--large & { .app-step-nav--large & {
@@ -451,9 +443,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
.app-step-nav__context { .app-step-nav__context {
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
color: govuk-colour("dark-grey", $legacy: "grey-1"); color: govuk-colour("dark-grey");
&:before { &:before {
content: " \2013\00a0"; // dash followed by &nbsp; content: " \2013\00a0"; // dash followed by &nbsp;
} }
} }
styles/sass/styles.scss
+2 -2
View File
@@ -1,4 +1,4 @@
@import "node_modules/govuk-frontend/govuk/all"; @import "node_modules/govuk-frontend/dist/govuk/all";
// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
@import "welshgov/_variables"; @import "welshgov/_variables";
@@ -26,4 +26,4 @@ $govuk-assets-path: "/govuk/assets/";
@import "patterns/card"; @import "patterns/card";
// Components that aren't in Frontend // Components that aren't in Frontend
@import "components/cookie-banner"; @import "components/cookie-banner";
styles/sass/welshgov/_application.scss
+13 -3
View File
@@ -190,6 +190,16 @@ a.longLinkBreak {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: none; border-bottom: none;
.govuk-tag {
font-family: Arial, Helvetica, sans-serif;
background-color: #1d70b8;
text-transform: uppercase;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
padding: 5px 8px 4px;
}
} }
} }
} }
@@ -1155,9 +1165,9 @@ textarea,
} }
} }
.case .govuk-grid-column-full .govuk-summary-list__key { // .case .govuk-grid-column-full .govuk-summary-list__key {
width: 100%; // width: 100%;
} // }
.appealModule { .appealModule {
width: 94%; width: 94%;