Remove Beta Bits (#1594)

* updating sidebar's version info

* removing beta badge
* updating tooltip + version number decorator for official launch

* removing beta notice from docs landing view

* removing beta from Installation docs

packages/webawesome/docs/_includes/sidebar.njk

@@ -410,12 +410,12 @@
 <div class="wa-stack wa-gap-xl" id="colophon">
   <div class="wa-stack wa-gap-xs">
     {% include "logo-simple.njk" %}
-    <div class="wa-cluster wa-gap-xs">
-      <h2 class="wa-heading-xs">Web Awesome</h2>
-      <wa-badge id="version-beta-badge" variant="orange" appearance="filled" style="font-size: var(--wa-font-size-2xs);">Beta</wa-badge>
-      <wa-tooltip for="version-beta-badge" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly made Awesome&hellip; and possible dragons</wa-tooltip>
-    </div>
-    <p class="wa-caption-s">Version {{ package.version }}</p>
+    <h2 class="wa-heading-xs">Web Awesome</h2>
+    <p class="wa-caption-s wa-cluster wa-gap-xs">
+      Version {{ package.version }}
+      <wa-icon id="version-icon-info" family="duotone" variant="regular" name="party-horn"></wa-icon>
+      <wa-tooltip for="version-icon-info" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly launched Awesome and no wa-dragons</wa-tooltip>
+    </p>
     <p class="wa-caption-s">&copy; Fonticons, Inc.</p>
   </div>
 

packages/webawesome/docs/assets/styles/docs.css

@@ -205,6 +205,12 @@ wa-page > header {
       }
     }
   }
+
+  #version-icon-info {
+    --secondary-opacity: 1;
+    --secondary-color: var(--wa-brand-orange);
+    padding-inline: var(--wa-space-xs);
+  }
 }
 
 wa-button.delete {

packages/webawesome/docs/docs/index.md

@@ -4,7 +4,7 @@ description: Choose the installation method that works best for you.
 layout: page-outline
 ---
 
-Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing).
+Welcome to Web Awesome! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing).
 
 - [Report a bug](https://github.com/shoelace-style/webawesome/issues)
 - [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
@@ -212,4 +212,4 @@ declare module 'react' {
 :::details React 18 and below
 React 18 and below have [poor support](https://custom-elements-everywhere.com/#react) for custom elements. For legacy versions of React, we provide React wrappers for every component. You can find the import instructions by selecting the _React_ tab from the _Importing_ section of each
 component's documentation.
-:::
+:::

packages/webawesome/docs/index.md

@@ -182,25 +182,6 @@ layout: page
       }
     }
   }
-  .beta-notice {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    & > * {
-      flex-basis: calc(((30ch * 2 + 1rem) - 100%) * 999);
-    }
-    & > * {
-      flex-grow: 2;
-    }
-    & > * + * {
-      flex-grow: 1;
-    }
-    & wa-callout,
-    & wa-button::part(base) {
-      height: 100%;
-      width: 100%;
-    }
-  }
   wa-button.tile::part(base) {
     border-color: var(--wa-color-surface-border);
     border-radius: 0.75rem;
@@ -280,33 +261,18 @@ layout: page
 </div>
 
 <div class="home-wrapper">
-  <div class="beta-notice">
-    <div>
-      <wa-callout variant="brand">
-        <div class="wa-stack">
-          <div class="wa-cluster icon-heading">
-            <wa-icon name="sparkles" variant="regular"></wa-icon>
-            <h3>Bigger and beta than ever</h3>
-          </div>
-          <p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
+  <wa-button href="/docs/" appearance="outlined" class="tile">
+    <div class="wa-stack">
+      <div class="wa-split">
+        <div class="wa-cluster icon-heading">
+          <wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
+          <h3>Get started</h3>
         </div>
-      </wa-callout>
+        <wa-icon name="arrow-right"></wa-icon>
+      </div>
+      <p>Check out our installation guide to start building with Web Awesome.</p>
     </div>
-    <div>
-      <wa-button href="/docs/" appearance="outlined" class="tile">
-        <div class="wa-stack">
-          <div class="wa-split">
-            <div class="wa-cluster icon-heading">
-              <wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
-              <h3>Get started</h3>
-            </div>
-            <wa-icon name="arrow-right"></wa-icon>
-          </div>
-          <p>Check out our installation guide to start building with Web Awesome.</p>
-        </div>
-      </wa-button>
-    </div>
-  </div>
+  </wa-button>
   <wa-divider></wa-divider>
   <div class="summary">
     <h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>