DEV: Add high level system spec and clean up JS (#34)

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,8 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
-import ClassAdder from "../components/class-adder";
+import CustomColorHtmlClass from "../components/custom-color-html-class";
 import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
-  api.renderInOutlet("above-main-container", ClassAdder);
+  api.renderInOutlet("above-main-container", CustomColorHtmlClass);
 });

javascripts/discourse/api-initializers/user-pallette.js

@@ -1,6 +1,6 @@
 import { apiInitializer } from "discourse/lib/api";
-import CustomUserPallette from "../components/custom-user-pallette";
+import CustomUserPalette from "../components/custom-user-palette";
 
 export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("sidebar-footer-actions", CustomUserPallette);
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
 });

javascripts/discourse/components/custom-color-html-class.gjs

@@ -3,7 +3,7 @@ import { concat } from "@ember/helper";
 import { service } from "@ember/service";
 import htmlClass from "discourse/helpers/html-class";
 
-export default class ClassAdder extends Component {
+export default class CustomColorHtmlClass extends Component {
   @service customColor;
 
   <template>

javascripts/discourse/components/custom-user-palette.gjs

@@ -1,51 +1,57 @@
-import { array } from "@ember/helper";
 import icon from "discourse/helpers/d-icon";
 import DMenu from "float-kit/components/d-menu";
-import SitePallette from "./site-pallette";
+import SitePaletteMenuItem from "./site-palette-menu-item";
 
-const PALLETTES = [
+const PALETTES = [
   {
+    label: "Marigold",
     name: "marigold",
     color: "#d3881f",
   },
   {
+    label: "Violet",
     name: "violet",
     color: "#9b15de",
   },
   {
+    label: "Lily",
     name: "lily",
     color: "#CC336F",
   },
   {
+    label: "Clover",
     name: "clover",
     color: "#45a06e",
   },
   {
+    label: "Royal",
     name: "royal",
     color: "#4169e1",
   },
   {
+    label: "Horizon",
     name: "horizon",
     color: "#595bca",
   },
 ];
 
+export const DEFAULT_PALETTE_NAME = "horizon";
+
 <template>
   <DMenu
-    @identifier="user-color-pallette"
+    @identifier="user-color-palette"
-    @triggers={{array "click"}}
     @placementStrategy="fixed"
-    class="btn-flat user-color-pallette sidebar-footer-actions-button"
+    class="btn-flat user-color-palette sidebar-footer-actions-button"
     @inline={{true}}
   >
     <:trigger>
       {{icon "paintbrush"}}
     </:trigger>
     <:content>
-      <div class="color-pallette-menu">
+      <div class="color-palette-menu">
-        <div class="color-pallette-menu__content">
+        <div class="color-palette-menu__content">
-          {{#each PALLETTES as |colorScheme|}}
+          {{#each PALETTES as |colorPalette|}}
-            <SitePallette @colorScheme={{colorScheme}} />
+            <SitePaletteMenuItem @colorPalette={{colorPalette}} />
           {{/each}}
         </div>
       </div>

javascripts/discourse/components/site-palette-menu-item.gjs

@@ -0,0 +1,41 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+
+export default class SitePaletteMenuItem extends Component {
+  @service customColor;
+
+  get siteStyle() {
+    return `--icon-color: ${this.args.colorPalette.color}`;
+  }
+
+  get activeClass() {
+    if (this.customColor.color === this.args.colorPalette.name) {
+      return "active";
+    }
+  }
+
+  @action
+  handleInput(colorPalette) {
+    this.customColor.setColor(colorPalette.name);
+  }
+
+  <template>
+    <div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
+      <DButton
+        class={{concatClass
+          "btn-flat color-palette-menu__item-choice"
+          this.activeClass
+        }}
+        style={{htmlSafe this.siteStyle}}
+        @icon="circle"
+        @translatedLabel={{@colorPalette.label}}
+        @action={{fn this.handleInput @colorPalette}}
+      />
+    </div>
+  </template>
+}

javascripts/discourse/components/site-pallette.gjs

@@ -1,31 +0,0 @@
-import Component from "@glimmer/component";
-import { fn } from "@ember/helper";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import DButton from "discourse/components/d-button";
-
-export default class SitePallette extends Component {
-  @service customColor;
-
-  get siteStyle() {
-    return `--icon-color: ${this.args.colorScheme.color}`;
-  }
-
-  @action
-  handleInput(colorScheme) {
-    this.customColor.setColor(colorScheme.name);
-  }
-
-  <template>
-    <div class="color-pallette-menu__item">
-      <DButton
-        class="btn-flat color-pallette-menu__item-choice"
-        style={{htmlSafe this.siteStyle}}
-        @icon="circle"
-        @translatedLabel={{@colorScheme.name}}
-        @action={{fn this.handleInput @colorScheme}}
-      />
-    </div>
-  </template>
-}

javascripts/discourse/services/custom-color.gjs

@@ -1,13 +1,18 @@
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import Service from "@ember/service";
+import Service, { service } from "@ember/service";
+import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
 
-export default class customColor extends Service {
+const CUSTOM_COLOR_KEY = "d-custom-color-preference";
-  @tracked color = localStorage.getItem("d-customColor") || "horizon";
+
+export default class CustomColor extends Service {
+  @service keyValueStore;
+  @tracked
+  color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
 
   @action
   setColor(color) {
     this.color = color;
-    localStorage.setItem("d-customColor", color);
+    this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
   }
 }

locales/en.yml

@@ -1,6 +1,6 @@
 en:
   theme_metadata:
-    description: "A simple, beautiful theme for the future of Discourse that improves the out of the box experience for sites."
+    description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
   topic_bookmarked: "Bookmarked"
   topic_closed_archived: "Closed and archived"
   topic_closed: "Closed"

scss/color-choice.scss

@@ -1,4 +1,4 @@
-.color-pallette-menu {
+.color-palette-menu {
   &__item .btn-icon-text.btn-flat {
     background-color: var(--d-content-background);
     width: 100%;
@@ -15,9 +15,12 @@
   &__item .btn-icon-text.btn-flat svg {
     color: var(--icon-color);
   }
+  &__item-choice.active.btn-icon-text.btn-flat {
+    background-color: var(--d-selected);
+  }
 }
 
-.user-color-pallette-content .fk-d-menu__inner-content {
+.user-color-palette-content .fk-d-menu__inner-content {
   border: none;
 }
 

spec/system/horizon_high_level_spec.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+describe "Horizon theme | High level", type: :system do
+  let!(:theme) { upload_theme }
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
+  fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
+  fab!(:category)
+  fab!(:topic_1) { Fabricate(:topic_with_op, category: category, tags: [tag_1, tag_2]) }
+  let(:topic_list) { PageObjects::Components::TopicList.new }
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+  let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
+
+  def run_all_high_level_tests
+    expect(page).to have_css(".experimental-screen")
+
+    expect(sidebar).to have_categories_section
+    expect(sidebar).to have_section_link(category.name)
+
+    expect(topic_list).to have_topic(topic_1)
+
+    # Ensure the topic list columns are in the correct order via 'topic-list-columns' valueTransformer
+    #
+    # NOTE(martin): Maybe there is a better way to do this in a qunit test instead.
+    topic_item = find(topic_list.topic_list_item_class(topic_1))
+    expect(topic_item.all("td").map { |el| el["class"] }).to eq(
+      [
+        "main-link clearfix topic-list-data",
+        "activity num topic-list-data age",
+        "topic-author-data",
+        "topic-category-status-data",
+        "topic-author-avatar-data",
+        "topic-likes-replies-data",
+      ],
+    )
+
+    # Can see a topic in the list and navigate to it successfully
+    topic_list.visit_topic(topic_1)
+    expect(topic_page).to have_topic_title(topic_1.title)
+
+    # Can change site colors from the sidebar palette, which are remembered across page reloads
+    palette_menu =
+      PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
+    palette_menu.expand
+    find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
+    expect(page).to have_css(".custom-color-marigold")
+    page.refresh
+    expect(page).to have_css(".custom-color-marigold")
+  end
+
+  it "works for anon" do
+    visit "/"
+    run_all_high_level_tests
+  end
+
+  context "for signed in users" do
+    before { sign_in(current_user) }
+
+    it "works" do
+      visit "/"
+      run_all_high_level_tests
+    end
+  end
+end