katalyst-content 2.8.0 → 3.0.0.alpha.2

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

@@ -1,27 +1,23 @@
-<%= form_with model: column, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, column:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>

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

@@ -1,32 +1,28 @@
-<%= form_with model: content, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, content:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <div class="field">
-    <%= form.label :content %>
-    <%= form.rich_text_area :content, content_editor_rich_text_attributes %>
-  </div>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :content %>
+  <%= form.rich_text_area :content, content_editor_rich_text_attributes %>
+</div>

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

@@ -1,37 +1,33 @@
-<%= form_with model: figure, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, figure:) %>
 
-  <div class="field">
-    <%= form.label :image %>
-    <% if (image = form.object.image).attached? %>
-      <%= image.filename %>
-      <br>
-      <%= form.hidden_field :image, value: form.object.image.signed_id %>
-    <% end %>
-    <%= form.file_field :image %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<div class="field">
+  <%= form.label :image %>
+  <% if (image = form.object.image).attached? %>
+    <%= image.filename %>
+    <br>
+    <%= form.hidden_field :image, value: form.object.image.signed_id %>
+  <% end %>
+  <%= form.file_field :image %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <div class="field">
-    <%= form.label :caption %>
-    <%= form.text_field :caption %>
-  </div>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :caption %>
+  <%= form.text_field :caption %>
+</div>

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

@@ -1,27 +1,23 @@
-<%= form_with model: group, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, group:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>

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/_form.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (model:, scope:, url:, id:) %>
+
+<%= form_with(model:, scope:, url:, id:) do |form| %>
+  <%= render "hidden_fields", form: %>
+  <%= render(model, form:) %>
+<% end %>

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

@@ -1,27 +1,23 @@
-<%= form_with model: item, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, item:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>

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

@@ -3,6 +3,44 @@
   <%= csrf_meta_tags %>
 <% end %>
 
-<%= render Kpop::ModalComponent.new(title: item_editor.title, layout: "side-panel") do %>
-  <%= render item_editor %>
+<%= turbo_frame_tag(
+      "content--editor--item-editor",
+      data: { controller: "content--editor--item-editor" },
+    ) do %>
+  <dialog class="modal"
+          data-content--editor--item-editor-target="dialog"
+          data-action="
+            click->content--editor--item-editor#dismiss
+            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">
+      <header class="repel" data-nowrap>
+        <h2><%= item_editor.title %></h2>
+        <button form="<%= item_editor.id %>"
+                formmethod="dialog"
+                class="button"
+                data-button-padding="tight"
+                data-text-button>
+          <icon aria-hidden="true" class="icon" data-icon="close">&nbsp;</icon>
+          <span class="visually-hidden">Close</span>
+        </button>
+      </header>
+      <main>
+        <%= 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 %>"
+                formmethod="dialog"
+                class="button"
+                data-ghost-button>
+          Discard
+        </button>
+      </footer>
+    </article>
+  </dialog>
 <% end %>

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

@@ -1,3 +1,5 @@
+<%# locals: (item_editor:) %>
+
 <%= turbo_stream.replace item_editor.id do %>
   <%= render item_editor %>
 <% end %>

data/app/views/katalyst/content/items/update.turbo_stream.erb

@@ -1,4 +1,3 @@
-<%= turbo_stream.kpop.dismiss %>
 <%= turbo_stream.replace dom_id(previous) do %>
   <%= render editor.item(item:) %>
 <% end %>

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

@@ -1,27 +1,23 @@
-<%= form_with model: section, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, section:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>

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

@@ -1,7 +1,6 @@
-<%= form_with model: table, scope: :item, url: path, data: {
-      controller: "content--editor--table",
-    } do |form| %>
-  <%= render "hidden_fields", form: %>
+<%# locals: (form:, table:) %>
+
+<div class="flow" data-controller="content--editor--table">
   <%= render "form_errors", form: %>
 
   <div class="field">
@@ -15,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 %>
   </div>
 
   <div class="field">
@@ -40,9 +39,8 @@
     <%= form.text_field :heading_columns, type: :number, data: { action: "input->content--editor--table#update" } %>
   </div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
   <%= form.button "Update",
-                  formaction: table.persisted? ? content_routes.table_path : content_routes.tables_path,
-                  data:       { content__editor__table_target: "update" } %>
-<% end %>
+                  class:      "button",
+                  formaction: table.persisted? ? katalyst_content.table_path : katalyst_content.tables_path,
+                  data:       { ghost_button: "", content__editor__table_target: "update" } %>
+</div>

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/lib/katalyst/content/engine.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "katalyst/html_attributes"
-require "katalyst/kpop"
 require "rails/engine"
 
 module Katalyst

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: 2.8.0
+  version: 3.0.0.alpha.2
 platform: ruby
 authors:
 - Katalyst Interactive
 bindir: bin
 cert_chain: []
