DEV: Remove last few curly-component invocations

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
+      <AdminUserFieldItem @userField={{uf}}
-                              fieldTypes=fieldTypes
+                          @fieldTypes={{fieldTypes}}
-                              firstField=sortedFields.firstObject
+                          @firstField={{sortedFields.firstObject}}
-                              lastField=sortedFields.lastObject
+                          @lastField={{sortedFields.lastObject}}
-                              destroyAction=(action "destroy")
+                          @destroyAction={{action "destroy"}}
-                              moveUpAction=(action "moveUp")
+                          @moveUpAction={{action "moveUp"}}
-                              moveDownAction=(action "moveDown")}}
+                          @moveDownAction={{action "moveDown"}}
+                          />
     {{/each}}
   {{/if}}
 

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}}

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>

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>

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}}
 

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
+  <PreferenceCheckbox
-      labelKey="user.experimental_sidebar.enable"
+      @labelKey="user.experimental_sidebar.enable"
-      checked=model.user_option.enable_experimental_sidebar
+      @checked={{model.user_option.enable_experimental_sidebar}}
-      class="preferences-sidebar-enable-checkbox"}}
+      @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
+      <CategorySelector
-          categories=this.selectedSiderbarCategories
+          @categories={{this.selectedSiderbarCategories}}
-          onChange=(action this.categoryUpdated)
+          @onChange={{action this.categoryUpdated}}
-          options=(hash
+          @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
+        <TagChooser
-          tags=this.selectedSidebarTagNames
+          @tags={{this.selectedSidebarTagNames}}
-          everyTag=true
+          @everyTag={{true}}
-          unlimitedTagCount=true
+          @unlimitedTagCount={{true}}
-          onChange=(action this.tagUpdated)
+          @onChange={{action this.tagUpdated}}
-          options=(hash
+          @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}} />

plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

@@ -1,7 +1,4 @@
-{{#d-modal-body
+<DModalBody @title="discourse_local_dates.title" @class="discourse-local-dates-create-modal" @style="overflow: auto">
-  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
+          <DButton
-            id="from-date-time"
+            @id="from-date-time"
-            action=(action "focusFrom")
+            @action={{action "focusFrom"}}
-            translatedLabel=formattedFrom
+            @translatedLabel={{formattedFrom}}
-            class="date-time"}}
+            @class="date-time" />
         </div>
 
         <div class="date-time-control to {{if toSelected "is-selected"}} {{if toFilled "is-filled"}}">
           {{d-icon "calendar-alt"}}
-          {{d-button
+          <DButton
-            action=(action "focusTo")
+            @action={{action "focusTo"}}
-            translatedLabel=formattedTo
+            @translatedLabel={{formattedTo}}
-            class="date-time"}}
+            @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
+          <TimezoneInput
-            options=(hash icon="globe")
+            @options={{hash icon="globe"}}
-            value=timezone
+            @value={{timezone}}
-            onChange=(action (mut 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
+        <TimezoneInput
-          value=timezone
+          @value={{timezone}}
-          options=(hash icon="globe")
+          @options={{hash icon="globe"}}
-          onChange=(action (mut timezone))
+          @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
+              <ComboBox
-                content=recurringOptions
+                @content={{recurringOptions}}
-                class="recurrence-input"
+                @class="recurrence-input"
-                value=recurring
+                @value={{recurring}}
-                onChange=(action (mut recurring))
+                @onChange={{action (mut recurring)}}
-                options=(hash
+                @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
+            <MultiSelect
-              valueProperty=null
+              @valueProperty={{null}}
-              nameProperty=null
+              @nameProperty={{null}}
-              class="timezones-input"
+              @class="timezones-input"
-              content=allTimezones
+              @content={{allTimezones}}
-              value=timezones
+              @value={{timezones}}
-              options=(hash
+              @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
+    <DButton
-      class="btn-primary"
+      @class="btn-primary"
-      action=(action "save")
+      @action={{action "save"}}
-      label="discourse_local_dates.create.form.insert"}}
+      @label="discourse_local_dates.create.form.insert" />
   {{/if}}
 
   <a class="cancel-action" href {{action "cancel"}}>
     {{i18n "cancel"}}
   </a>
 
-  {{d-button
+  <DButton
-    class="btn-default advanced-mode-btn"
+    @class="btn-default advanced-mode-btn"
-    action=(action "advancedMode")
+    @action={{action "advancedMode"}}
-    icon="cog"
+    @icon="cog"
-    label=toggleModeBtnLabel}}
+    @label={{toggleModeBtnLabel}} />
 </div>

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}} />

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">

