DEV: Use the glimmer header in the Styleguide (#28427)

app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs

@@ -439,6 +439,8 @@ export default class GlimmerSiteHeader extends Component {
         @showCreateAccount={{@showCreateAccount}}
         @showLogin={{@showLogin}}
         @animateMenu={{this.animateMenu}}
+        @topicInfo={{this.header.topicInfo}}
+        @topicInfoVisible={{this.header.topicInfoVisible}}
       />
     </div>
   </template>

app/assets/javascripts/discourse/app/components/header.gjs

@@ -255,11 +255,14 @@ export default class GlimmerHeader extends Component {
           @sidebarEnabled={{@sidebarEnabled}}
           @toggleNavigationMenu={{this.toggleNavigationMenu}}
           @showSidebar={{@showSidebar}}
+          @topicInfo={{@topicInfo}}
+          @topicInfoVisible={{@topicInfoVisible}}
         >
           <span class="header-buttons">
             {{#each (headerButtons.resolve) as |entry|}}
               {{#if (and (eq entry.key "auth") (not this.currentUser))}}
                 <AuthButtons
+                  @topicInfoVisible={{@topicInfoVisible}}
                   @showCreateAccount={{@showCreateAccount}}
                   @showLogin={{@showLogin}}
                   @canSignUp={{@canSignUp}}
@@ -312,7 +315,7 @@ export default class GlimmerHeader extends Component {
       </div>
       <PluginOutlet
         @name="after-header"
-        @outletArgs={{hash minimized=(this.header.topicInfoVisible)}}
+        @outletArgs={{hash minimized=(@topicInfoVisible)}}
       />
     </header>
   </template>

app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs

@@ -9,7 +9,7 @@ export default class AuthButtons extends Component {
     return (
       this.args.canSignUp &&
       !this.header.headerButtonsHidden.includes("signup") &&
-      !this.header.topicInfoVisible
+      !this.args.topicInfoVisible
     );
   }
 

app/assets/javascripts/discourse/app/components/header/contents.gjs

@@ -29,8 +29,8 @@ export default class Contents extends Component {
       <PluginOutlet
         @name="header-contents__before"
         @outletArgs={{hash
-          topicInfo=this.header.topicInfo
+          topicInfo=@topicInfo
-          topicInfoVisible=this.header.topicInfoVisible
+          topicInfoVisible=@topicInfoVisible
         }}
         @deprecatedArgs={{hash
           topic=(deprecatedOutletArgument
@@ -55,12 +55,12 @@ export default class Contents extends Component {
 
       <div class="home-logo-wrapper-outlet">
         <PluginOutlet @name="home-logo-wrapper">
-          <HomeLogo @minimized={{this.header.topicInfoVisible}} />
+          <HomeLogo @minimized={{@topicInfoVisible}} />
         </PluginOutlet>
       </div>
 
-      {{#if this.header.topicInfoVisible}}
+      {{#if @topicInfoVisible}}
-        <TopicInfo @topic={{this.header.topicInfo}} />
+        <TopicInfo @topicInfo={{@topicInfo}} />
       {{else if
         (and
           this.siteSettings.bootstrap_mode_enabled
@@ -77,8 +77,8 @@ export default class Contents extends Component {
         <PluginOutlet
           @name="before-header-panel"
           @outletArgs={{hash
-            topicInfo=this.header.topicInfo
+            topicInfo=@topicInfo
-            topicInfoVisible=this.header.topicInfoVisible
+            topicInfoVisible=@topicInfoVisible
           }}
           @deprecatedArgs={{hash
             topic=(deprecatedOutletArgument
@@ -97,8 +97,8 @@ export default class Contents extends Component {
         <PluginOutlet
           @name="after-header-panel"
           @outletArgs={{hash
-            topicInfo=this.header.topicInfo
+            topicInfo=@topicInfo
-            topicInfoVisible=this.header.topicInfoVisible
+            topicInfoVisible=@topicInfoVisible
           }}
           @deprecatedArgs={{hash
             topic=(deprecatedOutletArgument
@@ -115,8 +115,8 @@ export default class Contents extends Component {
       <PluginOutlet
         @name="header-contents__after"
         @outletArgs={{hash
-          topicInfo=this.header.topicInfo
+          topicInfo=@topicInfo
-          topicInfoVisible=this.header.topicInfoVisible
+          topicInfoVisible=@topicInfoVisible
         }}
         @deprecatedArgs={{hash
           topic=(deprecatedOutletArgument

app/assets/javascripts/discourse/app/components/header/topic/featured-link.gjs

@@ -1,13 +1,10 @@
 import Component from "@glimmer/component";
-import { service } from "@ember/service";
 import { extractLinkMeta } from "discourse/lib/render-topic-featured-link";
 import icon from "discourse-common/helpers/d-icon";
 
 export default class FeaturedLink extends Component {
-  @service header;
-
   get meta() {
-    return extractLinkMeta(this.header.topicInfo);
+    return extractLinkMeta(this.args.topicInfo);
   }
 
   <template>

app/assets/javascripts/discourse/app/components/header/topic/info.gjs

@@ -23,18 +23,20 @@ export default class Info extends Component {
   @service siteSettings;
 
   get showPM() {
-    return !this.args.topic.is_warning && this.args.topic.isPrivateMessage;
+    return (
+      !this.args.topicInfo.is_warning && this.args.topicInfo.isPrivateMessage
+    );
   }
 
   get totalParticipants() {
     return (
-      (this.args.topic.details.allowed_users?.length || 0) +
+      (this.args.topicInfo.details.allowed_users?.length || 0) +
-      (this.args.topic.allowed_groups?.length || 0)
+      (this.args.topicInfo.allowed_groups?.length || 0)
     );
   }
 
   get maxExtraItems() {
-    return this.args.topic.tags?.length > 0 ? 5 : 10;
+    return this.args.topicInfo.tags?.length > 0 ? 5 : 10;
   }
 
   get twoRows() {
@@ -46,8 +48,8 @@ export default class Info extends Component {
   }
 
   get tags() {
-    if (this.args.topic.tags) {
+    if (this.args.topicInfo.tags) {
-      return renderTags(this.args.topic);
+      return renderTags(this.args.topicInfo);
     }
   }
 
@@ -57,14 +59,14 @@ export default class Info extends Component {
 
   get participants() {
     const participants = [
-      ...this.args.topic.details.allowed_users,
+      ...this.args.topicInfo.details.allowed_users,
-      ...this.args.topic.details.allowed_groups,
+      ...this.args.topicInfo.details.allowed_groups,
     ];
     return participants.slice(0, this.maxExtraItems);
   }
 
   get pmHref() {
-    return this.currentUser.pmPath(this.args.topic);
+    return this.currentUser.pmPath(this.args.topicInfo);
   }
 
   @action
@@ -74,8 +76,8 @@ export default class Info extends Component {
     }
 
     e.preventDefault();
-    if (this.args.topic) {
+    if (this.args.topicInfo) {
-      DiscourseURL.routeTo(this.args.topic.firstPostUrl, {
+      DiscourseURL.routeTo(this.args.topicInfo.firstPostUrl, {
         keepFilter: true,
       });
     }
@@ -87,7 +89,7 @@ export default class Info extends Component {
     >
       <PluginOutlet
         @name="header-topic-info__before"
-        @outletArgs={{hash topic=@topic}}
+        @outletArgs={{hash topic=@topicInfo}}
       />
       <div class={{concatClass (if this.twoRows "two-rows") "extra-info"}}>
         <div class="title-wrapper">
@@ -102,56 +104,59 @@ export default class Info extends Component {
               </a>
             {{/if}}
 
-            {{#if (and @topic.fancyTitle @topic.url)}}
+            {{#if (and @topicInfo.fancyTitle @topicInfo.url)}}
-              <Status @topic={{@topic}} @disableActions={{@disableActions}} />
+              <Status
+                @topicInfo={{@topicInfo}}
+                @disableActions={{@disableActions}}
+              />
 
               <a
                 class="topic-link"
                 {{on "click" this.jumpToTopPost}}
-                href={{@topic.url}}
+                href={{@topicInfo.url}}
-                data-topic-id={{@topic.id}}
+                data-topic-id={{@topicInfo.id}}
               >
-                <span>{{htmlSafe @topic.fancyTitle}}</span>
+                <span>{{htmlSafe @topicInfo.fancyTitle}}</span>
               </a>
 
               <span class="header-topic-title-suffix">
                 <PluginOutlet
                   @name="header-topic-title-suffix"
-                  @outletArgs={{hash topic=@topic}}
+                  @outletArgs={{hash topic=@topicInfo}}
                 />
               </span>
             {{/if}}
           </h1>
 
-          {{#if (or @topic.details.loaded @topic.category)}}
+          {{#if (or @topicInfo.details.loaded @topicInfo.category)}}
             {{#if
               (and
-                @topic.category
+                @topicInfo.category
                 (or
-                  (not @topic.category.isUncategorizedCategory)
+                  (not @topicInfo.category.isUncategorizedCategory)
                   (not this.siteSettings.suppress_uncategorized_badge)
                 )
               )
             }}
               <div class="categories-wrapper">
-                {{#if @topic.category.parentCategory}}
+                {{#if @topicInfo.category.parentCategory}}
                   {{#if
                     (and
-                      @topic.category.parentCategory.parentCategory
+                      @topicInfo.category.parentCategory.parentCategory
                       this.site.desktopView
                     )
                   }}
                     {{categoryLink
-                      @topic.category.parentCategory.parentCategory
+                      @topicInfo.category.parentCategory.parentCategory
                     }}
                   {{/if}}
 
                   {{categoryLink
-                    @topic.category.parentCategory
+                    @topicInfo.category.parentCategory
                     (hash hideParent="true")
                   }}
                 {{/if}}
-                {{categoryLink @topic.category}}
+                {{categoryLink @topicInfo.category}}
               </div>
             {{/if}}
 
@@ -172,8 +177,8 @@ export default class Info extends Component {
                     <a
                       class="more-participants"
                       {{on "click" this.jumpToTopPost}}
-                      href={{@topic.url}}
+                      href={{@topicInfo.url}}
-                      data-topic-id={{@topic.id}}
+                      data-topic-id={{@topicInfo.id}}
                     >
                       +{{this.remainingParticipantCount}}
                     </a>
@@ -181,7 +186,7 @@ export default class Info extends Component {
                 </div>
               {{/if}}
               {{#if this.siteSettings.topic_featured_link_enabled}}
-                <FeaturedLink />
+                <FeaturedLink @topicInfo={{@topicInfo}} />
               {{/if}}
             </div>
           {{/if}}
@@ -189,7 +194,7 @@ export default class Info extends Component {
       </div>
       <PluginOutlet
         @name="header-topic-info__after"
-        @outletArgs={{hash topic=@topic}}
+        @outletArgs={{hash topic=@topicInfo}}
       />
     </div>
   </template>

app/assets/javascripts/discourse/app/components/header/topic/status.gjs

@@ -17,7 +17,7 @@ export default class Status extends Component {
 
   get topicStatuses() {
     let topicStatuses = [];
-    TopicStatusIcons.render(this.args.topic, (name, key) => {
+    TopicStatusIcons.render(this.args.topicInfo, (name, key) => {
       const iconArgs = { class: key === "unpinned" ? "unpinned" : null };
       const statusIcon = { name, iconArgs };
 
@@ -42,7 +42,7 @@ export default class Status extends Component {
     }
     const parent = e.target.closest(".topic-statuses");
     if (parent?.querySelector(".pin-toggle-button")?.contains(e.target)) {
-      this.args.topic.togglePinnedForUser();
+      this.args.topicInfo.togglePinnedForUser();
     }
   }
 

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.gjs

@@ -0,0 +1,29 @@
+import Component from "@glimmer/component";
+import { inject as controller } from "@ember/controller";
+import Header from "discourse/components/header";
+import StyleguideExample from "../../styleguide-example";
+
+export default class SiteHeaderStyleguideExample extends Component {
+  @controller application;
+
+  get sidebarEnabled() {
+    return this.application.sidebarEnabled;
+  }
+
+  <template>
+    <StyleguideExample @title="site header">
+      <div inert class="d-header-wrap">
+        <Header @sidebarEnabled={{this.sidebarEnabled}} />
+      </div>
+    </StyleguideExample>
+    <StyleguideExample @title="site header - in topic - scrolled">
+      <div inert class="d-header-wrap">
+        <Header
+          @sidebarEnabled={{this.sidebarEnabled}}
+          @topicInfo={{@dummy.topic}}
+          @topicInfoVisible={{true}}
+        />
+      </div>
+    </StyleguideExample>
+  </template>
+}

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs

@@ -1,19 +0,0 @@
-<StyleguideExample @title="site header - in topic - scrolled">
-  <div class="d-header-wrap">
-    <header class="d-header">
-      <div class="wrap">
-        <div class="contents">
-          <MountWidget @widget="home-logo" @args={{hash minimized=true}} />
-          <MountWidget @widget="header-topic-info" @args={{@dummy}} />
-
-          <div class="panel clearfix">
-            <MountWidget
-              @widget="header-icons"
-              @args={{hash user=@dummy.user}}
-            />
-          </div>
-        </div>
-      </div>
-    </header>
-  </div>
-</StyleguideExample>

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -268,3 +268,10 @@
     }
   }
 }
+
+.styleguide-example {
+  .d-header-wrap {
+    position: relative;
+    z-index: 0;
+  }
+}