-date: 2025-03-03 00:00:00.000000000 Z
+date: 2025-03-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activerecord
@@ -51,20 +51,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: katalyst-kpop
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -92,17 +78,30 @@ files:
 - app/assets/builds/katalyst/content.min.js
 - app/assets/builds/katalyst/content.min.js.map
 - app/assets/config/katalyst-content.js
-- app/assets/stylesheets/katalyst/content/_index.scss
-- app/assets/stylesheets/katalyst/content/editor/_figure.scss
-- app/assets/stylesheets/katalyst/content/editor/_icon.scss
-- app/assets/stylesheets/katalyst/content/editor/_index.scss
-- app/assets/stylesheets/katalyst/content/editor/_item-actions.scss
-- app/assets/stylesheets/katalyst/content/editor/_item-rules.scss
-- app/assets/stylesheets/katalyst/content/editor/_new-items.scss
-- app/assets/stylesheets/katalyst/content/editor/_status-bar.scss
-- app/assets/stylesheets/katalyst/content/editor/_table.scss
-- app/assets/stylesheets/katalyst/content/editor/_trix-rails.scss
-- app/assets/stylesheets/katalyst/content/editor/_variables.scss
+- app/assets/images/katalyst/content/icons/aside.svg
+- app/assets/images/katalyst/content/icons/collapse.svg
+- app/assets/images/katalyst/content/icons/column.svg
+- app/assets/images/katalyst/content/icons/content.svg
+- app/assets/images/katalyst/content/icons/edit.svg
+- app/assets/images/katalyst/content/icons/expand.svg
+- app/assets/images/katalyst/content/icons/figure.svg
+- app/assets/images/katalyst/content/icons/group.svg
+- app/assets/images/katalyst/content/icons/hidden.svg
+- app/assets/images/katalyst/content/icons/indent.svg
+- app/assets/images/katalyst/content/icons/outdent.svg
+- app/assets/images/katalyst/content/icons/remove.svg
+- 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/_editor.scss
+- app/assets/stylesheets/katalyst/content/_frontend.scss
+- app/assets/stylesheets/katalyst/content/editor.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
@@ -132,6 +131,7 @@ files:
 - app/javascript/content/editor/container_controller.js
 - app/javascript/content/editor/item.js
 - app/javascript/content/editor/item_controller.js
+- app/javascript/content/editor/item_editor_controller.js
 - app/javascript/content/editor/list_controller.js
 - app/javascript/content/editor/new_items_controller.js
 - app/javascript/content/editor/rules_engine.js
@@ -167,6 +167,7 @@ files:
 - app/views/katalyst/content/figures/_figure.html.erb
 - app/views/katalyst/content/groups/_group.html+form.erb
 - app/views/katalyst/content/groups/_group.html.erb
+- app/views/katalyst/content/items/_form.html.erb
 - app/views/katalyst/content/items/_form_errors.html.erb
 - app/views/katalyst/content/items/_hidden_fields.html.erb
 - app/views/katalyst/content/items/_item.html+form.erb
@@ -187,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/_index.scss

@@ -1 +0,0 @@
-@use "editor";

data/app/assets/stylesheets/katalyst/content/editor/_figure.scss

@@ -1,12 +0,0 @@
-[data-controller="content--editor--image-field"] {
-  &.droppable {
-    box-shadow: inset 0 0 0 2px var(--icon-passive-color);
-    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 33 31' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.973145' width='32' height='30' rx='4' fill='grey'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.9506 10.5053C24.135 10.5053 25.0951 9.45219 25.0951 8.15306C25.0951 6.85393 24.135 5.80078 22.9506 5.80078C21.7661 5.80078 20.806 6.85393 20.806 8.15306C20.806 9.45219 21.7661 10.5053 22.9506 10.5053ZM17.0148 24.7495H4.74196C3.97371 24.7495 3.49239 23.9192 3.87419 23.2526L12.0384 8.99711C12.4167 8.33644 13.3632 8.32137 13.7579 8.9724C15.0754 11.1453 17.647 15.3946 19.8661 19.1086L22.2245 14.9665C22.5814 14.3397 23.4295 14.3294 23.8331 14.9468L29.1963 23.1506C29.6434 23.8345 29.2201 24.7563 28.4534 24.7645L23.2119 24.8206L17.0148 24.7495Z' fill='%23F3F5F8'/%3E%3C/svg%3E");
-    background-position: center center;
-    background-repeat: no-repeat;
-
-    > * {
-      visibility: hidden;
-    }
-  }
-}