katalyst-content 3.0.0.alpha.5 → 3.0.0.alpha.7

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

@@ -1,19 +1,46 @@
 /* Spacing */
 
-.content-item {
-  --flow-space: var(--space-m);
-  margin-block: var(--block-space, var(--space-m));
+:root {
+  /*
+    The container width at which the component switches between a horizontal and vertical layout.
+  */
+  --content-gap: var(--space-l);
+  --content-gutter: var(--space-m);
+  --content-block-gutter: var(--content-gutter);
+  --content-block-gap: var(--content-gap);
+  --content-inline-gutter: var(--content-gutter);
+  --content-inline-gap: var(--content-gap);
 }
 
-/* Themes */
+.content-items {
+  /* gutters where the theme changes */
 
-[data-content-theme] {
-  display: flow-root;
+  &[data-content-theme] {
+    padding-block: var(--content-block-gutter);
+  }
+
+  /* gaps between items with the same theme */
+
+  > * + * {
+    margin-block-start: var(--content-block-gap);
+  }
+
+  /* add gutters to non themed siblings */
+
+  &[data-content-theme] + .content-items:not([data-content-theme]),
+  .content-items:not([data-content-theme]) + &[data-content-theme] {
+    margin-block-start: var(--content-block-gutter);
+  }
 }
 
-[data-content-theme] [data-content-theme] {
-  margin-inline: calc(-1 * var(--gutter));
-  padding-inline: var(--gutter);
+/*
+ If a content item has children with a theme applied, we want to steal some space
+ from the item to give to the children for a gutter. This makes content line up
+ between items with and without a theme.
+ */
+.content-item [data-content-theme] {
+  margin-inline: calc(-1 * var(--content-inline-gutter));
+  padding-inline: var(--content-inline-gutter);
 }
 
 [data-content-theme="light"] {
@@ -44,3 +71,54 @@
     margin-inline: auto;
   }
 }
+
+/*
+  Columns
+
+  A two-column horizontal layout that switches to vertical layout on narrow screens.
+  Based on https://every-layout.dev/layouts/switcher/
+*/
+
+:root {
+  /*
+    The container width at which the component switches between a horizontal and vertical layout.
+  */
+  --content-column-threshold-width: var(--mobile-breakpoint, 37.5rem);
+}
+
+.content-columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--content-inline-gap) calc(2 * var(--content-inline-gap));
+
+  > * {
+    flex-grow: 1;
+    flex-basis: calc((var(--content-column-threshold-width) - 100%) * 999);
+  }
+}
+
+.content-column {
+  display: grid; /* equal height columns */
+}
+
+.content-aside {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--content-inline-gap) calc(2 * var(--content-inline-gap));
+  align-items: start;
+
+  > :last-child {
+    flex-basis: max(var(--content-aside-min-width, 16rem), 33%);
+    flex-grow: 1;
+  }
+
+  > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: 55%;
+  }
+
+  &[data-wrap-reverse] {
+    flex-wrap: wrap-reverse;
+  }
+}

data/app/controllers/katalyst/content/items_controller.rb

@@ -9,6 +9,8 @@ module Katalyst
 
       attr_reader :container, :item, :editor
 
+      default_form_builder "Katalyst::Content::EditorHelper::FormBuilder"
+
       helper EditorHelper
 
       def new
@@ -87,17 +89,6 @@ module Katalyst
       # This mimics the behaviour of direct uploads without requiring the JS
       # integration.
       #
-      # Note: this idea comes from various blogs who have documented this approach, such as
-      # https://medium.com/@TETRA2000/active-storage-how-to-retain-uploaded-files-on-form-resubmission-91b57be78d53
-      #
-      # In Rails 7.2 the simple version of this approach was broken to work around a bug that Rails plans to address
-      # in a future release.
-      # https://github.com/rails/rails/commit/82d4ad5da336a18a55a05a50b851e220032369a0
-      #
-      # The work around is to decouple the blobs from their attachments before saving by duping
-      # them. This approach feels a bit hairy and might need to be replaced by a 'standard' direct upload approach
-      # in the future.
-      #
       # The reason we use this approach currently is to avoid needing a separate direct upload controller for
       # content which would potentially introduce a back door where un-trusted users are allowed to upload
       # attachments.