plugins/discourse-presence/assets/javascripts/discourse/templates/connectors/before-composer-controls/presence.hbs

@@ -1 +1 @@
-{{composer-presence-display model=model}}
+<ComposerPresenceDisplay @model={{model}} />

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}} />

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
+        <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}} />
-          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
+      <ComboBox @content={{this.groupableUserFields}} @value={{this.groupedBy}} @nameProperty="label" @class="poll-breakdown-dropdown" @onChange={{action this.setGrouping}} />
-        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
+        <PollBreakdownChart @group={{get chart "group"}} @options={{get chart "options"}} @displayMode={{this.displayMode}} @highlightedOption={{this.highlightedOption}} @setHighlightedOption={{fn (mut this.highlightedOption)}} />
-          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>

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"
+        <Input @type="number" @value={{pollMin}} @valueProperty="value" class="poll-options-min" @min={{1}} />
-                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"
+        <Input @type="number" @value={{pollMax}} @valueProperty="value" class="poll-options-max" @min={{1}} />
-                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"
+          <Input @type="number" @value={{pollStep}} @valueProperty="value" @min="1" class="poll-options-step" />
-                  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
+      <GroupChooser @content={{siteGroups}} @value={{pollGroups}} @onChange={{action (mut pollGroups)}} @labelProperty="name" @valueProperty="name" />
-        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
+      <DateTimeInput @date={{pollAutoClose}} @onChange={{action (mut pollAutoClose)}} @clearable={{true}} @useGlobalPickerContainer={{true}} />
-        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
+      <ComboBox @content={{pollResults}} @value={{pollResult}} @class="poll-result" @valueProperty="value" @onChange={{action (mut pollResult)}} />
-        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
+  <DButton @action={{action "insertPoll"}} @icon="chart-bar" @class="btn-primary" @label="poll.ui_builder.insert" @disabled={{disableInsert}} />
-    action=(action "insertPoll")
-    icon="chart-bar"
-    class="btn-primary"
-    label="poll.ui_builder.insert"
-    disabled=disableInsert}}
 
-  {{d-button
+  <DButton @label="cancel" @class="btn-flat" @action={{route-action "closeModal"}} />
-    label="cancel"
-    class="btn-flat"
-    action=(route-action "closeModal")
-  }}
 
-  {{d-button
+  <DButton @action={{action "toggleAdvanced"}} @class="btn-default show-advanced" @icon="cog" @title={{if showAdvanced "poll.ui_builder.hide_advanced" "poll.ui_builder.show_advanced"}} />
-    action=(action "toggleAdvanced")
-    class="btn-default show-advanced"
-    icon="cog"
-    title=(if showAdvanced "poll.ui_builder.hide_advanced" "poll.ui_builder.show_advanced")}}
 </div>

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>

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}}

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>

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>

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
+    <DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
-      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
+    <DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
-      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
+    <DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
-      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
+    <DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
-      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>

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"}}
+    <ColorExample @color="primary-very-low" />
-    {{color-example color="primary-low"}}
+    <ColorExample @color="primary-low" />
-    {{color-example color="primary-low-mid"}}
+    <ColorExample @color="primary-low-mid" />
   </section>
   <section class="color-row">
-    {{color-example color="primary-medium"}}
+    <ColorExample @color="primary-medium" />
-    {{color-example color="primary-high"}}
+    <ColorExample @color="primary-high" />
-    {{color-example color="primary"}}
+    <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"}}
+    <ColorExample @color="primary-50" />
-    {{color-example color="primary-100"}}
+    <ColorExample @color="primary-100" />
-    {{color-example color="primary-200"}}
+    <ColorExample @color="primary-200" />
-    {{color-example color="primary-300"}}
+    <ColorExample @color="primary-300" />
-    {{color-example color="primary-400"}}
+    <ColorExample @color="primary-400" />
-    {{color-example color="primary-500"}}
+    <ColorExample @color="primary-500" />
   </section>
   <section class="color-row">
