katalyst-content 3.0.0.alpha.1 → 3.0.0.alpha.3

data/app/javascript/content/editor/item_editor_controller.js

@@ -12,6 +12,10 @@ export default class ItemEditorController extends Controller {
     this.element.removeEventListener("turbo:submit-end", this.onSubmit);
   }
 
+  click(e) {
+    if (e.target.tagName === "DIALOG") this.dismiss();
+  }
+
   dismiss() {
     if (!this.dialogTarget) return;
     if (!this.dialogTarget.open) this.dialogTarget.close();
@@ -39,8 +43,6 @@ export default class ItemEditorController extends Controller {
     }
   };
 
-  noop() {}
-
   #removeTargetItem() {
     const el = document.getElementById(this.dialogTarget.dataset.itemId);
     const item = new Item(el.closest("[data-content-item]"));

data/app/javascript/content/editor/new_items_controller.js

@@ -1,5 +1,7 @@
 import { Controller } from "@hotwired/stimulus";
 
+import Item from "./item";
+
 const EDGE_AREA = 24;
 
 export default class NewItemsController extends Controller {
@@ -14,6 +16,10 @@ export default class NewItemsController extends Controller {
     delete this.currentItem;
   }
 
+  click(e) {
+    if (e.target.tagName === "DIALOG") this.close(e);
+  }
+
   open(e) {
     e.preventDefault();
     this.dialog.showModal();
@@ -24,8 +30,6 @@ export default class NewItemsController extends Controller {
     this.dialog.close();
   }
 
-  noop(e) {}
-
   /**
    * Add the selected item to the DOM at the current position or the end of the list.
    */
@@ -38,6 +42,7 @@ export default class NewItemsController extends Controller {
 
     if (target) {
       target.insertAdjacentElement("beforebegin", item);
+      new Item(item).depth = new Item(target).depth;
     } else {
       this.list.insertAdjacentElement("beforeend", item);
     }

data/app/models/concerns/katalyst/content/has_tree.rb

@@ -20,9 +20,7 @@ module Katalyst
 
         def add(node)
           if node.depth == depth
-            node.parent = current
-            children << node
-            self
+            add_sibling(node)
           elsif node.depth > depth
             push(children.last)
             add(node)
@@ -32,6 +30,21 @@ module Katalyst
           end
         end
 
+        def add_sibling(node)
+          node.parent = current
+
+          previous = children.last
+
+          children << node
+
+          if previous
+            previous.next_sibling = node
+            node.previous_sibling = previous
+          end
+
+          self
+        end
+
         private
 
         attr_writer :current, :depth, :children

data/app/models/katalyst/content/item.rb

@@ -16,12 +16,12 @@ module Katalyst
 
       validates :heading, presence: true
       validates :heading_style, inclusion: { in: config.heading_styles }
-      validates :background, presence: true, inclusion: { in: config.backgrounds }, if: :validate_background?
+      validates :theme, inclusion: { in: config.themes, allow_blank: true }
 
       after_initialize :initialize_tree
       before_validation :set_defaults
 
-      attr_accessor :parent, :children, :index, :depth
+      attr_accessor :parent, :children, :index, :depth, :previous_sibling, :next_sibling
 
       def self.permitted_params
         %i[
@@ -30,7 +30,7 @@ module Katalyst
           type
           heading
           heading_style
-          background
+          theme
           visible
         ]
       end
@@ -51,6 +51,18 @@ module Katalyst
         is_a? Layout
       end
 
+      def dom_id
+        heading&.parameterize
+      end
+
+      def item_type
+        model_name.param_key
+      end
+
+      def theme
+        super.presence || parent&.theme
+      end
+
       private
 
       def initialize_tree
@@ -61,10 +73,6 @@ module Katalyst
       def set_defaults
         self.heading_style = "none" if heading_style.blank?
       end
-
-      def validate_background?
-        true
-      end
     end
   end
 end

data/app/views/katalyst/content/asides/_aside.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/asides/_aside.html.erb

@@ -1,16 +1,14 @@
-<%= content_item_tag aside do %>
+<%= content_item_tag(aside, data: { aside_reverse: ("" if aside.reverse) }) do %>
   <%= tag.h3 aside.heading, class: aside.heading_style_class if aside.show_heading? %>
 
   <% if aside.children.any? %>
     <% items = aside.children.select(&:visible?) %>
     <% last = items.pop %>
-    <div role="aside-container" <%= "class=reverse" if aside.reverse %>>
-      <div>
-        <%= render_content_items items %>
+    <div class="sidebar">
+      <div class="aside--main">
+        <%= render_content_items(*items, theme: aside.theme, class: "flow") %>
       </div>
-      <aside>
-        <%= render_content_items [last] %>
-      </aside>
+      <%= render_content_items(last, tag: :aside, class: "aside--sidebar", theme: aside.theme) %>
     </div>
   <% end %>
 <% end %>

data/app/views/katalyst/content/columns/_column.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/columns/_column.html.erb

@@ -6,13 +6,13 @@
   <div class="columns-container">
     <div class="column">
       <% if items.any? %>
-        <%= render_content_items items %>
+        <%= render_content_items(*items, theme: column.theme, class: "flow") %>
       <% elsif last %>
-        <%= render_content_items [last] %>
+        <%= render_content_items(last, theme: column.theme) %>
       <% end %>
     </div>
     <div class="column">
-      <%= render_content_items [last] if last && items.any? %>
+      <%= render_content_items(last, theme: column.theme) if last && items.any? %>
     </div>
   </div>
 <% end %>

data/app/views/katalyst/content/contents/_content.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/contents/_content.html.erb

@@ -1,5 +1,5 @@
-<%= content_item_tag content do %>
-  <%= tag.h3 content.heading, class: content.heading_style_class if content.show_heading? %>
+<%= content_item_tag(content, class: "flow") do %>
+  <%= tag.h3(content.heading, class: content.heading_style_class) if content.show_heading? %>
 
   <%= content.content %>
 <% end %>

data/app/views/katalyst/content/figures/_figure.html+form.erb

@@ -18,8 +18,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/figures/_figure.html.erb

@@ -1,4 +1,4 @@
-<%= content_item_tag figure do %>
+<%= content_item_tag(figure, tag: :figure) do %>
   <%= image_tag figure.image, alt: figure.alt %>
   <%= tag.figcaption figure.caption if figure.caption.present? %>
 <% end %>

data/app/views/katalyst/content/groups/_group.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/groups/_group.html.erb

@@ -1,7 +1,5 @@
 <%= content_item_tag group do %>
   <%= tag.h3 group.heading, class: group.heading_style_class if group.show_heading? %>
 
-  <div>
-    <%= render_content_items group.children %>
-  </div>
+  <%= render_content_items(*group.children, theme: group.theme, class: "flow") %>
 <% end %>

data/app/views/katalyst/content/items/_item.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/items/edit.html.erb

@@ -10,17 +10,16 @@
   <dialog class="modal"
           data-content--editor--item-editor-target="dialog"
           data-action="
-            click->content--editor--item-editor#dismiss
+            click->content--editor--item-editor#click
             close->content--editor--item-editor#dismiss
           "
           data-item-id="<%= dom_id(item_editor.item) %>"
           <%= "data-item-persisted" if item_editor.item.persisted? %>>
-    <article class="flow" data-action="click->content--editor--item-editor#noop:stop">
+    <article class="flow">
       <header class="repel" data-nowrap>
         <h2><%= item_editor.title %></h2>
-        <button form="<%= item_editor.id %>"
-                formmethod="dialog"
-                class="button"
+        <button class="button"
+                data-action="content--editor--item-editor#dismiss"
                 data-button-padding="tight"
                 data-text-button>
           <icon aria-hidden="true" class="icon" data-icon="close">&nbsp;</icon>
@@ -31,15 +30,11 @@
         <%= render item_editor %>
       </main>
       <footer class="actions" data-reverse>
-        <button form="<%= item_editor.id %>" class="button" data-close-dialog>
-          Done
-        </button>
+        <button form="<%= item_editor.id %>" class="button" data-close-dialog><%= t(".submit") %></button>
         <button form="<%= item_editor.id %>"
                 formmethod="dialog"
                 class="button"
-                data-ghost-button>
-          Discard
-        </button>
+                data-ghost-button><%= t(".cancel") %></button>
       </footer>
     </article>
   </dialog>

data/app/views/katalyst/content/sections/_section.html+form.erb

@@ -13,8 +13,8 @@
 </div>
 
 <div class="field">
-  <%= form.label :background %>
-  <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
 </div>
 
 <div class="field">

data/app/views/katalyst/content/sections/_section.html.erb

@@ -1,7 +1,5 @@
-<%= content_item_tag section do %>
-  <%= tag.h2 section.heading, class: section.heading_style_class if section.show_heading? %>
+<%= content_item_tag(section, tag: :section, class: "flow") do %>
+  <%= tag.h2(section.heading, class: section.heading_style_class) if section.show_heading? %>
 
-  <div>
-    <%= render_content_items section.children %>
-  </div>
+  <%= render_content_items(*section.children, theme: section.theme, class: "flow") %>
 <% end %>

data/app/views/katalyst/content/tables/_table.html+form.erb

@@ -14,8 +14,8 @@
   </div>
 
   <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
+    <%= form.label :theme %>
+    <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
   </div>
 
   <div class="field">

data/config/locales/en.yml

@@ -12,6 +12,17 @@ en:
           file_size_out_of_range: must be less than %{max_size}
         katalyst/content/table:
           table_missing: Table is missing or invalid
+  katalyst:
+    content:
+      editor:
+        new_items_component:
+          add_item: "Add item"
+          add_item_inline: "Add item here"
+          close: "Close"
+      items:
+        edit:
+          cancel: "Cancel"
+          submit: "Done"
   views:
     katalyst:
       content:

data/db/migrate/20250321045027_rename_background_to_theme.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RenameBackgroundToTheme < ActiveRecord::Migration[8.0]
+  def change
+    rename_column :katalyst_content_items, :background, :theme
+  end
+end

data/lib/katalyst/content/config.rb

@@ -7,7 +7,10 @@ module Katalyst
     class Config
       include ActiveSupport::Configurable
 
-      config_accessor(:backgrounds) { %w[light dark] }
+      config_accessor(:themes) { %w[light dark] }
+      alias_method :backgrounds, :themes
+      alias_method :backgrounds=, :themes=
+
       config_accessor(:heading_styles) { %w[none default] }
       config_accessor(:items) do
         %w[

data/spec/factories/katalyst/content/items.rb

@@ -4,7 +4,7 @@ FactoryBot.define do
   trait :content_item_defaults do
     heading { Faker::Lorem.word }
     heading_style { "default" }
-    background { Katalyst::Content.config.backgrounds.sample }
+    theme { Katalyst::Content.config.themes.sample }
     depth { 0 }
   end
 

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-content
 version: !ruby/object:Gem::Version
-  version: 3.0.0.alpha.1
+  version: 3.0.0.alpha.3
 platform: ruby
 authors:
 - Katalyst Interactive
 bindir: bin
 cert_chain: []
-date: 2025-03-18 00:00:00.000000000 Z
+date: 2025-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activerecord
@@ -93,12 +93,15 @@ files:
 - app/assets/images/katalyst/content/icons/section.svg
 - app/assets/images/katalyst/content/icons/table.svg
 - app/assets/images/katalyst/content/icons/theme.svg
-- app/assets/stylesheets/katalyst/_content.scss
-- app/assets/stylesheets/katalyst/content.css
+- app/assets/stylesheets/katalyst/content/_editor.scss
+- app/assets/stylesheets/katalyst/content/_frontend.scss
 - app/assets/stylesheets/katalyst/content/editor.css
-- app/assets/stylesheets/katalyst/content/icons.css
-- app/assets/stylesheets/katalyst/content/status-bar.css
-- app/assets/stylesheets/katalyst/content/table.css
+- app/assets/stylesheets/katalyst/content/editor/editor.css
+- app/assets/stylesheets/katalyst/content/editor/icons.css
+- app/assets/stylesheets/katalyst/content/editor/status-bar.css
+- app/assets/stylesheets/katalyst/content/editor/table.css
+- app/assets/stylesheets/katalyst/content/frontend.css
+- app/assets/stylesheets/katalyst/content/frontend/frontend.css
 - app/components/katalyst/content/editor/base_component.rb
 - app/components/katalyst/content/editor/errors_component.html.erb
 - app/components/katalyst/content/editor/errors_component.rb
@@ -185,6 +188,7 @@ files:
 - db/migrate/20220926061535_add_fields_for_figure_to_katalyst_content_items.rb
 - db/migrate/20230515151440_change_katalyst_content_items_show_heading_column.rb
 - db/migrate/20240826042004_add_style_to_content_items.rb
+- db/migrate/20250321045027_rename_background_to_theme.rb
 - lib/katalyst/content.rb
 - lib/katalyst/content/config.rb
 - lib/katalyst/content/engine.rb

data/app/assets/stylesheets/katalyst/_content.scss

@@ -1,4 +0,0 @@
-@use "content/editor";
-@use "content/icons";
-@use "content/status-bar";
-@use "content/table";

data/app/assets/stylesheets/katalyst/content.css

@@ -1,4 +0,0 @@
-@import url("content/editor.css");
-@import url("content/icons.css");
-@import url("content/status-bar.css");
-@import url("content/table.css");