[showcase] Add warning message for Beta versions

packages/showcase/src/app/app.component.html

@@ -107,24 +107,35 @@
   }
 
   <main>
-    <article>
-      @if (selectedLink().id !== "/" && !versioning.isLatestVersion()) {
-        <blockquote class="blockquote-warning version-no-longer-maintained">
-          <p>
-            This is documentation for Mercury
-            <span class="body-semi-bold-m">{{ libraryVersion }}</span
-            >, which is no longer actively maintained.
-          </p>
+    @if (selectedLink().id !== "/" && !versioning.isLatestVersion()) {
+      <blockquote class="blockquote-warning version-no-longer-maintained">
+        <div class="blockquote-warning__container">
+          @if (versioning.isBetaVersion) {
+            <p>
+              This is the documentation for the upcoming
+              <span class="body-semi-bold-m"
+                >Mercury {{ libraryVersionWithoutBeta }}</span
+              >
+              version, which is currently in Beta.
+            </p>
+          } @else {
+            <p>
+              This is the documentation for Mercury
+              <span class="body-semi-bold-m">{{ libraryVersion }}</span
+              >, which is no longer actively maintained.
+            </p>
+          }
 
           <p>
             For up-to-date documentation, see the
             <a class="body-semi-bold-m" href="/"
               >latest Mercury version ({{ versioning.latestVersion() }})</a
             >.
           </p>
-        </blockquote>
-      }
-
+        </div>
+      </blockquote>
+    }
+    <article>
       <router-outlet style="display: contents" />
     </article>
   </main>

packages/showcase/src/app/app.component.ts

@@ -100,6 +100,7 @@ export class AppComponent {
   ];
 
   libraryVersion = `v${mercuryVersion}`;
+  libraryVersionWithoutBeta = `v${mercuryVersion.replace(/-beta.*/, "")}`;
 
   constructor() {
     this.router.events.subscribe(event => {

packages/showcase/src/app/app.scss

@@ -110,6 +110,7 @@ main {
 }
 
 .version-no-longer-maintained {
-  justify-self: center;
   margin-block-end: 48px;
+  margin-block-start: -40px;
+  text-align: center;
 }

packages/showcase/src/services/versioning.service.ts

@@ -19,6 +19,9 @@ const checkIfCurrentVersionIsTheLatest = (
   return latestReleasedVersion === mercuryVersion;
 };
 
+const checkIfCurrentVersionIsBeta = (): boolean =>
+  mercuryVersion.includes("beta") || mercuryVersion.includes("next");
+
 @Injectable({ providedIn: "root" })
 export class VersioningService {
   platform = inject(PLATFORM_ID);
@@ -32,6 +35,8 @@ export class VersioningService {
     checkIfCurrentVersionIsTheLatest(this.latestVersion())
   );
 
+  isBetaVersion = checkIfCurrentVersionIsBeta();
+
   constructor() {
     if (isPlatformBrowser(this.platform)) {
       // fetch("/services/versions")

packages/showcase/src/styles.scss

@@ -106,14 +106,26 @@ ch-code {
 }
 
 .blockquote-warning {
-  padding: 16px;
+  display: grid;
+  justify-content: center;
+  padding: 6px;
   margin: 0;
-  margin-block-start: 16px;
   border-inline-start: 2px solid var(--color-border-neutral-default);
   background-color: var(--mer-color__message-yellow--200);
-  border-radius: 4px;
   color: var(--mer-text__on-message);
   line-height: 1.5;
+
+  &__container {
+    display: grid;
+    max-inline-size: var(--main-content-max-inline-size);
+    margin-inline: var(--main-content-margin-inline);
+    text-align: center;
+    gap: 4px;
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .hyperlink {