-    {{color-example color="primary-600"}}
+    <ColorExample @color="primary-600" />
-    {{color-example color="primary-700"}}
+    <ColorExample @color="primary-700" />
-    {{color-example color="primary-800"}}
+    <ColorExample @color="primary-800" />
-    {{color-example color="primary-900"}}
+    <ColorExample @color="primary-900" />
-    {{color-example color="primary"}}
+    <ColorExample @color="primary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="secondary"}}
+<StyleguideExample @title="secondary">
   <section class="color-row">
-    {{color-example color="secondary-low"}}
+    <ColorExample @color="secondary-low" />
-    {{color-example color="secondary-medium"}}
+    <ColorExample @color="secondary-medium" />
-    {{color-example color="secondary-high"}}
+    <ColorExample @color="secondary-high" />
-    {{color-example color="secondary"}}
+    <ColorExample @color="secondary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="tertiary"}}
+<StyleguideExample @title="tertiary">
   <section class="color-row">
-    {{color-example color="tertiary-low"}}
+    <ColorExample @color="tertiary-low" />
-    {{color-example color="tertiary-medium"}}
+    <ColorExample @color="tertiary-medium" />
-    {{color-example color="tertiary-high"}}
+    <ColorExample @color="tertiary-high" />
-    {{color-example color="tertiary"}}
+    <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"}}
+    <ColorExample @color="tertiary-50" />
-    {{color-example color="tertiary-100"}}
+    <ColorExample @color="tertiary-100" />
-    {{color-example color="tertiary-200"}}
+    <ColorExample @color="tertiary-200" />
-    {{color-example color="tertiary-300"}}
+    <ColorExample @color="tertiary-300" />
-    {{color-example color="tertiary-400"}}
+    <ColorExample @color="tertiary-400" />
-    {{color-example color="tertiary-500"}}
+    <ColorExample @color="tertiary-500" />
   </section>
   <section class="color-row">
-    {{color-example color="tertiary-600"}}
+    <ColorExample @color="tertiary-600" />
-    {{color-example color="tertiary-700"}}
+    <ColorExample @color="tertiary-700" />
-    {{color-example color="tertiary-800"}}
+    <ColorExample @color="tertiary-800" />
-    {{color-example color="tertiary-900"}}
+    <ColorExample @color="tertiary-900" />
-    {{color-example color="tertiary"}}
+    <ColorExample @color="tertiary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="quaternary"}}
+<StyleguideExample @title="quaternary">
   <section class="color-row">
-    {{color-example color="quaternary-low"}}
+    <ColorExample @color="quaternary-low" />
-    {{color-example color="quaternary"}}
+    <ColorExample @color="quaternary" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="highlight"}}
+<StyleguideExample @title="highlight">
   <section class="color-row">
-    {{color-example color="highlight-low"}}
+    <ColorExample @color="highlight-low" />
-    {{color-example color="highlight-medium"}}
+    <ColorExample @color="highlight-medium" />
-    {{color-example color="highlight"}}
+    <ColorExample @color="highlight" />
-    {{color-example color="highlight-high"}}
+    <ColorExample @color="highlight-high" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="danger"}}
+<StyleguideExample @title="danger">
   <section class="color-row">
-    {{color-example color="danger-low"}}
+    <ColorExample @color="danger-low" />
-    {{color-example color="danger-low-mid"}}
+    <ColorExample @color="danger-low-mid" />
-    {{color-example color="danger-medium"}}
+    <ColorExample @color="danger-medium" />
-    {{color-example color="danger"}}
+    <ColorExample @color="danger" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="success"}}
+<StyleguideExample @title="success">
   <section class="color-row">
-    {{color-example color="success-low"}}
+    <ColorExample @color="success-low" />
-    {{color-example color="success-medium"}}
+    <ColorExample @color="success-medium" />
-    {{color-example color="success"}}
+    <ColorExample @color="success" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="love"}}
+<StyleguideExample @title="love">
   <section class="color-row">
-    {{color-example color="love-low"}}
+    <ColorExample @color="love-low" />
-    {{color-example color="love"}}
+    <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"}}
+    <ColorExample @color="header_primary" />
-    {{color-example color="header_primary-very-high"}}
+    <ColorExample @color="header_primary-very-high" />
-    {{color-example color="header_primary-high"}}
+    <ColorExample @color="header_primary-high" />
   </section>
   <section class="color-row">
