DEV: Apply prettier to hbs files

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

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

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

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

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

@@ -3,4 +3,4 @@
     {{d-icon id}}
     <span>{{id}}</span>
   </div>
-{{/each}}
+{{/each}}

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

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

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

@@ -8,4 +8,4 @@
 
 <div class="styleguide-section-contents">
   {{yield}}
-</div>
+</div>

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

@@ -2,7 +2,9 @@
   <section class="styleguide-menu">
     {{#each this.categories as |c|}}
       <ul>
-        <li class="styleguide-heading">{{i18n (concat "styleguide.categories." c.id)}}</li>
+        <li class="styleguide-heading">{{i18n
+            (concat "styleguide.categories." c.id)
+          }}</li>
         {{#each c.sections as |s|}}
           <li><StyleguideLink @section={{s}} /></li>
         {{/each}}
@@ -12,4 +14,4 @@
   <section class="styleguide-contents">
     {{outlet}}
   </section>
-</section>
+</section>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/00-typography.hbs

@@ -24,4 +24,4 @@
 
 <StyleguideExample @title="p">
   <p>{{i18n "styleguide.sections.typography.paragraph"}}</p>
-</StyleguideExample>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs

@@ -1,47 +1,49 @@
-
 <div class="section-description">
   <p>
-    Discourse users can select from 4 different text sizes in their user settings, by default these are:
+    Discourse users can select from 4 different text sizes in their user
+    settings, by default these are:
     <pre>
-      Smaller: 14px
-      Normal: 15px <span>(default)</span>
-      Larger: 17px
-      Largest: 19px
+      Smaller: 14px Normal: 15px
+      <span>(default)</span>
+      Larger: 17px Largest: 19px
     </pre>
   </p>
 
   <p>
-    If you'd like to increase the font size of your entire Discourse community, you can override the font-size of the HTML element. You can also provide different font sizes for the user text size settings defined above. The example below increases all text size options by 1px.
+    If you'd like to increase the font size of your entire Discourse community,
+    you can override the font-size of the HTML element. You can also provide
+    different font sizes for the user text size settings defined above. The
+    example below increases all text size options by 1px.
     <pre>
       html {
-        <span class="hljs-attribute">font-size</span>: 16px; <span>// default font-size  </span>
-        &.text-size-smaller {
-          <span class="hljs-attribute">font-size</span>: 15px;
-        }
-        &.text-size-larger {
-          <span class="hljs-attribute">font-size</span>: 18px;
-        }
-        &.text-size-largest {
-          <span class="hljs-attribute">font-size</span>: 20px;
-        }
-      }
+      <span class="hljs-attribute">font-size</span>: 16px;
+      <span>// default font-size </span>
+      &.text-size-smaller {
+      <span class="hljs-attribute">font-size</span>: 15px; } &.text-size-larger
+      {
+      <span class="hljs-attribute">font-size</span>: 18px; } &.text-size-largest
+      {
+      <span class="hljs-attribute">font-size</span>: 20px; } }
     </pre>
   </p>
   <p>
-    If you want to scale the fonts of a specific element, you can use Discourse's font scaling variables. Using the variable system ensures you're using a consistent set of font-sizes throughout your community.
+    If you want to scale the fonts of a specific element, you can use
+    Discourse's font scaling variables. Using the variable system ensures you're
+    using a consistent set of font-sizes throughout your community.
     <p>
-      Changing the font-size of a parent element will proportionately scale the font sizes of all its children.
+      Changing the font-size of a parent element will proportionately scale the
+      font sizes of all its children.
     </p>
     <pre>
       .parent {
-        <span class="hljs-attribute">font-size</span>: var(--font-up-3);
-        <span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
-        .child {
-          <span>// If this is set to var(--font-down-3) in Discourse's default CSS,
-             the parent font-size increase above would make this equivalent to var(--font-0)
-             (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
-        }
-      }
+      <span class="hljs-attribute">font-size</span>: var(--font-up-3);
+      <span>// Increases the relative font-size of this element and its children
+        by 3 steps in the scale</span>
+      .child {
+      <span>// If this is set to var(--font-down-3) in Discourse's default CSS,
+        the parent font-size increase above would make this equivalent to
+        var(--font-0) (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
+      } }
     </pre>
   </p>
 </div>
@@ -96,4 +98,4 @@
 
 <StyleguideExample @title="var(--font-down-6), 0.4355em">
   <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -1,83 +1,155 @@
 <StyleguideExample @title=".btn-icon - sizes (large, default, small)">
   {{#each this.dummy.buttonSizes as |bs|}}
-    <DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
+    <DButton
+      @icon="times"
+      @translatedTitle={{bs.text}}
+      @class={{bs.class}}
+      @disabled={{bs.disabled}}
+    />
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-icon - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
+    <DButton
+      @icon="times"
+      @translatedTitle={{bs.text}}
+      @class={{bs.class}}
+      @disabled={{bs.disabled}}
+    />
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-text - sizes (large, default, small)">
   {{#each this.dummy.buttonSizes as |bs|}}
-    <DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
+    <DButton
+      @translatedLabel={{bs.text}}
+      @class={{bs.class}}
+      @disabled={{bs.disabled}}
+    />
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-text - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
+    <DButton
+      @translatedLabel={{bs.text}}
+      @class={{bs.class}}
+      @disabled={{bs.disabled}}
+    />
   {{/each}}
 </StyleguideExample>
 
-<StyleguideExample @title=".btn-default .btn-icon-text - sizes (large, default, small)">
+<StyleguideExample
+  @title=".btn-default .btn-icon-text - sizes (large, default, small)"
+>
   {{#each this.dummy.buttonSizes as |bs|}}
-    <DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
+    <DButton
+      @icon="plus"
+      @translatedLabel={{bs.text}}
+      @class={{bs.class}}
+      @disabled={{bs.disabled}}
+    />
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-default .btn-icon-text - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
+    <DButton
+      @icon="plus"
+      @translatedLabel={{bs.text}}
+      @class={{bs.class}}
+      @disabled={{bs.disabled}}
+    />
   {{/each}}
 </StyleguideExample>
 
-<StyleguideExample @title=".btn-primary .btn-icon-text - sizes (large, default, small)">
+<StyleguideExample
+  @title=".btn-primary .btn-icon-text - sizes (large, default, small)"
+>
   {{#each this.dummy.buttonSizes as |bs|}}
-    <DButton @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}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-primary .btn-icon-text - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <DButton @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}}
 </StyleguideExample>
 
-<StyleguideExample @title=".btn-danger .btn-icon-text - sizes (large, default, small)">
+<StyleguideExample
+  @title=".btn-danger .btn-icon-text - sizes (large, default, small)"
+>
   {{#each this.dummy.buttonSizes as |bs|}}
-    <DButton @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}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-danger .btn-icon-text - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <DButton @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}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-flat - sizes (large, default, small)">
   {{#each this.dummy.buttonSizes as |bs|}}
-    <FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
+    <FlatButton
+      @icon="trash-alt"
+      @disabled={{bs.disabled}}
+      @translatedTitle={{bs.title}}
+    />
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title=".btn-flat - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
+    <FlatButton
+      @icon="trash-alt"
+      @disabled={{bs.disabled}}
+      @translatedTitle={{bs.title}}
+    />
   {{/each}}
 </StyleguideExample>
 
-<StyleguideExample @title="dbutton btn-flat btn-text - sizes (large, default, small)">
+<StyleguideExample
+  @title="dbutton btn-flat btn-text - sizes (large, default, small)"
+>
   {{#each this.dummy.buttonSizes as |bs|}}
-    <DButton @class={{concat "btn-flat " bs.class}} @disabled={{bs.disabled}} @translatedLabel={{bs.text}} />
+    <DButton
+      @class={{concat "btn-flat " bs.class}}
+      @disabled={{bs.disabled}}
+      @translatedLabel={{bs.text}}
+    />
   {{/each}}
 </StyleguideExample>
 
 <StyleguideExample @title="dbutton btn-flat btn-text - states">
   {{#each this.dummy.buttonStates as |bs|}}
-    <DButton @class={{concat "btn-flat " bs.class}} @disabled={{bs.disabled}} @translatedLabel={{bs.text}} />
+    <DButton
+      @class={{concat "btn-flat " bs.class}}
+      @disabled={{bs.disabled}}
+      @translatedLabel={{bs.text}}
+    />
   {{/each}}
-</StyleguideExample>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs

@@ -119,4 +119,4 @@
     <ColorExample @color="header_primary-low-mid" />
     <ColorExample @color="header_primary-low" />
   </section>
-</StyleguideExample>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/04-icons.hbs

@@ -1,15 +1,25 @@
 <div class="section-description">
-  <p>Discourse uses a free set of SVG icons from Font Awesome (<a href="https://fontawesome.com/icons?d=gallery&m=free">{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
-  <p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace existing icons entirely.</p>
+  <p>Discourse uses a free set of SVG icons from Font Awesome (<a
+      href="https://fontawesome.com/icons?d=gallery&m=free"
+    >{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
+  <p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace
+    existing icons entirely.</p>
   <p>
     <ul>
-      <li><a href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643">How to use SVG icons in your plugin or theme</a></li>
-      <li><a href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1">How to replace Discourse's default icons in a theme</a></li>
+      <li><a
+          href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643"
+        >How to use SVG icons in your plugin or theme</a></li>
+      <li><a
+          href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1"
+        >How to replace Discourse's default icons in a theme</a></li>
     </ul>
   </p>
-  <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>
+  <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>
 
 <StyleguideExample @title="d-icon - all available icons">
   <StyleguideIcons />
-</StyleguideExample>
+</StyleguideExample>

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

@@ -13,7 +13,12 @@
 <StyleguideExample @title="inline-form">
   <div class="inline-form">
     <TextField @placeholder="Placeholder" />
-    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
+    <DButton
+      @class="btn-primary"
+      @icon="search"
+      @type="submit"
+      @translatedLabel="Submit"
+    />
   </div>
 </StyleguideExample>
 
@@ -37,11 +42,24 @@
   </div>
 </StyleguideExample>
 
-<StyleguideExample @title="inline-form with combo-box" @initialValue={{this.dummy.options.[0].name}} as |value|>
+<StyleguideExample
+  @title="inline-form with combo-box"
+  @initialValue={{this.dummy.options.0.name}}
+  as |value|
+>
   <div class="inline-form">
     <TextField @placeholder="Placeholder" />
-    <ComboBox @content={{this.dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
-    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
+    <ComboBox
+      @content={{this.dummy.options}}
+      @value={{value}}
+      @onChange={{fn (mut value)}}
+    />
+    <DButton
+      @class="btn-primary"
+      @icon="search"
+      @type="submit"
+      @translatedLabel="Submit"
+    />
   </div>
 </StyleguideExample>
 
@@ -49,7 +67,12 @@
   <div class="inline-form">
     <TextField />
     <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
-    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
+    <DButton
+      @class="btn-primary"
+      @icon="search"
+      @type="submit"
+      @translatedLabel="Submit"
+    />
   </div>
 </StyleguideExample>
 
@@ -58,7 +81,12 @@
     <label>Text:</label>
     <TextField />
     <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
-    <DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
+    <DButton
+      @class="btn-primary"
+      @icon="search"
+      @type="submit"
+      @translatedLabel="Submit"
+    />
   </div>
 </StyleguideExample>
 
@@ -70,7 +98,11 @@
 
 <StyleguideExample @title="category-notifications-button and regular button">
   <div class="inline-form">
-    <CategoryNotificationsButton @category={{this.dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
+    <CategoryNotificationsButton
+      @category={{get this.dummy.categories 0}}
+      @value={{1}}
+      @onChange={{action "dummy"}}
+    />
     <DButton @icon="reply" @type="submit" @translatedLabel="Button" />
   </div>
-</StyleguideExample>
+</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/06-spinners.hbs

@@ -4,4 +4,4 @@
 
 <StyleguideExample @title="spinner - regular">
   <div class="spinner"></div>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -24,5 +24,4 @@
 
 <StyleguideExample @title="date-picker">
   <DatePicker @defaultDate="YYYY-MM-DD" />
-</StyleguideExample>
-
+</StyleguideExample>

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

@@ -1,28 +1,76 @@
-<StyleguideExample @title="combo-box" @initialValue={{this.dummy.options.[0].name}} as |value|>
-  <ComboBox @content={{this.dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
+<StyleguideExample
+  @title="combo-box"
+  @initialValue={{this.dummy.options.0.name}}
+  as |value|
+>
+  <ComboBox
+    @content={{this.dummy.options}}
+    @value={{value}}
+    @onChange={{fn (mut value)}}
+  />
 </StyleguideExample>
 
-<StyleguideExample @title="filterable combo-box" @initialValue={{this.dummy.categories.[0].name}} as |value|>
-  <ComboBox @content={{this.dummy.categories}} @value={{value}} @options={{hash filterable=true}} @onChange={{fn (mut value)}} />
+<StyleguideExample
+  @title="filterable combo-box"
+  @initialValue={{this.dummy.categories.0.name}}
+  as |value|
+>
+  <ComboBox
+    @content={{this.dummy.categories}}
+    @value={{value}}
+    @options={{hash filterable=true}}
+    @onChange={{fn (mut value)}}
+  />
 </StyleguideExample>
 
-<StyleguideExample @title="combo-box with a default state" @initialValue={{this.dummy.options.[0].name}} as |value|>
-  <ComboBox @content={{this.dummy.options}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
+<StyleguideExample
+  @title="combo-box with a default state"
+  @initialValue={{this.dummy.options.0.name}}
+  as |value|
+>
+  <ComboBox
+    @content={{this.dummy.options}}
+    @value={{value}}
+    @options={{hash none="category.none"}}
+    @onChange={{fn (mut value)}}
+  />
 </StyleguideExample>
 
-<StyleguideExample @title="combo-box clearable" @initialValue={{this.dummy.options.[0].name}} as |value|>
-  <ComboBox @content={{this.dummy.options}} @clearable={{true}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
+<StyleguideExample
+  @title="combo-box clearable"
+  @initialValue={{this.dummy.options.0.name}}
+  as |value|
+>
+  <ComboBox
+    @content={{this.dummy.options}}
+    @clearable={{true}}
+    @value={{value}}
+    @options={{hash none="category.none"}}
+    @onChange={{fn (mut value)}}
+  />
 </StyleguideExample>
 
-<StyleguideExample @title="topic-notifications-options" @initialValue={{1}} as |value|>
-  <TopicNotificationsOptions @topic={{this.dummy.topic}} @value={{value}} @onChange={{fn (mut value)}} />
+<StyleguideExample
+  @title="topic-notifications-options"
+  @initialValue={{1}}
+  as |value|
+>
+  <TopicNotificationsOptions
+    @topic={{this.dummy.topic}}
+    @value={{value}}
+    @onChange={{fn (mut value)}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="topic-footer-mobile-dropdown">
   <TopicFooterMobileDropdown @topic={{this.dummy.topic}} />
 </StyleguideExample>
 
-<StyleguideExample @title="category-chooser" @initialValue={{this.categories.[0].name}} as |value|>
+<StyleguideExample
+  @title="category-chooser"
+  @initialValue={{this.categories.0.name}}
+  as |value|
+>
   <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
 </StyleguideExample>
 
@@ -39,21 +87,36 @@
 </StyleguideExample>
 
 <StyleguideExample @title="category-notifications-button">
-  <CategoryNotificationsButton @category={{this.dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
+  <CategoryNotificationsButton
+    @category={{get this.dummy.categories 0}}
+    @value={{1}}
+    @onChange={{action "dummy"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="notifications-button">
-  <NotificationsButton @options={{hash i18nPrefix="groups.notifications"}} @value={{2}} @onChange={{action "dummy"}} />
+  <NotificationsButton
+    @options={{hash i18nPrefix="groups.notifications"}}
+    @value={{2}}
+    @onChange={{action "dummy"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="dropdown-select-box">
-  <DropdownSelectBox @content={{this.dummy.options}} @onChange={{action "dummy"}} @options={{hash
-      translatedNone="Something"
-    }} />
+  <DropdownSelectBox
+    @content={{this.dummy.options}}
+    @onChange={{action "dummy"}}
+    @options={{hash translatedNone="Something"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="future-date-input-selector">
-  <FutureDateInputSelector @input={{this.dummy.topicTimerUpdateDate}} @includeWeekend={{true}} @includeForever={{true}} @options={{hash none="time_shortcut.select_timeframe"}} />
+  <FutureDateInputSelector
+    @input={{this.dummy.topicTimerUpdateDate}}
+    @includeWeekend={{true}}
+    @includeForever={{true}}
+    @options={{hash none="time_shortcut.select_timeframe"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="multi-select">
@@ -61,17 +124,31 @@
 </StyleguideExample>
 
 <StyleguideExample @title="admin group-chooser">
-  <GroupChooser @selected={{this.dummy.selectedGroups}} @content={{this.dummy.groups}} @onChange={{action "dummy"}} />
+  <GroupChooser
+    @selected={{this.dummy.selectedGroups}}
+    @content={{this.dummy.groups}}
+    @onChange={{action "dummy"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="list-setting">
-  <ListSetting @settingValue={{this.dummy.settings}} @onChange={{action "dummy"}} />
+  <ListSetting
+    @settingValue={{this.dummy.settings}}
+    @onChange={{action "dummy"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="list-setting with colors">
-  <ListSetting @settingValue={{this.dummy.colors}} @nameProperty="color" @onChange={{action "dummy"}} />
+  <ListSetting
+    @settingValue={{this.dummy.colors}}
+    @nameProperty="color"
+    @onChange={{action "dummy"}}
+  />
 </StyleguideExample>
 
 <StyleguideExample @title="user-notifications-dropdown">
-  <UserNotificationsDropdown @user={{this.currentUser}} @value="changeToNormal" />
-</StyleguideExample>
+  <UserNotificationsDropdown
+    @user={{this.currentUser}}
+    @value="changeToNormal"
+  />
+</StyleguideExample>

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

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

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

@@ -24,4 +24,4 @@
 
 <StyleguideExample @title="no status">
   <TopicStatus @topic={{this.dummy.topic}} />
-</StyleguideExample>
+</StyleguideExample>

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

@@ -2,4 +2,4 @@
   <div class="description">
     {{i18n "styleguide.welcome"}}
   </div>
-</StyleguideSection>
+</StyleguideSection>

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

@@ -6,4 +6,4 @@
   <StyleguideExample @title="category-breadcrumbs - tags">
     <BreadCrumbs @categories={{this.dummy.categories}} @showTags={{true}} />
   </StyleguideExample>
-{{/if}}
+{{/if}}

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

@@ -20,4 +20,4 @@
   {{#each this.dummy.categories as |c|}}
     {{category-badge c categoryStyle="none"}}
   {{/each}}
-</StyleguideExample>
+</StyleguideExample>

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

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

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

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

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

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

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

@@ -5,7 +5,10 @@
 <StyleguideExample @title=".user-main .nav-pills">
   <MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
     {{#each this.dummy.navItems as |ni|}}
-      <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
+      <li><a
+          href={{ni.href}}
+          class={{if ni.styleGuideActive "active"}}
+        >{{ni.displayName}}</a></li>
     {{/each}}
   </MobileNav>
 </StyleguideExample>
@@ -17,7 +20,10 @@
     </li>
 
     {{#each this.dummy.navItems as |ni|}}
-      <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
+      <li><a
+          href={{ni.href}}
+          class={{if ni.styleGuideActive "active"}}
+        >{{ni.displayName}}</a></li>
     {{/each}}
   </MobileNav>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -1,17 +1,29 @@
 <StyleguideExample @title=".nav-stacked" class="half-size">
-  <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
+  <MobileNav
+    @class="preferences-nav"
+    @desktopClass="preferences-list action-list nav-stacked"
+  >
     {{#each this.dummy.navItems as |ni|}}
-      <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
+      <li><a
+          href={{ni.href}}
+          class={{if ni.styleGuideActive "active"}}
+        >{{ni.displayName}}</a></li>
     {{/each}}
   </MobileNav>
 </StyleguideExample>
 
 <StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
   <DSection @class="user-navigation">
-    <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
+    <MobileNav
+      @class="preferences-nav"
+      @desktopClass="preferences-list action-list nav-stacked"
+    >
       {{#each this.dummy.navItems as |ni|}}
-        <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
+        <li><a
+            href={{ni.href}}
+            class={{if ni.styleGuideActive "active"}}
+          >{{ni.displayName}}</a></li>
       {{/each}}
     </MobileNav>
   </DSection>
-</StyleguideExample>
+</StyleguideExample>

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

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

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

@@ -6,4 +6,4 @@
       {{i18n "styleguide.sections.rich_tooltip.description"}}
     </DTooltip>
   </DButton>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -1,4 +1,3 @@
 <StyleguideExample @title="signup-cta">
   <SignupCta />
-</StyleguideExample>
-
+</StyleguideExample>

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

@@ -9,7 +9,11 @@
 <StyleguideExample @title="topic list item - hide category">
   <table class="topic-list">
     <tbody>
-      <TopicListItem @topic={{this.dummy.topic}} @hideCategory={{true}} @showPosters={{true}} />
+      <TopicListItem
+        @topic={{this.dummy.topic}}
+        @hideCategory={{true}}
+        @showPosters={{true}}
+      />
     </tbody>
   </table>
 </StyleguideExample>
@@ -17,11 +21,15 @@
 <StyleguideExample @title="topic list item - show likes">
   <table class="topic-list">
     <tbody>
-      <TopicListItem @topic={{this.dummy.topic}} @showLikes={{true}} @showPosters={{true}} />
+      <TopicListItem
+        @topic={{this.dummy.topic}}
+        @showLikes={{true}}
+        @showPosters={{true}}
+      />
     </tbody>
   </table>
 </StyleguideExample>
 
 <StyleguideExample @title="topic list item - latest" class="half-size">
   <LatestTopicListItem @topic={{this.dummy.topic}} />
-</StyleguideExample>
+</StyleguideExample>

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,10 @@
 
 <StyleguideExample @title="topic-footer-buttons - anonymous">
   <div id="topic-footer-buttons">
-    <DButton @icon="reply" @class="btn-primary pull-right" @label="topic.reply.title" />
+    <DButton
+      @icon="reply"
+      @class="btn-primary pull-right"
+      @label="topic.reply.title"
+    />
   </div>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -4,4 +4,4 @@
 
 <StyleguideExample @title="topic-list - hide posters">
   <TopicList @topics={{this.dummy.topics}} @showPosters={{false}} />
-</StyleguideExample>
+</StyleguideExample>

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

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

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

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

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

@@ -1,5 +1,9 @@
 <StyleguideExample @title="d-modal">
-  <DModal @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"}}
+  >
     <DModalBody>
       {{html-safe this.dummy.lorem}}
     </DModalBody>
@@ -7,4 +11,4 @@
       {{i18n "styleguide.sections.modal.footer"}}
     </div>
   </DModal>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -11,4 +11,4 @@
       </DSection>
     </div>
   </div>
-</StyleguideExample>
+</StyleguideExample>

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

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

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

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

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

@@ -13,13 +13,18 @@
                   {{i18n "user.private_message"}}
                 </a>
               </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
-              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n "user.expand_profile"}}</a></li>
+              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
+                    "wrench"
+                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
+              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
+                    "user.expand_profile"
+                  }}</a></li>
             </ul>
           </section>
 
           <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
+            <h1 class="username">{{this.dummy.user.username}}
+              {{d-icon "shield-alt"}}</h1>
             <h2 class="full-name">{{this.dummy.user.name}}</h2>
             <h3>{{this.dummy.user.title}}</h3>
           </div>
@@ -32,7 +37,10 @@
 
 <StyleguideExample @title=".user-main .about.collapsed-info.has-background">
   <DSection @class="user-main">
-    <section class="collapsed-info about has-background"  style={{this.dummy.user.profileBackground}}>
+    <section
+      class="collapsed-info about has-background"
+      style={{this.dummy.user.profileBackground}}
+    >
       <div class="profile-image"></div>
       <div class="details">
         <div class="primary">
@@ -45,13 +53,18 @@
                   {{i18n "user.private_message"}}
                 </a>
               </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
-              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n "user.expand_profile"}}</a></li>
+              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
+                    "wrench"
+                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
+              <li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
+                    "user.expand_profile"
+                  }}</a></li>
             </ul>
           </section>
 
           <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
+            <h1 class="username">{{this.dummy.user.username}}
+              {{d-icon "shield-alt"}}</h1>
             <h2 class="full-name">{{this.dummy.user.name}}</h2>
             <h3>{{this.dummy.user.title}}</h3>
           </div>
@@ -67,19 +80,39 @@
     <section class="about no-background">
 
       <div class="staff-counters">
-        <div><span class="helpful-flags">{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n "user.staff_counters.flags_given"}}</div>
+        <div><span
+            class="helpful-flags"
+          >{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n
+            "user.staff_counters.flags_given"
+          }}</div>
         <div>
           <a href="#">
-            <span class="flagged-posts">{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
+            <span
+              class="flagged-posts"
+            >{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n
+              "user.staff_counters.flagged_posts"
+            }}
           </a>
         </div>
         <div>
           <a href="#">
-            <span class="deleted-posts">{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
+            <span
+              class="deleted-posts"
+            >{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n
+              "user.staff_counters.deleted_posts"
+            }}
           </a>
         </div>
-        <div><span class="suspensions">{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n "user.staff_counters.suspensions"}}</div>
-        <div><span class="warnings-received">{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}</div>
+        <div><span
+            class="suspensions"
+          >{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n
+            "user.staff_counters.suspensions"
+          }}</div>
+        <div><span
+            class="warnings-received"
+          >{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n
+            "user.staff_counters.warnings_received"
+          }}</div>
       </div>
 
       <div class="profile-image"></div>
@@ -94,25 +127,37 @@
                   {{i18n "user.private_message"}}
                 </a>
               </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
+              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
+                    "wrench"
+                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
             </ul>
           </section>
 
           <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
+            <h1 class="username">{{this.dummy.user.username}}
+              {{d-icon "shield-alt"}}</h1>
             <h2 class="full-name">{{this.dummy.user.name}}</h2>
             <h3>{{this.dummy.user.title}}</h3>
             <h3>
-              {{d-icon "map-marker-alt"}} {{this.dummy.user.location}}
+              {{d-icon "map-marker-alt"}}
+              {{this.dummy.user.location}}
               {{d-icon "globe"}}
-              <a href={{this.dummy.user.website}} rel="nofollow noopener noreferrer" target="_blank">{{this.dummy.user.website_name}}</a>
+              <a
+                href={{this.dummy.user.website}}
+                rel="nofollow noopener noreferrer"
+                target="_blank"
+              >{{this.dummy.user.website_name}}</a>
             </h3>
 
             <div class="bio">
               <div class="suspended">
                 {{d-icon "ban"}}
-                <b>{{i18n "user.suspended_notice" date=this.dummy.user.suspendedTillDate}}</b><br>
-                <b>{{i18n "user.suspended_reason"}}</b> {{this.dummy.user.suspend_reason}}
+                <b>{{i18n
+                    "user.suspended_notice"
+                    date=this.dummy.user.suspendedTillDate
+                  }}</b><br />
+                <b>{{i18n "user.suspended_reason"}}</b>
+                {{this.dummy.user.suspend_reason}}
               </div>
               {{html-safe this.dummy.user.bio_cooked}}
             </div>
@@ -134,23 +179,45 @@
 
       <div class="secondary">
         <dl>
-          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date this.dummy.user.created_at}}</dd>
-          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date this.dummy.user.last_posted_at}}</dd>
-          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date this.dummy.user.last_seen_at}}</dd>
-          <dt>{{i18n "views"}}</dt><dd>{{this.dummy.user.profile_view_count}}</dd>
-          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd class="invited-by"><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
-          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd class="trust-level">{{this.dummy.user.trustLevel.name}}</dd>
+          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date
+              this.dummy.user.created_at
+            }}</dd>
+          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
+              this.dummy.user.last_posted_at
+            }}</dd>
+          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
+              this.dummy.user.last_seen_at
+            }}</dd>
+          <dt>{{i18n "views"}}</dt><dd
+          >{{this.dummy.user.profile_view_count}}</dd>
+          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
+            class="invited-by"
+          ><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
+          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
+            class="trust-level"
+          >{{this.dummy.user.trustLevel.name}}</dd>
           <dt>{{i18n "user.email.title"}}</dt>
           <dd title={{this.dummy.user.email}}>
-            <DButton @icon="envelope" @label="admin.users.check_email.text" @class="btn-primary" />
+            <DButton
+              @icon="envelope"
+              @label="admin.users.check_email.text"
+              @class="btn-primary"
+            />
           </dd>
-          <dt class="groups">{{i18n "groups.title" count=this.dummy.user.displayGroups.length}}</dt>
+          <dt class="groups">{{i18n
+              "groups.title"
+              count=this.dummy.user.displayGroups.length
+            }}</dt>
           <dd class="groups">
             {{#each this.dummy.user.displayGroups as |group|}}
               <span><a href="#" class="group-link">{{group.name}}</a></span>
             {{/each}}
           </dd>
-          <DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
+          <DButton
+            @icon="exclamation-triangle"
+            @label="user.admin_delete"
+            @class="btn-danger"
+          />
         </dl>
       </div>
     </section>
@@ -159,21 +226,44 @@
 
 <StyleguideExample @title=".user-main .about.has-background">
   <DSection @class="user-main">
-    <section class="about has-background"  style={{this.dummy.user.profileBackground}}>
+    <section
+      class="about has-background"
+      style={{this.dummy.user.profileBackground}}
+    >
       <div class="staff-counters">
-        <div><span class="helpful-flags">{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n "user.staff_counters.flags_given"}}</div>
+        <div><span
+            class="helpful-flags"
+          >{{this.dummy.user.number_of_flags_given}}</span>&nbsp;{{i18n
+            "user.staff_counters.flags_given"
+          }}</div>
         <div>
           <a href="#">
-            <span class="flagged-posts">{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n "user.staff_counters.flagged_posts"}}
+            <span
+              class="flagged-posts"
+            >{{this.dummy.user.number_of_flagged_posts}}</span>&nbsp;{{i18n
+              "user.staff_counters.flagged_posts"
+            }}
           </a>
         </div>
         <div>
           <a href="#">
-            <span class="deleted-posts">{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n "user.staff_counters.deleted_posts"}}
+            <span
+              class="deleted-posts"
+            >{{this.dummy.user.number_of_deleted_posts}}</span>&nbsp;{{i18n
+              "user.staff_counters.deleted_posts"
+            }}
           </a>
         </div>
-        <div><span class="suspensions">{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n "user.staff_counters.suspensions"}}</div>
-        <div><span class="warnings-received">{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n "user.staff_counters.warnings_received"}}</div>
+        <div><span
+            class="suspensions"
+          >{{this.dummy.user.number_of_suspensions}}</span>&nbsp;{{i18n
+            "user.staff_counters.suspensions"
+          }}</div>
+        <div><span
+            class="warnings-received"
+          >{{this.dummy.user.warnings_received_count}}</span>&nbsp;{{i18n
+            "user.staff_counters.warnings_received"
+          }}</div>
       </div>
 
       <div class="profile-image"></div>
@@ -188,25 +278,37 @@
                   {{i18n "user.private_message"}}
                 </a>
               </li>
-              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
+              <li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
+                    "wrench"
+                  }}{{i18n "admin.user.show_admin_profile"}}</a></li>
             </ul>
           </section>
 
           <div class="primary-textual">
-            <h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
+            <h1 class="username">{{this.dummy.user.username}}
+              {{d-icon "shield-alt"}}</h1>
             <h2 class="full-name">{{this.dummy.user.name}}</h2>
             <h3>{{this.dummy.user.title}}</h3>
             <h3>
-              {{d-icon "map-marker-alt"}} {{this.dummy.user.location}}
+              {{d-icon "map-marker-alt"}}
+              {{this.dummy.user.location}}
               {{d-icon "globe"}}
-              <a href={{this.dummy.user.website}} rel="nofollow noopener noreferrer" target="_blank">{{this.dummy.user.website_name}}</a>
+              <a
+                href={{this.dummy.user.website}}
+                rel="nofollow noopener noreferrer"
+                target="_blank"
+              >{{this.dummy.user.website_name}}</a>
             </h3>
 
             <div class="bio">
               <div class="suspended">
                 {{d-icon "ban"}}
-                <b>{{i18n "user.suspended_notice" date=this.dummy.user.suspendedTillDate}}</b><br>
-                <b>{{i18n "user.suspended_reason"}}</b> {{this.dummy.user.suspend_reason}}
+                <b>{{i18n
+                    "user.suspended_notice"
+                    date=this.dummy.user.suspendedTillDate
+                  }}</b><br />
+                <b>{{i18n "user.suspended_reason"}}</b>
+                {{this.dummy.user.suspend_reason}}
               </div>
               {{html-safe this.dummy.user.bio_cooked}}
             </div>
@@ -229,25 +331,47 @@
 
       <div class="secondary">
         <dl>
-          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date this.dummy.user.created_at}}</dd>
-          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date this.dummy.user.last_posted_at}}</dd>
-          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date this.dummy.user.last_seen_at}}</dd>
-          <dt>{{i18n "views"}}</dt><dd>{{this.dummy.user.profile_view_count}}</dd>
-          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd class="invited-by"><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
-          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd class="trust-level">{{this.dummy.user.trustLevel.name}}</dd>
+          <dt>{{i18n "user.created"}}</dt><dd>{{bound-date
+              this.dummy.user.created_at
+            }}</dd>
+          <dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
+              this.dummy.user.last_posted_at
+            }}</dd>
+          <dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
+              this.dummy.user.last_seen_at
+            }}</dd>
+          <dt>{{i18n "views"}}</dt><dd
+          >{{this.dummy.user.profile_view_count}}</dd>
+          <dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
+            class="invited-by"
+          ><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
+          <dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
+            class="trust-level"
+          >{{this.dummy.user.trustLevel.name}}</dd>
           <dt>{{i18n "user.email.title"}}</dt>
           <dd title={{this.dummy.user.email}}>
-            <DButton @icon="envelope" @label="admin.users.check_email.text" @class="btn-primary" />
+            <DButton
+              @icon="envelope"
+              @label="admin.users.check_email.text"
+              @class="btn-primary"
+            />
           </dd>
-          <dt class="groups">{{i18n "groups.title" count=this.dummy.user.displayGroups.length}}</dt>
+          <dt class="groups">{{i18n
+              "groups.title"
+              count=this.dummy.user.displayGroups.length
+            }}</dt>
           <dd class="groups">
             {{#each this.dummy.user.displayGroups as |group|}}
               <span><a href="#" class="group-link">{{group.name}}</a></span>
             {{/each}}
           </dd>
-          <DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
+          <DButton
+            @icon="exclamation-triangle"
+            @label="user.admin_delete"
+            @class="btn-danger"
+          />
         </dl>
       </div>
     </section>
   </DSection>
-</StyleguideExample>
+</StyleguideExample>

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

@@ -6,4 +6,4 @@
   {{/if}}
 
   {{outlet}}
-</StyleguideSection>
+</StyleguideSection>