From c011dd7b431f57dffb1415ff86b3a74d07281fdd Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 4 Jul 2022 17:01:01 +0100
Subject: [PATCH] DEV: Remove last few curly-component invocations

---
 .../admin/addon/templates/user-fields.hbs     |  15 +-
 .../addon/templates/watched-words-action.hbs  |   2 +-
 .../app/templates/components/sidebar.hbs      |   4 +-
 .../app/templates/modal/tag-upload.hbs        |   2 +-
 .../discourse/app/templates/preferences.hbs   |   4 +-
 .../app/templates/preferences/sidebar.hbs     |  38 ++---
 .../discourse-local-dates-create-form.hbs     | 107 ++++++------
 .../discourse-local-dates-create-modal.hbs    |   2 +-
 .../components/topic-presence-display.hbs     |   4 +-
 .../before-composer-controls/presence.hbs     |   2 +-
 .../topic-above-footer-buttons/presence.hbs   |   2 +-
 .../templates/modal/poll-breakdown.hbs        |  31 +---
 .../templates/modal/poll-ui-builder.hbs       |  85 +++-------
 .../templates/components/styleguide-link.hbs  |   4 +-
 .../discourse/templates/styleguide.hbs        |   2 +-
 .../styleguide/atoms/00-typography.hbs        |  28 +--
 .../styleguide/atoms/01-font-scale.hbs        |  52 +++---
 .../templates/styleguide/atoms/02-buttons.hbs |  92 ++++------
 .../templates/styleguide/atoms/03-colors.hbs  | 160 +++++++++---------
 .../templates/styleguide/atoms/04-icons.hbs   |   6 +-
 .../styleguide/atoms/05-input-fields.hbs      |  92 +++++-----
 .../styleguide/atoms/06-spinners.hbs          |   8 +-
 .../styleguide/atoms/date-time-inputs.hbs     |  45 +++--
 .../templates/styleguide/atoms/dropdowns.hbs  | 125 +++++++-------
 .../templates/styleguide/atoms/topic-link.hbs |   4 +-
 .../styleguide/atoms/topic-statuses.hbs       |  42 ++---
 .../discourse/templates/styleguide/index.hbs  |   4 +-
 .../styleguide/molecules/bread-crumbs.hbs     |  12 +-
 .../styleguide/molecules/categories.hbs       |  16 +-
 .../styleguide/molecules/empty-state.hbs      |   9 +-
 .../styleguide/molecules/footer-message.hbs   |  29 +---
 .../styleguide/molecules/header-icons.hbs     |  20 +--
 .../styleguide/molecules/navigation-bar.hbs   |  24 +--
 .../molecules/navigation-stacked.hbs          |  20 +--
 .../styleguide/molecules/post-menu.hbs        |   6 +-
 .../styleguide/molecules/signup-cta.hbs       |   6 +-
 .../styleguide/molecules/topic-list-item.hbs  |  24 +--
 .../molecules/topic-notifications.hbs         |   6 +-
 .../styleguide/molecules/topic-timer-info.hbs |   6 +-
 .../styleguide/organisms/00-post.hbs          |   6 +-
 .../styleguide/organisms/01-topic-map.hbs     |   6 +-
 .../organisms/03-topic-footer-buttons.hbs     |  12 +-
 .../styleguide/organisms/04-topic-list.hbs    |  12 +-
 .../styleguide/organisms/basic-topic-list.hbs |   6 +-
 .../styleguide/organisms/categories-list.hbs  |   6 +-
 .../templates/styleguide/organisms/modal.hbs  |  12 +-
 .../styleguide/organisms/navigation.hbs       |  16 +-
 .../styleguide/organisms/site-header.hbs      |  10 +-
 .../styleguide/organisms/suggested-topics.hbs |   6 +-
 .../styleguide/organisms/user-about.hbs       |  40 ++---
 .../discourse/templates/styleguide/show.hbs   |   4 +-
 51 files changed, 582 insertions(+), 694 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/user-fields.hbs b/app/assets/javascripts/admin/addon/templates/user-fields.hbs
