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

Barsnes · web-flow · commit 803744ea9e53 · 2024-08-29T12:25:18.000+02:00
resolves #2344
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';

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@`
`61`	`61`
`62`	`62`	`.cluster {`
`63`	`63`	`position: absolute;`
`64`		`- z-index: 0;`
	`64`	`+ z-index: 3;`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`.cluster1,`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {`
`74`	`74`	`>`
`75`	`75`	`<Container className={classes.container}>`
`76`	`76`	`<div className={classes.text}>`
`77`		`- <div className={classes.betaTag}>Beta</div>`
	`77`	`+ <div className={classes.betaTag}>Next</div>`
`78`	`78`	`<Heading size='lg'>`
`79`	`79`	`Designsystemet hjelper deg å lage gode digitale tjenester`
`80`	`80`	`</Heading>`