[WIP] docs: standardize docs class table

packages/stacks-docs/_data/components/activity-indicator.json

@@ -1,8 +1,7 @@
 {
-  "indicator": [
+  "classes": [
     {
       "class": ".s-activity-indicator",
-      "applies": "N/A",
       "description": "Base activity indicator element with theme-aware coloring"
     },
     {
@@ -25,5 +24,7 @@
       "applies": ".s-activity-indicator",
       "description": "Styles the activity indicator in a small size"
     }
-  ]
+  ],
+  "examples": ["", "3", "12", "370", "new"],
+  "variants": ["success", "warning", "danger"]
 }

packages/stacks-docs/_data/components/avatars-component.json → packages/stacks-docs/_data/components/avatars.json

@@ -2,27 +2,26 @@
   "classes": [
     {
       "class": ".s-avatar",
-      "applies": "N/A",
       "description": "The base avatar at 16px."
     },
     {
       "class": ".s-avatar--image",
-      "applies": "N/A",
+      "parent": ".s-avatar",
       "description": "A child element for displaying a user’s profile image."
     },
     {
       "class": ".s-avatar--letter",
-      "applies": "N/A",
+      "parent": ".s-avatar",
       "description": "A child element for displaying an abbreviated Team name."
     },
     {
       "class": ".s-avatar--badge",
-      "applies": "N/A",
+      "parent": ".s-avatar",
       "description": "A child element that provides positioning to the shield on Team avatars."
     },
     {
       "class": ".s-avatar--indicator",
-      "applies": "N/A",
+      "parent": ".s-avatar",
       "description": "A child element that provides positioning to the activity indicator on user's avatars."
     },
     {
@@ -55,5 +54,7 @@
       "applies": ".s-avatar",
       "description": "Adds the proper border radius and scaling at 128px."
     }
-  ]
+  ],
+  "examples": [16, 24, 32, 48, 64, 96, 128],
+  "teamBgs": ["blue-400", "theme-primary", "png"]
 }

packages/stacks-docs/_data/components/badges.json

