DEV: Introduce {{body-class}}, soft-deprecate <DSection /> (#23479)

`<DSection />` is now deprecated. Please use `{{body-class "foo-page" "bar"}}` and/or `<section></section>` instead.

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

@@ -14,7 +14,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
-  <DSection @class="user-navigation">
+  <section class="user-navigation">
     <MobileNav
       @class="preferences-nav"
       @desktopClass="preferences-list action-list nav-stacked"
@@ -27,5 +27,5 @@
         </li>
       {{/each}}
     </MobileNav>
-  </DSection>
+  </section>
 </StyleguideExample>

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

@@ -1,7 +1,7 @@
 <StyleguideExample @title="navigation">
   <div class="list-controls">
     <div class="container">
-      <DSection @class="navigation-container">
+      <section class="navigation-container">
         <BreadCrumbs @categories={{@dummy.categories}} />
         <NavigationBar @navItems={{@dummy.navItems}} @filterMode="latest" />
 
@@ -9,7 +9,7 @@
           <CategoriesAdminDropdown />
           <CreateTopicButton @canCreateTopic={{true}} />
         </div>
-      </DSection>
+      </section>
     </div>
   </div>
 </StyleguideExample>

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

@@ -1,5 +1,5 @@
 <StyleguideExample @title=".user-main .about.collapsed-info.no-background">
-  <DSection @class="user-main">
+  <section class="user-main">
     <section class="collapsed-info about no-background">
       <div class="profile-image"></div>
 
@@ -41,11 +41,11 @@
         <div style="clear: both"></div>
       </div>
     </section>
-  </DSection>
+  </section>
 </StyleguideExample>
 
 <StyleguideExample @title=".user-main .about.collapsed-info.has-background">
-  <DSection @class="user-main">
+  <section class="user-main">
     <section
       class="collapsed-info about has-background"
       style={{@dummy.user.profileBackground}}
@@ -89,11 +89,11 @@
         <div style="clear: both"></div>
       </div>
     </section>
-  </DSection>
+  </section>
 </StyleguideExample>
 
 <StyleguideExample @title=".user-main .about.no-background">
-  <DSection @class="user-main">
+  <section class="user-main">
     <section class="about no-background">
 
       <div class="staff-counters">
@@ -244,11 +244,11 @@
         </dl>
       </div>
     </section>
-  </DSection>
+  </section>
 </StyleguideExample>
 
 <StyleguideExample @title=".user-main .about.has-background">
-  <DSection @class="user-main">
+  <section class="user-main">
     <section
       class="about has-background"
       style={{@dummy.user.profileBackground}}
@@ -399,5 +399,5 @@
         </dl>
       </div>
     </section>
-  </DSection>
+  </section>
 </StyleguideExample>