index 198aa74eee5..66577e8194e 100644
--- a/app/assets/javascripts/admin/addon/templates/user-fields.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user-fields.hbs
@@ -5,13 +5,14 @@
 
   {{#if model}}
     {{#each sortedFields as |uf|}}
-      {{admin-user-field-item userField=uf
-                              fieldTypes=fieldTypes
-                              firstField=sortedFields.firstObject
-                              lastField=sortedFields.lastObject
-                              destroyAction=(action "destroy")
-                              moveUpAction=(action "moveUp")
-                              moveDownAction=(action "moveDown")}}
+      <AdminUserFieldItem @userField={{uf}}
+                          @fieldTypes={{fieldTypes}}
+                          @firstField={{sortedFields.firstObject}}
+                          @lastField={{sortedFields.lastObject}}
+                          @destroyAction={{action "destroy"}}
+                          @moveUpAction={{action "moveUp"}}
+                          @moveDownAction={{action "moveDown"}}
+                          />
     {{/each}}
   {{/if}}
 
diff --git a/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs b/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs
index 28dc9e6cb2f..d6dd5638ea8 100644
--- a/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs
+++ b/app/assets/javascripts/admin/addon/templates/watched-words-action.hbs
@@ -30,7 +30,7 @@
 {{#if showWordsList}}
   <div class="watched-words-list watched-words-{{actionNameKey}}">
     {{#each currentAction.words as |word| }}
-      <div class="watched-word-box">{{admin-watched-word actionKey=actionNameKey word=word action=(action "recordRemoved")}}</div>
+      <div class="watched-word-box"><AdminWatchedWord @actionKey={{actionNameKey}} @word={{word}} @action={{action "recordRemoved"}}/></div>
     {{/each}}
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
index 43699359aea..031d70fb35f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
@@ -1,4 +1,4 @@
-{{#d-section pageClass="has-sidebar" class="sidebar-wrapper"}}
+<DSection @pageClass="has-sidebar" @class="sidebar-wrapper">
   <div class="sidebar-container">
     <div class="sidebar-scroll-wrap">
       <Sidebar::TopicsSection />
@@ -13,4 +13,4 @@
       {{/if}}
     </div>
   </div>
-{{/d-section}}
+</DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs b/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs
index 2dfdae890d7..cbf818e3798 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/tag-upload.hbs
@@ -1,3 +1,3 @@
 <DModalBody @title="tagging.upload">
-  {{tags-uploader refresh=(route-action "triggerRefresh") closeModal=(route-action "closeModal") id="tags-uploader"}}
+  <TagsUploader @refresh={{route-action "triggerRefresh"}} @closeModal={{route-action "closeModal"}} @id="tags-uploader" />
 </DModalBody>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences.hbs b/app/assets/javascripts/discourse/app/templates/preferences.hbs
index b66a56969b3..facdae03058 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences.hbs
@@ -52,9 +52,9 @@
 
     {{#if this.siteSettings.enable_experimental_sidebar}}
       <li class="indent nav-sidebar">
-        {{#link-to "preferences.sidebar"}}
+        <LinkTo @route="preferences.sidebar">
           {{i18n "user.preferences_nav.sidebar"}}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/preferences/sidebar.hbs
index 4489aae3064..b55b3652cd1 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/sidebar.hbs
@@ -1,10 +1,10 @@
 <div class="control-group preferences-sidebar-options">
   <legend class="control-label">{{i18n "user.experimental_sidebar.options"}}</legend>
 
-  {{preference-checkbox
-      labelKey="user.experimental_sidebar.enable"
-      checked=model.user_option.enable_experimental_sidebar
-      class="preferences-sidebar-enable-checkbox"}}
+  <PreferenceCheckbox
+      @labelKey="user.experimental_sidebar.enable"
+      @checked={{model.user_option.enable_experimental_sidebar}}
+      @class="preferences-sidebar-enable-checkbox" />
 </div>
 
 {{#if model.experimental_sidebar_enabled}}
@@ -12,14 +12,14 @@
     <legend class="control-label">{{i18n "user.experimental_sidebar.categories_section"}}</legend>
 
     <div class="controls">
-      {{category-selector
-          categories=this.selectedSiderbarCategories
-          onChange=(action this.categoryUpdated)
-          options=(hash
+      <CategorySelector
+          @categories={{this.selectedSiderbarCategories}}
+          @onChange={{action this.categoryUpdated}}
+          @options={{hash
             allowUncategorized=(not this.siteSettings.suppress_uncategorized_badge)
             displayCategoryDescription=true
-          )
-      }}
+          }}
+      />
     </div>
 
     <div class="instructions">{{i18n "user.experimental_sidebar.categories_section_instruction"}}</div>
@@ -30,15 +30,15 @@
       <legend class="control-label">{{i18n "user.experimental_sidebar.tags_section"}}</legend>
 
       <div class="controls">
-        {{tag-chooser
-          tags=this.selectedSidebarTagNames
-          everyTag=true
-          unlimitedTagCount=true
-          onChange=(action this.tagUpdated)
-          options=(hash
+        <TagChooser
+          @tags={{this.selectedSidebarTagNames}}
+          @everyTag={{true}}
+          @unlimitedTagCount={{true}}
+          @onChange={{action this.tagUpdated}}
+          @options={{hash
             allowAny=false
-          )
-        }}
+          }}
+        />
       </div>
 
       <div class="instructions">{{i18n "user.experimental_sidebar.tags_section_instruction"}}</div>
@@ -46,4 +46,4 @@
   {{/if}}
 {{/if}}
 
-{{save-controls model=model action=(action "save") saved=saved}}
+<SaveControls @model={{model}} @action={{action "save"}} @saved={{saved}} />
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
index 63c4c545b6f..f2e54fc3baf 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
@@ -1,7 +1,4 @@
-{{#d-modal-body
-  title="discourse_local_dates.title"
-  class="discourse-local-dates-create-modal"
-  style="overflow: auto"}}
+<DModalBody @title="discourse_local_dates.title" @class="discourse-local-dates-create-modal" @style="overflow: auto">
 
   <div class="form">
     {{#if isValid}}
@@ -23,41 +20,41 @@
       <div class="inputs-panel">
         <div class="date-time-control from {{if fromSelected "is-selected"}} {{if fromFilled "is-filled"}}">
           {{d-icon "calendar-alt"}}
-          {{d-button
-            id="from-date-time"
-            action=(action "focusFrom")
-            translatedLabel=formattedFrom
-            class="date-time"}}
+          <DButton
+            @id="from-date-time"
+            @action={{action "focusFrom"}}
+            @translatedLabel={{formattedFrom}}
+            @class="date-time" />
         </div>
 
         <div class="date-time-control to {{if toSelected "is-selected"}} {{if toFilled "is-filled"}}">
           {{d-icon "calendar-alt"}}
-          {{d-button
-            action=(action "focusTo")
-            translatedLabel=formattedTo
-            class="date-time"}}
+          <DButton
+            @action={{action "focusTo"}}
+            @translatedLabel={{formattedTo}}
+            @class="date-time" />
           {{#if toFilled}}
-            {{d-button icon="times" action=(action "eraseToDateTime") class="delete-to-date"}}
+            <DButton @icon="times" action={{action "eraseToDateTime"}} @class="delete-to-date" />
           {{/if}}
         </div>
 
         {{#unless site.mobileView}}
-          {{timezone-input
-            options=(hash icon="globe")
-            value=timezone
-            onChange=(action (mut timezone))
-          }}
+          <TimezoneInput
+            @options={{hash icon="globe"}}
+            @value={{timezone}}
+            @onChange={{action (mut timezone)}}
+          />
         {{/unless}}
       </div>
 
       <div class="picker-panel">
-        {{input class="fake-input"}}
+        <Input @class="fake-input" />
         <div class="date-picker" id="picker-container-{{elementId}}"></div>
 
         {{#if fromSelected}}
           <div class="time-pickers">
             {{d-icon "far-clock"}}
-            {{input maxlength=5 placeholder="hh:mm" input=(action "setTime") type="time" value=time class="time-picker"}}
+            <Input @maxlength={{5}} @placeholder="hh:mm" @input={{action "setTime"}} @type="time" @value={{time}} @class="time-picker" />
           </div>
         {{/if}}
 
@@ -65,18 +62,18 @@
           {{#if toDate}}
             <div class="time-pickers">
               {{d-icon "far-clock"}}
-              {{input maxlength=5 placeholder="hh:mm" input=(action "setToTime") type="time" value=toTime class="time-picker"}}
+              <Input @maxlength={{5}} @placeholder="hh:mm" @input={{action "setToTime"}} @type="time" @value={{toTime}} @class="time-picker" />
             </div>
           {{/if}}
         {{/if}}
       </div>
 
       {{#if site.mobileView}}
-        {{timezone-input
-          value=timezone
-          options=(hash icon="globe")
-          onChange=(action (mut timezone))
-        }}
+        <TimezoneInput
+          @value={{timezone}}
+          @options={{hash icon="globe"}}
+          @onChange={{action (mut timezone)}}
+        />
       {{/if}}
     </div>
 
@@ -89,15 +86,15 @@
             </label>
             <p>{{html-safe (i18n "discourse_local_dates.create.form.recurring_description")}}</p>
             <div class="controls">
-              {{combo-box
-                content=recurringOptions
-                class="recurrence-input"
-                value=recurring
-                onChange=(action (mut recurring))
-                options=(hash
+              <ComboBox
+                @content={{recurringOptions}}
+                @class="recurrence-input"
+                @value={{recurring}}
+                @onChange={{action (mut recurring)}}
+                @options={{hash
                   none="discourse_local_dates.create.form.recurring_none"
-                )
-              }}
+                }}
+              />
             </div>
           </div>
         {{/unless}}
@@ -111,7 +108,7 @@
             </a>
           </p>
           <div class="controls">
-            {{text-field value=format class="format-input"}}
+            <TextField @value={{format}} @class="format-input" />
           </div>
         </div>
         <div class="control-group">
@@ -133,39 +130,39 @@
           <label>{{i18n "discourse_local_dates.create.form.timezones_title"}}</label>
           <p>{{i18n "discourse_local_dates.create.form.timezones_description"}}</p>
           <div class="controls">
-            {{multi-select
-              valueProperty=null
-              nameProperty=null
-              class="timezones-input"
-              content=allTimezones
-              value=timezones
-              options=(hash
+            <MultiSelect
+              @valueProperty={{null}}
+              @nameProperty={{null}}
+              @class="timezones-input"
+              @content={{allTimezones}}
+              @value={{timezones}}
+              @options={{hash
                 allowAny=false
                 maximum=5
-              )
-            }}
+              }}
+            />
           </div>
         </div>
       </div>
     {{/if}}
   </div>
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer discourse-local-dates-create-modal-footer">
   {{#if isValid}}
-    {{d-button
-      class="btn-primary"
-      action=(action "save")
-      label="discourse_local_dates.create.form.insert"}}
+    <DButton
+      @class="btn-primary"
+      @action={{action "save"}}
+      @label="discourse_local_dates.create.form.insert" />
   {{/if}}
 
   <a class="cancel-action" href {{action "cancel"}}>
     {{i18n "cancel"}}
   </a>
 
-  {{d-button
-    class="btn-default advanced-mode-btn"
-    action=(action "advancedMode")
-    icon="cog"
-    label=toggleModeBtnLabel}}
+  <DButton
+    @class="btn-default advanced-mode-btn"
+    @action={{action "advancedMode"}}
+    @icon="cog"
+    @label={{toggleModeBtnLabel}} />
 </div>
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/modal/discourse-local-dates-create-modal.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/modal/discourse-local-dates-create-modal.hbs
index 611be0377c2..a811468a3d4 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/modal/discourse-local-dates-create-modal.hbs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/modal/discourse-local-dates-create-modal.hbs
@@ -1 +1 @@
-{{discourse-local-dates-create-form config=config insertDate=insertDate}}
+<DiscourseLocalDatesCreateForm @config={{config}} @insertDate={{insertDate}} />
diff --git a/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs b/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs
index 33abf3510b4..6fef85897b1 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs
@@ -2,9 +2,9 @@
   <div class="presence-users">
     <div class="presence-avatars">
       {{#each users as |user|}}
-        {{#user-link user=user}}
+        <UserLink @user={{user}}>
           {{avatar user imageSize="small"}}
-        {{/user-link}}
+        </UserLink>
       {{/each}}
     </div>
     <span class="presence-text">
diff --git a/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/before-composer-controls/presence.hbs b/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/before-composer-controls/presence.hbs
index daae93fc744..712a0115162 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/before-composer-controls/presence.hbs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/before-composer-controls/presence.hbs
@@ -1 +1 @@
-{{composer-presence-display model=model}}
+<ComposerPresenceDisplay @model={{model}} />
diff --git a/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/topic-above-footer-buttons/presence.hbs b/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/topic-above-footer-buttons/presence.hbs
index 5b767869609..e4ec63b85be 100644
--- a/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/topic-above-footer-buttons/presence.hbs
+++ b/plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/topic-above-footer-buttons/presence.hbs
@@ -1,2 +1,2 @@
 {{!-- Note: the topic-above-footer-buttons outlet is only rendered for logged-in users --}}
-{{topic-presence-display topic=model}}
+<TopicPresenceDisplay @topic={{model}} />
diff --git a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-breakdown.hbs b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-breakdown.hbs
index 693e31a34eb..766b5110371 100644
--- a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-breakdown.hbs
+++ b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-breakdown.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="poll.breakdown.title"}}
+<DModalBody @title="poll.breakdown.title">
   <div class="poll-breakdown-sidebar">
     <p class="poll-breakdown-title">
       {{this.title}}
@@ -8,16 +8,7 @@
 
     <ul class="poll-breakdown-options">
       {{#each this.model.poll.options as |option index|}}
-        {{poll-breakdown-option
-          option=option
-          index=index
-          totalVotes=this.totalVotes
-          optionsCount=this.model.poll.options.length
-          displayMode=this.displayMode
-          highlightedOption=this.highlightedOption
-          onMouseOver=(fn (mut this.highlightedOption) index)
-          onMouseOut=(fn (mut this.highlightedOption) null)
-        }}
+        <PollBreakdownOption @option={{option}} @index={{index}} @totalVotes={{this.totalVotes}} @optionsCount={{this.model.poll.options.length}} @displayMode={{this.displayMode}} @highlightedOption={{this.highlightedOption}} @onMouseOver={{fn (mut this.highlightedOption) index}} @onMouseOut={{fn (mut this.highlightedOption) null}} />
       {{/each}}
     </ul>
   </div>
@@ -26,25 +17,13 @@
     <div class="poll-breakdown-body-header">
       <label class="poll-breakdown-body-header-label">{{i18n "poll.breakdown.breakdown"}}</label>
 
-      {{combo-box
-        content=this.groupableUserFields
-        value=this.groupedBy
-        nameProperty="label"
-        class="poll-breakdown-dropdown"
-        onChange=(action this.setGrouping)
-      }}
+      <ComboBox @content={{this.groupableUserFields}} @value={{this.groupedBy}} @nameProperty="label" @class="poll-breakdown-dropdown" @onChange={{action this.setGrouping}} />
     </div>
 
     <div class="poll-breakdown-charts">
       {{#each this.charts as |chart|}}
-        {{poll-breakdown-chart
-          group=(get chart "group")
-          options=(get chart "options")
-          displayMode=this.displayMode
-          highlightedOption=this.highlightedOption
-          setHighlightedOption=(fn (mut this.highlightedOption))
-        }}
+        <PollBreakdownChart @group={{get chart "group"}} @options={{get chart "options"}} @displayMode={{this.displayMode}} @highlightedOption={{this.highlightedOption}} @setHighlightedOption={{fn (mut this.highlightedOption)}} />
       {{/each}}
     </div>
   </div>
-{{/d-modal-body}}
+</DModalBody>
diff --git a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
index 45ac872401d..186803231b6 100644
--- a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
+++ b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body title="poll.ui_builder.title" class="poll-ui-builder"}}
+<DModalBody @title="poll.ui_builder.title" @class="poll-ui-builder">
   <div class="input-group poll-type">
     <a href {{action (mut pollType) "regular"}} class="poll-type-value {{if isRegular "active"}}">
       {{i18n "poll.ui_builder.poll_type.regular"}}
@@ -18,7 +18,7 @@
   {{#if showAdvanced}}
     <div class="input-group poll-title">
       <label class="input-group-label">{{i18n "poll.ui_builder.poll_title.label"}}</label>
-      {{input value=pollTitle}}
+      <Input @value={{pollTitle}} />
     </div>
   {{/if}}
 
@@ -26,27 +26,27 @@
     <div class="poll-options">
       {{#if showAdvanced}}
         <label class="input-group-label">{{i18n "poll.ui_builder.poll_options.label"}}</label>
-        {{textarea value=pollOptionsText input=(action "onOptionsTextChange")}}
+        <Textarea @value={{pollOptionsText}} @input={{action "onOptionsTextChange"}} />
 
         {{#if showMinNumOfOptionsValidation}}
           {{#unless minNumOfOptionsValidation.ok}}
-            {{input-tip validation=minNumOfOptionsValidation}}
+            <InputTip @validation={{minNumOfOptionsValidation}} />
           {{/unless}}
         {{/if}}
       {{else}}
         {{#each pollOptions as |option|}}
           <div class="input-group poll-option-value">
-            {{input value=option.value enter=(action "addOption" option)}}
+            <Input @value={{option.value}} @enter={{action "addOption" option}} />
             {{#if canRemoveOption}}
-              {{d-button icon="trash-alt" action=(action "removeOption" option)}}
+              <DButton @icon="trash-alt" @action={{action "removeOption" option}} />
             {{/if}}
           </div>
         {{/each}}
 
         <div class="poll-option-controls">
-          {{d-button class="btn-default" icon="plus" label="poll.ui_builder.poll_options.add" action=(action "addOption" pollOptions.lastObject)}}
+          <DButton @class="btn-default" @icon="plus" @label="poll.ui_builder.poll_options.add" @action={{action "addOption" pollOptions.lastObject}} />
           {{#if (and showMinNumOfOptionsValidation (not minNumOfOptionsValidation.ok))}}
-            {{input-tip validation=minNumOfOptionsValidation}}
+            <InputTip @validation={{minNumOfOptionsValidation}} />
           {{/if}}
         </div>
       {{/if}}
@@ -57,69 +57,41 @@
     <div class="options">
       <div class="input-group poll-number">
         <label class="input-group-label">{{i18n "poll.ui_builder.poll_config.min"}}</label>
-        {{input type="number"
-                value=pollMin
-                valueProperty="value"
-                class="poll-options-min"
-                min=1}}
+        <Input @type="number" @value={{pollMin}} @valueProperty="value" class="poll-options-min" @min={{1}} />
       </div>
 
       <div class="input-group poll-number">
         <label class="input-group-label">{{i18n "poll.ui_builder.poll_config.max"}}</label>
-        {{input type="number"
-                value=pollMax
-                valueProperty="value"
-                class="poll-options-max"
-                min=1}}
+        <Input @type="number" @value={{pollMax}} @valueProperty="value" class="poll-options-max" @min={{1}} />
       </div>
 
       {{#if isNumber}}
         <div class="input-group poll-number">
           <label class="input-group-label">{{i18n "poll.ui_builder.poll_config.step"}}</label>
-          {{input type="number"
-                  value=pollStep
-                  valueProperty="value"
-                  min="1"
-                  class="poll-options-step"}}
+          <Input @type="number" @value={{pollStep}} @valueProperty="value" @min="1" class="poll-options-step" />
         </div>
       {{/if}}
     </div>
 
     {{#unless minMaxValueValidation.ok}}
-      {{input-tip validation=minMaxValueValidation}}
+      <InputTip @validation={{minMaxValueValidation}} />
     {{/unless}}
   {{/unless}}
 
   {{#if showAdvanced}}
     <div class="input-group poll-allowed-groups">
       <label class="input-group-label">{{i18n "poll.ui_builder.poll_groups.label"}}</label>
-      {{group-chooser
-        content=siteGroups
-        value=pollGroups
-        onChange=(action (mut pollGroups))
-        labelProperty="name"
-        valueProperty="name"}}
+      <GroupChooser @content={{siteGroups}} @value={{pollGroups}} @onChange={{action (mut pollGroups)}} @labelProperty="name" @valueProperty="name" />
     </div>
 
     <div class="input-group poll-date">
       <label class="input-group-label">{{i18n "poll.ui_builder.automatic_close.label"}}</label>
-      {{date-time-input
-        date=pollAutoClose
-        onChange=(action (mut pollAutoClose))
-        clearable=true
-        useGlobalPickerContainer=true
-      }}
+      <DateTimeInput @date={{pollAutoClose}} @onChange={{action (mut pollAutoClose)}} @clearable={{true}} @useGlobalPickerContainer={{true}} />
     </div>
 
     <div class="input-group poll-select">
       <label class="input-group-label">{{i18n "poll.ui_builder.poll_result.label"}}</label>
-      {{combo-box
-        content=pollResults
-        value=pollResult
-        class="poll-result"
-        valueProperty="value"
-        onChange=(action (mut pollResult))
-      }}
+      <ComboBox @content={{pollResults}} @value={{pollResult}} @class="poll-result" @valueProperty="value" @onChange={{action (mut pollResult)}} />
     </div>
 
     {{#unless isNumber}}
@@ -127,12 +99,12 @@
         <label class="input-group-label">{{i18n "poll.ui_builder.poll_chart_type.label"}}</label>
 
         <div class="radio-group">
-          {{radio-button id="poll-chart-type-bar" name="poll-chart-type" value="bar" selection=chartType}}
+          <RadioButton @id="poll-chart-type-bar" @name="poll-chart-type" @value="bar" @selection={{chartType}} />
           <label for="poll-chart-type-bar">{{d-icon "chart-bar"}} {{i18n "poll.ui_builder.poll_chart_type.bar"}}</label>
         </div>
 
         <div class="radio-group">
-          {{radio-button id="poll-chart-type-pie" name="poll-chart-type" value="pie" selection=chartType}}
+          <RadioButton @id="poll-chart-type-pie" @name="poll-chart-type" @value="pie" @selection={{chartType}} />
           <label for="poll-chart-type-pie">{{d-icon "chart-pie"}} {{i18n "poll.ui_builder.poll_chart_type.pie"}}</label>
         </div>
       </div>
@@ -141,31 +113,18 @@
     {{#unless isPie}}
       <div class="input-group poll-checkbox column">
         <label>
-          {{input type="checkbox" checked=publicPoll}}
+          <Input @type="checkbox" @checked={{publicPoll}} />
           {{i18n "poll.ui_builder.poll_public.label"}}
         </label>
       </div>
     {{/unless}}
   {{/if}}
-{{/d-modal-body}}
+</DModalBody>
 
 <div class="modal-footer">
-  {{d-button
-    action=(action "insertPoll")
-    icon="chart-bar"
-    class="btn-primary"
-    label="poll.ui_builder.insert"
-    disabled=disableInsert}}
+  <DButton @action={{action "insertPoll"}} @icon="chart-bar" @class="btn-primary" @label="poll.ui_builder.insert" @disabled={{disableInsert}} />
 
-  {{d-button
-    label="cancel"
-    class="btn-flat"
-    action=(route-action "closeModal")
-  }}
+  <DButton @label="cancel" @class="btn-flat" @action={{route-action "closeModal"}} />
 
-  {{d-button
-    action=(action "toggleAdvanced")
-    class="btn-default show-advanced"
-    icon="cog"
-    title=(if showAdvanced "poll.ui_builder.hide_advanced" "poll.ui_builder.show_advanced")}}
+  <DButton @action={{action "toggleAdvanced"}} @class="btn-default show-advanced" @icon="cog" @title={{if showAdvanced "poll.ui_builder.hide_advanced" "poll.ui_builder.show_advanced"}} />
 </div>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs
index f4f8e6fb4bd..7d6e8106637 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-link.hbs
@@ -1,3 +1,3 @@
-{{#link-to "styleguide.show" section.category section.id}}
+<LinkTo @route="styleguide.show" @models={{array section.category section.id}}>
   {{section-title section.id}}
-{{/link-to}}
+</LinkTo>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
index 9647b54759e..4ddd5d0cdd8 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
@@ -4,7 +4,7 @@
       <ul>
         <li class="styleguide-heading">{{i18n (concat "styleguide.categories." c.id)}}</li>
         {{#each c.sections as |s|}}
-          <li>{{styleguide-link section=s}}</li>
+          <li><StyleguideLink @section={{s}} /></li>
         {{/each}}
       </ul>
     {{/each}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/00-typography.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/00-typography.hbs
index 46ed67a5d01..44c62180c82 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/00-typography.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/00-typography.hbs
@@ -1,27 +1,27 @@
-{{#styleguide-example title="h1"}}
+<StyleguideExample @title="h1">
   <h1>{{i18n "styleguide.sections.typography.example"}}</h1>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="h2"}}
+<StyleguideExample @title="h2">
   <h2>{{i18n "styleguide.sections.typography.example"}}</h2>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="h3"}}
+<StyleguideExample @title="h3">
   <h3>{{i18n "styleguide.sections.typography.example"}}</h3>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="h4"}}
+<StyleguideExample @title="h4">
   <h4>{{i18n "styleguide.sections.typography.example"}}</h4>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="h5"}}
+<StyleguideExample @title="h5">
   <h5>{{i18n "styleguide.sections.typography.example"}}</h5>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="h6"}}
+<StyleguideExample @title="h6">
   <h6>{{i18n "styleguide.sections.typography.example"}}</h6>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="p"}}
+<StyleguideExample @title="p">
   <p>{{i18n "styleguide.sections.typography.paragraph"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
index 8df374a6862..25b1483ea8c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
@@ -46,54 +46,54 @@
   </p>
 </div>
 
-{{#styleguide-example title="var(--font-up-6), 2.296em"}}
+<StyleguideExample @title="var(--font-up-6), 2.296em">
   <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-up-5), 2em"}}
+<StyleguideExample @title="var(--font-up-5), 2em">
   <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-up-4), 1.7511em"}}
+<StyleguideExample @title="var(--font-up-4), 1.7511em">
   <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-up-3), 1.5157em"}}
+<StyleguideExample @title="var(--font-up-3), 1.5157em">
   <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-up-2), 1.3195em"}}
+<StyleguideExample @title="var(--font-up-2), 1.3195em">
   <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-up-1), 1.1487em"}}
+<StyleguideExample @title="var(--font-up-1), 1.1487em">
   <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-0), 1em — base font"}}
+<StyleguideExample @title="var(--font-0), 1em — base font">
   <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-down-1), 0.8706em"}}
+<StyleguideExample @title="var(--font-down-1), 0.8706em">
   <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-down-2), 0.7579em"}}
+<StyleguideExample @title="var(--font-down-2), 0.7579em">
   <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-down-3), 0.6599em"}}
+<StyleguideExample @title="var(--font-down-3), 0.6599em">
   <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-down-4), 0.5745em"}}
+<StyleguideExample @title="var(--font-down-4), 0.5745em">
   <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-down-5), 0.5em"}}
+<StyleguideExample @title="var(--font-down-5), 0.5em">
   <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="var(--font-down-6), 0.4355em"}}
+<StyleguideExample @title="var(--font-down-6), 0.4355em">
   <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
index 1d95124fb95..bd41fb226f9 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
@@ -1,91 +1,71 @@
-{{#styleguide-example title=".btn-icon - sizes (large, default, small)"}}
+<StyleguideExample @title=".btn-icon - sizes (large, default, small)">
   {{#each dummy.buttonSizes as |bs|}}
-    {{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
+    <DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-icon - states"}}
+<StyleguideExample @title=".btn-icon - states">
   {{#each dummy.buttonStates as |bs|}}
-    {{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
+    <DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-text - sizes (large, default, small)"}}
+<StyleguideExample @title=".btn-text - sizes (large, default, small)">
   {{#each dummy.buttonSizes as |bs|}}
-    {{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
+    <DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-text - states"}}
+<StyleguideExample @title=".btn-text - states">
   {{#each dummy.buttonStates as |bs|}}
-    {{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
+    <DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-default .btn-icon-text - sizes (large, default, small)"}}
+<StyleguideExample @title=".btn-default .btn-icon-text - sizes (large, default, small)">
   {{#each dummy.buttonSizes as |bs|}}
-    {{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
+    <DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-default .btn-icon-text - states"}}
+<StyleguideExample @title=".btn-default .btn-icon-text - states">
   {{#each dummy.buttonStates as |bs|}}
-    {{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
+    <DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-primary .btn-icon-text - sizes (large, default, small)"}}
+<StyleguideExample @title=".btn-primary .btn-icon-text - sizes (large, default, small)">
   {{#each dummy.buttonSizes as |bs|}}
-    {{d-button
-      class=(concat "btn-primary " bs.class)
-      icon="plus"
-      translatedLabel=bs.text
-      disabled=bs.disabled
-    }}
+    <DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-primary .btn-icon-text - states"}}
+<StyleguideExample @title=".btn-primary .btn-icon-text - states">
   {{#each dummy.buttonStates as |bs|}}
-    {{d-button
-      class=(concat "btn-primary " bs.class)
-      icon="plus"
-      translatedLabel=bs.text
-      disabled=bs.disabled
-    }}
+    <DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-danger .btn-icon-text - sizes (large, default, small)"}}
+<StyleguideExample @title=".btn-danger .btn-icon-text - sizes (large, default, small)">
   {{#each dummy.buttonSizes as |bs|}}
-    {{d-button
-      class=(concat "btn-danger " bs.class)
-      icon="trash-alt"
-      translatedLabel=bs.text
-      disabled=bs.disabled
-    }}
+    <DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-danger .btn-icon-text - states"}}
+<StyleguideExample @title=".btn-danger .btn-icon-text - states">
   {{#each dummy.buttonStates as |bs|}}
-    {{d-button
-      class=(concat "btn-danger " bs.class)
-      icon="trash-alt"
-      translatedLabel=bs.text
-      disabled=bs.disabled
-    }}
+    <DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-flat - sizes (large, default, small)"}}
+<StyleguideExample @title=".btn-flat - sizes (large, default, small)">
   {{#each dummy.buttonSizes as |bs|}}
-    {{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
+    <FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".btn-flat - states"}}
+<StyleguideExample @title=".btn-flat - states">
   {{#each dummy.buttonStates as |bs|}}
-    {{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
+    <FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
index 2d8e015973f..f508a77dabb 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
@@ -1,122 +1,122 @@
-{{#styleguide-example title="primary"}}
+<StyleguideExample @title="primary">
   <section class="color-row">
-    {{color-example color="primary-very-low"}}
-    {{color-example color="primary-low"}}
-    {{color-example color="primary-low-mid"}}
+    <ColorExample @color="primary-very-low" />
+    <ColorExample @color="primary-low" />
+    <ColorExample @color="primary-low-mid" />
   </section>
   <section class="color-row">
-    {{color-example color="primary-medium"}}
-    {{color-example color="primary-high"}}
-    {{color-example color="primary"}}
+    <ColorExample @color="primary-medium" />
+    <ColorExample @color="primary-high" />
+    <ColorExample @color="primary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="primary-100"}}
+<StyleguideExample @title="primary-100">
   <section class="color-row">
-    {{color-example color="primary-50"}}
-    {{color-example color="primary-100"}}
-    {{color-example color="primary-200"}}
-    {{color-example color="primary-300"}}
-    {{color-example color="primary-400"}}
-    {{color-example color="primary-500"}}
+    <ColorExample @color="primary-50" />
+    <ColorExample @color="primary-100" />
+    <ColorExample @color="primary-200" />
+    <ColorExample @color="primary-300" />
+    <ColorExample @color="primary-400" />
+    <ColorExample @color="primary-500" />
   </section>
   <section class="color-row">
-    {{color-example color="primary-600"}}
-    {{color-example color="primary-700"}}
-    {{color-example color="primary-800"}}
-    {{color-example color="primary-900"}}
-    {{color-example color="primary"}}
+    <ColorExample @color="primary-600" />
+    <ColorExample @color="primary-700" />
+    <ColorExample @color="primary-800" />
+    <ColorExample @color="primary-900" />
+    <ColorExample @color="primary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="secondary"}}
+<StyleguideExample @title="secondary">
   <section class="color-row">
-    {{color-example color="secondary-low"}}
-    {{color-example color="secondary-medium"}}
-    {{color-example color="secondary-high"}}
-    {{color-example color="secondary"}}
+    <ColorExample @color="secondary-low" />
+    <ColorExample @color="secondary-medium" />
+    <ColorExample @color="secondary-high" />
+    <ColorExample @color="secondary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="tertiary"}}
+<StyleguideExample @title="tertiary">
   <section class="color-row">
-    {{color-example color="tertiary-low"}}
-    {{color-example color="tertiary-medium"}}
-    {{color-example color="tertiary-high"}}
-    {{color-example color="tertiary"}}
+    <ColorExample @color="tertiary-low" />
+    <ColorExample @color="tertiary-medium" />
+    <ColorExample @color="tertiary-high" />
+    <ColorExample @color="tertiary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="tertiary-100"}}
+<StyleguideExample @title="tertiary-100">
   <section class="color-row">
-    {{color-example color="tertiary-50"}}
-    {{color-example color="tertiary-100"}}
-    {{color-example color="tertiary-200"}}
-    {{color-example color="tertiary-300"}}
-    {{color-example color="tertiary-400"}}
-    {{color-example color="tertiary-500"}}
+    <ColorExample @color="tertiary-50" />
+    <ColorExample @color="tertiary-100" />
+    <ColorExample @color="tertiary-200" />
+    <ColorExample @color="tertiary-300" />
+    <ColorExample @color="tertiary-400" />
+    <ColorExample @color="tertiary-500" />
   </section>
   <section class="color-row">
-    {{color-example color="tertiary-600"}}
-    {{color-example color="tertiary-700"}}
-    {{color-example color="tertiary-800"}}
-    {{color-example color="tertiary-900"}}
-    {{color-example color="tertiary"}}
+    <ColorExample @color="tertiary-600" />
+    <ColorExample @color="tertiary-700" />
+    <ColorExample @color="tertiary-800" />
+    <ColorExample @color="tertiary-900" />
+    <ColorExample @color="tertiary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="quaternary"}}
+<StyleguideExample @title="quaternary">
   <section class="color-row">
-    {{color-example color="quaternary-low"}}
-    {{color-example color="quaternary"}}
+    <ColorExample @color="quaternary-low" />
+    <ColorExample @color="quaternary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="highlight"}}
+<StyleguideExample @title="highlight">
   <section class="color-row">
-    {{color-example color="highlight-low"}}
-    {{color-example color="highlight-medium"}}
-    {{color-example color="highlight"}}
-    {{color-example color="highlight-high"}}
+    <ColorExample @color="highlight-low" />
+    <ColorExample @color="highlight-medium" />
+    <ColorExample @color="highlight" />
+    <ColorExample @color="highlight-high" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="danger"}}
+<StyleguideExample @title="danger">
   <section class="color-row">
-    {{color-example color="danger-low"}}
-    {{color-example color="danger-low-mid"}}
-    {{color-example color="danger-medium"}}
-    {{color-example color="danger"}}
+    <ColorExample @color="danger-low" />
+    <ColorExample @color="danger-low-mid" />
+    <ColorExample @color="danger-medium" />
+    <ColorExample @color="danger" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="success"}}
+<StyleguideExample @title="success">
   <section class="color-row">
-    {{color-example color="success-low"}}
-    {{color-example color="success-medium"}}
-    {{color-example color="success"}}
+    <ColorExample @color="success-low" />
+    <ColorExample @color="success-medium" />
+    <ColorExample @color="success" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="love"}}
+<StyleguideExample @title="love">
   <section class="color-row">
-    {{color-example color="love-low"}}
-    {{color-example color="love"}}
+    <ColorExample @color="love-low" />
+    <ColorExample @color="love" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="header_primary"}}
+<StyleguideExample @title="header_primary">
   <section class="color-row">
-    {{color-example color="header_background"}}
+    <ColorExample @color="header_background" />
   </section>
   <section class="color-row">
-    {{color-example color="header_primary"}}
-    {{color-example color="header_primary-very-high"}}
-    {{color-example color="header_primary-high"}}
+    <ColorExample @color="header_primary" />
+    <ColorExample @color="header_primary-very-high" />
+    <ColorExample @color="header_primary-high" />
   </section>
   <section class="color-row">
-    {{color-example color="header_primary-medium"}}
-    {{color-example color="header_primary-low-mid"}}
-    {{color-example color="header_primary-low"}}
+    <ColorExample @color="header_primary-medium" />
+    <ColorExample @color="header_primary-low-mid" />
+    <ColorExample @color="header_primary-low" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/04-icons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/04-icons.hbs
index a79483a3593..f9458678c53 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/04-icons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/04-icons.hbs
@@ -10,6 +10,6 @@
   <p>By default, all icons have the <pre class="pre-inline">.d-icon</pre> class applied along with a class containing the name of the icon (e.g., <pre class="pre-inline">.d-icon-link</pre>)</p>
 </div>
 
-{{#styleguide-example title="d-icon - all available icons"}}
-  {{styleguide-icons}}
-{{/styleguide-example}}
+<StyleguideExample @title="d-icon - all available icons">
+  <StyleguideIcons />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
index d3b743b793a..340c12a7bbd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
@@ -1,76 +1,76 @@
-{{#styleguide-example title="text-field"}}
-  {{text-field placeholder="Placeholder"}}
-{{/styleguide-example}}
+<StyleguideExample @title="text-field">
+  <TextField @placeholder="Placeholder" />
+</StyleguideExample>
 
-{{#styleguide-example title="password"}}
-  {{password-field type="password" placeholder="Placeholder"}}
-{{/styleguide-example}}
+<StyleguideExample @title="password">
+  <PasswordField @type="password" @placeholder="Placeholder" />
+</StyleguideExample>
 
-{{#styleguide-example title="textarea"}}
-  {{textarea placeholder="Placeholder"}}
-{{/styleguide-example}}
+<StyleguideExample @title="textarea">
+  <Textarea placeholder="Placeholder" />
+</StyleguideExample>
 
-{{#styleguide-example title="inline-form"}}
+<StyleguideExample @title="inline-form">
   <div class="inline-form">
-    {{text-field placeholder="Placeholder"}}
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <TextField @placeholder="Placeholder" />
+    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="inline-form with icon button"}}
+<StyleguideExample @title="inline-form with icon button">
   <div class="inline-form">
-    {{text-field placeholder="Placeholder"}}
-    {{d-button class="btn-primary" icon="search" type="submit"}}
+    <TextField @placeholder="Placeholder" />
+    <DButton @class="btn-primary" @icon="search" @type="submit" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="full-width inline-form with single input"}}
+<StyleguideExample @title="full-width inline-form with single input">
   <div class="inline-form full-width">
-    {{text-field placeholder="Placeholder"}}
+    <TextField @placeholder="Placeholder" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="full-width inline-form with input and icon button"}}
+<StyleguideExample @title="full-width inline-form with input and icon button">
   <div class="inline-form full-width">
-    {{text-field placeholder="Placeholder"}}
-    {{d-button class="btn-primary" icon="search" type="submit"}}
+    <TextField @placeholder="Placeholder" />
+    <DButton @class="btn-primary" @icon="search" @type="submit" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="inline-form with combo-box" initialValue=dummy.options.[0].name as |value|}}
+<StyleguideExample @title="inline-form with combo-box" @initialValue={{dummy.options.[0].name}} as |value|>
   <div class="inline-form">
-    {{text-field placeholder="Placeholder"}}
-    {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <TextField @placeholder="Placeholder" />
+    <ComboBox @content={{dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
+    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="inline-form with multi-select"}}
+<StyleguideExample @title="inline-form with multi-select">
   <div class="inline-form">
-    {{text-field}}
-    {{multi-select content=dummy.options onChange=(action "dummy")}}
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <TextField />
+    <MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
+    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="inline-form with multi-select and label"}}
+<StyleguideExample @title="inline-form with multi-select and label">
   <div class="inline-form">
     <label>Text:</label>
-    {{text-field}}
-    {{multi-select content=dummy.options onChange=(action "dummy")}}
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <TextField />
+    <MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
+    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="full-width inline-form with search type input"}}
+<StyleguideExample @title="full-width inline-form with search type input">
   <div class="inline-form full-width">
-    {{input placeholder="Search type input" type="search"}}
+    <Input placeholder="Search type input" @type="search" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="category-notifications-button and regular button"}}
+<StyleguideExample @title="category-notifications-button and regular button">
   <div class="inline-form">
-    {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
-    {{d-button icon="reply" type="submit" translatedLabel="Button"}}
+    <CategoryNotificationsButton @category={{dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
+    <DButton @icon="reply" @type="submit" @translatedLabel="Button" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/06-spinners.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/06-spinners.hbs
index c7d17e3efba..a93216e3504 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/06-spinners.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/06-spinners.hbs
@@ -1,7 +1,7 @@
-{{#styleguide-example title="spinner - small"}}
+<StyleguideExample @title="spinner - small">
   <div class="spinner small"></div>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="spinner - regular"}}
+<StyleguideExample @title="spinner - regular">
   <div class="spinner"></div>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
index c55c80fbfbf..c25a28941ae 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
@@ -1,31 +1,28 @@
-{{#styleguide-example title="time-input"}}
-  {{time-input}}
-{{/styleguide-example}}
+<StyleguideExample @title="time-input">
+  <TimeInput />
+</StyleguideExample>
 
-{{#styleguide-example title="date-input"}}
-  {{date-input}}
-{{/styleguide-example}}
+<StyleguideExample @title="date-input">
+  <DateInput />
+</StyleguideExample>
 
-{{#styleguide-example title="date-time-input"}}
-  {{date-time-input clearable=true}}
-{{/styleguide-example}}
+<StyleguideExample @title="date-time-input">
+  <DateTimeInput @clearable={{true}} />
+</StyleguideExample>
 
-{{#styleguide-example title="date-time-input-range"}}
-  {{date-time-input-range}}
-{{/styleguide-example}}
+<StyleguideExample @title="date-time-input-range">
+  <DateTimeInputRange />
+</StyleguideExample>
 
-{{#styleguide-example title="date-time-input-range"}}
-  {{date-time-input-range showFromTime=false showToTime=false}}
-{{/styleguide-example}}
+<StyleguideExample @title="date-time-input-range">
+  <DateTimeInputRange @showFromTime={{false}} @showToTime={{false}} />
+</StyleguideExample>
 
-{{#styleguide-example title="future-date-input"}}
-  {{future-date-input
-    displayLabelIcon="far-clock"
-    clearable=true
-  }}
-{{/styleguide-example}}
+<StyleguideExample @title="future-date-input">
+  <FutureDateInput @displayLabelIcon="far-clock" @clearable={{true}} />
+</StyleguideExample>
 
-{{#styleguide-example title="date-picker"}}
-  {{date-picker defaultDate="YYYY-MM-DD"}}
-{{/styleguide-example}}
+<StyleguideExample @title="date-picker">
+  <DatePicker @defaultDate="YYYY-MM-DD" />
+</StyleguideExample>
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
index 0426135687b..fd904f80019 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
@@ -1,86 +1,77 @@
-{{#styleguide-example title="combo-box" initialValue=dummy.options.[0].name as |value|}}
-  {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
-{{/styleguide-example}}
+<StyleguideExample @title="combo-box" @initialValue={{dummy.options.[0].name}} as |value|>
+  <ComboBox @content={{dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
+</StyleguideExample>
 
-{{#styleguide-example title="filterable combo-box" initialValue=dummy.categories.[0].name as |value|}}
-  {{combo-box content=dummy.categories value=value options=(hash filterable=true) onChange=(fn (mut value))}}
-{{/styleguide-example}}
+<StyleguideExample @title="filterable combo-box" @initialValue={{dummy.categories.[0].name}} as |value|>
+  <ComboBox @content={{dummy.categories}} @value={{value}} @options={{hash filterable=true}} @onChange={{fn (mut value)}} />
+</StyleguideExample>
 
-{{#styleguide-example title="combo-box with a default state" initialValue=dummy.options.[0].name as |value|}}
-  {{combo-box content=dummy.options value=value options=(hash none="category.none") onChange=(fn (mut value))}}
-{{/styleguide-example}}
+<StyleguideExample @title="combo-box with a default state" @initialValue={{dummy.options.[0].name}} as |value|>
+  <ComboBox @content={{dummy.options}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
+</StyleguideExample>
 
-{{#styleguide-example title="combo-box clearable" initialValue=dummy.options.[0].name as |value|}}
-  {{combo-box content=dummy.options clearable=true value=value options=(hash none="category.none") onChange=(fn (mut value))}}
-{{/styleguide-example}}
+<StyleguideExample @title="combo-box clearable" @initialValue={{dummy.options.[0].name}} as |value|>
+  <ComboBox @content={{dummy.options}} @clearable={{true}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
+</StyleguideExample>
 
-{{#styleguide-example title="topic-notifications-options" initialValue=1 as |value|}}
-  {{topic-notifications-options topic=dummy.topic value=value onChange=(fn (mut value))}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-notifications-options" @initialValue={{1}} as |value|>
+  <TopicNotificationsOptions @topic={{dummy.topic}} @value={{value}} @onChange={{fn (mut value)}} />
+</StyleguideExample>
 
-{{#styleguide-example title="topic-footer-mobile-dropdown"}}
-  {{topic-footer-mobile-dropdown topic=dummy.topic}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-footer-mobile-dropdown">
+  <TopicFooterMobileDropdown @topic={{dummy.topic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="category-chooser" initialValue=categories.[0].name as |value|}}
-  {{category-chooser value=value onChange=(fn (mut value))}}
-{{/styleguide-example}}
+<StyleguideExample @title="category-chooser" @initialValue={{categories.[0].name}} as |value|>
+  <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
+</StyleguideExample>
 
-{{#styleguide-example title="pinned-button"}}
-  {{pinned-button topic=dummy.pinnedTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="pinned-button">
+  <PinnedButton @topic={{dummy.pinnedTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="pinned-options"}}
-  {{pinned-options topic=dummy.pinnedTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="pinned-options">
+  <PinnedOptions @topic={{dummy.pinnedTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="categories-admin-dropdown"}}
-  {{categories-admin-dropdown onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="categories-admin-dropdown">
+  <CategoriesAdminDropdown @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="category-notifications-button"}}
-  {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="category-notifications-button">
+  <CategoryNotificationsButton @category={{dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="notifications-button"}}
-  {{notifications-button options=(hash i18nPrefix="groups.notifications") value=2 onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="notifications-button">
+  <NotificationsButton @options={{hash i18nPrefix="groups.notifications"}} @value={{2}} @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="dropdown-select-box"}}
-  {{dropdown-select-box
-    content=dummy.options
-    onChange=(action "dummy")
-    options=(hash
+<StyleguideExample @title="dropdown-select-box">
+  <DropdownSelectBox @content={{dummy.options}} @onChange={{action "dummy"}} @options={{hash
       translatedNone="Something"
-    )
-  }}
-{{/styleguide-example}}
+    }} />
+</StyleguideExample>
 
-{{#styleguide-example title="future-date-input-selector"}}
-  {{future-date-input-selector
-    input=dummy.topicTimerUpdateDate
-    includeWeekend=true
-    includeForever=true
-    options=(hash none="time_shortcut.select_timeframe")
-  }}
-{{/styleguide-example}}
+<StyleguideExample @title="future-date-input-selector">
+  <FutureDateInputSelector @input={{dummy.topicTimerUpdateDate}} @includeWeekend={{true}} @includeForever={{true}} @options={{hash none="time_shortcut.select_timeframe"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="multi-select"}}
-  {{multi-select content=dummy.options onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="multi-select">
+  <MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="admin group-chooser"}}
-  {{group-chooser selected=dummy.selectedGroups content=dummy.groups onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="admin group-chooser">
+  <GroupChooser @selected={{dummy.selectedGroups}} @content={{dummy.groups}} @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="list-setting"}}
-  {{list-setting settingValue=dummy.settings onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="list-setting">
+  <ListSetting @settingValue={{dummy.settings}} @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="list-setting with colors"}}
-  {{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}}
-{{/styleguide-example}}
+<StyleguideExample @title="list-setting with colors">
+  <ListSetting @settingValue={{dummy.colors}} @nameProperty="color" @onChange={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="user-notifications-dropdown"}}
-  {{user-notifications-dropdown user=currentUser value="changeToNormal"}}
-{{/styleguide-example}}
+<StyleguideExample @title="user-notifications-dropdown">
+  <UserNotificationsDropdown @user={{currentUser}} @value="changeToNormal" />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-link.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-link.hbs
index 3096ac4cf77..55eea35207e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-link.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-link.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="topic-link"}}
+<StyleguideExample @title="topic-link">
   {{topic-link dummy.topic}}
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-statuses.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-statuses.hbs
index 76cedf46ad8..4153318992b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-statuses.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/topic-statuses.hbs
@@ -1,27 +1,27 @@
-{{#styleguide-example title="invisible"}}
-  {{topic-status topic=dummy.invisibleTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="invisible">
+  <TopicStatus @topic={{dummy.invisibleTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="closed"}}
-  {{topic-status topic=dummy.closedTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="closed">
+  <TopicStatus @topic={{dummy.closedTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="pinned"}}
-  {{topic-status topic=dummy.pinnedTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="pinned">
+  <TopicStatus @topic={{dummy.pinnedTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="unpinned"}}
-  {{topic-status topic=dummy.unpinnedTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="unpinned">
+  <TopicStatus @topic={{dummy.unpinnedTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="archived"}}
-  {{topic-status topic=dummy.archivedTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="archived">
+  <TopicStatus @topic={{dummy.archivedTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="warning"}}
-  {{topic-status topic=dummy.warningTopic}}
-{{/styleguide-example}}
+<StyleguideExample @title="warning">
+  <TopicStatus @topic={{dummy.warningTopic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="no status"}}
-  {{topic-status topic=dummy.topic}}
-{{/styleguide-example}}
+<StyleguideExample @title="no status">
+  <TopicStatus @topic={{dummy.topic}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.hbs
index 12e2e2a813f..d2a97feb8b2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/index.hbs
@@ -1,5 +1,5 @@
-{{#styleguide-section title="styleguide.title"}}
+<StyleguideSection @title="styleguide.title">
   <div class="description">
     {{i18n "styleguide.welcome"}}
   </div>
-{{/styleguide-section}}
+</StyleguideSection>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs
index 38778c2731c..6b14e74784c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/bread-crumbs.hbs
@@ -1,9 +1,9 @@
-{{#styleguide-example title="category-breadcrumbs"}}
-  {{bread-crumbs categories=dummy.categories showTags=false}}
-{{/styleguide-example}}
+<StyleguideExample @title="category-breadcrumbs">
+  <BreadCrumbs @categories={{dummy.categories}} @showTags={{false}} />
+</StyleguideExample>
 
 {{#if siteSettings.tagging_enabled}}
-  {{#styleguide-example title="category-breadcrumbs - tags"}}
-    {{bread-crumbs categories=dummy.categories showTags=true}}
-  {{/styleguide-example}}
+  <StyleguideExample @title="category-breadcrumbs - tags">
+    <BreadCrumbs @categories={{dummy.categories}} @showTags={{true}} />
+  </StyleguideExample>
 {{/if}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/categories.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/categories.hbs
index e3d83bb76b1..8dbfe8c071e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/categories.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/categories.hbs
@@ -1,23 +1,23 @@
-{{#styleguide-example title="category-badge - bullet"}}
+<StyleguideExample @title="category-badge - bullet">
   {{#each dummy.categories as |c|}}
     {{category-badge c categoryStyle="bullet"}}
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="category-badge - bar"}}
+<StyleguideExample @title="category-badge - bar">
   {{#each dummy.categories as |c|}}
     {{category-badge c categoryStyle="bar"}}
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="category-badge - box"}}
+<StyleguideExample @title="category-badge - box">
   {{#each dummy.categories as |c|}}
     {{category-badge c categoryStyle="box"}}
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="category-badge - none"}}
+<StyleguideExample @title="category-badge - none">
   {{#each dummy.categories as |c|}}
     {{category-badge c categoryStyle="none"}}
   {{/each}}
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
index 188de8b4c20..c9d9a7c95e7 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
@@ -1,6 +1,3 @@
-{{#styleguide-example title="empty-state"}}
-  {{empty-state
-    title=dummy.sentence
-    body=dummy.short_sentence
-  }}
-{{/styleguide-example}}
+<StyleguideExample @title="empty-state">
+  <EmptyState @title={{dummy.sentence}} @body={{dummy.short_sentence}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs
index b7c6c200c1e..e70fb604522 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs
@@ -1,23 +1,12 @@
-{{#styleguide-example title="footer-message - default"}}
-  {{footer-message education=dummy.sentence message=dummy.short_sentence}}
-{{/styleguide-example}}
+<StyleguideExample @title="footer-message - default">
+  <FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} />
+</StyleguideExample>
 
-{{#styleguide-example title="footer-message - latest"}}
-  {{footer-message
-    education=dummy.sentence
-    message=dummy.short_sentence
-    latest=true
-    canCreateTopicOnCategory=true
-    createTopic=(action "dummy")
-  }}
-{{/styleguide-example}}
+<StyleguideExample @title="footer-message - latest">
+  <FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} @latest={{true}} @canCreateTopicOnCategory={{true}} @createTopic={{action "dummy"}} />
+</StyleguideExample>
 
-{{#styleguide-example title="footer-message - top"}}
-  {{footer-message
-    education=dummy.sentence
-    message=dummy.short_sentence
-    top=true
-    changePeriod=(action "dummy")
-  }}
-{{/styleguide-example}}
+<StyleguideExample @title="footer-message - top">
+  <FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} @top={{true}} @changePeriod={{action "dummy"}} />
+</StyleguideExample>
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/header-icons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/header-icons.hbs
index aaeaddabfd9..6a14a566090 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/header-icons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/header-icons.hbs
@@ -1,13 +1,11 @@
-{{#styleguide-example title="header-icons"}}
-  {{mount-widget widget="header-icons"}}
-{{/styleguide-example}}
+<StyleguideExample @title="header-icons">
+  <MountWidget @widget="header-icons" />
+</StyleguideExample>
 
-{{#styleguide-example title="header-icons - user"}}
-  {{mount-widget widget="header-icons" args=(hash user=dummy.user)}}
-{{/styleguide-example}}
+<StyleguideExample @title="header-icons - user">
+  <MountWidget @widget="header-icons" @args={{hash user=dummy.user}} />
+</StyleguideExample>
 
-{{#styleguide-example title="header-icons - notifications"}}
-  {{mount-widget
-    widget="header-icons"
-    args=(hash user=dummy.userWithUnread flagCount=5)}}
-{{/styleguide-example}}
+<StyleguideExample @title="header-icons - notifications">
+  <MountWidget @widget="header-icons" @args={{hash user=dummy.userWithUnread flagCount=5}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
index d62354700ef..6aad7ffdc21 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
@@ -1,23 +1,23 @@
-{{#styleguide-example title="navigation-bar"}}
-  {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
-{{/styleguide-example}}
+<StyleguideExample @title="navigation-bar">
+  <NavigationBar @navItems={{dummy.navItems}} @filterMode="latest" />
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .nav-pills"}}
-  {{#mobile-nav class="main-nav" desktopClass="nav nav-pills user-nav"}}
+<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}}
-  {{/mobile-nav}}
-{{/styleguide-example}}
+  </MobileNav>
+</StyleguideExample>
 
-{{#styleguide-example title="group page navigation-bar"}}
-  {{#mobile-nav class="group-nav" desktopClass="nav nav-pills"}}
+<StyleguideExample @title="group page navigation-bar">
+  <MobileNav @class="group-nav" @desktopClass="nav nav-pills">
     <li class="group-dropdown">
-      {{group-dropdown groups=dummy.groupNames value="staff"}}
+      <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}}
-  {{/mobile-nav}}
-{{/styleguide-example}}
+  </MobileNav>
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-stacked.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-stacked.hbs
index c9aeca42cb5..2c06daa1d4a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-stacked.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-stacked.hbs
@@ -1,17 +1,17 @@
-{{#styleguide-example title=".nav-stacked" class="half-size"}}
-  {{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
+<StyleguideExample @title=".nav-stacked" class="half-size">
+  <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
     {{#each dummy.navItems as |ni|}}
       <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
     {{/each}}
-  {{/mobile-nav}}
-{{/styleguide-example}}
+  </MobileNav>
+</StyleguideExample>
 
-{{#styleguide-example title=".user-navigation .nav-stacked" class="half-size"}}
-  {{#d-section class="user-navigation"}}
-    {{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
+<StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
+  <DSection @class="user-navigation">
+    <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
       {{#each dummy.navItems as |ni|}}
         <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
       {{/each}}
-    {{/mobile-nav}}
-  {{/d-section}}
-{{/styleguide-example}}
+    </MobileNav>
+  </DSection>
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs
index ab1bcb0816b..33de1ec5707 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/post-menu.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="post-menu"}}
-  {{mount-widget widget="post-menu" args=dummy.transformedPost}}
-{{/styleguide-example}}
+<StyleguideExample @title="post-menu">
+  <MountWidget @widget="post-menu" @args={{dummy.transformedPost}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs
index bf7842f1b49..6251e60011a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs
@@ -1,4 +1,4 @@
-{{#styleguide-example title="signup-cta"}}
-  {{signup-cta}}
-{{/styleguide-example}}
+<StyleguideExample @title="signup-cta">
+  <SignupCta />
+</StyleguideExample>
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs
index 1f7d4e17737..cbc435ae793 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs
@@ -1,27 +1,27 @@
-{{#styleguide-example title="topic list item"}}
+<StyleguideExample @title="topic list item">
   <table class="topic-list">
     <tbody>
-      {{topic-list-item topic=dummy.topic showPosters=true}}
+      <TopicListItem @topic={{dummy.topic}} @showPosters={{true}} />
     </tbody>
   </table>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="topic list item - hide category"}}
+<StyleguideExample @title="topic list item - hide category">
   <table class="topic-list">
     <tbody>
-      {{topic-list-item topic=dummy.topic hideCategory=true showPosters=true}}
+      <TopicListItem @topic={{dummy.topic}} @hideCategory={{true}} @showPosters={{true}} />
     </tbody>
   </table>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="topic list item - show likes"}}
+<StyleguideExample @title="topic list item - show likes">
   <table class="topic-list">
     <tbody>
-      {{topic-list-item topic=dummy.topic showLikes=true showPosters=true}}
+      <TopicListItem @topic={{dummy.topic}} @showLikes={{true}} @showPosters={{true}} />
     </tbody>
   </table>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="topic list item - latest" class="half-size"}}
-  {{latest-topic-list-item topic=dummy.topic}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic list item - latest" class="half-size">
+  <LatestTopicListItem @topic={{dummy.topic}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
index 744777ab653..938519e8598 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="topic-notifications-button"}}
-  {{topic-notifications-button topic=dummy.topic}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-notifications-button">
+  <TopicNotificationsButton @topic={{dummy.topic}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
index 9427420ca64..a08ce7837bc 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="topic-timer-info"}}
-  {{topic-timer-info statusType="reminder" executeAt=dummy.soon}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-timer-info">
+  <TopicTimerInfo @statusType="reminder" @executeAt={{dummy.soon}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs
index c05ebb918c2..9c9b3ca566f 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/00-post.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="post"}}
-  {{mount-widget widget="post" args=dummy.transformedPost}}
-{{/styleguide-example}}
+<StyleguideExample @title="post">
+  <MountWidget @widget="post" @args={{dummy.transformedPost}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs
index 679a6869c2b..f861132fb17 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/01-topic-map.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="topic-map"}}
-  {{mount-widget widget="topic-map" args=dummy.transformedPost}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-map">
+  <MountWidget @widget="topic-map" @args={{dummy.transformedPost}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs
index e7edad4509d..dbb20ba1e36 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs
@@ -1,9 +1,9 @@
-{{#styleguide-example title="topic-footer-buttons - logged in"}}
-  {{topic-footer-buttons topic=dummy.topic}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-footer-buttons - logged in">
+  <TopicFooterButtons @topic={{dummy.topic}} />
+</StyleguideExample>
 
-{{#styleguide-example title="topic-footer-buttons - anonymous"}}
+<StyleguideExample @title="topic-footer-buttons - anonymous">
   <div id="topic-footer-buttons">
-    {{d-button icon="reply" class="btn-primary pull-right" label="topic.reply.title"}}
+    <DButton @icon="reply" @class="btn-primary pull-right" @label="topic.reply.title" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
index 4b1ef8e577a..7f821eda345 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
@@ -1,7 +1,7 @@
-{{#styleguide-example title="topic-list"}}
-  {{topic-list topics=dummy.topics showPosters=true}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-list">
+  <TopicList @topics={{dummy.topics}} @showPosters={{true}} />
+</StyleguideExample>
 
-{{#styleguide-example title="topic-list - hide posters"}}
-  {{topic-list topics=dummy.topics showPosters=false}}
-{{/styleguide-example}}
+<StyleguideExample @title="topic-list - hide posters">
+  <TopicList @topics={{dummy.topics}} @showPosters={{false}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
index 76c85a0b500..7f946963b2e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="basic-topic-list" class="half-size"}}
-  {{basic-topic-list topics=dummy.topics}}
-{{/styleguide-example}}
+<StyleguideExample @title="basic-topic-list" class="half-size">
+  <BasicTopicList @topics={{dummy.topics}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
index f7d8b2bc036..2c1bb0ee9c6 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="categories-only"}}
-  {{categories-only categories=dummy.categories}}
-{{/styleguide-example}}
+<StyleguideExample @title="categories-only">
+  <CategoriesOnly @categories={{dummy.categories}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs
index 8f50d06c350..f02c80e1d3d 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs
@@ -1,10 +1,10 @@
-{{#styleguide-example title="d-modal"}}
-  {{#d-modal closeModal=(action "dummy") modalStyle="inline-modal" title=(i18n "styleguide.sections.modal.header")}}
-    {{#d-modal-body}}
+<StyleguideExample @title="d-modal">
+  <DModal @closeModal={{action "dummy"}} @modalStyle="inline-modal" @title={{i18n "styleguide.sections.modal.header"}}>
+    <DModalBody>
       {{html-safe dummy.lorem}}
-    {{/d-modal-body}}
+    </DModalBody>
     <div class="modal-footer">
       {{i18n "styleguide.sections.modal.footer"}}
     </div>
-  {{/d-modal}}
-{{/styleguide-example}}
+  </DModal>
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
index 01d0642aa47..6de62ca201f 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
@@ -1,14 +1,14 @@
-{{#styleguide-example title="navigation"}}
+<StyleguideExample @title="navigation">
   <div class="list-controls">
     <div class="container">
-      {{#d-section class="navigation-container"}}
-        {{bread-crumbs categories=dummy.categories}}
-        {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
+      <DSection @class="navigation-container">
+        <BreadCrumbs @categories={{dummy.categories}} />
+        <NavigationBar @navItems={{dummy.navItems}} @filterMode="latest" />
         <div class="navigation-controls">
-          {{categories-admin-dropdown}}
-          {{create-topic-button canCreateTopic=true}}
+          <CategoriesAdminDropdown />
+          <CreateTopicButton @canCreateTopic={{true}} />
         </div>
-      {{/d-section}}
+      </DSection>
     </div>
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs
index 7a119db322c..9092a6c46b4 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/site-header.hbs
@@ -1,16 +1,16 @@
-{{#styleguide-example title="site header - in topic - scrolled"}}
+<StyleguideExample @title="site header - in topic - scrolled">
   <div class="d-header-wrap">
     <header class="d-header">
       <div class="wrap">
         <div class="contents">
-          {{mount-widget widget="home-logo" args=(hash minimized=true)}}
-          {{mount-widget widget="header-topic-info" args=dummy}}
+          <MountWidget @widget="home-logo" @args={{hash minimized=true}} />
+          <MountWidget @widget="header-topic-info" @args={{dummy}} />
           <div class="panel clearfix">
-            {{mount-widget widget="header-icons" args=(hash user=dummy.user)}}
+            <MountWidget @widget="header-icons" @args={{hash user=dummy.user}} />
           </div>
         </div>
       </div>
     </header>
   </div>
-{{/styleguide-example}}
+</StyleguideExample>
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
index 5a0971d8029..dab9e542d85 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
@@ -1,3 +1,3 @@
-{{#styleguide-example title="suggested-topics"}}
-  {{suggested-topics topic=dummy.topic}}
-{{/styleguide-example}}
+<StyleguideExample @title="suggested-topics">
+  <SuggestedTopics @topic={{dummy.topic}} />
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs
index d8de1158d40..1cf6c88ec36 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/user-about.hbs
@@ -1,5 +1,5 @@
-{{#styleguide-example title=".user-main .about.collapsed-info.no-background"}}
-  {{#d-section class="user-main"}}
+<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">
@@ -27,11 +27,11 @@
         <div style="clear: both"></div>
       </div>
     </section>
-  {{/d-section}}
-{{/styleguide-example}}
+  </DSection>
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .about.collapsed-info.has-background"}}
-  {{#d-section class="user-main"}}
+<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">
@@ -59,11 +59,11 @@
         <div style="clear: both"></div>
       </div>
     </section>
-  {{/d-section}}
-{{/styleguide-example}}
+  </DSection>
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .about.no-background"}}
-  {{#d-section class="user-main"}}
+<StyleguideExample @title=".user-main .about.no-background">
+  <DSection @class="user-main">
     <section class="about no-background">
 
       <div class="staff-counters">
@@ -142,7 +142,7 @@
           <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}}>
-            {{d-button icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
+            <DButton @icon="far-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">
@@ -150,15 +150,15 @@
               <span><a href="#" class="group-link">{{group.name}}</a></span>
             {{/each}}
           </dd>
-          {{d-button icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
+          <DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
         </dl>
       </div>
     </section>
-  {{/d-section}}
-{{/styleguide-example}}
+  </DSection>
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .about.has-background"}}
-  {{#d-section class="user-main"}}
+<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>
@@ -237,7 +237,7 @@
           <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}}>
-            {{d-button icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
+            <DButton @icon="far-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">
@@ -245,9 +245,9 @@
               <span><a href="#" class="group-link">{{group.name}}</a></span>
             {{/each}}
           </dd>
-          {{d-button icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
+          <DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
         </dl>
       </div>
     </section>
-  {{/d-section}}
-{{/styleguide-example}}
+  </DSection>
+</StyleguideExample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.hbs
index f2cc79d8830..68185e37ce0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/show.hbs
@@ -1,4 +1,4 @@
-{{#styleguide-section section=section}}
+<StyleguideSection @section={{section}}>
   {{#if note}}
     <div class="styleguide-note">
       {{component (concat "notes/" note)}}
@@ -6,4 +6,4 @@
   {{/if}}
 
   {{outlet}}
-{{/styleguide-section}}
+</StyleguideSection>