diff --git a/apps/www/app/_components/consent-banner/consent-banner.module.css b/apps/www/app/_components/consent-banner/consent-banner.module.css index bfdff19b60..7c923004ae 100644 --- a/apps/www/app/_components/consent-banner/consent-banner.module.css +++ b/apps/www/app/_components/consent-banner/consent-banner.module.css @@ -15,20 +15,16 @@ margin-bottom: var(--ds-size-3); text-wrap: pretty; } - span { - font-weight: 600; - } p { + max-width: 56rem; text-wrap: pretty; } - p:first-of-type { - margin-bottom: var(--ds-size-2); - } - p:last-of-type { - margin-block: var(--ds-size-3) var(--ds-size-6); - } } .buttons { display: flex; gap: var(--ds-size-4); + margin-block: var(--ds-size-6); +} +.necessaryInfo { + margin: 0; } diff --git a/apps/www/app/_components/consent-banner/consent-banner.tsx b/apps/www/app/_components/consent-banner/consent-banner.tsx index 1c02e51ab9..b79a6a5b15 100644 --- a/apps/www/app/_components/consent-banner/consent-banner.tsx +++ b/apps/www/app/_components/consent-banner/consent-banner.tsx @@ -4,51 +4,61 @@ import { useTranslation } from 'react-i18next'; import { RRLink as Link } from '../link'; import classes from './consent-banner.module.css'; -type BannerProps = { lang: string } & HTMLAttributes; +type BannerProps = { lang: string } & HTMLAttributes; -export const ConsentBanner = forwardRef( +export const ConsentBanner = forwardRef( function ConsentBanner({ lang, ...rest }, ref) { const { t } = useTranslation(); return ( -
+
- + {t('consent-banner.heading')} - {t('consent-banner.required-desc-start')}{' '} + {t('consent-banner.desc-start')} {t('consent-banner.desc-end')}{' '} - {t('consent-banner.required-desc-link')} - {' '} - {t('consent-banner.required-desc-end')} + {t('consent-banner.desc-link')} + - {t('consent-banner.all-desc')} - {t('consent-banner.declaration')}
+ + + {t('consent-banner.necessary-info-link')} + {' '} + {t('consent-banner.necessary-info-end')} +
-
+ ); }, ); diff --git a/apps/www/app/_utils/consent.client.ts b/apps/www/app/_utils/consent.client.ts index cb86d9aabd..30c78264d0 100644 --- a/apps/www/app/_utils/consent.client.ts +++ b/apps/www/app/_utils/consent.client.ts @@ -4,7 +4,7 @@ import { CONSENT_VERSION, userConsent } from './cookies'; -export type ConsentChoice = 'all' | 'required' | null; +export type ConsentChoice = 'approve' | 'decline' | null; export async function getConsentFromCookie(): Promise<{ choice: ConsentChoice; @@ -31,7 +31,7 @@ export async function shouldIncludeSiteimprove(): Promise { const consent = await getConsentFromCookie(); return ( consent !== null && - consent.choice === 'all' && + consent.choice === 'approve' && consent.version === CONSENT_VERSION ); } diff --git a/apps/www/app/_utils/cookies.ts b/apps/www/app/_utils/cookies.ts index 6eca001c58..e40618d74d 100644 --- a/apps/www/app/_utils/cookies.ts +++ b/apps/www/app/_utils/cookies.ts @@ -1,6 +1,6 @@ import { createCookie } from 'react-router'; -export const CONSENT_VERSION = '2'; +export const CONSENT_VERSION = '3'; const isProduction = process.env.NODE_ENV === 'production'; diff --git a/apps/www/app/content/intro/en/privacy-policy.mdx b/apps/www/app/content/intro/en/privacy-policy.mdx index 3ce0307572..a421394a79 100644 --- a/apps/www/app/content/intro/en/privacy-policy.mdx +++ b/apps/www/app/content/intro/en/privacy-policy.mdx @@ -19,7 +19,7 @@ Used to remember the cookie consent you have given or declined on designsystemet Designsystemet.no uses React as a tool to build web pages and handle user choices and clicks. `react-router-scroll-positions` is used to remember the position on the page where the user was when navigating between pages. ## Optional cookies -Optional cookies are only activated if you provide consent. If you choose “Accept all”, we use the analytics tool Siteimprove to collect anonymised usage statistics. This information is used to improve our services and better understand users’ needs. +Optional cookies are only activated if you provide consent. If you answer yes to letting us collect information about how the website is used, we use the analytics tool Siteimprove to collect anonymised usage statistics. This information is used to improve our services and better understand users’ needs. ## My choices Press the button below to delete your cookie choices and to manage your preferences again. diff --git a/apps/www/app/content/intro/no/privacy-policy.mdx b/apps/www/app/content/intro/no/privacy-policy.mdx index 088144051b..3d8444dd23 100644 --- a/apps/www/app/content/intro/no/privacy-policy.mdx +++ b/apps/www/app/content/intro/no/privacy-policy.mdx @@ -19,7 +19,7 @@ Brukes for å huske samtykket for informasjonskapsler du har gitt eller avslått Designsystemet.no bruker React som verktøy for å produsere nettsider og følge opp brukerens valg og klikk. `react-router-scroll-positions` brukes til å huske hvilken posisjon på nettsiden som brukeren var på, når brukeren navigerer mellom nettsider. ## Valgfrie informasjonskapsler -Valgfrie informasjonskapsler aktiveres kun dersom du gir samtykke. Dersom du velger «Godkjenn alle», tar vi i bruk analyseverktøyet Siteimprove for å samle inn anonymisert bruksstatistikk som benyttes til å forbedre tjenestene våre og forstå brukernes behov bedre. +Valgfrie informasjonskapsler aktiveres kun dersom du gir samtykke. Dersom du svarer ja til at vi kan samle informasjon om hvordan nettsiden brukes, tar vi i bruk analyseverktøyet Siteimprove for å samle inn anonymisert bruksstatistikk som benyttes til å forbedre tjenestene våre og forstå brukernes behov bedre. ## Mine valg Trykk på knappen under for å slette dine valg for informasjonskapsler, og for å administrere dine preferanser på nytt. @@ -33,4 +33,4 @@ Trykk på knappen under for å slette dine valg for informasjonskapsler, og for > Nullstill mine valg - \ No newline at end of file + diff --git a/apps/www/app/locales/en.ts b/apps/www/app/locales/en.ts index fc2858f6fa..90aead225f 100644 --- a/apps/www/app/locales/en.ts +++ b/apps/www/app/locales/en.ts @@ -121,17 +121,17 @@ export default { 'skip-link': 'Skip to main content', }, 'consent-banner': { - heading: 'Can we collect data about how you use the website?', - all: 'Accept', - 'all-desc': - 'If you accept, we will also collect data about how the website is used. This helps us improve our services.', - declaration: - 'You can change your choice at any time at the bottom of our pages.', - required: 'Decline', - 'required-desc-start': 'We use some', - 'required-desc-link': 'essential cookies', - 'required-desc-end': - 'to make the website work. These cannot be opted out of.', + heading: 'Can we collect information about how the website is used?', + approve: 'Yes', + decline: 'No', + 'desc-start': + 'If you answer yes, we store and analyse information that helps us improve the website.', + 'desc-end': + 'You can change your choice at any time at the bottom of the page.', + 'desc-link': 'More about what we store and why.', + 'necessary-info-link': 'We also store necessary information', + 'necessary-info-end': + 'that cannot be opted out of. This makes the website work and keeps it secure.', }, errors: { default: { diff --git a/apps/www/app/locales/no.ts b/apps/www/app/locales/no.ts index 9652f0791d..9d9ab1620a 100644 --- a/apps/www/app/locales/no.ts +++ b/apps/www/app/locales/no.ts @@ -120,17 +120,16 @@ export default { 'skip-link': 'Hopp til hovedinnhold', }, 'consent-banner': { - heading: 'Vil du godta at vi samler inn data om bruk av nettsiden?', - all: 'Godta', - 'all-desc': - 'Hvis du godtar, samler vi også inn data om hvordan nettsiden brukes. Dette hjelper oss å forbedre tjenestene våre.', - declaration: - 'Du kan når som helst endre valget ditt nederst på våre sider.', - required: 'Avslå', - 'required-desc-start': 'Vi bruker noen', - 'required-desc-link': 'nødvendige informasjonskapsler', - 'required-desc-end': - 'for at nettsiden skal fungere. Disse kan ikke velges bort.', + heading: 'Får vi samle informasjon om hvordan nettsiden brukes?', + approve: 'Ja', + decline: 'Nei', + 'desc-start': + 'Hvis du svarer ja, lagrer og analyserer vi informasjon som hjelper oss å forbedre nettsiden.', + 'desc-end': 'Du kan når som helst endre valget ditt nederst på siden.', + 'desc-link': 'Mer om hva vi lagrer og hvorfor.', + 'necessary-info-link': 'Vi lagrer også nødvendig informasjon', + 'necessary-info-end': + 'som ikke kan velges bort. Dette gjør at nettsiden fungerer og er trygg.', }, errors: { default: { diff --git a/apps/www/app/routes/consent.tsx b/apps/www/app/routes/consent.tsx index d2f1d62af0..a7585b5d0c 100644 --- a/apps/www/app/routes/consent.tsx +++ b/apps/www/app/routes/consent.tsx @@ -17,8 +17,11 @@ export async function action({ request }: Route.ActionArgs) { maxAge: 0, }); } else { + const consentChoice = + choice === 'approve' || choice === 'decline' ? choice : 'decline'; + cookieHeader = await userConsent.serialize({ - choice, + choice: consentChoice, version: CONSENT_VERSION, }); }