Merge branch 'main' into mercury/automate-tokens

Author: bsastregx

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

@@ -110,11 +110,21 @@
     @if (selectedLink().id !== "/" && !versioning.isLatestVersion()) {
       <blockquote class="blockquote-warning version-no-longer-maintained">
         <div class="blockquote-warning__container">
-          <p>
-            This is documentation for Mercury
-            <span class="body-semi-bold-m">{{ libraryVersion }}</span
-            >, which is no longer actively maintained.
-          </p>
+          @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

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

@@ -125,4 +125,5 @@ main {
   margin-block-start: calc(
     #{$mainPaddingBlockStart} * -1
   ); // makes the warning stick to the top
+  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

@@ -110,23 +110,24 @@ ch-code {
 }
 
 .blockquote-warning {
-  // TODO: Use Mercury "state message" class when available
-  padding: var(--size-6);
-  margin: 0;
   display: grid;
   justify-content: center;
-
-  border-inline-start: var(--size-2) solid var(--color-border-neutral-default);
+  padding: var(--size-6);
+  margin: 0;
   background-color: var(--color-accent-warning-contrast);
-
   color: var(--mer-text__on-message);
   line-height: var(--line-height-spacious);
-  border-inline-start: none;
 
   &__container {
+    display: grid;
     max-inline-size: var(--main-content-max-inline-size);
     margin-inline: var(--main-content-margin-inline);
     text-align: center;
+    gap: var(--size-4);
+
+    a:hover {
+      text-decoration: underline;
+    }
   }
 }