Merged PR 1041: updated sass and npm packages
updated sass and npm packages Related work items: #9877
This commit is contained in:
Robert Bond
+89
-88
@@ -1,4 +1,4 @@
|
||||
import CookieConsent from "react-cookie-consent";
|
||||
import { CookieConsent } from "react-cookie-consent";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
@@ -36,102 +36,103 @@ const CookieBanner = () => {
|
||||
setBannerVisible(false);
|
||||
};
|
||||
|
||||
return <>
|
||||
{bannerVisible ? (
|
||||
<CookieConsent
|
||||
style={{
|
||||
position: "inherit",
|
||||
background: "#eeeeee",
|
||||
display: "block",
|
||||
}}
|
||||
containerClasses="app-cookie-banner"
|
||||
buttonClasses="cookies-banner__button"
|
||||
buttonWrapperClasses="govuk-width-container consentBanner hidden"
|
||||
declineButtonClasses="cookies-banner__button"
|
||||
buttonText={t("common:cookie-banner-accept")}
|
||||
declineButtonText={t("common:cookie-banner-decline")}
|
||||
disableStyles={true}
|
||||
enableDeclineButton={true}
|
||||
flipButtons={true}
|
||||
hideOnAccept={true}
|
||||
cookieName="planning_casework"
|
||||
>
|
||||
<div className="app-cookie-banner">
|
||||
<div
|
||||
id="global-cookie-message"
|
||||
className="govuk-clearfix"
|
||||
data-module="cookie-banner"
|
||||
role="region"
|
||||
aria-label="cookie banner"
|
||||
data-nosnippet=""
|
||||
>
|
||||
<div className="govuk-width-container">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div className="">
|
||||
<p className="cookies-banner__description">
|
||||
{t(
|
||||
"common:cookie-banner-line-1"
|
||||
)}
|
||||
</p>
|
||||
<ul className="cookies-banner__description">
|
||||
<li>
|
||||
{" "}
|
||||
return (
|
||||
<>
|
||||
{bannerVisible ? (
|
||||
<CookieConsent
|
||||
style={{
|
||||
position: "inherit",
|
||||
background: "#eeeeee",
|
||||
display: "block",
|
||||
}}
|
||||
containerClasses="app-cookie-banner"
|
||||
buttonClasses="cookies-banner__button"
|
||||
buttonWrapperClasses="govuk-width-container consentBanner hidden"
|
||||
declineButtonClasses="cookies-banner__button"
|
||||
buttonText={t("common:cookie-banner-accept")}
|
||||
declineButtonText={t("common:cookie-banner-decline")}
|
||||
disableStyles={true}
|
||||
enableDeclineButton={true}
|
||||
flipButtons={true}
|
||||
hideOnAccept={true}
|
||||
cookieName="planning_casework"
|
||||
>
|
||||
<div className="app-cookie-banner">
|
||||
<div
|
||||
id="global-cookie-message"
|
||||
className="govuk-clearfix"
|
||||
data-module="cookie-banner"
|
||||
role="region"
|
||||
aria-label="cookie banner"
|
||||
data-nosnippet=""
|
||||
>
|
||||
<div className="govuk-width-container">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<div className="">
|
||||
<p className="cookies-banner__description">
|
||||
{t(
|
||||
"common:cookie-banner-list-item-1"
|
||||
"common:cookie-banner-line-1"
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<p className="cookies-banner__description">
|
||||
{t(
|
||||
"common:cookie-banner-line-2"
|
||||
)}
|
||||
</p>
|
||||
<ul className="cookies-banner__description">
|
||||
<li>
|
||||
</p>
|
||||
<ul className="cookies-banner__description">
|
||||
<li>
|
||||
{" "}
|
||||
{t(
|
||||
"common:cookie-banner-list-item-1"
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<p className="cookies-banner__description">
|
||||
{t(
|
||||
"common:cookie-banner-list-item-2"
|
||||
"common:cookie-banner-line-2"
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
"common:cookie-banner-list-item-3"
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<ul className="cookies-banner__description">
|
||||
<li>
|
||||
{t(
|
||||
"common:cookie-banner-list-item-2"
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
"common:cookie-banner-list-item-3"
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</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 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>
|
||||
</CookieConsent>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>;
|
||||
</CookieConsent>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CookieBanner;
|
||||
|
||||
+29
-29
@@ -14,31 +14,31 @@
|
||||
"child_process": false
|
||||
},
|
||||
"dependencies": {
|
||||
"@auth/prisma-adapter": "^1.0.1",
|
||||
"@azure/identity": "^3.2.4",
|
||||
"@azure/storage-blob": "^12.12.0",
|
||||
"@azure/storage-queue": "^12.11.0",
|
||||
"@next-auth/prisma-adapter": "^1.0.4",
|
||||
"@prisma/client": "^5.0.0",
|
||||
"@react-pdf/renderer": "^3.1.12",
|
||||
"@redux-devtools/extension": "^3.2.5",
|
||||
"@auth/prisma-adapter": "^1.0.10",
|
||||
"@azure/identity": "^4.0.0",
|
||||
"@azure/storage-blob": "^12.17.0",
|
||||
"@azure/storage-queue": "^12.16.0",
|
||||
"@next-auth/prisma-adapter": "^1.0.7",
|
||||
"@prisma/client": "^5.7.0",
|
||||
"@react-pdf/renderer": "^3.1.14",
|
||||
"@redux-devtools/extension": "^3.3.0",
|
||||
"@xmldom/xmldom": "^0.8.10",
|
||||
"applicationinsights": "^2.2.0",
|
||||
"axios": "^0.24.0",
|
||||
"applicationinsights": "^2.9.1",
|
||||
"axios": "^1.6.2",
|
||||
"compression": "^1.7.4",
|
||||
"cookie-cutter": "^0.2.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"date-fns": "^2.28.0",
|
||||
"crypto-js": "^4.2.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"dom": "^0.0.3",
|
||||
"express": "^4.17.2",
|
||||
"express": "^4.18.2",
|
||||
"fs": "0.0.2",
|
||||
"google-map-react": "^2.1.10",
|
||||
"govuk-frontend": "3.13.0",
|
||||
"google-map-react": "^2.2.1",
|
||||
"govuk-frontend": "^5.0.0",
|
||||
"jsonpath": "^1.1.1",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet-defaulticon-compatibility": "^0.1.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet-defaulticon-compatibility": "^0.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.1",
|
||||
"moment": "^2.29.4",
|
||||
"multiparty": "^4.2.3",
|
||||
"mysql": "^2.18.1",
|
||||
"nanoid": "^3.2.0",
|
||||
@@ -49,9 +49,9 @@
|
||||
"next-redux-wrapper": "^7.0.5",
|
||||
"next-swagger-doc": "^0.4.0",
|
||||
"next-translate": "^2.6.2",
|
||||
"nodemailer": "^6.9.1",
|
||||
"nodemailer": "^6.9.7",
|
||||
"nookies": "^2.5.2",
|
||||
"notifications-node-client": "^5.1.1",
|
||||
"notifications-node-client": "^7.0.6",
|
||||
"ospoint": "^0.2.1",
|
||||
"path": "^0.12.7",
|
||||
"prop-types": "^15.8.1",
|
||||
@@ -59,13 +59,13 @@
|
||||
"react": "^18.2.0",
|
||||
"react-accessible-accordion": "^5.0.0",
|
||||
"react-autosuggest": "^10.1.0",
|
||||
"react-cookie-consent": "^7.2.1",
|
||||
"react-datepicker": "4.10.0",
|
||||
"react-cookie-consent": "^9.0.0",
|
||||
"react-datepicker": "4.24.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^11.5.1",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-idle-timer": "4.6.4",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-pdf": "^7.3.3",
|
||||
"react-pdf": "^7.6.0",
|
||||
"react-pdf-html": "^1.1.18",
|
||||
"react-quill": "^2.0.0",
|
||||
"react-redux": "^7.2.6",
|
||||
@@ -73,10 +73,10 @@
|
||||
"redux-form": "^8.3.9",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-thunk": "^2.4.2",
|
||||
"sass": "1.32",
|
||||
"sass-loader": "13.2.0",
|
||||
"swagger-ui": "^4.17.1",
|
||||
"swagger-ui-react": "^4.17.0",
|
||||
"sass": "1.69",
|
||||
"sass-loader": "13.3.2",
|
||||
"swagger-ui": "^5.10.3",
|
||||
"swagger-ui-react": "^5.10.3",
|
||||
"typescript": "^5.3.2",
|
||||
"uuid": "9.0.0",
|
||||
"webpack": "^5.66.0",
|
||||
@@ -89,4 +89,4 @@
|
||||
"next-translate-plugin": "^2.6.2",
|
||||
"prisma": "^5.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -117,7 +117,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
background-color: govuk-colour("light-grey");
|
||||
transition: 0.1s ease-in-out;
|
||||
|
||||
.card-heading a {
|
||||
@@ -125,7 +125,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
|
||||
margin-top: 0;
|
||||
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
color: govuk-colour("black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
@@ -167,7 +167,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
color: govuk-colour("black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
@@ -187,7 +187,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
|
||||
}
|
||||
|
||||
&.clear {
|
||||
background-color: govuk-colour("white", $legacy: "white");
|
||||
background-color: govuk-colour("white");
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
@include govuk-text-colour;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
border-top: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
background: govuk-colour("light-grey");
|
||||
border-top: solid 1px govuk-colour("mid-grey");
|
||||
border-bottom: solid 1px govuk-colour("mid-grey");
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding: govuk-spacing(3);
|
||||
@@ -28,4 +28,4 @@
|
||||
@include govuk-font(24, $weight: bold);
|
||||
}
|
||||
|
||||
// scss-lint:enable SelectorFormat
|
||||
// scss-lint:enable SelectorFormat
|
||||
@@ -5,7 +5,7 @@ $stroke-width: 2px;
|
||||
$stroke-width-large: 3px;
|
||||
$number-circle-size: 26px;
|
||||
$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) {
|
||||
content: "";
|
||||
@@ -13,8 +13,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: $line-style $stroke-width
|
||||
govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
border-left: $line-style $stroke-width govuk-colour("mid-grey");
|
||||
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
|
||||
// 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
|
||||
@mixin step-nav-font(
|
||||
$size,
|
||||
@mixin step-nav-font($size,
|
||||
$tablet-size: $size,
|
||||
$weight: normal,
|
||||
$line-height: 1.3,
|
||||
$tablet-line-height: $line-height
|
||||
) {
|
||||
$tablet-line-height: $line-height) {
|
||||
@include govuk-typography-common();
|
||||
font-size: $size + px;
|
||||
font-weight: $weight;
|
||||
@@ -95,12 +92,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
color: govuk-colour("black");
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
19,
|
||||
@include step-nav-font(19,
|
||||
$tablet-size: 24,
|
||||
$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 {
|
||||
|
||||
// little dash at the bottom of the line
|
||||
&:before {
|
||||
content: "";
|
||||
@@ -156,8 +152,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
margin-left: $number-circle-size / 4;
|
||||
width: $number-circle-size / 2;
|
||||
height: 0;
|
||||
border-bottom: solid $stroke-width
|
||||
govuk-colour("mid-grey", $legacy: "grey-2");
|
||||
border-bottom: solid $stroke-width govuk-colour("mid-grey");
|
||||
}
|
||||
|
||||
&:after {
|
||||
@@ -189,6 +184,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
}
|
||||
|
||||
.app-step-nav__step--active {
|
||||
|
||||
&:last-child:before,
|
||||
.app-step-nav__circle--number,
|
||||
&:after,
|
||||
@@ -221,16 +217,14 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
|
||||
.app-step-nav__circle--number {
|
||||
@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 & {
|
||||
@include step-nav-font(
|
||||
16,
|
||||
@include step-nav-font(16,
|
||||
$tablet-size: 19,
|
||||
$weight: bold,
|
||||
$line-height: 23px,
|
||||
$tablet-line-height: 30px
|
||||
);
|
||||
$tablet-line-height: 30px);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
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);
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
16,
|
||||
@include step-nav-font(16,
|
||||
$tablet-size: 19,
|
||||
$weight: bold,
|
||||
$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
|
||||
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,
|
||||
@@ -292,6 +285,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.app-step-nav__button:not(:focus),
|
||||
.app-step-nav__circle {
|
||||
color: $govuk-link-colour;
|
||||
@@ -315,12 +309,10 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
margin: 0;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@include step-nav-font(
|
||||
19,
|
||||
@include step-nav-font(19,
|
||||
$tablet-size: 24,
|
||||
$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;
|
||||
font-size: inherit;
|
||||
|
||||
+ .app-step-nav__list {
|
||||
+.app-step-nav__list {
|
||||
margin-top: -5px;
|
||||
|
||||
.app-step-nav--large & {
|
||||
@@ -451,9 +443,9 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
|
||||
.app-step-nav__context {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: govuk-colour("dark-grey", $legacy: "grey-1");
|
||||
color: govuk-colour("dark-grey");
|
||||
|
||||
&:before {
|
||||
content: " \2013\00a0"; // dash followed by
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@import "welshgov/_variables";
|
||||
@@ -26,4 +26,4 @@ $govuk-assets-path: "/govuk/assets/";
|
||||
@import "patterns/card";
|
||||
|
||||
// Components that aren't in Frontend
|
||||
@import "components/cookie-banner";
|
||||
@import "components/cookie-banner";
|
||||
@@ -190,6 +190,16 @@ a.longLinkBreak {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
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 {
|
||||
width: 100%;
|
||||
}
|
||||
// .case .govuk-grid-column-full .govuk-summary-list__key {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.appealModule {
|
||||
width: 94%;
|
||||
|
||||
Reference in New Issue
Block a user