-    {{color-example color="header_primary-medium"}}
+    <ColorExample @color="header_primary-medium" />
-    {{color-example color="header_primary-low-mid"}}
+    <ColorExample @color="header_primary-low-mid" />
-    {{color-example color="header_primary-low"}}
+    <ColorExample @color="header_primary-low" />
   </section>
-{{/styleguide-example}}
+</StyleguideExample>

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"}}
+<StyleguideExample @title="d-icon - all available icons">
-  {{styleguide-icons}}
+  <StyleguideIcons />
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,76 +1,76 @@
-{{#styleguide-example title="text-field"}}
+<StyleguideExample @title="text-field">
-  {{text-field placeholder="Placeholder"}}
+  <TextField @placeholder="Placeholder" />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="password"}}
+<StyleguideExample @title="password">
-  {{password-field type="password" placeholder="Placeholder"}}
+  <PasswordField @type="password" @placeholder="Placeholder" />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="textarea"}}
+<StyleguideExample @title="textarea">
-  {{textarea placeholder="Placeholder"}}
+  <Textarea placeholder="Placeholder" />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="inline-form"}}
+<StyleguideExample @title="inline-form">
   <div class="inline-form">
-    {{text-field placeholder="Placeholder"}}
+    <TextField @placeholder="Placeholder" />
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <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"}}
+    <TextField @placeholder="Placeholder" />
-    {{d-button class="btn-primary" icon="search" type="submit"}}
+    <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"}}
+    <TextField @placeholder="Placeholder" />
-    {{d-button class="btn-primary" icon="search" type="submit"}}
+    <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"}}
+    <TextField @placeholder="Placeholder" />
-    {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
+    <ComboBox @content={{dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <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}}
+    <TextField />
-    {{multi-select content=dummy.options onChange=(action "dummy")}}
+    <MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <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}}
+    <TextField />
-    {{multi-select content=dummy.options onChange=(action "dummy")}}
+    <MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
-    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+    <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")}}
+    <CategoryNotificationsButton @category={{dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
-    {{d-button icon="reply" type="submit" translatedLabel="Button"}}
+    <DButton @icon="reply" @type="submit" @translatedLabel="Button" />
   </div>
-{{/styleguide-example}}
+</StyleguideExample>

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>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs

@@ -1,31 +1,28 @@
-{{#styleguide-example title="time-input"}}
+<StyleguideExample @title="time-input">
-  {{time-input}}
+  <TimeInput />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="date-input"}}
+<StyleguideExample @title="date-input">
-  {{date-input}}
+  <DateInput />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="date-time-input"}}
+<StyleguideExample @title="date-time-input">
-  {{date-time-input clearable=true}}
+  <DateTimeInput @clearable={{true}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="date-time-input-range"}}
+<StyleguideExample @title="date-time-input-range">
-  {{date-time-input-range}}
+  <DateTimeInputRange />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="date-time-input-range"}}
+<StyleguideExample @title="date-time-input-range">
-  {{date-time-input-range showFromTime=false showToTime=false}}
+  <DateTimeInputRange @showFromTime={{false}} @showToTime={{false}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="future-date-input"}}
+<StyleguideExample @title="future-date-input">
-  {{future-date-input
+  <FutureDateInput @displayLabelIcon="far-clock" @clearable={{true}} />
-    displayLabelIcon="far-clock"
+</StyleguideExample>
-    clearable=true
-  }}
-{{/styleguide-example}}
 