@@ -1,27 +1,103 @@
 {
+    "classes": [
+        {
+            "class": ".s-badge",
+            "description": "Base badge element."
+        },
+        {
+            "class": ".s-badge__gold",
+            "applies": ".s-badge",
+            "description": "Badge indicating a gold award."
+        },
+        {
+            "class": ".s-badge__silver",
+            "applies": ".s-badge",
+            "description": "Badge indicating a silver award."
+        },
+        {
+            "class": ".s-badge__bronze",
+            "applies": ".s-badge",
+            "description": "Badge indicating a bronze award."
+        },
+        {
+            "class": ".s-badge__important",
+            "applies": ".s-badge",
+            "description": "Applies important styling to the badge."
+        },
+        {
+            "class": ".s-badge__squared",
+            "applies": ".s-badge",
+            "description": "Applies a background color to the badge's icon."
+        },
+        {
+            "class": ".s-badge__info",
+            "applies": ".s-badge",
+            "description": "Badge indicating an info status."
+        },
+        {
+            "class": ".s-badge__warning",
+            "applies": ".s-badge",
+            "description": "Badge indicating a warning status."
+        },
+        {
+            "class": ".s-badge__danger",
+            "applies": ".s-badge",
+            "description": "Badge indicating a danger status."
+        },
+        {
+            "class": ".s-badge__critical",
+            "applies": ".s-badge",
+            "description": "Badge indicating a critical status."
+        },
+        {
+            "class": ".s-badge__tonal",
+            "applies": ".s-badge",
+            "description": "Badge indicating a tonal status."
+        },
+        {
+            "class": ".s-badge__success",
+            "applies": ".s-badge",
+            "description": "Badge indicating a success status."
+        },
+        {
+            "class": ".s-badge__featured",
+            "applies": ".s-badge",
+            "description": "Badge indicating a featured status."
+        },
+        {
+            "class": ".s-badge__sm",
+            "applies": ".s-badge",
+            "description": "Applies a small size to the badge."
+        },
+        {
+            "class": ".s-badge__lg",
+            "applies": ".s-badge",
+            "description": "Applies a large size to the badge."
+        }
+    ],
     "achievement": [
         {
             "title": "Achievement",
             "classes": [
                 {
                     "title": "Gold",
-                    "class": "s-bling__gold",
+                    "bling": "gold",
                     "label": "Great Question",
                     "html": "s-badge",
                     "repType": "gold",
                     "description": "Gold badge achievement that a user earns within a community."
                 },
                 {
                     "title": "Silver",
-                    "class": "s-bling__silver",
+                    "bling": "silver",
                     "label": "Favorite Question",
                     "html": "s-badge",
                     "repType": "silver",
                     "description": "Silver badge achievement that a user earns within a community."
                 },
                 {
                     "title": "Bronze",
-                    "class": "s-bling__bronze",
+                    "bling": "bronze",
                     "label": "Altruist",
                     "html": "s-badge",
                     "repType": "bronze",
@@ -162,26 +238,26 @@
                 {
                     "title": "Warning",
                     "icon": "Notification",
-                    "html": "s-badge s-badge__squared s-badge__warning s-badge__important",
+                    "classes": "s-badge__squared s-badge__warning s-badge__important",
                     "label": "Needs attention",
                     "description": "Warning badge styling in squared variant with important styling."
                 },
                 {
                     "title": "Danger",
                     "icon": "VoteUp",
-                    "html": "s-badge s-badge__danger s-badge__important",
+                    "classes": "s-badge__danger s-badge__important",
                     "label": "Ending soon",
                     "description": "Danger badge styling with important styling."
                 },
                 {
                     "title": "Critical",
-                    "html": "s-badge s-badge__critical s-badge__important",
+                    "classes": "s-badge__critical s-badge__important",
                     "label": "Spam",
                     "description": "Critical badge styling with important styling."
                 },
                 {
                     "title": "Info",
-                    "html": "s-badge s-badge__info s-badge__important",
+                    "classes": "s-badge__info s-badge__important",
                     "label": "+100",
                     "description": "Info badge styling in small size with important styling."
                 }
@@ -194,43 +270,37 @@
             "classes": [
                 {
                     "title": "Admin",
-                    "class": "s-badge__admin",
-                    "html": "s-badge s-badge__admin",
+                    "modifier": "admin",
                     "label": "Admin",
                     "description": "Badge indicating user is an admin."
                 },
                 {
                     "title": "Moderator",
-                    "class": "s-badge__moderator",
-                    "html": "s-badge s-badge__moderator",
+                    "modifier": "moderator",
                     "label": "Moderator",
                     "description": "Badge indicating user is an moderator."
                 },
                 {
                     "title": "Staff",
-                    "class": "s-badge__staff",
-                    "html": "s-badge s-badge__staff",
+                    "modifier": "staff",
                     "label": "Staff",
                     "description": "Badge indicating user is staff."
                 },
                 {
                     "title": "AI",
-                    "class": "s-badge__ai",
-                    "html": "s-badge s-badge__ai",
+                    "modifier": "ai",
                     "label": "AI",
                     "description": "Badge indicating content is AI generated."
                 },
                 {
                     "title": "Bot",
-                    "class": "s-badge__bot",
-                    "html": "s-badge s-badge__bot",
+                    "modifier": "bot",
                     "label": "Bot",
                     "description": "Badge indicating user is a bot."
                 },
                 {
                     "title": "New",
-                    "class": "s-badge__new",
-                    "html": "s-badge s-badge__new",
+                    "modifier": "new",
                     "label": "New",
                     "description": "Badge indicating new user"
                 }
@@ -243,21 +313,19 @@
             "classes": [
                 {
                     "title": "Small",
-                    "class": "s-badge__sm",
-                    "html": "s-badge s-badge__sm s-badge__success",
+                    "modifier": "sm",
                     "label": "Small",
                     "description": "The badge in small size."
                 },
                 {
                     "title": "Default",
-                    "html": "s-badge s-badge__warning",
+                    "modifier": "",
                     "label": "Default",
                     "description": "The badge in default size."
                 },
                 {
                     "title": "Large",
-                    "class": "s-badge__lg",
-                    "html": "s-badge s-badge__lg s-badge__danger",
+                    "modifier": "lg",
                     "label": "Large",
                     "description": "The badge in large size."
                 }

packages/stacks-docs/_data/components/banners.json

@@ -1,19 +1,23 @@
 {
-  "system": [
+  "classes": [
     {
       "class": ".s-banner",
-      "applies": "N/A",
       "description": "Base banner parent class. This defaults to a system banner style."
     },
+    {
+      "class": ".s-banner--actions",
+      "parent": ".s-banner",
+      "description": "Container styling for banner actions including the dismiss button."
+    },
     {
       "class": ".s-banner--dismiss",
-      "applies": ".s-banner",
+      "parent": ".s-banner",
       "description": "Applies to child button element within the banner to position it appropriately."
     },
     {
-      "class": ".s-banner--actions",
+      "class": ".s-banner__important",
       "applies": ".s-banner",
-      "description": "Container styling for banner actions including the dismiss button."
+      "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user."
     },
     {
       "class": ".s-banner__info",
@@ -46,9 +50,9 @@
       "description": "Applies activity (pink) visual styles."
     },
     {
-      "class": ".s-banner__important",
+      "class": ".is-pinned",
       "applies": ".s-banner",
-      "description": "Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user."
+      "description": "Pins the banner to the top of the browser window."
     }
   ]
 }

packages/stacks-docs/_data/atomic/bling.json → packages/stacks-docs/_data/components/bling.json

@@ -1,4 +1,50 @@
 {
+  "classes": [
+    {
+      "class": ".s-bling",
+      "description": "Base bling element."
+    },
+    {
+      "class": ".s-bling__gold",
+      "applies": ".s-bling",
+      "description": "Gold bling element."
+    },
+    {
+      "class": ".s-bling__silver",
+      "applies": ".s-bling",
+      "description": "Silver bling element."
+    },
+    {
+      "class": ".s-bling__bronze",
+      "applies": ".s-bling",
+      "description": "Bronze bling element."
+    },
+    {
+      "class": ".s-bling__activity",
+      "applies": ".s-bling",
+      "description": "Activity bling element."
+    },
+    {
+      "class": ".s-bling__filled",
+      "applies": ".s-bling",
+      "description": "Filled bling element."
+    },
+    {
+      "class": ".s-bling__rep",
+      "applies": ".s-bling",
+      "description": "Reputation bling element."
+    },
+    {
+      "class": ".s-bling__sm",
+      "applies": ".s-bling",
+      "description": "Small bling element."
+    },
+    {
+      "class": ".s-bling__lg",
+      "applies": ".s-bling",
+      "description": "Large bling element."
+    }
+  ],
   "title": "Bling",
   "variants": ["default", "rep", "activity", "gold", "silver", "bronze"],
   "sizes": ["sm", "default", "lg"],

packages/stacks-docs/_data/components/breadcrumbs.json

@@ -2,22 +2,21 @@
   "classes": [
     {
       "class": ".s-breadcrumbs",
-      "applies": "N/A",
       "description": "Base parent container for breadcrumbs"
     },
     {
       "class": ".s-breadcrumbs--item",
-      "applies": ".s-breadcrumbs",
+      "parent": ".s-breadcrumbs",
       "description": "Individual breadcrumb element containing a link and a divider"
     },
     {
       "class": ".s-breadcrumbs--link",
-      "applies": ".s-breadcrumbs--item",
+      "parent": ".s-breadcrumbs--item",
       "description": "Breadcrumb link element"
     },
     {
       "class": ".s-breadcrumbs--divider",
-      "applies": ".s-breadcrumbs--item",
+      "parent": ".s-breadcrumbs--item",
       "description": "Breadcrumb divider element"
     }
   ]