chore(storefront): add banner about version on next site (#2346)

resolves #2344
digdir · Aug 29, 2024 · 803744e · 803744e
1 parent 49af0ef
commit 803744e
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 2 deletions.
diff --git a/apps/storefront/app/(frontpage)/layout.module.css b/apps/storefront/app/(frontpage)/layout.module.css
@@ -61,7 +61,7 @@
 
 .cluster {
   position: absolute;
-  z-index: 0;
+  z-index: 3;
 }
 
 .cluster1,

diff --git a/apps/storefront/app/(frontpage)/layout.tsx b/apps/storefront/app/(frontpage)/layout.tsx
@@ -74,7 +74,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         >
           <Container className={classes.container}>
             <div className={classes.text}>
-              <div className={classes.betaTag}>Beta</div>
+              <div className={classes.betaTag}>Next</div>
               <Heading size='lg'>
                 Designsystemet hjelper deg å lage gode digitale tjenester
               </Heading>

diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
@@ -6,6 +6,7 @@ import { Header } from '@repo/components';
 import { Analytics } from '@vercel/analytics/react';
 import type { Metadata } from 'next';
 
+import { VersionBanner } from '@components';
 import { Footer } from '../components/Footer/Footer';
 
 export const metadata: Metadata = {
@@ -57,6 +58,7 @@ export default function RootLayout({
     <html lang='en'>
       <body>
         <div className='root'>
+          <VersionBanner />
           <Header menu={menu} />
           {children}
           <Footer />

diff --git a/apps/storefront/components/VersionBanner/VersionBanner.module.css b/apps/storefront/components/VersionBanner/VersionBanner.module.css
@@ -0,0 +1,8 @@
+.banner {
+  background: var(--ds-color-brand2-surface-hover);
+  color: var(--ds-color-neutral-text-default);
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: var(--ds-sizing-12);
+}
diff --git a/apps/storefront/components/VersionBanner/VersionBanner.tsx b/apps/storefront/components/VersionBanner/VersionBanner.tsx
@@ -0,0 +1,16 @@
+import cl from 'clsx/lite';
+import React from 'react';
+import classes from './VersionBanner.module.css';
+
+function VersionBanner() {
+  return (
+    <a
+      href='https://v0.designsystemet.no'
+      className={cl(classes.banner, 'ds-focus')}
+    >
+      Gå til dokumentasjon for v0.63
+    </a>
+  );
+}
+
+export { VersionBanner };
diff --git a/apps/storefront/components/index.ts b/apps/storefront/components/index.ts
@@ -17,3 +17,4 @@ export { TokenList } from './Tokens';
 export { Image } from './Image';
 export { ComponentCard } from './ComponentCard';
 export { GithubLink } from './GithubLink/GithubLink';
+export { VersionBanner } from './VersionBanner/VersionBanner';