-{{#styleguide-example title="date-picker"}}
+<StyleguideExample @title="date-picker">
-  {{date-picker defaultDate="YYYY-MM-DD"}}
+  <DatePicker @defaultDate="YYYY-MM-DD" />
-{{/styleguide-example}}
+</StyleguideExample>
 

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|}}
+<StyleguideExample @title="combo-box" @initialValue={{dummy.options.[0].name}} as |value|>
-  {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
+  <ComboBox @content={{dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="filterable combo-box" initialValue=dummy.categories.[0].name as |value|}}
+<StyleguideExample @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))}}
+  <ComboBox @content={{dummy.categories}} @value={{value}} @options={{hash filterable=true}} @onChange={{fn (mut value)}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="combo-box with a default state" initialValue=dummy.options.[0].name as |value|}}
+<StyleguideExample @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))}}
+  <ComboBox @content={{dummy.options}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="combo-box clearable" initialValue=dummy.options.[0].name as |value|}}
+<StyleguideExample @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))}}
+  <ComboBox @content={{dummy.options}} @clearable={{true}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="topic-notifications-options" initialValue=1 as |value|}}
+<StyleguideExample @title="topic-notifications-options" @initialValue={{1}} as |value|>
-  {{topic-notifications-options topic=dummy.topic value=value onChange=(fn (mut value))}}
+  <TopicNotificationsOptions @topic={{dummy.topic}} @value={{value}} @onChange={{fn (mut value)}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="topic-footer-mobile-dropdown"}}
+<StyleguideExample @title="topic-footer-mobile-dropdown">
-  {{topic-footer-mobile-dropdown topic=dummy.topic}}
+  <TopicFooterMobileDropdown @topic={{dummy.topic}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="category-chooser" initialValue=categories.[0].name as |value|}}
+<StyleguideExample @title="category-chooser" @initialValue={{categories.[0].name}} as |value|>
-  {{category-chooser value=value onChange=(fn (mut value))}}
+  <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="pinned-button"}}
+<StyleguideExample @title="pinned-button">
-  {{pinned-button topic=dummy.pinnedTopic}}
+  <PinnedButton @topic={{dummy.pinnedTopic}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="pinned-options"}}
+<StyleguideExample @title="pinned-options">
-  {{pinned-options topic=dummy.pinnedTopic}}
+  <PinnedOptions @topic={{dummy.pinnedTopic}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="categories-admin-dropdown"}}
+<StyleguideExample @title="categories-admin-dropdown">
-  {{categories-admin-dropdown onChange=(action "dummy")}}
+  <CategoriesAdminDropdown @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="category-notifications-button"}}
+<StyleguideExample @title="category-notifications-button">
-  {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
+  <CategoryNotificationsButton @category={{dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="notifications-button"}}
+<StyleguideExample @title="notifications-button">
-  {{notifications-button options=(hash i18nPrefix="groups.notifications") value=2 onChange=(action "dummy")}}
+  <NotificationsButton @options={{hash i18nPrefix="groups.notifications"}} @value={{2}} @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="dropdown-select-box"}}
+<StyleguideExample @title="dropdown-select-box">
-  {{dropdown-select-box
+  <DropdownSelectBox @content={{dummy.options}} @onChange={{action "dummy"}} @options={{hash
-    content=dummy.options
-    onChange=(action "dummy")
-    options=(hash
       translatedNone="Something"
-    )
+    }} />
-  }}
+</StyleguideExample>
-{{/styleguide-example}}
 
-{{#styleguide-example title="future-date-input-selector"}}
+<StyleguideExample @title="future-date-input-selector">
-  {{future-date-input-selector
+  <FutureDateInputSelector @input={{dummy.topicTimerUpdateDate}} @includeWeekend={{true}} @includeForever={{true}} @options={{hash none="time_shortcut.select_timeframe"}} />
-    input=dummy.topicTimerUpdateDate
+</StyleguideExample>
-    includeWeekend=true
-    includeForever=true
-    options=(hash none="time_shortcut.select_timeframe")
-  }}
-{{/styleguide-example}}
 
-{{#styleguide-example title="multi-select"}}
+<StyleguideExample @title="multi-select">
-  {{multi-select content=dummy.options onChange=(action "dummy")}}
+  <MultiSelect @content={{dummy.options}} @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="admin group-chooser"}}
+<StyleguideExample @title="admin group-chooser">
-  {{group-chooser selected=dummy.selectedGroups content=dummy.groups onChange=(action "dummy")}}
+  <GroupChooser @selected={{dummy.selectedGroups}} @content={{dummy.groups}} @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="list-setting"}}
+<StyleguideExample @title="list-setting">
-  {{list-setting settingValue=dummy.settings onChange=(action "dummy")}}
+  <ListSetting @settingValue={{dummy.settings}} @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="list-setting with colors"}}
+<StyleguideExample @title="list-setting with colors">
-  {{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}}
+  <ListSetting @settingValue={{dummy.colors}} @nameProperty="color" @onChange={{action "dummy"}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="user-notifications-dropdown"}}
+<StyleguideExample @title="user-notifications-dropdown">
-  {{user-notifications-dropdown user=currentUser value="changeToNormal"}}
+  <UserNotificationsDropdown @user={{currentUser}} @value="changeToNormal" />
-{{/styleguide-example}}
+</StyleguideExample>

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>

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

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

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>

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

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

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>

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

