chore(storefront): parsing and ks logo (#3309)

Barsnes · web-flow · commit cc797eb7629d · 2025-03-05T12:55:43.000+01:00
* chore(storefront): move &lt;style&gt; to head

* fix deduplication

* add ks digital logo

* remove ks class

* fix color props

* version

* remove all style tags

* aria-hidden to missed icons

* blue card
diff --git a/apps/_components/src/Container/Container.tsx b/apps/_components/src/Container/Container.tsx
@@ -5,8 +5,13 @@ import classes from './Container.module.css';
 type ContainerProps = {
   children: React.ReactNode;
   className?: string;
+  id?: string;
 };
 
-export const Container = ({ children, className }: ContainerProps) => {
-  return <div className={cl(classes.container, className)}>{children}</div>;
+export const Container = ({ children, className, id }: ContainerProps) => {
+  return (
+    <div id={id} className={cl(classes.container, className)}>
+      {children}
+    </div>
+  );
 };
diff --git a/apps/_components/src/Footer/Footer.module.css b/apps/_components/src/Footer/Footer.module.css
@@ -19,6 +19,12 @@
   align-items: flex-start;
   gap: var(--ds-size-8);
   margin-top: var(--ds-size-8);
+
+  & svg {
+    & * {
+      fill: var(--ds-color-neutral-text-default);
+    }
+  }
 }
 
 .links {
diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx
@@ -6,6 +6,7 @@ import { Container } from '../';
 
 import { Bronnoysund } from '../logos/Bronnoysund';
 import { Digdir } from '../logos/Digdir';
+import { KsDigital } from '../logos/KsDigital';
 import { Mattilsynet } from '../logos/Mattilsynet';
 import { Udir } from '../logos/Udir';
 import classes from './Footer.module.css';
@@ -37,7 +38,6 @@ const LinkList = (links: LinkListItemProps[]) => {
     </ul>
   );
 };
-
 type FooterProps = {
   centerLinks: LinkListItemProps[];
   rightLinks: LinkListItemProps[];
@@ -65,6 +65,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
               <Bronnoysund />
               <Mattilsynet />
               <Udir className={classes.udir} />
+              <KsDigital />
             </div>
             <Button
               asChild
diff --git a/apps/_components/src/logos/Bronnoysund.tsx b/apps/_components/src/logos/Bronnoysund.tsx
diff --git a/apps/_components/src/logos/KsDigital.tsx b/apps/_components/src/logos/KsDigital.tsx
@@ -0,0 +1,18 @@
+type KsDigitalProps = React.HTMLAttributes<SVGElement>;
+
+export function KsDigital({ ...rest }: KsDigitalProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      version='1.1'
+      viewBox='0 0 1035 244'
+      width='1035'
+      height='244'
+      {...rest}
+    >
+      <title>KS digital logo</title>
+      <path d='m163.6 82.1h80.5v80.5h-80.5zm-161.1 0c0 44.5 36.1 80.5 80.5 80.5v-80.5zm80.6 161c44.5 0 80.5-36.1 80.5-80.5h-80.5zm80.5-241.6c-44.5 0-80.5 36.1-80.5 80.5h80.5z' />
+      <path d='m318 66.9h20.4v46.9c1.7-2.7 4.1-5.4 7.3-8.7l35.9-38.2h26.4l-45 46.6 51.3 64.3h-27.4l-37.7-49.9-10.9 11.4v38.5h-20.4v-110.9zm100.8 72.9h21.5c1.1 15.4 13.6 23.3 28.3 23.3 14.7 0 22.2-4.4 22.2-15.2 0-10.8-6-13-18.2-15.4l-18.8-3.6c-17.4-3.3-31-13.6-31-31.4 0-17.8 18.2-33.4 43.2-33.4 25 0 43.2 14.9 44.5 36.4h-21.5c-0.5-10.3-7.8-19-23.9-19-16.1 0-21.5 5.1-21.5 14.3 0 9.2 7.4 11.6 18.7 13.8l18.7 3.6c17.3 3.3 30.9 13.1 30.9 31.7 0 18.6-15.5 35.8-44 35.8-28.5 0-47.2-16.2-48.9-40.9zm148.8-72.9h39.3c37.4 0 58.8 19.5 58.8 55.6 0 36.1-20.1 55.3-58.3 55.3h-39.7v-110.9zm76.8 55.6c0-23.9-13.1-38-38.6-38h-17.4v75.7h17.6c23.3 0 38.5-12 38.5-37.7zm38.5-54h20.1v20.3h-20.1zm0.3 32h19.3v77.3h-19.3zm39.9 82.6h19.6c0.3 9.2 6.2 14.6 16.6 14.6 10.4 0 18.7-6 18.7-17.6v-8.4c0-3.5 0.2-6.7 0.6-9.7-4.6 7-12 12.8-24.1 12.8-20.1 0-34.7-14.1-34.7-38.5 0-24.4 16.8-38.5 33.7-38.5 16.9 0 20.4 5.5 25 13.6-0.5-2.7-0.6-4.8-0.6-7.6v-3.5h19.3v74.9c0 25.3-15.7 37.5-38.5 37.5-22.8 0-35.8-12.2-35.8-29.8zm56.1-46.7c0-13.5-8.2-23.1-19.6-23.1-11.4 0-20 9.7-20 23.1 0 13.4 8.2 23.1 20 23.1 11.8 0 19.6-9.7 19.6-23.1zm39.4-67.9h20.1v20.3h-20.1zm0.3 32h19.3v77.3h-19.3zm51.7 53.2v-37.8h-17.6v-15.4h17.6v-27.9h19.3v27.9h19v15.4h-19v35c0 8.1 3.2 12.8 11.4 12.8 8.2 0 4-0.2 5.9-0.5v14.6c-1.9 0.6-6.5 1.4-11.4 1.4-16.5 0-25.2-8.2-25.2-25.5zm52.5 2.8c0-17.4 13.5-23.4 30.1-25.7l11.1-1.4c6.3-0.8 8.6-3.2 8.6-7 0-5.4-4.4-10.1-12.7-10.1-8.3 0-14.7 5.1-15.5 13.1h-20c1.3-16.2 14.4-27.6 34.4-27.6 20 0 33.1 12.7 33.1 34.4v45.4h-17.9v-3.2c0-2.5 0.3-4.9 0.8-7.4-4.1 7.6-12 13.5-25.3 13.5-13.3 0-26.6-8.9-26.6-24.1zm50.3-8.7v-8.4c-1.7 1.6-4.4 2.4-9.2 3.3l-6.3 1.3c-9 1.7-15.2 4.8-15.2 11.7 0 6.9 5.4 10.6 12.2 10.6 10.3 0 18.5-7.6 18.5-18.5zm39.3-80.9h19.3v110.9h-19.3z' />
+    </svg>
+  );
+}
diff --git a/apps/_components/src/logos/Udir.tsx b/apps/_components/src/logos/Udir.tsx
@@ -9,18 +9,6 @@ export function Udir(rest: UdirProps) {
       {...rest}
     >
       <title>Utdanningsdirektoratet logo</title>
-      <defs>
-        <style suppressHydrationWarning>
-          {`
-            .cls-1 {
-              fill: #fdfeff;
-            }
-            .cls-2 {
-              fill: #fff;
-            }
-          `}
-        </style>
-      </defs>
       <g>
         <g>
           <path
diff --git a/apps/storefront/app/(frontpage)/layout.tsx b/apps/storefront/app/(frontpage)/layout.tsx
@@ -14,7 +14,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <main id='main'>
-      <div>
+      <div id='frontpage'>
         <img
           src='/img/elements/first.svg'
           alt=''
diff --git a/apps/storefront/app/(frontpage)/page.mdx b/apps/storefront/app/(frontpage)/page.mdx
@@ -107,15 +107,3 @@ export const metadata = {
     },
   ]}
 />
