docs: article about consent banner

apps/www/app/content/patterns/no/consent-banner.dodont.tsx

@@ -0,0 +1,32 @@
+import { Button, Paragraph } from '@digdir/designsystemet-react';
+
+export const DontNegations = () => {
+  return (
+    <Paragraph>
+      Ønsker du at vi ikke skal lagre informasjon om deg og dine bruksmønstre?
+    </Paragraph>
+  );
+};
+
+export const DoNegations = () => {
+  return (
+    <Paragraph>Får vi samle informasjon om hvordan nettsiden brukes?</Paragraph>
+  );
+};
+
+export const DontButtons1 = () => {
+  return (
+    <>
+      <Button variant='primary'>Nei, jeg vil ikke ha en bedre tjeneste</Button>
+      <Button variant='primary'>Ja, jeg vil hjelpe til</Button>
+      <Button variant='primary'>Godta anbefalte</Button>
+      <Button variant='primary'>Bare nødvendige</Button>
+      <Button variant='primary'>OK</Button>
+      <Button variant='primary'>Jeg forstår</Button>
+    </>
+  );
+};
+
+export const DontButtons2 = () => {
+  return <Button variant='primary'>Godta bare nødvendige</Button>;
+};

apps/www/app/content/patterns/no/consent-banner.stories.tsx

@@ -0,0 +1,106 @@
+import {
+  Button,
+  Heading,
+  Link,
+  Paragraph,
+  SkipLink,
+} from '@digdir/designsystemet-react';
+
+export const ConsentBanner = () => {
+  return (
+    <>
+      <section
+        aria-labelledby='samtykkebanner__tittel'
+        style={{
+          background: '#0062ba',
+          color: 'white',
+          padding: 'var(--ds-size-8) var(--ds-size-8)',
+        }}
+      >
+        <Heading
+          id='samtykkebanner__tittel'
+          data-size='md'
+          style={{ marginBottom: 'var(--ds-size-4)' }}
+        >
+          Får vi samle informasjon om hvordan nettsiden brukes?
+        </Heading>
+        <Paragraph
+          style={{
+            color: 'inherit',
+            fontSize: '1.25rem',
+            maxWidth: '68rem',
+          }}
+        >
+          Hvis du svarer ja, lagrer og analyserer vi informasjon som hjelper oss
+          å forbedre nettsiden. Du kan når som helst endre valget ditt nederst
+          på siden.{' '}
+          <Link href='#mer-om-hva-vi-lagrer' style={{ color: 'inherit' }}>
+            Mer om hva vi lagrer og hvorfor.
+          </Link>
+        </Paragraph>
+        <form
+          method='post'
+          action='/api/consent'
+          style={{
+            display: 'flex',
+            gap: 'var(--ds-size-4)',
+            marginTop: 'var(--ds-size-5)',
+          }}
+        >
+          <Button
+            className='consent-banner-button'
+            data-color='neutral'
+            data-size='md'
+            name='action'
+            type='submit'
+            value='all'
+          >
+            Ja
+          </Button>
+          <Button
+            className='consent-banner-button'
+            data-color='neutral'
+            data-size='md'
+            name='action'
+            type='submit'
+            value='required'
+          >
+            Nei
+          </Button>
+        </form>
+        <Paragraph
+          style={{
+            color: 'inherit',
+            fontSize: '1.125rem',
+            marginTop: 'var(--ds-size-8)',
+          }}
+        >
+          <Link href='#nodvendig-informasjon' style={{ color: 'inherit' }}>
+            Vi lagrer også nødvendig informasjon
+          </Link>{' '}
+          som ikke kan velges bort. Dette gjør at nettsiden fungerer og er
+          trygg.
+        </Paragraph>
+      </section>
+      <style>
+        {`
+          .consent-banner-button {
+            background-color: rgb(255 255 255 / 100%);
+            color: rgb(0 0 0 / 100%);
+          }
+
+          .consent-banner-button:hover {
+            background-color: rgb(255 255 255 / 70%);
+          }
+
+          .consent-banner-skip-link:focus {
+            width: 100%;
+          }
+        `}
+      </style>
+      <SkipLink className='consent-banner-skip-link' href='#main'>
+        Hopp til hovedinnhold
+      </SkipLink>
+    </>
+  );
+};