DEV: Remove renderTemplate from the styleguide (#21660)

Adds plugin API:

```js
import fidget from "../components/styleguide/molecules/fidget";

api.addStyleguideSection({
  component: fidget,
  id: "fidget",
  category: "molecules",
  priority: 0,
});
```

Removes notes. You can always add `<p class="styleguide-note">` to section components to annotate them.

plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js

@@ -6,6 +6,7 @@ import { MENTION_KEYWORDS } from "discourse/plugins/chat/discourse/components/ch
 import { clearChatComposerButtons } from "discourse/plugins/chat/discourse/lib/chat-composer-buttons";
 import ChannelHashtagType from "discourse/plugins/chat/discourse/lib/hashtag-types/channel";
 import { replaceIcon } from "discourse-common/lib/icon-library";
+import chatStyleguide from "../components/styleguide/organisms/chat";
 
 let _lastForcedRefreshAt;
 const MIN_REFRESH_DURATION_MS = 180000; // 3 minutes
@@ -144,6 +145,12 @@ export default {
 
       api.addToHeaderIcons("chat-header-icon");
 
+      api.addStyleguideSection?.({
+        component: chatStyleguide,
+        category: "organisms",
+        id: "chat",
+      });
+
       api.addChatDrawerStateCallback(({ isDrawerActive }) => {
         if (isDrawerActive) {
           document.body.classList.add("chat-drawer-active");

plugins/styleguide/assets/javascripts/discourse/components/color-example.hbs

@@ -0,0 +1,4 @@
+<section class="color-example">
+  <div class="color-bg {{@color}}"></div>
+  <div class="color-name">var(--{{@color}})</div>
+</section>

plugins/styleguide/assets/javascripts/discourse/components/color-example.js

@@ -1,6 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({
-  tagName: "section",
-  classNameBindings: [":color-example"],
-});

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/02-buttons.hbs

@@ -1,5 +1,5 @@
 <StyleguideExample @title=".btn-icon - sizes (large, default, small)">
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <DButton
       @icon="times"
       @translatedTitle={{bs.text}}
@@ -10,7 +10,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-icon - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <DButton
       @icon="times"
       @translatedTitle={{bs.text}}
@@ -21,7 +21,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-text - sizes (large, default, small)">
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <DButton
       @translatedLabel={{bs.text}}
       @class={{bs.class}}
@@ -31,7 +31,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-text - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <DButton
       @translatedLabel={{bs.text}}
       @class={{bs.class}}
@@ -43,7 +43,7 @@
 <StyleguideExample
   @title=".btn-default .btn-icon-text - sizes (large, default, small)"
 >
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <DButton
       @icon="plus"
       @translatedLabel={{bs.text}}
@@ -54,7 +54,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-default .btn-icon-text - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <DButton
       @icon="plus"
       @translatedLabel={{bs.text}}
@@ -67,7 +67,7 @@
 <StyleguideExample
   @title=".btn-primary .btn-icon-text - sizes (large, default, small)"
 >
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <DButton
       @class={{concat "btn-primary " bs.class}}
       @icon="plus"
@@ -78,7 +78,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-primary .btn-icon-text - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <DButton
       @class={{concat "btn-primary " bs.class}}
       @icon="plus"
@@ -91,7 +91,7 @@
 <StyleguideExample
   @title=".btn-danger .btn-icon-text - sizes (large, default, small)"
 >
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <DButton
       @class={{concat "btn-danger " bs.class}}
       @icon="trash-alt"
@@ -102,7 +102,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-danger .btn-icon-text - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <DButton
       @class={{concat "btn-danger " bs.class}}
       @icon="trash-alt"
@@ -113,7 +113,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-flat - sizes (large, default, small)">
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <FlatButton
       @icon="trash-alt"
       @disabled={{bs.disabled}}
@@ -123,7 +123,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-flat - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <FlatButton
       @icon="trash-alt"
       @disabled={{bs.disabled}}
@@ -135,7 +135,7 @@
 <StyleguideExample
   @title="<DButton> btn-flat btn-text - sizes (large, default, small)"
 >
-  {{#each this.dummy.buttonSizes as |bs|}}
+  {{#each @dummy.buttonSizes as |bs|}}
     <DButton
       @class={{concat "btn-flat " bs.class}}
       @disabled={{bs.disabled}}
@@ -145,7 +145,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title="<DButton> btn-flat btn-text - states">
-  {{#each this.dummy.buttonStates as |bs|}}
+  {{#each @dummy.buttonStates as |bs|}}
     <DButton
       @class={{concat "btn-flat " bs.class}}
       @disabled={{bs.disabled}}
@@ -156,10 +156,10 @@
 
 <StyleguideExample @title="<DToggleSwitch>">
   <DToggleSwitch
-    @state={{this.dummy.toggleSwitchState}}
+    @state={{@dummy.toggleSwitchState}}
     {{on
       "click"
-      (fn (mut this.dummy.toggleSwitchState) (not this.dummy.toggleSwitchState))
+      (fn (mut @dummy.toggleSwitchState) (not @dummy.toggleSwitchState))
     }}
   />
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-input-fields.hbs

@@ -44,13 +44,13 @@
 
 <StyleguideExample
   @title="inline-form with <ComboBox>"
-  @initialValue={{this.dummy.options.0.name}}
+  @initialValue={{@dummy.options.0.name}}
   as |value|
 >
   <div class="inline-form">
     <TextField @placeholder="Placeholder" />
     <ComboBox
-      @content={{this.dummy.options}}
+      @content={{@dummy.options}}
       @value={{value}}
       @onChange={{fn (mut value)}}
     />
@@ -66,7 +66,7 @@
 <StyleguideExample @title="inline-form with <MultiSelect>">
   <div class="inline-form">
     <TextField />
-    <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
+    <MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
     <DButton
       @class="btn-primary"
       @icon="search"
@@ -80,7 +80,7 @@
   <div class="inline-form">
     <label>Text:</label>
     <TextField />
-    <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
+    <MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
     <DButton
       @class="btn-primary"
       @icon="search"
@@ -99,9 +99,9 @@
 <StyleguideExample @title="<CategoryNotificationsButton> and regular button">
   <div class="inline-form">
     <CategoryNotificationsButton
-      @category={{get this.dummy.categories 0}}
+      @category={{get @dummy.categories 0}}
       @value={{1}}
-      @onChange={{action "dummy"}}
+      @onChange={{@dummyAction}}
     />
     <DButton @icon="reply" @type="submit" @translatedLabel="Button" />
   </div>

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs

@@ -1,10 +1,10 @@
 <StyleguideExample
   @title="<ComboBox>"
-  @initialValue={{this.dummy.options.0.name}}
+  @initialValue={{@dummy.options.0.name}}
   as |value|
 >
   <ComboBox
-    @content={{this.dummy.options}}
+    @content={{@dummy.options}}
     @value={{value}}
     @onChange={{fn (mut value)}}
   />
@@ -12,11 +12,11 @@
 
 <StyleguideExample
   @title="filterable <ComboBox>"
-  @initialValue={{this.dummy.categories.0.name}}
+  @initialValue={{@dummy.categories.0.name}}
   as |value|
 >
   <ComboBox
-    @content={{this.dummy.categories}}
+    @content={{@dummy.categories}}
     @value={{value}}
     @options={{hash filterable=true}}
     @onChange={{fn (mut value)}}
@@ -25,11 +25,11 @@
 
 <StyleguideExample
   @title="<ComboBox> with a default state"
-  @initialValue={{this.dummy.options.0.name}}
+  @initialValue={{@dummy.options.0.name}}
   as |value|
 >
   <ComboBox
-    @content={{this.dummy.options}}
+    @content={{@dummy.options}}
     @value={{value}}
     @options={{hash none="category.none"}}
     @onChange={{fn (mut value)}}
@@ -38,11 +38,11 @@
 
 <StyleguideExample
   @title="<ComboBox> clearable"
-  @initialValue={{this.dummy.options.0.name}}
+  @initialValue={{@dummy.options.0.name}}
   as |value|
 >
   <ComboBox
-    @content={{this.dummy.options}}
+    @content={{@dummy.options}}
     @clearable={{true}}
     @value={{value}}
     @options={{hash none="category.none"}}
@@ -56,41 +56,41 @@
   as |value|
 >
   <TopicNotificationsOptions
-    @topic={{this.dummy.topic}}
+    @topic={{@dummy.topic}}
     @value={{value}}
     @onChange={{fn (mut value)}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<TopicFooterMobileDropdown>">
-  <TopicFooterMobileDropdown @topic={{this.dummy.topic}} />
+  <TopicFooterMobileDropdown @topic={{@dummy.topic}} />
 </StyleguideExample>
 
 <StyleguideExample
   @title="<CategoryChooser>"
-  @initialValue={{this.categories.0.name}}
+  @initialValue={{@categories.0.name}}
   as |value|
 >
   <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
 </StyleguideExample>
 
 <StyleguideExample @title="<PinnedButton>">
-  <PinnedButton @topic={{this.dummy.pinnedTopic}} />
+  <PinnedButton @topic={{@dummy.pinnedTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="<PinnedOptions>">
-  <PinnedOptions @topic={{this.dummy.pinnedTopic}} />
+  <PinnedOptions @topic={{@dummy.pinnedTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="<CategoriesAdminDropdown>">
-  <CategoriesAdminDropdown @onChange={{action "dummy"}} />
+  <CategoriesAdminDropdown @onChange={{@dummyAction}} />
 </StyleguideExample>
 
 <StyleguideExample @title="<CategoryNotificationsButton>">
   <CategoryNotificationsButton
-    @category={{get this.dummy.categories 0}}
+    @category={{get @dummy.categories 0}}
     @value={{1}}
-    @onChange={{action "dummy"}}
+    @onChange={{@dummyAction}}
   />
 </StyleguideExample>
 
@@ -98,21 +98,21 @@
   <NotificationsButton
     @options={{hash i18nPrefix="groups.notifications"}}
     @value={{2}}
-    @onChange={{action "dummy"}}
+    @onChange={{@dummyAction}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<DropdownSelectBox>">
   <DropdownSelectBox
-    @content={{this.dummy.options}}
+    @content={{@dummy.options}}
-    @onChange={{action "dummy"}}
+    @onChange={{@dummyAction}}
     @options={{hash translatedNone="Something"}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<FutureDateInputSelector>">
   <FutureDateInputSelector
-    @input={{this.dummy.topicTimerUpdateDate}}
+    @input={{@dummy.topicTimerUpdateDate}}
     @includeWeekend={{true}}
     @includeForever={{true}}
     @options={{hash none="time_shortcut.select_timeframe"}}
@@ -120,35 +120,29 @@
 </StyleguideExample>
 
 <StyleguideExample @title="<MultiSelect>">
-  <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
+  <MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
 </StyleguideExample>
 
 <StyleguideExample @title="admin <GroupChooser>">
   <GroupChooser
-    @selected={{this.dummy.selectedGroups}}
+    @selected={{@dummy.selectedGroups}}
-    @content={{this.dummy.groups}}
+    @content={{@dummy.groups}}
-    @onChange={{action "dummy"}}
+    @onChange={{@dummyAction}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<ListSetting>">
-  <ListSetting
+  <ListSetting @settingValue={{@dummy.settings}} @onChange={{@dummyAction}} />
-    @settingValue={{this.dummy.settings}}
-    @onChange={{action "dummy"}}
-  />
 </StyleguideExample>
 
 <StyleguideExample @title="<ListSetting>">
   <ListSetting
-    @settingValue={{this.dummy.colors}}
+    @settingValue={{@dummy.colors}}
     @nameProperty="color"
-    @onChange={{action "dummy"}}
+    @onChange={{@dummyAction}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<UserNotificationsDropdown>">
-  <UserNotificationsDropdown
+  <UserNotificationsDropdown @user={{@currentUser}} @value="changeToNormal" />
-    @user={{this.currentUser}}
-    @value="changeToNormal"
-  />
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-link.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="topic-link">
+  {{topic-link @dummy.topic}}
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/topic-statuses.hbs

@@ -1,27 +1,27 @@
 <StyleguideExample @title="invisible">
-  <TopicStatus @topic={{this.dummy.invisibleTopic}} />
+  <TopicStatus @topic={{@dummy.invisibleTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="closed">
-  <TopicStatus @topic={{this.dummy.closedTopic}} />
+  <TopicStatus @topic={{@dummy.closedTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="pinned">
-  <TopicStatus @topic={{this.dummy.pinnedTopic}} />
+  <TopicStatus @topic={{@dummy.pinnedTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="unpinned">
-  <TopicStatus @topic={{this.dummy.unpinnedTopic}} />
+  <TopicStatus @topic={{@dummy.unpinnedTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="archived">
-  <TopicStatus @topic={{this.dummy.archivedTopic}} />
+  <TopicStatus @topic={{@dummy.archivedTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="warning">
-  <TopicStatus @topic={{this.dummy.warningTopic}} />
+  <TopicStatus @topic={{@dummy.warningTopic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="no status">
-  <TopicStatus @topic={{this.dummy.topic}} />
+  <TopicStatus @topic={{@dummy.topic}} />
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/bread-crumbs.hbs

@@ -0,0 +1,9 @@
+<StyleguideExample @title="category-breadcrumbs">
+  <BreadCrumbs @categories={{@dummy.categories}} @showTags={{false}} />
+</StyleguideExample>
+
+{{#if @siteSettings.tagging_enabled}}
+  <StyleguideExample @title="category-breadcrumbs - tags">
+    <BreadCrumbs @categories={{@dummy.categories}} @showTags={{true}} />
+  </StyleguideExample>
+{{/if}}

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/categories.hbs

@@ -1,23 +1,23 @@
 <StyleguideExample @title="category-badge - bullet">
-  {{#each this.dummy.categories as |c|}}
+  {{#each @dummy.categories as |c|}}
     {{category-badge c categoryStyle="bullet"}}
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title="category-badge - bar">
-  {{#each this.dummy.categories as |c|}}
+  {{#each @dummy.categories as |c|}}
     {{category-badge c categoryStyle="bar"}}
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title="category-badge - box">
-  {{#each this.dummy.categories as |c|}}
+  {{#each @dummy.categories as |c|}}
     {{category-badge c categoryStyle="box"}}
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title="category-badge - none">
-  {{#each this.dummy.categories as |c|}}
+  {{#each @dummy.categories as |c|}}
     {{category-badge c categoryStyle="none"}}
   {{/each}}
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.hbs

@@ -0,0 +1,11 @@
+<StyleguideExample @title="<CharCounter>">
+  <CharCounter @max="50" @value={{@dummy.charCounterContent}}>
+    <textarea
+      {{on
+        "input"
+        (action (mut @dummy.charCounterContent) value="target.value")
+      }}
+      class="styleguide--char-counter"
+    ></textarea>
+  </CharCounter>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/empty-state.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="<EmptyState>">
+  <EmptyState @title={{@dummy.sentence}} @body={{@dummy.short_sentence}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/footer-message.hbs

@@ -1,25 +1,25 @@
 <StyleguideExample @title="<FooterMessage> - default">
   <FooterMessage
-    @education={{this.dummy.sentence}}
+    @education={{@dummy.sentence}}
-    @message={{this.dummy.short_sentence}}
+    @message={{@dummy.short_sentence}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<FooterMessage> - latest">
   <FooterMessage
-    @education={{this.dummy.sentence}}
+    @education={{@dummy.sentence}}
-    @message={{this.dummy.short_sentence}}
+    @message={{@dummy.short_sentence}}
     @latest={{true}}
     @canCreateTopicOnCategory={{true}}
-    @createTopic={{action "dummy"}}
+    @createTopic={{@dummyAction}}
   />
 </StyleguideExample>
 
 <StyleguideExample @title="<FooterMessage> - top">
   <FooterMessage
-    @education={{this.dummy.sentence}}
+    @education={{@dummy.sentence}}
-    @message={{this.dummy.short_sentence}}
+    @message={{@dummy.short_sentence}}
     @top={{true}}
-    @changePeriod={{action "dummy"}}
+    @changePeriod={{@dummyAction}}
   />
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/header-icons.hbs

@@ -3,12 +3,12 @@
 </StyleguideExample>
 
 <StyleguideExample @title="header-icons - user">
-  <MountWidget @widget="header-icons" @args={{hash user=this.dummy.user}} />
+  <MountWidget @widget="header-icons" @args={{hash user=@dummy.user}} />
 </StyleguideExample>
 
 <StyleguideExample @title="header-icons - notifications">
   <MountWidget
     @widget="header-icons"
-    @args={{hash user=this.dummy.userWithUnread flagCount=5}}
+    @args={{hash user=@dummy.userWithUnread flagCount=5}}
   />
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-bar.hbs

@@ -0,0 +1,31 @@
+<StyleguideExample @title="<NavigationBar>">
+  <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
+</StyleguideExample>
+
+<StyleguideExample @title=".user-main .nav-pills">
+  <MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
+    {{#each @dummy.navItems as |ni|}}
+      <li>
+        <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
+          {{ni.displayName}}
+        </a>
+      </li>
+    {{/each}}
+  </MobileNav>
+</StyleguideExample>
+
+<StyleguideExample @title="group page <NavigationBar>">
+  <MobileNav @class="group-nav" @desktopClass="nav nav-pills">
+    <li class="group-dropdown">
+      <GroupDropdown @groups={{@dummy.groupNames}} @value="staff" />
+    </li>
+
+    {{#each @dummy.navItems as |ni|}}
+      <li>
+        <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
+          {{ni.displayName}}
+        </a>
+      </li>
+    {{/each}}
+  </MobileNav>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/navigation-stacked.hbs

@@ -3,11 +3,12 @@
     @class="preferences-nav"
     @desktopClass="preferences-list action-list nav-stacked"
   >
-    {{#each this.dummy.navItems as |ni|}}
+    {{#each @dummy.navItems as |ni|}}
-      <li><a
+      <li>
-          href={{ni.href}}
+        <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
-          class={{if ni.styleGuideActive "active"}}
+          {{ni.displayName}}
-        >{{ni.displayName}}</a></li>
+        </a>
+      </li>
     {{/each}}
   </MobileNav>
 </StyleguideExample>
@@ -18,11 +19,12 @@
       @class="preferences-nav"
       @desktopClass="preferences-list action-list nav-stacked"
     >
-      {{#each this.dummy.navItems as |ni|}}
+      {{#each @dummy.navItems as |ni|}}
-        <li><a
+        <li>
-            href={{ni.href}}
+          <a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>
-            class={{if ni.styleGuideActive "active"}}
+            {{ni.displayName}}
-          >{{ni.displayName}}</a></li>
+          </a>
+        </li>
       {{/each}}
     </MobileNav>
   </DSection>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/post-menu.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="post-menu">
+  <MountWidget @widget="post-menu" @args={{@dummy.transformedPost}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/rich-tooltip.hbs

@@ -1,6 +1,7 @@
 <StyleguideExample @title="<DTooltip>">
   <DButton>
     {{i18n "styleguide.sections.rich_tooltip.hover_to_see"}}
+
     <DTooltip>
       <h3>{{i18n "styleguide.sections.rich_tooltip.header"}}</h3>
       {{i18n "styleguide.sections.rich_tooltip.description"}}

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.hbs

@@ -1,7 +1,7 @@
 <StyleguideExample @title="<TopicListItem>">
   <table class="topic-list">
     <tbody>
-      <TopicListItem @topic={{this.dummy.topic}} @showPosters={{true}} />
+      <TopicListItem @topic={{@dummy.topic}} @showPosters={{true}} />
     </tbody>
   </table>
 </StyleguideExample>
@@ -10,7 +10,7 @@
   <table class="topic-list">
     <tbody>
       <TopicListItem
-        @topic={{this.dummy.topic}}
+        @topic={{@dummy.topic}}
         @hideCategory={{true}}
         @showPosters={{true}}
       />
@@ -22,7 +22,7 @@
   <table class="topic-list">
     <tbody>
       <TopicListItem
-        @topic={{this.dummy.topic}}
+        @topic={{@dummy.topic}}
         @showLikes={{true}}
         @showPosters={{true}}
       />
@@ -31,5 +31,5 @@
 </StyleguideExample>
 
 <StyleguideExample @title="<TopicListItem> - latest" class="half-size">
-  <LatestTopicListItem @topic={{this.dummy.topic}} />
+  <LatestTopicListItem @topic={{@dummy.topic}} />
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="<TopicNotificationsButton>">
+  <TopicNotificationsButton @topic={{@dummy.topic}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-timer-info.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="<TopicTimerInfo>">
+  <TopicTimerInfo @statusType="reminder" @executeAt={{@dummy.soon}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/00-post.hbs

@@ -0,0 +1,7 @@
+<StyleguideExample @title="post">
+  <MountWidget
+    @widget="post"
+    @model={{@dummy.postModel}}
+    @args={{@dummy.transformedPost}}
+  />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/01-topic-map.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="topic-map">
+  <MountWidget @widget="topic-map" @args={{@dummy.transformedPost}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/03-topic-footer-buttons.hbs

@@ -1,5 +1,5 @@
 <StyleguideExample @title="<TopicFooterButtons> - logged in">
-  <TopicFooterButtons @topic={{this.dummy.topic}} />
+  <TopicFooterButtons @topic={{@dummy.topic}} />
 </StyleguideExample>
 
 <StyleguideExample @title="<TopicFooterButtons> - anonymous">

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/04-topic-list.hbs

@@ -0,0 +1,7 @@
+<StyleguideExample @title="<TopicList>">
+  <TopicList @topics={{@dummy.topics}} @showPosters={{true}} />
+</StyleguideExample>
+
+<StyleguideExample @title="<TopicList> - hide posters>">
+  <TopicList @topics={{@dummy.topics}} @showPosters={{false}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/basic-topic-list.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="<BasicTopicList>" class="half-size">
+  <BasicTopicList @topics={{@dummy.topics}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/categories-list.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="<CategoriesOnly>">
+  <CategoriesOnly @categories={{@dummy.categories}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.hbs

@@ -1,12 +1,13 @@
 <StyleguideExample @title="<DModal>">
   <DModal
-    @closeModal={{action "dummy"}}
+    @closeModal={{@dummyAction}}
     @modalStyle="inline-modal"
     @title={{i18n "styleguide.sections.modal.header"}}
   >
     <DModalBody>
-      {{html-safe this.dummy.lorem}}
+      {{html-safe @dummy.lorem}}
     </DModalBody>
+
     <div class="modal-footer">
       {{i18n "styleguide.sections.modal.footer"}}
     </div>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/navigation.hbs

@@ -2,8 +2,9 @@
   <div class="list-controls">
     <div class="container">
       <DSection @class="navigation-container">
-        <BreadCrumbs @categories={{this.dummy.categories}} />
+        <BreadCrumbs @categories={{@dummy.categories}} />
-        <NavigationBar @navItems={{this.dummy.navItems}} @filterMode="latest" />
+        <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
+
         <div class="navigation-controls">
           <CategoriesAdminDropdown />
           <CreateTopicButton @canCreateTopic={{true}} />

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

@@ -4,11 +4,12 @@
       <div class="wrap">
         <div class="contents">
           <MountWidget @widget="home-logo" @args={{hash minimized=true}} />
-          <MountWidget @widget="header-topic-info" @args={{this.dummy}} />
+          <MountWidget @widget="header-topic-info" @args={{@dummy}} />
+
           <div class="panel clearfix">
             <MountWidget
               @widget="header-icons"
-              @args={{hash user=this.dummy.user}}
+              @args={{hash user=@dummy.user}}
             />
           </div>
         </div>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/suggested-topics.hbs

@@ -0,0 +1,3 @@
+<StyleguideExample @title="<SuggestedTopics>">
+  <SuggestedTopics @topic={{@dummy.topic}} />
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/user-about.hbs

@@ -0,0 +1,403 @@
+<StyleguideExample @title=".user-main .about.collapsed-info.no-background">
+  <DSection @class="user-main">
+    <section class="collapsed-info about no-background">
+      <div class="profile-image"></div>
+
+      <div class="details">
+        <div class="primary">
+          {{bound-avatar @dummy.user "huge"}}
+          <section class="controls">
+            <ul>
+              <li>
+                <a class="btn btn-primary">
+                  {{d-icon "envelope"}}
+                  {{i18n "user.private_message"}}
+                </a>
+              </li>
+              <li>
+                <a href={{@dummy.user.adminPath}} class="btn">
+                  {{d-icon "wrench"}}
+                  {{i18n "admin.user.show_admin_profile"}}
+                </a>
+              </li>
+              <li>
+                <a href="#" class="btn">
+                  {{d-icon "angle-double-down"}}
+                  {{i18n "user.expand_profile"}}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <div class="primary-textual">
+            <h1 class="username">
+              {{@dummy.user.username}}
+              {{d-icon "shield-alt"}}
+            </h1>
+            <h2 class="full-name">{{@dummy.user.name}}</h2>
+            <h3>{{@dummy.user.title}}</h3>
+          </div>
+        </div>
+        <div style="clear: both"></div>
+      </div>
+    </section>
+  </DSection>
+</StyleguideExample>
+
+<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
+  <DSection @class="user-main">
+    <section
+      class="collapsed-info about has-background"
+      style={{@dummy.user.profileBackground}}
+    >
+      <div class="profile-image"></div>
+      <div class="details">
+        <div class="primary">
+          {{bound-avatar @dummy.user "huge"}}
+          <section class="controls">
+            <ul>
+              <li>
+                <a class="btn btn-primary">
+                  {{d-icon "envelope"}}
+                  {{i18n "user.private_message"}}
+                </a>
+              </li>
+              <li>
+                <a href={{@dummy.user.adminPath}} class="btn">
+                  {{d-icon "wrench"}}
+                  {{i18n "admin.user.show_admin_profile"}}
+                </a>
+              </li>
+              <li>
+                <a href="#" class="btn">
+                  {{d-icon "angle-double-down"}}
+                  {{i18n "user.expand_profile"}}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <div class="primary-textual">
+            <h1 class="username">
+              {{@dummy.user.username}}
+              {{d-icon "shield-alt"}}
+            </h1>
+            <h2 class="full-name">{{@dummy.user.name}}</h2>
+            <h3>{{@dummy.user.title}}</h3>
+          </div>
+        </div>
+        <div style="clear: both"></div>
+      </div>
+    </section>
+  </DSection>
+</StyleguideExample>
+
+<StyleguideExample @title=".user-main .about.no-background">
+  <DSection @class="user-main">
+    <section class="about no-background">
+
+      <div class="staff-counters">
+        <div>
+          <span class="helpful-flags">
+            {{@dummy.user.number_of_flags_given}}
+          </span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
+        </div>
+        <div>
+          <a href="#">
+            <span class="flagged-posts">
+              {{@dummy.user.number_of_flagged_posts}}
+            </span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
+          </a>
+        </div>
+        <div>
+          <a href="#">
+            <span class="deleted-posts">
+              {{@dummy.user.number_of_deleted_posts}}
+            </span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
+          </a>
+        </div>
+        <div>
+          <span class="suspensions">
+            {{@dummy.user.number_of_suspensions}}
+          </span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
+        </div>
+        <div>
+          <span class="warnings-received">
+            {{@dummy.user.warnings_received_count}}
+          </span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
+        </div>
+      </div>
+
+      <div class="profile-image"></div>
+      <div class="details">
+        <div class="primary">
+          {{bound-avatar @dummy.user "huge"}}
+          <section class="controls">
+            <ul>
+              <li>
+                <a class="btn btn-primary">
+                  {{d-icon "envelope"}}
+                  {{i18n "user.private_message"}}
+                </a>
+              </li>
+              <li>
+                <a href={{@dummy.user.adminPath}} class="btn">
+                  {{d-icon "wrench"}}
+                  {{i18n "admin.user.show_admin_profile"}}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <div class="primary-textual">
+            <h1 class="username">
+              {{@dummy.user.username}}
+              {{d-icon "shield-alt"}}
+            </h1>
+            <h2 class="full-name">{{@dummy.user.name}}</h2>
+            <h3>{{@dummy.user.title}}</h3>
+            <h3>
+              {{d-icon "map-marker-alt"}}
+              {{@dummy.user.location}}
+              {{d-icon "globe"}}
+              <a
+                href={{@dummy.user.website}}
+                rel="nofollow noopener noreferrer"
+                target="_blank"
+              >
+                {{@dummy.user.website_name}}
+              </a>
+            </h3>
+
+            <div class="bio">
+              <div class="suspended">
+                {{d-icon "ban"}}
+                <b>
+                  {{i18n
+                    "user.suspended_notice"
+                    date=@dummy.user.suspendedTillDate
+                  }}
+                </b>
+                <br />
+                <b>{{i18n "user.suspended_reason"}}</b>
+                {{@dummy.user.suspend_reason}}
+              </div>
+              {{html-safe @dummy.user.bio_cooked}}
+            </div>
+
+            <div class="public-user-fields">
+              {{#each @dummy.user.publicUserFields as |uf|}}
+                {{#if uf.value}}
+                  <div class="public-user-field {{uf.field.dasherized_name}}">
+                    <span class="user-field-name">{{uf.field.name}}
+                    </span>:
+                    <span class="user-field-value">{{uf.value}}
+                    </span>
+                  </div>
+                {{/if}}
+              {{/each}}
+            </div>
+          </div>
+        </div>
+        <div style="clear: both"></div>
+      </div>
+
+      <div class="secondary">
+        <dl>
+          <dt>{{i18n "user.created"}}</dt>
+          <dd>{{bound-date @dummy.user.created_at}}</dd>
+          <dt>{{i18n "user.last_posted"}}</dt>
+          <dd>{{bound-date @dummy.user.last_posted_at}}</dd>
+          <dt>{{i18n "user.last_seen"}}</dt>
+          <dd>{{bound-date @dummy.user.last_seen_at}}</dd>
+          <dt>{{i18n "views"}}</dt>
+          <dd>{{@dummy.user.profile_view_count}}</dd>
+          <dt class="invited-by">{{i18n "user.invited_by"}}</dt>
+          <dd class="invited-by">
+            <a href="#">{{@dummy.user.invited_by.username}}</a>
+          </dd>
+          <dt class="trust-level">{{i18n "user.trust_level"}}</dt>
+          <dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
+          <dt>{{i18n "user.email.title"}}</dt>
+          <dd title={{@dummy.user.email}}>
+            <DButton
+              @icon="envelope"
+              @label="admin.users.check_email.text"
+              @class="btn-primary"
+            />
+          </dd>
+          <dt class="groups">
+            {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
+          </dt>
+          <dd class="groups">
+            {{#each @dummy.user.displayGroups as |group|}}
+              <span>
+                <a href="#" class="group-link">{{group.name}}</a>
+              </span>
+            {{/each}}
+          </dd>
+          <DButton
+            @icon="exclamation-triangle"
+            @label="user.admin_delete"
+            @class="btn-danger"
+          />
+        </dl>
+      </div>
+    </section>
+  </DSection>
+</StyleguideExample>
+
+<StyleguideExample @title=".user-main .about.has-background">
+  <DSection @class="user-main">
+    <section
+      class="about has-background"
+      style={{@dummy.user.profileBackground}}
+    >
+      <div class="staff-counters">
+        <div>
+          <span class="helpful-flags">
+            {{@dummy.user.number_of_flags_given}}
+          </span>&nbsp;{{i18n "user.staff_counters.flags_given"}}
+        </div>
+        <div>
+          <a href="#">
+            <span class="flagged-posts">
+              {{@dummy.user.number_of_flagged_posts}}
+            </span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
+          </a>
+        </div>
+        <div>
+          <a href="#">
+            <span class="deleted-posts">
+              {{@dummy.user.number_of_deleted_posts}}
+            </span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
+          </a>
+        </div>
+        <div>
+          <span class="suspensions">
+            {{@dummy.user.number_of_suspensions}}
+          </span>&nbsp;{{i18n "user.staff_counters.suspensions"}}
+        </div>
+        <div>
+          <span class="warnings-received">
+            {{@dummy.user.warnings_received_count}}
+          </span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}
+        </div>
+      </div>
+
+      <div class="profile-image"></div>
+      <div class="details">
+        <div class="primary">
+          {{bound-avatar @dummy.user "huge"}}
+          <section class="controls">
+            <ul>
+              <li>
+                <a class="btn btn-primary">
+                  {{d-icon "envelope"}}
+                  {{i18n "user.private_message"}}
+                </a>
+              </li>
+              <li>
+                <a href={{@dummy.user.adminPath}} class="btn">
+                  {{d-icon "wrench"}}
+                  {{i18n "admin.user.show_admin_profile"}}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <div class="primary-textual">
+            <h1 class="username">
+              {{@dummy.user.username}}
+              {{d-icon "shield-alt"}}
+            </h1>
+            <h2 class="full-name">{{@dummy.user.name}}</h2>
+            <h3>{{@dummy.user.title}}</h3>
+            <h3>
+              {{d-icon "map-marker-alt"}}
+              {{@dummy.user.location}}
+              {{d-icon "globe"}}
+              <a
+                href={{@dummy.user.website}}
+                rel="nofollow noopener noreferrer"
+                target="_blank"
+              >
+                {{@dummy.user.website_name}}
+              </a>
+            </h3>
+
+            <div class="bio">
+              <div class="suspended">
+                {{d-icon "ban"}}
+                <b>
+                  {{i18n
+                    "user.suspended_notice"
+                    date=@dummy.user.suspendedTillDate
+                  }}
+                </b>
+                <br />
+                <b>{{i18n "user.suspended_reason"}}</b>
+                {{@dummy.user.suspend_reason}}
+              </div>
+              {{html-safe @dummy.user.bio_cooked}}
+            </div>
+
+            <div class="public-user-fields">
+              {{#each @dummy.user.publicUserFields as |uf|}}
+                {{#if uf.value}}
+                  <div class="public-user-field {{uf.field.dasherized_name}}">
+                    <span class="user-field-name">{{uf.field.name}}</span>:
+                    <span class="user-field-value">{{uf.value}}</span>
+                  </div>
+                {{/if}}
+              {{/each}}
+            </div>
+          </div>
+        </div>
+        <div style="clear: both"></div>
+      </div>
+
+      <div class="secondary">
+        <dl>
+          <dt>{{i18n "user.created"}}</dt>
+          <dd>{{bound-date @dummy.user.created_at}}</dd>
+          <dt>{{i18n "user.last_posted"}}</dt>
+          <dd>{{bound-date @dummy.user.last_posted_at}}</dd>
+          <dt>{{i18n "user.last_seen"}}</dt>
+          <dd>{{bound-date @dummy.user.last_seen_at}}</dd>
+          <dt>{{i18n "views"}}</dt>
+          <dd>{{@dummy.user.profile_view_count}}</dd>
+          <dt class="invited-by">{{i18n "user.invited_by"}}</dt>
+          <dd class="invited-by">
+            <a href="#">{{@dummy.user.invited_by.username}}</a>
+          </dd>
+          <dt class="trust-level">{{i18n "user.trust_level"}}</dt>
+          <dd class="trust-level">{{@dummy.user.trustLevel.name}}</dd>
+          <dt>{{i18n "user.email.title"}}</dt>
+          <dd title={{@dummy.user.email}}>
+            <DButton
+              @icon="envelope"
+              @label="admin.users.check_email.text"
+              @class="btn-primary"
+            />
+          </dd>
+          <dt class="groups">
+            {{i18n "groups.title" count=@dummy.user.displayGroups.length}}
+          </dt>
+          <dd class="groups">
+            {{#each @dummy.user.displayGroups as |group|}}
+              <span>
+                <a href="#" class="group-link">{{group.name}}</a>
+              </span>
+            {{/each}}
+          </dd>
+          <DButton
+            @icon="exclamation-triangle"
+            @label="user.admin_delete"
+            @class="btn-danger"
+          />
+        </dl>
+      </div>
+    </section>
+  </DSection>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.hbs

@@ -0,0 +1,4 @@
+<section class="styleguide-example">
+  <div class="example-title">{{@title}}</div>
+  <section class="rendered">{{yield this.value}}</section>
+</section>

plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js

@@ -1,12 +1,11 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 
-export default Component.extend({
+export default class StyleguideExample extends Component {
-  tagName: "section",
+  @tracked value = null;
-  classNames: ["styleguide-example"],
-  value: null,
 
-  init() {
+  constructor() {
-    this._super(...arguments);
+    super(...arguments);
-    this.value = this.initialValue;
+    this.value = this.args.initialValue;
-  },
+  }
-});
+}

plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.hbs

@@ -0,0 +1,6 @@
+<LinkTo
+  @route="styleguide.show"
+  @models={{array @section.category @section.id}}
+>
+  {{section-title @section.id}}
+</LinkTo>

plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js

@@ -1,5 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({
-  tagName: "",
-});

plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js

@@ -1,7 +1,7 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 
-export default Controller.extend({
+export default class StyleguideShow extends Controller {
-  actions: {
+  @action
-    dummy() {},
+  dummyAction() {}
-  },
+}
-});

plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({
+export default class Styleguide extends Controller {
-  sections: null,
+  sections = null;
-});
+}

plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js

@@ -98,7 +98,7 @@ export function createData(store) {
           posts_count: ((topicId * 1234) % 100) + 1,
           views: ((topicId * 123) % 1000) + 1,
           like_count: topicId % 3,
-          created_at: `2017-03-${topicId}`,
+          created_at: `2017-03-${topicId % 30}T12:30:00.000Z`,
           visible: true,
           posters: [
             { extras: "latest", user },
@@ -157,9 +157,9 @@ export function createData(store) {
     id: 1234,
     cooked,
     created_at: moment().subtract(3, "days"),
-    user_id: user.get("id"),
+    user_id: user.id,
-    username: user.get("username"),
+    username: user.username,
-    avatar_template: user.get("avatar_template"),
+    avatar_template: user.avatar_template,
     showLike: true,
     canToggleLike: true,
     canFlag: true,
@@ -168,10 +168,10 @@ export function createData(store) {
     canBookmark: true,
     canManage: true,
     canDelete: true,
-    createdByUsername: user.get("username"),
+    createdByUsername: user.username,
-    createdByAvatarTemplate: user.get("avatar_template"),
+    createdByAvatarTemplate: user.avatar_template,
-    lastPostUsername: user.get("username"),
+    lastPostUsername: user.username,
-    lastPostAvatarTemplate: user.get("avatar_template"),
+    lastPostAvatarTemplate: user.avatar_template,
     topicReplyCount: 123,
     topicViews: 3456,
     participantCount: 10,
@@ -179,6 +179,7 @@ export function createData(store) {
     topicLinkLength: 5,
     topicPostsCount: 4,
     participants: [createUser(), createUser(), createUser(), createUser()],
+    post_number: 1,
     topicLinks: [
       {
         title: "Evil Trout",
@@ -195,6 +196,11 @@ export function createData(store) {
     ],
   };
 
+  const postModel = store.createRecord("post", {
+    ...transformedPost,
+    topic: createTopic(),
+  });
+
   _data = {
     options: [
       { id: 1, name: "Orange" },
@@ -246,6 +252,7 @@ export function createData(store) {
     soon: moment().add(2, "days"),
 
     transformedPost,
+    postModel,
 
     user,
 
@@ -271,6 +278,8 @@ export function createData(store) {
     settings: "bold|italic|strike|underline",
 
     colors: "f49|c89|564897",
+
+    charCounterContent: "",
   };
 
   return _data;

plugins/styleguide/assets/javascripts/discourse/lib/styleguide.js

@@ -1,10 +1,113 @@
-import DiscourseTemplateMap from "discourse-common/lib/discourse-template-map";
+import typography from "../components/sections/atoms/00-typography";
+import fontScale from "../components/sections/atoms/01-font-scale";
+import buttons from "../components/sections/atoms/02-buttons";
+import colors from "../components/sections/atoms/03-colors";
+import icons from "../components/sections/atoms/04-icons";
+import inputFields from "../components/sections/atoms/05-input-fields";
+import spinners from "../components/sections/atoms/06-spinners";
+import dateTimeInputs from "../components/sections/atoms/date-time-inputs";
+import dropdowns from "../components/sections/atoms/dropdowns";
+import topicLink from "../components/sections/atoms/topic-link";
+import topicStatuses from "../components/sections/atoms/topic-statuses";
+import breadCrumbs from "../components/sections/molecules/bread-crumbs";
+import categories from "../components/sections/molecules/categories";
+import charCounter from "../components/sections/molecules/char-counter";
+import emptyState from "../components/sections/molecules/empty-state";
+import footerMessage from "../components/sections/molecules/footer-message";
+import headerIcons from "../components/sections/molecules/header-icons";
+import navigationBar from "../components/sections/molecules/navigation-bar";
+import navigationStacked from "../components/sections/molecules/navigation-stacked";
+import postMenu from "../components/sections/molecules/post-menu";
+import richTooltip from "../components/sections/molecules/rich-tooltip";
+import signupCta from "../components/sections/molecules/signup-cta";
+import topicListItem from "../components/sections/molecules/topic-list-item";
+import topicNotifications from "../components/sections/molecules/topic-notifications";
+import topicTimerInfo from "../components/sections/molecules/topic-timer-info";
+import post from "../components/sections/organisms/00-post";
+import topicMap from "../components/sections/organisms/01-topic-map";
+import topicFooterButtons from "../components/sections/organisms/03-topic-footer-buttons";
+import topicList from "../components/sections/organisms/04-topic-list";
+import basicTopicList from "../components/sections/organisms/basic-topic-list";
+import categoriesList from "../components/sections/organisms/categories-list";
+import modal from "../components/sections/organisms/modal";
+import navigation from "../components/sections/organisms/navigation";
+import siteHeader from "../components/sections/organisms/site-header";
+import suggestedTopics from "../components/sections/organisms/suggested-topics";
+import userAbout from "../components/sections/organisms/user-about";
+
 let _allCategories = null;
 let _sectionsById = {};
-let _notes = {};
 
 export const CATEGORIES = ["atoms", "molecules", "organisms"];
 
+const SECTIONS = [
+  { component: typography, category: "atoms", id: "typography", priority: 0 },
+  { component: fontScale, category: "atoms", id: "font-scale", priority: 1 },
+  { component: buttons, category: "atoms", id: "buttons", priority: 2 },
+  { component: colors, category: "atoms", id: "colors", priority: 3 },
+  { component: icons, category: "atoms", id: "icons", priority: 4 },
+  {
+    component: inputFields,
+    category: "atoms",
+    id: "input-fields",
+    priority: 5,
+  },
+  { component: spinners, category: "atoms", id: "spinners", priority: 6 },
+  { component: dateTimeInputs, category: "atoms", id: "date-time-inputs" },
+  { component: dropdowns, category: "atoms", id: "dropdowns" },
+  { component: topicLink, category: "atoms", id: "topic-link" },
+  { component: topicStatuses, category: "atoms", id: "topic-statuses" },
+  { component: breadCrumbs, category: "molecules", id: "bread-crumbs" },
+  { component: categories, category: "molecules", id: "categories" },
+  { component: charCounter, category: "molecules", id: "char-counter" },
+  { component: emptyState, category: "molecules", id: "empty-state" },
+  { component: footerMessage, category: "molecules", id: "footer-message" },
+  { component: headerIcons, category: "molecules", id: "header-icons" },
+  { component: navigationBar, category: "molecules", id: "navigation-bar" },
+  {
+    component: navigationStacked,
+    category: "molecules",
+    id: "navigation-stacked",
+  },
+  { component: postMenu, category: "molecules", id: "post-menu" },
+  { component: richTooltip, category: "molecules", id: "rich-tooltip" },
+  { component: signupCta, category: "molecules", id: "signup-cta" },
+  { component: topicListItem, category: "molecules", id: "topic-list-item" },
+  {
+    component: topicNotifications,
+    category: "molecules",
+    id: "topic-notifications",
+  },
+  { component: topicTimerInfo, category: "molecules", id: "topic-timer-info" },
+  { component: post, category: "organisms", id: "post", priority: 0 },
+  { component: topicMap, category: "organisms", id: "topic-map", priority: 1 },
+  {
+    component: topicFooterButtons,
+    category: "organisms",
+    id: "topic-footer-buttons",
+    priority: 3,
+  },
+  {
+    component: topicList,
+    category: "organisms",
+    id: "topic-list",
+    priority: 4,
+  },
+  { component: basicTopicList, category: "organisms", id: "basic-topic-list" },
+  { component: categoriesList, category: "organisms", id: "categories-list" },
+  { component: modal, category: "organisms", id: "modal" },
+  { component: navigation, category: "organisms", id: "navigation" },
+  { component: siteHeader, category: "organisms", id: "site-header" },
+  { component: suggestedTopics, category: "organisms", id: "suggested-topics" },
+  { component: userAbout, category: "organisms", id: "user-about" },
+];
+
+export function addSection(section) {
+  if (!SECTIONS.some((s) => s.id === section.id)) {
+    SECTIONS.push(section);
+  }
+}
+
 export function sectionById(id) {
   // prime cache
   allCategories();
@@ -13,11 +116,13 @@ export function sectionById(id) {
 }
 
 function sortSections(a, b) {
-  let result = a.priority - b.priority;
+  const result = a.priority - b.priority;
-  if (result === 0) {
+
-    return a.id < b.id ? -1 : 1;
+  if (result !== 0) {
+    return result;
   }
-  return result;
+
+  return a.id < b.id ? -1 : 1;
 }
 
 export function allCategories() {
@@ -25,50 +130,26 @@ export function allCategories() {
     return _allCategories;
   }
 
-  let categories = {};
+  for (const section of SECTIONS) {
+    section.priority ??= 100;
 
-  let paths = CATEGORIES.join("|");
+    categories[section.category] ||= [];
+    categories[section.category].push(section);
 
-  // Find a list of sections based on what templates are available
+    _sectionsById[section.id] = section;
-  // eslint-disable-next-line no-undef
+  }
-  DiscourseTemplateMap.keys().forEach((e) => {
-    let regexp = new RegExp(`styleguide\/(${paths})\/(\\d+)?\\-?([^\\/]+)$`);
-    let matches = e.match(regexp);
-    if (matches) {
-      let section = {
-        id: matches[3],
-        priority: parseInt(matches[2] || "100", 10),
-        category: matches[1],
-        templateName: e.replace(/^.*styleguide\//, ""),
-      };
-      if (!categories[section.category]) {
-        categories[section.category] = [];
-      }
-      categories[section.category].push(section);
-      _sectionsById[section.id] = section;
-    }
-
-    // Look for notes
-    regexp = new RegExp(`components\/notes\/(\\d+)?\\-?([^\\/]+)$`);
-    matches = e.match(regexp);
-    if (matches) {
-      _notes[matches[2]] = e.replace(/^.*notes\//, "");
-    }
-  });
 
   _allCategories = [];
-  CATEGORIES.forEach((c) => {
+  for (const category of CATEGORIES) {
-    let sections = categories[c];
+    const sections = categories[category];
+
     if (sections) {
       _allCategories.push({
-        id: c,
+        id: category,
         sections: sections.sort(sortSections),
       });
     }
-  });
+  }
+
   return _allCategories;
 }
-
-export function findNote(section) {
-  return _notes[section.id];
-}

plugins/styleguide/assets/javascripts/discourse/pre-initializers/styleguide-plugin-api.js

@@ -0,0 +1,42 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { addSection } from "../lib/styleguide";
+
+/**
+ * Add a section to the styleguide
+ *
+ * @function addStyleguideSection
+ * @param {Object} section
+ * @param {Component} section.component
+ * @param {string} options.id
+ * @param {string} options.category
+ * @param {number} [options.priority]
+ * @example
+ *
+ * import fidget from "../components/styleguide/molecules/fidget";
+ *
+ * api.addStyleguideSection({
+ *   component: fidget,
+ *   id: "fidget",
+ *   category: "molecules",
+ *   priority: 0,
+ * });
+ */
+
+export default {
+  name: "styleguide-plugin-api",
+  before: "inject-discourse-objects",
+
+  initialize() {
+    withPluginApi("1.2.0", (api) => {
+      const apiPrototype = Object.getPrototypeOf(api);
+
+      if (!apiPrototype.hasOwnProperty("addStyleguideSection")) {
+        Object.defineProperty(apiPrototype, "addStyleguideSection", {
+          value(section) {
+            addSection(section);
+          },
+        });
+      }
+    });
+  },
+};

plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js

@@ -1,29 +1,16 @@
 import Route from "@ember/routing/route";
-import {
+import { sectionById } from "discourse/plugins/styleguide/discourse/lib/styleguide";
-  findNote,
-  sectionById,
-} from "discourse/plugins/styleguide/discourse/lib/styleguide";
 import { createData } from "discourse/plugins/styleguide/discourse/lib/dummy-data";
 
-export default Route.extend({
+export default class StyleguideShow extends Route {
   model(params) {
     return sectionById(params.section);
-  },
+  }
 
   setupController(controller, section) {
-    let note = findNote(section);
-
     controller.setProperties({
       section,
-      note,
       dummy: createData(this.store),
     });
-  },
+  }
-
+}
-  renderTemplate(controller, section) {
-    this.render("styleguide.show");
-    this.render(`styleguide/${section.templateName}`, {
-      into: "styleguide.show",
-    });
-  },
-});

plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js

@@ -1,11 +1,12 @@
 import Route from "@ember/routing/route";
 import { allCategories } from "discourse/plugins/styleguide/discourse/lib/styleguide";
-export default Route.extend({
+
+export default class Styleguide extends Route {
   model() {
     return allCategories();
-  },
+  }
 
   setupController(controller, categories) {
     controller.set("categories", categories);
-  },
+  }
-});
+}

plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs

@@ -1,2 +0,0 @@
-<div class="color-bg {{this.color}}"></div>
-<div class="color-name">var(--{{this.color}})</div>

plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs

@@ -1,2 +0,0 @@
-<div class="example-title">{{this.title}}</div>
-<section class="rendered">{{yield this.value}}</section>

plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs

@@ -1,6 +0,0 @@
-<LinkTo
-  @route="styleguide.show"
-  @models={{array this.section.category this.section.id}}
->
-  {{section-title this.section.id}}
-</LinkTo>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs

@@ -1,17 +1,19 @@
 <section class="styleguide">
   <section class="styleguide-menu">
     <ToggleColorMode />
+
     {{#each this.categories as |c|}}
       <ul>
-        <li class="styleguide-heading">{{i18n
+        <li class="styleguide-heading">
-            (concat "styleguide.categories." c.id)
+          {{i18n (concat "styleguide.categories." c.id)}}
-          }}</li>
+        </li>
         {{#each c.sections as |s|}}
           <li><StyleguideLink @section={{s}} /></li>
         {{/each}}
       </ul>
     {{/each}}
   </section>
+
   <section class="styleguide-contents">
     {{outlet}}
   </section>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-link.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="topic-link">
-  {{topic-link this.dummy.topic}}
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs

@@ -1,9 +0,0 @@
-<StyleguideExample @title="category-breadcrumbs">
-  <BreadCrumbs @categories={{this.dummy.categories}} @showTags={{false}} />
-</StyleguideExample>
-
-{{#if this.siteSettings.tagging_enabled}}
-  <StyleguideExample @title="category-breadcrumbs - tags">
-    <BreadCrumbs @categories={{this.dummy.categories}} @showTags={{true}} />
-  </StyleguideExample>
-{{/if}}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs

@@ -1,10 +0,0 @@
-<StyleguideExample @title="<CharCounter>">
-  <CharCounter @max="50" @value={{this.charCounterContent}}>
-    <textarea
-      placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
-      {{on "input" (action (mut this.charCounterContent) value="target.value")}}
-      class="styleguide--char-counter"
-    >
-    </textarea>
-  </CharCounter>
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs

@@ -1,6 +0,0 @@
-<StyleguideExample @title="<EmptyState>">
-  <EmptyState
-    @title={{this.dummy.sentence}}
-    @body={{this.dummy.short_sentence}}
-  />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs

@@ -1,29 +0,0 @@
-<StyleguideExample @title="<NavigationBar>">
-  <NavigationBar @navItems={{this.dummy.navItems}} @filterMode="latest" />
-</StyleguideExample>
-
-<StyleguideExample @title=".user-main .nav-pills">
-  <MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
-    {{#each this.dummy.navItems as |ni|}}
-      <li><a
-          href={{ni.href}}
-          class={{if ni.styleGuideActive "active"}}
-        >{{ni.displayName}}</a></li>
-    {{/each}}
-  </MobileNav>
-</StyleguideExample>
-
-<StyleguideExample @title="group page <NavigationBar>">
-  <MobileNav @class="group-nav" @desktopClass="nav nav-pills">
-    <li class="group-dropdown">
-      <GroupDropdown @groups={{this.dummy.groupNames}} @value="staff" />
-    </li>
-
-    {{#each this.dummy.navItems as |ni|}}
-      <li><a
-          href={{ni.href}}
-          class={{if ni.styleGuideActive "active"}}
-        >{{ni.displayName}}</a></li>
-    {{/each}}
-  </MobileNav>
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="post-menu">
-  <MountWidget @widget="post-menu" @args={{this.dummy.transformedPost}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="<TopicNotificationsButton>">
-  <TopicNotificationsButton @topic={{this.dummy.topic}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="<TopicTimerInfo>">
-  <TopicTimerInfo @statusType="reminder" @executeAt={{this.dummy.soon}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="post">
-  <MountWidget @widget="post" @args={{this.dummy.transformedPost}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="topic-map">
-  <MountWidget @widget="topic-map" @args={{this.dummy.transformedPost}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs

@@ -1,7 +0,0 @@
-<StyleguideExample @title="<TopicList>">
-  <TopicList @topics={{this.dummy.topics}} @showPosters={{true}} />
-</StyleguideExample>
-
-<StyleguideExample @title="<TopicList> - hide posters>">
-  <TopicList @topics={{this.dummy.topics}} @showPosters={{false}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="<BasicTopicList>" class="half-size">
-  <BasicTopicList @topics={{this.dummy.topics}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="<CategoriesOnly>">
-  <CategoriesOnly @categories={{this.dummy.categories}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs

@@ -1,3 +0,0 @@
-<StyleguideExample @title="<SuggestedTopics>">
-  <SuggestedTopics @topic={{this.dummy.topic}} />
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs

@@ -1,377 +0,0 @@
-<StyleguideExample @title=".user-main .about.collapsed-info.no-background">
-  <DSection @class="user-main">
-    <section class="collapsed-info about no-background">
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar this.dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
-                    "wrench"
-                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
-              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
-                    "user.expand_profile"
-                  }}</a></li>
-            </ul>
-          </section>
-
-          <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}}
-              {{d-icon "shield-alt"}}</h1>
-            <h2 class="full-name">{{this.dummy.user.name}}</h2>
-            <h3>{{this.dummy.user.title}}</h3>
-          </div>
-        </div>
-        <div style="clear: both"></div>
-      </div>
-    </section>
-  </DSection>
-</StyleguideExample>
-
-<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
-  <DSection @class="user-main">
-    <section
-      class="collapsed-info about has-background"
-      style={{this.dummy.user.profileBackground}}
-    >
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar this.dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
-                    "wrench"
-                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
-              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
-                    "user.expand_profile"
-                  }}</a></li>
-            </ul>
-          </section>
-
-          <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}}
-              {{d-icon "shield-alt"}}</h1>
-            <h2 class="full-name">{{this.dummy.user.name}}</h2>
-            <h3>{{this.dummy.user.title}}</h3>
-          </div>
-        </div>
-        <div style="clear: both"></div>
-      </div>
-    </section>
-  </DSection>
-</StyleguideExample>
-
-<StyleguideExample @title=".user-main .about.no-background">
-  <DSection @class="user-main">
-    <section class="about no-background">
-
-      <div class="staff-counters">
-        <div><span
-            class="helpful-flags"
-          >{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n
-            "user.staff_counters.flags_given"
-          }}</div>
-        <div>
-          <a href="#">
-            <span
-              class="flagged-posts"
-            >{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n
-              "user.staff_counters.flagged_posts"
-            }}
-          </a>
-        </div>
-        <div>
-          <a href="#">
-            <span
-              class="deleted-posts"
-            >{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n
-              "user.staff_counters.deleted_posts"
-            }}
-          </a>
-        </div>
-        <div><span
-            class="suspensions"
-          >{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n
-            "user.staff_counters.suspensions"
-          }}</div>
-        <div><span
-            class="warnings-received"
-          >{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n
-            "user.staff_counters.warnings_received"
-          }}</div>
-      </div>
-
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar this.dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
-                    "wrench"
-                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
-            </ul>
-          </section>
-
-          <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}}
-              {{d-icon "shield-alt"}}</h1>
-            <h2 class="full-name">{{this.dummy.user.name}}</h2>
-            <h3>{{this.dummy.user.title}}</h3>
-            <h3>
-              {{d-icon "map-marker-alt"}}
-              {{this.dummy.user.location}}
-              {{d-icon "globe"}}
-              <a
-                href={{this.dummy.user.website}}
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-              >{{this.dummy.user.website_name}}</a>
-            </h3>
-
-            <div class="bio">
-              <div class="suspended">
-                {{d-icon "ban"}}
-                <b>{{i18n
-                    "user.suspended_notice"
-                    date=this.dummy.user.suspendedTillDate
-                  }}</b><br />
-                <b>{{i18n "user.suspended_reason"}}</b>
-                {{this.dummy.user.suspend_reason}}
-              </div>
-              {{html-safe this.dummy.user.bio_cooked}}
-            </div>
-
-            <div class="public-user-fields">
-              {{#each this.dummy.user.publicUserFields as |uf|}}
-                {{#if uf.value}}
-                  <div class="public-user-field {{uf.field.dasherized_name}}">
-                    <span class="user-field-name">{{uf.field.name}}</span>:
-                    <span class="user-field-value">{{uf.value}}</span>
-                  </div>
-                {{/if}}
-              {{/each}}
-            </div>
-          </div>
-        </div>
-        <div style="clear: both"></div>
-      </div>
-
-      <div class="secondary">
-        <dl>
-          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date
-              this.dummy.user.created_at
-            }}</dd>
-          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
-              this.dummy.user.last_posted_at
-            }}</dd>
-          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
-              this.dummy.user.last_seen_at
-            }}</dd>
-          <dt>{{i18n "views"}}</dt><dd
-          >{{this.dummy.user.profile_view_count}}</dd>
-          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
-            class="invited-by"
-          ><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
-          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
-            class="trust-level"
-          >{{this.dummy.user.trustLevel.name}}</dd>
-          <dt>{{i18n "user.email.title"}}</dt>
-          <dd title={{this.dummy.user.email}}>
-            <DButton
-              @icon="envelope"
-              @label="admin.users.check_email.text"
-              @class="btn-primary"
-            />
-          </dd>
-          <dt class="groups">{{i18n
-              "groups.title"
-              count=this.dummy.user.displayGroups.length
-            }}</dt>
-          <dd class="groups">
-            {{#each this.dummy.user.displayGroups as |group|}}
-              <span><a href="#" class="group-link">{{group.name}}</a></span>
-            {{/each}}
-          </dd>
-          <DButton
-            @icon="exclamation-triangle"
-            @label="user.admin_delete"
-            @class="btn-danger"
-          />
-        </dl>
-      </div>
-    </section>
-  </DSection>
-</StyleguideExample>
-
-<StyleguideExample @title=".user-main .about.has-background">
-  <DSection @class="user-main">
-    <section
-      class="about has-background"
-      style={{this.dummy.user.profileBackground}}
-    >
-      <div class="staff-counters">
-        <div><span
-            class="helpful-flags"
-          >{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n
-            "user.staff_counters.flags_given"
-          }}</div>
-        <div>
-          <a href="#">
-            <span
-              class="flagged-posts"
-            >{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n
-              "user.staff_counters.flagged_posts"
-            }}
-          </a>
-        </div>
-        <div>
-          <a href="#">
-            <span
-              class="deleted-posts"
-            >{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n
-              "user.staff_counters.deleted_posts"
-            }}
-          </a>
-        </div>
-        <div><span
-            class="suspensions"
-          >{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n
-            "user.staff_counters.suspensions"
-          }}</div>
-        <div><span
-            class="warnings-received"
-          >{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n
-            "user.staff_counters.warnings_received"
-          }}</div>
-      </div>
-
-      <div class="profile-image"></div>
-      <div class="details">
-        <div class="primary">
-          {{bound-avatar this.dummy.user "huge"}}
-          <section class="controls">
-            <ul>
-              <li>
-                <a class="btn btn-primary">
-                  {{d-icon "envelope"}}
-                  {{i18n "user.private_message"}}
-                </a>
-              </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
-                    "wrench"
-                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
-            </ul>
-          </section>
-
-          <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}}
-              {{d-icon "shield-alt"}}</h1>
-            <h2 class="full-name">{{this.dummy.user.name}}</h2>
-            <h3>{{this.dummy.user.title}}</h3>
-            <h3>
-              {{d-icon "map-marker-alt"}}
-              {{this.dummy.user.location}}
-              {{d-icon "globe"}}
-              <a
-                href={{this.dummy.user.website}}
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-              >{{this.dummy.user.website_name}}</a>
-            </h3>
-
-            <div class="bio">
-              <div class="suspended">
-                {{d-icon "ban"}}
-                <b>{{i18n
-                    "user.suspended_notice"
-                    date=this.dummy.user.suspendedTillDate
-                  }}</b><br />
-                <b>{{i18n "user.suspended_reason"}}</b>
-                {{this.dummy.user.suspend_reason}}
-              </div>
-              {{html-safe this.dummy.user.bio_cooked}}
-            </div>
-
-            <div class="public-user-fields">
-              {{#each this.dummy.user.publicUserFields as |uf|}}
-                {{#if uf.value}}
-                  <div class="public-user-field {{uf.field.dasherized_name}}">
-                    <span class="user-field-name">{{uf.field.name}}</span>:
-                    <span class="user-field-value">{{uf.value}}</span>
-                  </div>
-                {{/if}}
-              {{/each}}
-            </div>
-
-          </div>
-        </div>
-        <div style="clear: both"></div>
-      </div>
-
-      <div class="secondary">
-        <dl>
-          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date
-              this.dummy.user.created_at
-            }}</dd>
-          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
-              this.dummy.user.last_posted_at
-            }}</dd>
-          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
-              this.dummy.user.last_seen_at
-            }}</dd>
-          <dt>{{i18n "views"}}</dt><dd
-          >{{this.dummy.user.profile_view_count}}</dd>
-          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
-            class="invited-by"
-          ><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
-          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
-            class="trust-level"
-          >{{this.dummy.user.trustLevel.name}}</dd>
-          <dt>{{i18n "user.email.title"}}</dt>
-          <dd title={{this.dummy.user.email}}>
-            <DButton
-              @icon="envelope"
-              @label="admin.users.check_email.text"
-              @class="btn-primary"
-            />
-          </dd>
-          <dt class="groups">{{i18n
-              "groups.title"
-              count=this.dummy.user.displayGroups.length
-            }}</dt>
-          <dd class="groups">
-            {{#each this.dummy.user.displayGroups as |group|}}
-              <span><a href="#" class="group-link">{{group.name}}</a></span>
-            {{/each}}
-          </dd>
-          <DButton
-            @icon="exclamation-triangle"
-            @label="user.admin_delete"
-            @class="btn-danger"
-          />
-        </dl>
-      </div>
-    </section>
-  </DSection>
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.hbs

@@ -1,9 +1,9 @@
 <StyleguideSection @section={{this.section}}>
-  {{#if this.note}}
+  {{#let this.section.component as |SectionComponent|}}
-    <div class="styleguide-note">
+    <SectionComponent
-      {{component (concat "notes/" this.note)}}
+      @dummy={{this.dummy}}
-    </div>
+      @dummyAction={{this.dummyAction}}
-  {{/if}}
+      @siteSettings={{this.siteSettings}}
-
+    />
-  {{outlet}}
+  {{/let}}
 </StyleguideSection>

spec/integrity/coding_style_spec.rb

@@ -53,6 +53,7 @@ RSpec.describe "Coding style" do
       "wizard" => "app/assets/javascripts/wizard/addon/templates/components",
       "chat/discourse" => "plugins/chat/assets/javascripts/discourse/templates/components",
       "chat/admin" => "plugins/chat/assets/javascripts/admin/templates/components",
+      "styleguide" => "plugins/styleguide/assets/javascripts/discourse/templates/components",
     }.each_pair do |name, dir|
       it "do not exist for #{name}" do
         expect(list_files(dir)).to eq([])