-
-<style>
-  {`
-header:first-of-type {
-  background-color: transparent;
-}
-
-.ds-logo-image img {
-  width: 85%;
-}
-`}
-</style>
diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.tsx b/apps/storefront/app/bloggen/(frontpage)/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div>
+    <div id='bloggen'>
       <Banner color='red'>
         <BannerIcon>
           <PencilIcon fontSize={34} aria-hidden='true' />
diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -104,16 +104,3 @@ export const metadata = {
   featured={false}
   level={2}
 />
-
-<style>
-  {`
-    body {
-      background-color: var(--ds-color-neutral-background-subtle);
-
-        [data-color-scheme='dark'] &,
-        [data-color-scheme='auto'] & {
-          background-color: var(--ds-color-neutral-backround-default);
-        }
-    }
-  `}
-</style>
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
@@ -64,22 +64,6 @@
   width: 100%;
 }
 
-/* .content img {
-  display: block;
-  width: 860px;
-  margin: var(--ds-size-12) 0;
-  margin-left: calc((100% - 860px) / 2) !important;
-  background-color: var(--ds-color-neutral-background-subtle);
-}
-
-.content video,
-.content [data-iframe-video] {
-  display: block;
-  width: 860px;
-  margin-left: calc((100% - 860px) / 2) !important;
-  background-color: var(--ds-color-neutral-background-subtle);
-} */
-
 .main > figure {
   margin: auto;
   width: 100%;
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -33,7 +33,7 @@ function PostLayout({
   figureCount = FIGURE_COUNT,
 }: BlogArticleLayoutProps) {
   return (
-    <div className={classes.wrapper}>
+    <div className={classes.wrapper} id='post-layout'>
       <Container className={classes.page}>
         {Array.from({ length: figureCount }).map((_, index) => (
           <Figures
@@ -68,7 +68,7 @@ function PostLayout({
           />
           <MdxContent className={classes.content}>
             {content}
-            <div className={classes.wantToWrite} data-color='brand1'>
+            <div className={classes.wantToWrite} data-color='brand3'>
               <Heading level={3} data-size='xs'>
                 Ønsker du å skrive for bloggen?
               </Heading>
@@ -87,16 +87,6 @@ function PostLayout({
           </MdxContent>
         </main>
       </Container>
-      <style suppressHydrationWarning>
-        {`
-          header {
-            [data-color-scheme='dark'] &,
-            [data-color-scheme='auto'] & {
-              background-color: var(--ds-color-neutral-background-default) !important;
-            }
-          }
-        `}
-      </style>
     </div>
   );
 }
diff --git a/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx
@@ -175,7 +175,7 @@ I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe min
 
 <br />
 <br />
-<Card data-color='brand1' variant="tinted" data-unstyled>
+<Card data-color='brand3' variant="tinted" data-unstyled>
   **Bidra til artikkelen?** <br />
   Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
   e-post på: designsystem@digdir.no eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).
diff --git a/apps/storefront/app/grunnleggende/introduksjon/verdier/page.mdx b/apps/storefront/app/grunnleggende/introduksjon/verdier/page.mdx
@@ -13,7 +13,7 @@ export default ({ children }) => (
     data={{
       title: 'Verdier',
       date: '26. april 2023',
-      icon: <LightBulbIcon />,
+      icon: <LightBulbIcon aria-hidden />,
       color: 'yellow',
     }}
   />
diff --git a/apps/storefront/app/grunnleggende/page.mdx b/apps/storefront/app/grunnleggende/page.mdx
@@ -40,15 +40,15 @@ Designsystemet inneholder grunnleggende designelementer, mønstre, god praksis o
   <NavigationCard
     title='Om designsystemet'
     color='blue'
-    icon={<ComponentIcon fontSize={34} />}
+    icon={<ComponentIcon fontSize={34} aria-hidden />}
     url='grunnleggende/introduksjon/om-designsystemet'
     description='Hva er Designsystemet, hvorfor trenger vi det, hvordan gjør vi det og hvem er med?'
     backgroundColor='white'
   />
   <NavigationCard
     title='Verdier'
     color='yellow'
-    icon={<LightBulbIcon fontSize={34} />}
+    icon={<LightBulbIcon fontSize={34} aria-hidden />}
     url='grunnleggende/introduksjon/verdier'
     description='Verdier vi ønsker at designsystemet skal bygges på'
     backgroundColor='white'
diff --git a/apps/storefront/app/komponenter/layout.tsx b/apps/storefront/app/komponenter/layout.tsx
@@ -27,7 +27,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           sammen på mange ulike måter og i forskjellige mønstre.
         </BannerIngress>
       </Banner>
-      <Container className={classes.grid}>{children}</Container>
+      <Container className={classes.grid} id='komponenter'>
+        {children}
+      </Container>
     </main>
   );
 };
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
@@ -23,18 +23,6 @@ export default function page() {
       {sortedData.map((component) => (
         <ComponentCard key={component.title} {...component} />
       ))}
-      <style suppressHydrationWarning>
-        {`
-    body {
-      background-color: var(--ds-color-neutral-background-subtle);
-
-        [data-color-scheme='dark'] &,
-        [data-color-scheme='auto'] & {
-          background-color: var(--ds-color-neutral-background-default);
-        }
-    }
-  `}
-      </style>
     </>
   );
 }
diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
@@ -96,7 +96,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang='en' data-color-scheme='auto'>
+    <html lang='no' data-color-scheme='auto'>
       <body>
         <div className='root'>
           <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>
diff --git a/apps/storefront/app/monstre/page.mdx b/apps/storefront/app/monstre/page.mdx
@@ -71,13 +71,3 @@ Alle som ønsker kan påvirke arbeidet gjennom åpne diskusjoner i [Slack](https
   dataUnstyled
   caption='Digdir, Nav, Skatteetaten, Oslo kommune og Brønnøysundregistren er blant dem som deltar i arbeidet om å etablere felles mønstre på tvers'
 />
-
-
-
-<style>
-  {`
-    body {
-      background-color: var(--ds-color-neutral-background-subtle);
-    }
-  `}
-</style>
diff --git a/apps/storefront/components/ImageBanner/ImageBanner.tsx b/apps/storefront/components/ImageBanner/ImageBanner.tsx
@@ -96,7 +96,7 @@ const ImageBanner = ({
           {description && <Paragraph data-size='lg'>{description}</Paragraph>}
           {content && content}
           {link && (
-            <Link className={classes.link} color='neutral' asChild>
+            <Link className={classes.link} data-color='neutral' asChild>
               <NextLink href={link.href}>
                 {link.prefix} {link.text}
               </NextLink>
@@ -106,10 +106,11 @@ const ImageBanner = ({
           {buttons && (
             <div className={classes.buttons}>
               {buttons.map((item, index) => (
+                /* @ts-ignore */
                 <Button
                   key={index}
                   variant={item.variant ?? 'secondary'}
-                  color={item.color ?? 'accent'}
+                  data-color={item.color ?? 'accent'}
                   asChild
                 >
                   <a href={item.href} className={classes.button}>
diff --git a/apps/storefront/globals.css b/apps/storefront/globals.css
@@ -16,6 +16,53 @@
 
 body {
   font-family: 'Inter', sans-serif;
+  background-color: var(--ds-color-neutral-background-default);
+
+  &:has(#bloggen) {
+    background-color: var(--ds-color-neutral-background-tinted);
+
+    [data-color-scheme='dark'] &,
+    [data-color-scheme='auto'] & {
+      background-color: var(--ds-color-neutral-background-default);
+    }
+  }
+
+  &:has(#komponenter) {
+    background-color: var(--ds-color-neutral-background-tinted);
+
+    [data-color-scheme='dark'] &,
+    [data-color-scheme='auto'] & {
+      background-color: var(--ds-color-neutral-background-default);
+    }
+  }
+
+  &:has(#menu-page-layout) {
+    & header {
+      [data-color-scheme='dark'] &,
+      [data-color-scheme='auto'] & {
+        background-color: var(--ds-color-neutral-background-default) !important;
+      }
+    }
+  }
+
+  &:has(#frontpage) {
+    header:first-of-type {
+      background-color: transparent;
+    }
+
+    .ds-logo-image img {
+      width: 85%;
+    }
+  }
+
+  &:has(#post-layout) {
+    header {
+      [data-color-scheme='dark'] &,
+      [data-color-scheme='auto'] & {
+        background-color: var(--ds-color-neutral-background-default) !important;
+      }
+    }
+  }
 }
 
 * {
diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -46,7 +46,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           {banner.ingress && <BannerIngress>{banner.ingress}</BannerIngress>}
         </Banner>
       )}
-      <Container className={classes.page}>
+      <Container className={classes.page} id='menu-page-layout'>
         <div className={classes.left}>
           <SidebarMenu routerPath={pathname ?? ''} />
         </div>
@@ -79,16 +79,6 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           </div>
         </main>
       </Container>
-      <style suppressHydrationWarning>
-        {`
-          header {
-            [data-color-scheme='dark'] &,
-            [data-color-scheme='auto'] & {
-              background-color: var(--ds-color-neutral-background-default) !important;
-            }
-          }
-        `}
-      </style>
     </div>
   );
 };
diff --git a/apps/storefront/layouts/PageLayout/PageLayout.tsx b/apps/storefront/layouts/PageLayout/PageLayout.tsx
@@ -27,7 +27,7 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
       <div className={classes.header}>
         <Container>
           <div className={classes.headerContent}>
-            <Link asChild className={classes.backBtn} color='neutral'>
+            <Link asChild className={classes.backBtn} data-color='neutral'>
               <NextLink href={'/' + data.backUrl} prefetch={false}>
                 <ArrowLeftIcon title='Tilbake' fontSize={28} />
                 {data.backText}
diff --git a/apps/storefront/public/img/logos/ks-digital.svg b/apps/storefront/public/img/logos/ks-digital.svg