@@ -106,12 +97,10 @@ module Katalyst
           case change
           when ActiveStorage::Attached::Changes::CreateOne
             change.upload
-            change.attachment.blob = change.blob.dup.tap(&:save!)
+            change.blob.save!
           when ActiveStorage::Attached::Changes::CreateMany
             change.upload
-            change.attachments.zip(change.blobs).each do |attachment, blob|
-              attachment.blob = blob.dup.tap(&:save!)
-            end
+            change.blobs.each(&:save!)
           end
         end
       end
@@ -120,10 +109,6 @@ module Katalyst
       def prefix_partial_path_with_controller_namespace
         false
       end
-
-      def kpop_fallback_location
-        main_app.root_path
-      end
     end
   end
 end

data/app/helpers/katalyst/content/editor_helper.rb

@@ -16,6 +16,50 @@ module Katalyst
           },
         }.merge_html(attributes)
       end
+
+      module Builder
+        def content_heading_fieldset(legend: { text: "Heading" })
+          govuk_fieldset(legend:) do
+            concat(content_heading_field(label: { text: "Heading", class: "govuk-visually-hidden" }))
+            concat(content_heading_style_field)
+          end
+        end
+
+        def content_heading_field(label: { text: "Heading" }, **)
+          govuk_text_field(:heading, label:, **)
+        end
+
+        def content_heading_style_field(legend: { text: "Style" }, **)
+          govuk_enum_radio_buttons(:heading_style, legend:, **)
+        end
+
+        def content_url_field(label: { text: "URL" }, **)
+          govuk_text_field(:url, label:, **)
+        end
+
+        def content_http_method_field(label: { text: "HTTP method" }, **)
+          govuk_enum_select(:http_method, label:, **)
+        end
+
+        def content_target_field(label: { text: "HTTP target" }, **)
+          govuk_enum_select(:target, label:, **)
+        end
+
+        def content_theme_field(options: { include_blank: true }, **)
+          govuk_enum_select(:theme, options:, **)
+        end
+
+        def content_visible_field(label: { text: "Visible?" }, **)
+          govuk_check_box_field(:visible, label:, **)
+        end
+      end
+
+      class FormBuilder < ActionView::Helpers::FormBuilder
+        include GOVUKDesignSystemFormBuilder::Builder
+        include Builder
+
+        delegate_missing_to :@template
+      end
     end
   end
 end

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

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus";
 
 const EDITOR = `
-<div class="content--editor--table-editor"
+<div class="content--editor--table-content"
    contenteditable="true"
    data-content--editor--table-target="content"
    data-action="paste->content--editor--table#paste"

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

@@ -42,6 +42,12 @@ module Katalyst
             node.previous_sibling = previous
           end
 
+          # If the node does not have an explicit theme set already then set a
+          # rendering theme from context.
+          if node.theme.blank?
+            node.theme = current ? current.theme : Content.config.default_theme
+          end
+
           self
         end
 

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

@@ -11,6 +11,7 @@ module Katalyst
       end
 
       enum :heading_style, config.heading_styles, prefix: :heading
+      enum :theme, config.themes.index_with(&:itself), prefix: :theme
 
       belongs_to :container, polymorphic: true
 
@@ -59,10 +60,6 @@ module Katalyst
         model_name.param_key
       end
 
-      def theme
-        super.presence || parent&.theme
-      end
-
       private
 
       def initialize_tree

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

@@ -1,28 +1,6 @@
 <%# locals: (form:, aside:) %>
 
-<%= render "form_errors", form: %>
-
-<div class="field">
-  <%= form.label :heading %>
-  <%= form.text_field :heading %>
-</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 :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
-
-<div class="field">
-  <%= form.label :reverse %>
-  <%= form.check_box :reverse %>
-</div>
+<%= form.content_heading_fieldset %>
+<%= form.govuk_check_box_field(:reverse, label: { text: "Show aside before content on mobile" }) %>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

@@ -1,14 +1,16 @@
-<%= content_item_tag(aside, data: { aside_reverse: ("" if aside.reverse) }) do %>
+<%= content_item_tag(aside, class: "flow") 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 class="sidebar">
-      <div class="aside--main">
-        <%= render_content_items(*items, theme: aside.theme, class: "flow") %>
+    <%= tag.div(class: "content-aside", data: { wrap_reverse: ("" if aside.reverse) }) do %>
+      <div>
+        <%= render_content_items(*items, theme: aside.theme) %>
       </div>
-      <%= render_content_items(last, tag: :aside, class: "aside--sidebar", theme: aside.theme) %>
-    </div>
+      <div>
+        <%= render_content_items(last, tag: :aside, theme: aside.theme) %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -1,23 +1,5 @@
 <%# locals: (form:, column:) %>
 
-<%= render "form_errors", form: %>
-
-<div class="field">
-  <%= form.label :heading %>
-  <%= form.text_field :heading %>
-</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 :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
+<%= form.content_heading_fieldset %>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

@@ -1,17 +1,17 @@
-<%= content_item_tag column do %>
+<%= content_item_tag(column, class: "flow") do %>
   <%= tag.h3 column.heading, class: column.heading_style_class if column.show_heading? %>
 
   <% items = column.children.select(&:visible?) %>
   <% last = items.pop %>
-  <div class="columns-container">
-    <div class="column">
+  <div class="content-columns">
+    <div class="content-column">
       <% if items.any? %>
-        <%= render_content_items(*items, theme: column.theme, class: "flow") %>
+        <%= render_content_items(*items, theme: column.theme) %>
       <% elsif last %>
         <%= render_content_items(last, theme: column.theme) %>
       <% end %>
     </div>
-    <div class="column">
+    <div class="content-column">
       <%= render_content_items(last, theme: column.theme) if last && items.any? %>
     </div>
   </div>

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

@@ -1,28 +1,6 @@
 <%# locals: (form:, content:) %>
 
-<%= render "form_errors", form: %>
-
-<div class="field">
-  <%= form.label :heading %>
-  <%= form.text_field :heading %>
-</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 :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
-
-<div class="field">
-  <%= form.label :content %>
-  <%= form.rich_text_area :content, content_editor_rich_text_attributes %>
-</div>
+<%= form.content_heading_fieldset %>
+<%= form.govuk_rich_text_area(:content) %>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

@@ -1,33 +1,9 @@
 <%# locals: (form:, figure:) %>
 
-<%= render "form_errors", form: %>
+<%= form.govuk_image_field(:image) do %>
+  <%= form.govuk_text_field(:heading, label: { text: "Alternate text" }) %>
+  <%= form.govuk_text_field(:caption, label: { text: "Caption (optional)" }, optional: true) %>
+<% end %>
 
-<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 :heading %>
-  <%= form.text_field :heading %>
-</div>
-
-<div class="field">
-  <%= form.label :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
-
-<div class="field">
-  <%= form.label :caption %>
-  <%= form.text_field :caption %>
-</div>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

@@ -1,23 +1,5 @@
 <%# locals: (form:, group:) %>
 
-<%= render "form_errors", form: %>
-
-<div class="field">
-  <%= form.label :heading %>
-  <%= form.text_field :heading %>
-</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 :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
+<%= form.content_heading_fieldset %>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

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

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

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

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

@@ -1,5 +1,3 @@
-<%= tag.ul class: "errors" do %>
-  <% form.object.errors.full_messages.each do |error| %>
-    <li class="error"><%= error %></li>
-  <% end %>
-<% end if form.object.errors.any? %>
+<%# locals: (form:) %>
+
+<%= form.govuk_error_summary %>

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

@@ -1,3 +1,5 @@
+<%# locals: (form:) %>
+
 <%= form.hidden_field :container_type %>
 <%= form.hidden_field :container_id %>
 <%= form.hidden_field :type %>

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

@@ -1,23 +1,5 @@
 <%# locals: (form:, item:) %>
 
-<%= render "form_errors", form: %>
-
-<div class="field">
-  <%= form.label :heading %>
-  <%= form.text_field :heading %>
-</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 :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
+<%= form.content_heading_fieldset %>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

@@ -1,23 +1,5 @@
 <%# locals: (form:, section:) %>
 
-<%= render "form_errors", form: %>
-
-<div class="field">
-  <%= form.label :heading %>
-  <%= form.text_field :heading %>
-</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 :theme %>
-  <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-</div>
-
-<div class="field">
-  <%= form.label :visible %>
-  <%= form.check_box :visible %>
-</div>
+<%= form.content_heading_fieldset %>
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

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

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

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

@@ -1,46 +1,39 @@
 <%# locals: (form:, table:) %>
 
-<div class="flow" data-controller="content--editor--table">
-  <%= render "form_errors", form: %>
+<div class="content--editor--table-editor | flow" data-controller="content--editor--table">
+  <%= form.content_heading_fieldset %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+  <% content = sanitize_content_table(normalize_content_table(form.object, heading: false)) %>
+  <%= form.govuk_text_area(:content,
+                           value: content,
+                           class: "table-input",
+                           data:  { content__editor__table_target: "input" }) %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+  <%# hidden button to receive <Enter> events (HTML-default is to click first button in form) %>
+  <%= form.button("Save", hidden: "") %>
 
-  <div class="field">
-    <%= form.label :theme %>
-    <%= form.select :theme, Katalyst::Content.config.themes, include_blank: true %>
-  </div>
-
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
-
-  <div class="field">
-    <%= form.label :content %>
-    <% content = sanitize_content_table(normalize_content_table(form.object, heading: false)) %>
-    <%= form.hidden_field :content, value: content, data: { content__editor__table_target: "input" } %>
-  </div>
-
-  <div class="field">
-    <%= form.label :heading_rows %>
-    <%= form.text_field :heading_rows, type: :number, data: { action: "input->content--editor--table#update" } %>
-  </div>
-
-  <div class="field">
-    <%= form.label :heading_columns %>
-    <%= form.text_field :heading_columns, type: :number, data: { action: "input->content--editor--table#update" } %>
-  </div>
-
-  <%= form.button "Update",
-                  class:      "button",
+  <%# hidden button to submit the table for re-rendering %>
+  <%= form.button("Update",
+                  hidden:     "",
                   formaction: table.persisted? ? katalyst_content.table_path : katalyst_content.tables_path,
-                  data:       { ghost_button: "", content__editor__table_target: "update" } %>
+                  data:       { content__editor__table_target: "update" }) %>
+
+  <%= form.govuk_number_field(:heading_rows,
+                              label:       { text: "Heading rows" },
+                              width:       2,
+                              placeholder: 0,
+                              min:         0,
+                              data:        { content__editor__table_target: "headerRows",
+                                             action:                        "input->content--editor--table#update" }) %>
+
+  <%= form.govuk_number_field(:heading_columns,
+                              label:       { text: "Heading columns" },
+                              width:       2,
+                              placeholder: 0,
+                              min:         0,
+                              data:        { content__editor__table_target: "headerColumns",
+                                             action:                        "input->content--editor--table#update" }) %>
 </div>
+
+<%= form.content_theme_field %>
+<%= form.content_visible_field %>

data/db/migrate/20230515151440_change_katalyst_content_items_show_heading_column.rb

@@ -4,7 +4,9 @@ class ChangeKatalystContentItemsShowHeadingColumn < ActiveRecord::Migration[7.0]
   # rubocop:disable Rails/SkipsModelValidations
   def up
     add_column :katalyst_content_items, :heading_style, :integer, null: false, default: 0
-    Katalyst::Content::Item.where(show_heading: true).update_all(heading_style: 1)
+    ActiveRecord::Base.connection.execute(<<~SQL)
+      UPDATE katalyst_content_items SET heading_style = 1 WHERE show_heading = true;
+    SQL
     remove_column :katalyst_content_items, :show_heading, :boolean
   end
   # rubocop:enable Rails/SkipsModelValidations

data/db/migrate/20250619122652_remove_not_null_on_katalyst_content_items_theme.rb

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