FEATURE: Add ability to hide modal header (#24290)

app/assets/javascripts/discourse/app/components/d-modal.hbs

@@ -25,13 +25,15 @@
       <div class="modal-middle-container">
         <div class="modal-inner-container">
           {{yield to="aboveHeader"}}
-
           {{#if
-            (or
-              this.dismissable
-              @title
-              (has-block "headerBelowTitle")
-              (has-block "headerAboveTitle")
+            (and
+              (not @hideHeader)
+              (or
+                this.dismissable
+                @title
+                (has-block "headerBelowTitle")
+                (has-block "headerAboveTitle")
+              )
             )
           }}
             <div class={{concat-class "modal-header" @headerClass}}>

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

@@ -4,6 +4,7 @@
   <Styleguide::Component>
     <DModal
       @closeModal={{fn (mut this.inline) true}}
+      @hideHeader={{this.hideHeader}}
       @inline={{this.inline}}
       @title={{this.title}}
       @subtitle={{this.subtitle}}
@@ -23,6 +24,12 @@
   </Styleguide::Component>
 
   <Styleguide::Controls>
+    <Styleguide::Controls::Row @name="@hideHeader">
+      <DToggleSwitch
+        @state={{this.hideHeader}}
+        {{on "click" this.toggleHeader}}
+      />
+    </Styleguide::Controls::Row>
     <Styleguide::Controls::Row @name="@inline">
       <DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
     </Styleguide::Controls::Row>

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

@@ -5,6 +5,7 @@ import I18n from "discourse-i18n";
 
 export default class extends Component {
   @tracked inline = true;
+  @tracked hideHeader = false;
   @tracked dismissable = true;
   @tracked modalTagName = "div";
   @tracked title = I18n.t("styleguide.sections.modal.header");
@@ -16,6 +17,11 @@ export default class extends Component {
   flashTypes = ["success", "info", "warning", "error"];
   modalTagNames = ["div", "form"];
 
+  @action
+  toggleHeader() {
+    this.hideHeader = !this.hideHeader;
+  }
+
   @action
   toggleInline() {
     this.inline = !this.inline;