feat(metabar): subtle indicators

Author: avivkeller

src/generators/web/ui/components/MetaBar/index.jsx

@@ -1,5 +1,4 @@
 import { CodeBracketIcon, DocumentIcon } from '@heroicons/react/24/outline';
-import Badge from '@node-core/ui-components/Common/Badge';
 import MetaBar from '@node-core/ui-components/Containers/MetaBar';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 
@@ -12,16 +11,19 @@ const iconMap = {
 
 /**
  * @typedef MetaBarProps
- * @property {Array<import('@vcarl/remark-headings').Heading & { stability: string }>} headings - Array of page headings for table of contents
+ * @property {Array<import('@vcarl/remark-headings').Heading & { stability: number }>} headings - Array of page headings for table of contents
  * @property {string} addedIn - Version or date when feature was added
  * @property {string} readingTime - Estimated reading time for the page
  * @property {Array<[string, string]>} viewAs - Array of [title, path] tuples for view options
  * @property {string} editThisPage - URL for editing the current page
  */
 
-const STABILITY_KINDS = ['error', 'warning', null, 'info'];
-const STABILITY_LABELS = ['D', 'E', null, 'L'];
-
+const STABILITY_CLASS_MAP = [
+  styles.deprecated,
+  styles.experimental,
+  undefined,
+  styles.legacy,
+];
 /**
  * MetaBar component that displays table of contents and page metadata
  * @param {MetaBarProps} props - Component props
@@ -38,21 +40,7 @@ export default ({
     headings={{
       items: headings.map(({ slug, value, stability, ...heading }) => ({
         ...heading,
-        value:
-          stability !== 2 ? (
-            <>
-              {value}
-              <Badge
-                size="small"
-                className={styles.badge}
-                kind={STABILITY_KINDS[stability]}
-              >
-                {STABILITY_LABELS[stability]}
-              </Badge>
-            </>
-          ) : (
-            value
-          ),
+        value: <span className={STABILITY_CLASS_MAP[stability]}>{value}</span>,
         data: { id: slug },
       })),
     }}

src/generators/web/ui/components/MetaBar/index.module.css

@@ -5,7 +5,29 @@
   margin-right: 0.25rem;
 }
 
-.badge {
-  display: inline-block;
-  margin-left: 0.25rem;
+:has(> .deprecated),
+:has(> .legacy) {
+  text-decoration-line: line-through !important;
+  text-decoration-style: dashed;
+  text-decoration-thickness: 2px;
+
+  > span {
+    opacity: 0.7;
+  }
+}
+
+:has(> .deprecated) {
+  text-decoration-color: var(--color-danger-600);
+}
+
+:has(> .legacy) {
+  text-decoration-color: var(--color-info-600);
+}
+
+:has(> .experimental) {
+  text-decoration-line: underline !important;
+  text-decoration-style: dashed;
+  text-decoration-color: var(--color-warning-600);
+  text-underline-offset: 3px;
+  font-style: italic;
 }