FEATURE: optionally show category logo, change text alignment

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .discourse-site
+.vscode

common/common.scss

@@ -5,11 +5,44 @@ body:not(.category-header) {
   }
 }
 
+.category-title-contents {
+  display: grid;
+  grid-template-areas: "logo title" "logo description";
+  grid-template-columns: auto 1fr;
+
+  @include breakpoint(tablet) {
+    grid-template-areas: "logo" "title" "description";
+    grid-template-columns: auto;
+  }
+
+  .category-logo {
+    grid-area: logo;
+    align-self: center;
+    margin: 0 1em 0 0;
+    --max-height: 8em;
+    @include breakpoint(tablet) {
+      margin: 0 0 0.5em;
+    }
+  }
+  .category-title {
+    grid-area: title;
+    align-self: end;
+  }
+  .category-title-description {
+    grid-area: description;
+  }
+}
+
 div[class^="category-title-header"] {
   display: flex;
-  text-align: center;
   width: 100%;
   justify-content: center;
+  @if $align_text == "center" {
+    text-align: center;
+  }
+  @if $align_text == "right" {
+    text-align: right;
+  }
 
   .category-title-contents {
     max-width: 500px;

javascripts/discourse/components/category-banner.hbs

@@ -9,6 +9,9 @@
   >
     {{#if this.category}}
       <div class="category-title-contents">
+        {{#if (theme-setting "show_category_logo")}}
+          <CategoryLogo @category={{this.category}} />
+        {{/if}}
         <h1 class="category-title">
           {{#if (and (theme-setting "show_category_icon") this.category)}}
             {{#if this.hasIconComponent}}

settings.yml

@@ -14,6 +14,17 @@ hide_if_no_description:
   default: true
   description: "Hide banners if category description is not set"
 
+show_category_logo:
+  default: false
+  description: "Displays the category logo as set in the category's settings"
+
+align_text:
+  default: center
+  choices:
+    - center
+    - left
+    - right
+
 exceptions:
   default: ""
   type: list

spec/system/category_banners_spec.rb

@@ -6,7 +6,7 @@
   let!(:theme) { upload_theme_component }
   fab!(:category) { Fabricate(:category, description: "<p>this is some description</p>") }
   fab!(:category_subcategory) do
-    Fabricate(:category, parent_category: category, description: "some description")
+    Fabricate(:category, parent_category: category, description: "some description", uploaded_logo: Fabricate(:upload))
   end
   let(:category_banner) { PageObjects::Components::CategoryBanner.new(category) }
   let(:subcategory_banner) { PageObjects::Components::CategoryBanner.new(category_subcategory) }
@@ -69,4 +69,22 @@
 
     visit(category_subcategory.url)
   end
+
+  it "displays a category logo when show_category_logo is true" do
+    theme.update_setting(:show_category_logo, true)
+    theme.save!
+
+    visit(category_subcategory.url)
+
+    expect(subcategory_banner).to have_logo
+  end
+
+  it "does not display a category logo when show_category_logo is false" do
+    theme.update_setting(:show_category_logo, false)
+    theme.save!
+
+    visit(category_subcategory.url)
+
+    expect(subcategory_banner).to have_no_logo
+  end
 end

spec/system/page_objects/components/category_banner.rb

@@ -30,6 +30,14 @@ def has_no_description?
         has_no_css?("#{category_banner_selector} .category-title-description")
       end
 
+      def has_logo?
+        has_css?("#{category_banner_selector} .category-logo img[src]")
+      end
+
+      def has_no_logo?
+        has_no_css?("#{category_banner_selector} .category-logo img[src]")
+      end
+
       private
 
       def category_banner_selector