From daec18921f6ef499c5368690e4adbdec9821418a Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 31 Jan 2024 14:47:25 -0500
Subject: [PATCH] FEATURE: optionally show category logo, change text alignment
 (#44)

---
 .gitignore                                    |  1 +
 common/common.scss                            | 35 ++++++++++++++++++-
 .../discourse/components/category-banner.hbs  |  3 ++
 settings.yml                                  | 11 ++++++
 spec/system/category_banners_spec.rb          | 20 ++++++++++-
 .../components/category_banner.rb             |  8 +++++
 6 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 14735c6..c00857d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 .discourse-site
+.vscode
\ No newline at end of file
diff --git a/common/common.scss b/common/common.scss
index 53f636a..958f7b3 100644
--- a/common/common.scss
+++ b/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;
diff --git a/javascripts/discourse/components/category-banner.hbs b/javascripts/discourse/components/category-banner.hbs
index def65ed..41c5539 100644
--- a/javascripts/discourse/components/category-banner.hbs
+++ b/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}}
diff --git a/settings.yml b/settings.yml
index 6b73e5e..ab7d18b 100644
--- a/settings.yml
+++ b/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
diff --git a/spec/system/category_banners_spec.rb b/spec/system/category_banners_spec.rb
index 991ceb0..6d9ddf8 100644
--- a/spec/system/category_banners_spec.rb
+++ b/spec/system/category_banners_spec.rb
@@ -6,7 +6,7 @@ RSpec.describe "Category Banners", type: :system do
   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 @@ RSpec.describe "Category Banners", type: :system do
 
     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
diff --git a/spec/system/page_objects/components/category_banner.rb b/spec/system/page_objects/components/category_banner.rb
index 22437fb..448ad63 100644
--- a/spec/system/page_objects/components/category_banner.rb
+++ b/spec/system/page_objects/components/category_banner.rb
@@ -30,6 +30,14 @@ module PageObjects
         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