Docs: Add Planned Features to Navigation (#1539)

* adding plannedBadge() macro + planned-badge.njk

* adding planned features to sidebar.njk

* adding .icon-shrink utility to utils.css

* using icon-shrink on sidebar's experimental iconography

* revising proBadge macro

* defining params in a more clear manner
* adding shrink param to visually reduce badge size

* setting proBadge to shrink in sidebar.njk

* addressing PR feedback

* reverting proBadge shrink param

* revisiting pro + sidebar wa-badge styling

* removing text-transform from pro badge
* scaling down sidebar-based wa-badges using 1 step below
--wa-font-size-scale

packages/webawesome/docs/_includes/planned-badge.njk

@@ -0,0 +1,5 @@
+{% macro plannedBadge(plannedBadgeDescription, plannedBadgeId) %}
+  {% set badgeId = plannedBadgeId or ("planned-badge-" + ("" | uniqueId(8))) %}
+  <wa-badge appearance="filled" variant="neutral" pill class="planned" id="{{ badgeId }}">Planned</wa-badge>
+  <wa-tooltip for="{{ badgeId }}">{{ plannedBadgeDescription or "This is a planned feature" }}</wa-tooltip>
+{% endmacro %}

packages/webawesome/docs/_includes/pro-badge.njk

@@ -1,5 +1,6 @@
-{% macro proBadge(proBadgeDescription, proBadgeId) %}
-  {% set badgeId = proBadgeId or ("pro-badge-" + ("" | uniqueId(8))) %}
+{% macro proBadge(params) %}
+  {% set description = params.description or "This requires access to Web Awesome Pro" %}
+  {% set badgeId = params.id or ("pro-badge-" + ("" | uniqueId(8))) %}
   <wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}">Pro</wa-badge>
-  <wa-tooltip for="{{ badgeId }}">{{ proBadgeDescription or "This requires access to Web Awesome Pro" }}</wa-tooltip>
+  <wa-tooltip for="{{ badgeId }}">{{ description }}</wa-tooltip>
 {% endmacro %}

packages/webawesome/docs/_includes/sidebar.njk

@@ -1,6 +1,7 @@
 {# Search #}
 {% include "search-trigger-button.njk" %}
 {% from "pro-badge.njk" import proBadge %}
+{% from "planned-badge.njk" import plannedBadge %}
 
 {# Getting started #}
 <h2>Getting Started</h2>
@@ -40,7 +41,7 @@
     <li>
       <span class="wa-split">
         <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
-          Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
+          Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
         </a>
         {{ proBadge() }}
       </span>
@@ -62,26 +63,30 @@
     <li>
       <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
         Carousel
-        <wa-icon name="flask" aria-hidden="true"></wa-icon>
+        <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
       </a>
       <ul>
         <li>
           <a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
             Carousel Item
-            <wa-icon name="flask" aria-hidden="true"></wa-icon>
+            <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
           </a>
         </li>
       </ul>
     </li>
+    <li><span class="is-planned wa-split">Charts <a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/checkbox/">Checkbox</a></li>
     <li><a href="/docs/components/color-picker/">Color Picker</a></li>
+    <li><span class="is-planned wa-split">Combobox <a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/comparison/">Comparison</a></li>
     <li>
       <a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
         Copy Button
-        <wa-icon name="flask" aria-hidden="true"></wa-icon>
+        <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
       </a>
     </li>
+    <li><span class="is-planned wa-split">Data Grid <a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
+    <li><span class="is-planned wa-split">Datepicker <a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
     <li><a href="/docs/components/details/">Details</a></li>
     <li><a href="/docs/components/dialog/">Dialog</a></li>
     <li><a href="/docs/components/divider/">Divider</a></li>
@@ -181,7 +186,7 @@
     <li>
       <span class="wa-split">
         <a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
-          Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
+          Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
         </a>
         {{ proBadge() }}
       </span>
@@ -375,7 +380,7 @@
   <li>
     <span class="wa-split">
       <a href="/themer" data-turbo="false">Theme Builder</a>
-      {{ proBadge("This requires an active Web Awesome Pro subscription") }}
+      {{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
     </span>
   </li>
 </ul>

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

@@ -181,6 +181,12 @@ wa-page > header {
     }
   }
 
+  li wa-badge {
+    /* adding 1 scale below --wa-font-size-2xs to handle badge proportions in sidebar nav */
+    --font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
+    font-size: var(--font-size-3xs);
+  }
+
   wa-details {
     --show-duration: 0;
     --hide-duration: 0;
@@ -218,6 +224,11 @@ wa-button.delete {
   }
 }
 
+/* planned sidebar item */
+.is-planned {
+  color: var(--wa-color-text-quiet);
+}
+
 #sidebar-close-button {
   display: none;
 }

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

@@ -73,7 +73,17 @@
     color: white;
     background-color: var(--wa-brand-orange);
     border-color: var(--wa-brand-orange);
-    text-transform: uppercase;
+
+    + wa-tooltip {
+      font-size: var(--wa-font-size-xs);
+      --max-width: unset;
+    }
+  }
+
+  /* planned badge */
+  wa-badge.planned {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    color: var(--wa-color-neutral-on-quiet);
 
     + wa-tooltip {
       font-size: var(--wa-font-size-xs);
@@ -145,5 +155,10 @@
   wa-icon.icon-embiggen {
     font-size: round(1.125em, 1px);
   }
+
+  /* decreasing visual size of icons in certain contexts (such as in sidebar nav) */
+  wa-icon.icon-shrink {
+    font-size: round(0.875em, 1px);
+  }
   /* #endregion */
 }