@@ -1,6 +1,3 @@
-{{#styleguide-example title="empty-state"}}
+<StyleguideExample @title="empty-state">
-  {{empty-state
+  <EmptyState @title={{dummy.sentence}} @body={{dummy.short_sentence}} />
-    title=dummy.sentence
+</StyleguideExample>
-    body=dummy.short_sentence
-  }}
-{{/styleguide-example}}

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

@@ -1,23 +1,12 @@
-{{#styleguide-example title="footer-message - default"}}
+<StyleguideExample @title="footer-message - default">
-  {{footer-message education=dummy.sentence message=dummy.short_sentence}}
+  <FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="footer-message - latest"}}
+<StyleguideExample @title="footer-message - latest">
-  {{footer-message
+  <FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} @latest={{true}} @canCreateTopicOnCategory={{true}} @createTopic={{action "dummy"}} />
-    education=dummy.sentence
+</StyleguideExample>
-    message=dummy.short_sentence
-    latest=true
-    canCreateTopicOnCategory=true
-    createTopic=(action "dummy")
-  }}
-{{/styleguide-example}}
 
-{{#styleguide-example title="footer-message - top"}}
+<StyleguideExample @title="footer-message - top">
-  {{footer-message
+  <FooterMessage @education={{dummy.sentence}} @message={{dummy.short_sentence}} @top={{true}} @changePeriod={{action "dummy"}} />
-    education=dummy.sentence
+</StyleguideExample>
-    message=dummy.short_sentence
-    top=true
-    changePeriod=(action "dummy")
-  }}
-{{/styleguide-example}}
 

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

@@ -1,13 +1,11 @@
-{{#styleguide-example title="header-icons"}}
+<StyleguideExample @title="header-icons">
-  {{mount-widget widget="header-icons"}}
+  <MountWidget @widget="header-icons" />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="header-icons - user"}}
+<StyleguideExample @title="header-icons - user">
-  {{mount-widget widget="header-icons" args=(hash user=dummy.user)}}
+  <MountWidget @widget="header-icons" @args={{hash user=dummy.user}} />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="header-icons - notifications"}}
+<StyleguideExample @title="header-icons - notifications">
-  {{mount-widget
+  <MountWidget @widget="header-icons" @args={{hash user=dummy.userWithUnread flagCount=5}} />
-    widget="header-icons"
+</StyleguideExample>
-    args=(hash user=dummy.userWithUnread flagCount=5)}}
-{{/styleguide-example}}

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

@@ -1,23 +1,23 @@
-{{#styleguide-example title="navigation-bar"}}
+<StyleguideExample @title="navigation-bar">
-  {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
+  <NavigationBar @navItems={{dummy.navItems}} @filterMode="latest" />
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .nav-pills"}}
+<StyleguideExample @title=".user-main .nav-pills">
-  {{#mobile-nav class="main-nav" desktopClass="nav nav-pills user-nav"}}
+  <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}}
+  </MobileNav>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title="group page navigation-bar"}}
+<StyleguideExample @title="group page navigation-bar">
-  {{#mobile-nav class="group-nav" desktopClass="nav nav-pills"}}
+  <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}}
+  </MobileNav>
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,17 +1,17 @@
-{{#styleguide-example title=".nav-stacked" class="half-size"}}
+<StyleguideExample @title=".nav-stacked" class="half-size">
-  {{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
+  <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}}
+  </MobileNav>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".user-navigation .nav-stacked" class="half-size"}}
+<StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
-  {{#d-section class="user-navigation"}}
+  <DSection @class="user-navigation">
-    {{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
+    <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}}
+    </MobileNav>
-  {{/d-section}}
+  </DSection>
-{{/styleguide-example}}
+</StyleguideExample>

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

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

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs

@@ -1,4 +1,4 @@
-{{#styleguide-example title="signup-cta"}}
+<StyleguideExample @title="signup-cta">
-  {{signup-cta}}
+  <SignupCta />
-{{/styleguide-example}}
+</StyleguideExample>
 

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"}}
+<StyleguideExample @title="topic list item - latest" class="half-size">
-  {{latest-topic-list-item topic=dummy.topic}}
+  <LatestTopicListItem @topic={{dummy.topic}} />
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,3 +1,3 @@
-{{#styleguide-example title="topic-notifications-button"}}
+<StyleguideExample @title="topic-notifications-button">
-  {{topic-notifications-button topic=dummy.topic}}
+  <TopicNotificationsButton @topic={{dummy.topic}} />
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,3 +1,3 @@
-{{#styleguide-example title="topic-timer-info"}}
+<StyleguideExample @title="topic-timer-info">
-  {{topic-timer-info statusType="reminder" executeAt=dummy.soon}}
+  <TopicTimerInfo @statusType="reminder" @executeAt={{dummy.soon}} />
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,3 +1,3 @@
-{{#styleguide-example title="post"}}
+<StyleguideExample @title="post">
-  {{mount-widget widget="post" args=dummy.transformedPost}}
+  <MountWidget @widget="post" @args={{dummy.transformedPost}} />
-{{/styleguide-example}}
+</StyleguideExample>

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

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

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"}}
+<StyleguideExample @title="topic-footer-buttons - logged in">
-  {{topic-footer-buttons topic=dummy.topic}}
+  <TopicFooterButtons @topic={{dummy.topic}} />
-{{/styleguide-example}}
+</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>

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

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

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"}}
+<StyleguideExample @title="basic-topic-list" class="half-size">
-  {{basic-topic-list topics=dummy.topics}}
+  <BasicTopicList @topics={{dummy.topics}} />
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,3 +1,3 @@
-{{#styleguide-example title="categories-only"}}
+<StyleguideExample @title="categories-only">
-  {{categories-only categories=dummy.categories}}
+  <CategoriesOnly @categories={{dummy.categories}} />
-{{/styleguide-example}}
+</StyleguideExample>

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

@@ -1,10 +1,10 @@
-{{#styleguide-example title="d-modal"}}
+<StyleguideExample @title="d-modal">
-  {{#d-modal closeModal=(action "dummy") modalStyle="inline-modal" title=(i18n "styleguide.sections.modal.header")}}
+  <DModal @closeModal={{action "dummy"}} @modalStyle="inline-modal" @title={{i18n "styleguide.sections.modal.header"}}>
-    {{#d-modal-body}}
+    <DModalBody>
       {{html-safe dummy.lorem}}
-    {{/d-modal-body}}
+    </DModalBody>
     <div class="modal-footer">
       {{i18n "styleguide.sections.modal.footer"}}
     </div>
-  {{/d-modal}}
+  </DModal>
-{{/styleguide-example}}
+</StyleguideExample>

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"}}
+      <DSection @class="navigation-container">
-        {{bread-crumbs categories=dummy.categories}}
+        <BreadCrumbs @categories={{dummy.categories}} />
-        {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
+        <NavigationBar @navItems={{dummy.navItems}} @filterMode="latest" />
         <div class="navigation-controls">
-          {{categories-admin-dropdown}}
+          <CategoriesAdminDropdown />
-          {{create-topic-button canCreateTopic=true}}
+          <CreateTopicButton @canCreateTopic={{true}} />
         </div>
-      {{/d-section}}
+      </DSection>
     </div>
   </div>
-{{/styleguide-example}}
+</StyleguideExample>

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)}}
+          <MountWidget @widget="home-logo" @args={{hash minimized=true}} />
-          {{mount-widget widget="header-topic-info" args=dummy}}
+          <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>
 

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

@@ -1,3 +1,3 @@
-{{#styleguide-example title="suggested-topics"}}
+<StyleguideExample @title="suggested-topics">
-  {{suggested-topics topic=dummy.topic}}
+  <SuggestedTopics @topic={{dummy.topic}} />
-{{/styleguide-example}}
+</StyleguideExample>

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"}}
+<StyleguideExample @title=".user-main .about.collapsed-info.no-background">
-  {{#d-section class="user-main"}}
+  <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}}
+  </DSection>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .about.collapsed-info.has-background"}}
+<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
-  {{#d-section class="user-main"}}
+  <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}}
+  </DSection>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .about.no-background"}}
+<StyleguideExample @title=".user-main .about.no-background">
-  {{#d-section class="user-main"}}
+  <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}}
+  </DSection>
-{{/styleguide-example}}
+</StyleguideExample>
 
-{{#styleguide-example title=".user-main .about.has-background"}}
+<StyleguideExample @title=".user-main .about.has-background">
-  {{#d-section class="user-main"}}
+  <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}}
+  </DSection>
-{{/styleguide-example}}
+</StyleguideExample>

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>