feat(post-summary): update to SHINE styles

packages/stacks-docs/_data/post-summary.json

@@ -6,109 +6,233 @@
       "description": "Base parent container for a post summary"
     },
     {
-      "class": ".s-post-summary--stats",
+      "class": ".s-post-summary__answered",
       "applies": ".s-post-summary",
-      "description": "Container for the post summary stats"
+      "description": "Adds the styling necessary for a question with accepted answers"
     },
     {
-      "class": ".s-post-summary--stats-item",
-      "applies": ".s-post-summary--stats",
-      "description": "Individual stat item within the stats container"
+      "class": ".s-post-summary__deleted",
+      "applies": ".s-post-summary",
+      "description": "Adds the styling necessary for a deleted post"
     },
     {
-      "class": ".s-post-summary--stats-item-number",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Container for applying styling to the number of a stat item"
+      "class": ".s-post-summary--sm-hide",
+      "applies": ".s-post-summary",
+      "description": "Hides the stats container on small screens"
     },
     {
-      "class": ".s-post-summary--stats-item-unit",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Container for applying styling to the unit of a stat item"
+      "class": ".s-post-summary--sm-show",
+      "applies": ".s-post-summary",
+      "description": "Shows the stats container on small screens"
     },
     {
-      "class": ".has-answers",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Adds the styling necessary for a question with answers"
+      "class": ".s-post-summary--answers",
+      "applies": ".s-post-summary",
+      "description": "Container for the post summary answers"
     },
     {
-      "class": ".has-accepted-answer",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Adds the styling necessary for a question with accepted answers"
+      "class": ".s-post-summary--answer",
+      "applies": ".s-post-summary--answers",
+      "description": "Container for the post summary answer"
     },
     {
-      "class": ".has-bounty",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Styles the stats item appropriately to display a bounty"
+      "class": ".s-post-summary--answer__accepted",
+      "applies": ".s-post-summary--answer",
+      "description": "Adds the styling necessary for an accepted answer"
     },
     {
-      "class": ".is-warm",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Styles post stats with a warm color"
+      "class": ".s-post-summary--content",
+      "applies": ".s-post-summary",
+      "description": "Container for the post summary content"
     },
     {
-      "class": ".is-hot",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Warmer still, for more popular posts"
+      "class": ".s-post-summary--content-meta",
+      "applies": ".s-post-summary--content",
+      "description": "A container for post meta data, things like tags and user cards."
     },
     {
-      "class": ".is-supernova",
-      "applies": ".s-post-summary--stats-item",
-      "description": "Paired with a fire icon, these are the most popular stats"
+      "class": ".s-post-summary--content-type",
+      "applies": ".s-post-summary--content",
+      "description": "Container for the post summary content type"
     },
     {
-      "class": ".s-post-summary--content",
+      "class": ".s-post-summary--excerpt",
+      "applies": ".s-post-summary--content",
+      "description": "Container for the post summary excerpt"
+    },
+    {
+      "class": ".s-post-summary--stats",
       "applies": ".s-post-summary",
-      "description": "Container for the post summary content"
+      "description": "Container for the post summary stats"
     },
     {
-      "class": ".s-post-summary--content-type",
-      "applies": ".s-post-summary--content",
-      "description": "A container for various content types, eg. How-to guide on Articles"
+      "class": ".s-post-summary--stats-answers",
+      "applies": ".s-post-summary--stats",
+      "description": "Container for the post summary answers"
     },
     {
-      "class": ".s-post-summary--content-title",
-      "applies": ".s-post-summary--content",
-      "description": "Post title styling"
+      "class": ".s-post-summary--stats-bounty",
+      "applies": ".s-post-summary--stats",
+      "description": "Container for the post summary bounty"
     },
     {
-      "class": ".s-post-summary--content-excerpt",
-      "applies": ".s-post-summary--content",
-      "description": "An optional content excerpt truncated at 2 lines."
+      "class": ".s-post-summary--stats-item",
+      "applies": ".s-post-summary--stats",
+      "description": "A genericcontainer for views, comments, read time, and other meta data which prepends a separator icon."
     },
     {
-      "class": ".s-post-summary--content-excerpt__sm",
-      "applies": ".s-post-summary--content-excerpt",
-      "description": "An optional content excerpt truncated at 1 line."
+      "class": ".s-post-summary--stats-votes",
+      "applies": ".s-post-summary--stats",
+      "description": "Container for the post summary votes"
     },
     {
-      "class": ".s-post-summary--content-excerpt__md",
-      "applies": ".s-post-summary--content-excerpt",
-      "description": "An optional content excerpt truncated at 3 lines."
+      "class": ".s-post-summary--tags",
+      "applies": ".s-post-summary",
+      "description": "Container for the post summary tags"
     },
     {
-      "class": ".s-post-summary--answer",
-      "applies": ".s-post-summary--content",
-      "description": "Adds blockquote styling and spacing for answer previews"
+      "class": ".s-post-summary--title",
+      "applies": ".s-post-summary",
+      "description": "Container for the post summary title"
     },
     {
-      "class": ".s-post-summary--answer-excerpt",
-      "applies": ".s-post-summary--content",
-      "description": "Provides padding, and truncation to 4 lines."
+      "class": ".s-post-summary--title-link",
+      "applies": ".s-post-summary--title",
+      "description": "Link styling for the post summary title"
     },
     {
-      "class": ".s-post-summary--content-menu-button",
-      "applies": ".s-post-summary--content",
-      "description": "An optional button for displaying a post-specific menu."
+      "class": ".s-post-summary--title-icon",
+      "applies": ".s-post-summary--title",
+      "description": "Icon styling for the post summary title"
+    }
+  ],
+  "base": [
+    {},
+    {
+      "answered": true
     },
     {
-      "class": ".s-post-summary--meta",
-      "applies": ".s-post-summary--content",
-      "description": "A container for post meta data, things like tags and user cards."
+      "bounty": 50
+    }
+  ],
+  "small": [
+    {
+      "excerptLines": 2
     },
     {
-      "class": ".s-post-summary--meta-tags",
-      "applies": ".s-post-summary--meta",
-      "description": "A container for tags and other taxonomy."
+      "answered": true,
+      "excerptLines": 2
+    },
+    {
+      "bounty": 50,
+      "excerptLines": 2
+    }
+  ],
+  "ignored":     {
+    "tags": [
+      {
+        "text": "retrieval-augmented-generation",
+        "ignored": true
+      },
+      "langchain",
+      "llm",
+      "vector-database",
+      "ai"
+    ],
+    "answered": true,
+    "bounty": 50
+  },
+  "watched": {
+    "tags": [
+      {
+        "text": "retrieval-augmented-generation",
+        "watched": true
+      },
+      "langchain",
+      "llm",
+      "vector-database",
+      "ai"
+    ],
+    "answered": true
+  },
+  "deleted": {
+    "answered": true,
+    "modifier": "s-post-summary__deleted"
+  },
+  "states": [
+    {
+      "badge": {
+        "class": "s-badge__info",
+        "text": "Draft",
+        "icon": "Compose"
+      }
+    },
+    {
+      "badge": {
+        "class": "s-badge__warning",
+        "text": "Review",
+        "icon": "Eye"
+      }
+    },
+    {
+      "badge": {
+        "class": "s-badge__danger",
+        "text": "Closed",
+        "icon": "Flag"
+      }
+    },
+    {
+      "badge": {
+        "text": "Archived",
+        "icon": "Document"
+      }
+    },
+    {
+      "badge": {
+        "class": "s-badge__tonal",
+        "text": "Pinned",
+        "icon": "Key"
+      }
+    }
+  ],
+  "contentTypes": [
+    {
+      "type": "Announcement"
+    },
+    {
+      "type": "How to guide"
+    },
+    {
+      "type": "Knowledge article"
+    },
+    {
+      "type": "Policy"
+    }
+  ],
+  "excerptSizes": [
+    {
+      "excerptLines": 0
+    },
+    {
+      "excerptLines": 1
+    },
+    {
+      "excerptLines": 2
+    },
+    {
+      "excerptLines": 3
+    }
+  ],
+  "answered": [
+    {
+      "answered": true,
+      "answerCount": 2,
+      "answers": [
+        {
+          "accepted": true
+        },
+        {}
+      ]
     }
   ]
-}
+}

packages/stacks-docs/_data/site-navigation.json

@@ -321,7 +321,8 @@
             },
             {
               "title": "Post summary",
-              "url": "/product/components/post-summary/"
+              "url": "/product/components/post-summary/",
+              "new": true
             },
             {
               "title": "Progress bars",

packages/stacks-docs/_includes/layouts/page.html

@@ -208,7 +208,7 @@ <h1 class="fs-display1 mb0">{{ title }}</h1>
         <!-- Page table of contents -->
         {% if hide-menu != true %}
             <div class="
-                as-start fl-shrink0 fw-nowrap overflow-y-auto pl16 py24 ps-sticky ws2 z-popover
+                docs-toc as-start fl-shrink0 fw-nowrap overflow-y-auto pl16 py24 ps-sticky ws2 z-base
                 md:w25 sm:d-none print:d-none
             ">
                 <nav class="s-navigation s-navigation__vertical js-toc">