Add Koi::Content::EditorComponent for easier content editing

katalyst · Dec 5, 2023 · 0860138 · 0860138
1 parent 1a6fcea
commit 0860138
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 119 deletions.
diff --git a/app/assets/stylesheets/koi/themes/_content.scss b/app/assets/stylesheets/koi/themes/_content.scss
@@ -3,3 +3,9 @@
 [data-controller="content--editor--container"] {
   --heading--h4: 1rem;
 }
+
+#content--editor--item-frame {
+  h3 {
+    margin-bottom: 2rem;
+  }
+}
diff --git a/app/assets/stylesheets/koi/themes/_govuk.scss b/app/assets/stylesheets/koi/themes/_govuk.scss
@@ -45,7 +45,7 @@ $govuk-input-border-colour: #{var(--site-text-color)};
 
 // in the context of Koi admin forms, hang the error border in the gutter
 // not a generally applicable style
-.govuk-form-group--error {
+.govuk-form-group--error:not(.govuk-form-group .govuk-form-group--error) {
   position: relative;
   margin-left: -18px;
   padding-left: 13px;

diff --git a/app/components/koi/content/editor_component.html.erb b/app/components/koi/content/editor_component.html.erb
@@ -0,0 +1,11 @@
+<%= form_with model:, scope: :item, url:, builder: do |form| %>
+  <%= form.hidden_field :container_type %>
+  <%= form.hidden_field :container_id %>
+  <%= form.hidden_field :type %>
+
+  <%= content %>
+
+  <%= form.content_background_field %>
+  <%= form.content_visible_field %>
+  <%= form.content_buttons %>
+<% end %>
diff --git a/app/components/koi/content/editor_component.rb b/app/components/koi/content/editor_component.rb
@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Koi
+  module Content
+    class EditorComponent < ViewComponent::Base
+      attr_reader :model, :url, :builder, :form
+
+      def initialize(model:, url:, builder: Koi::FormBuilder)
+        super()
+
+        @model   = model
+        @url     = url
+        @builder = builder
+      end
+
+      def form_with(**options, &block)
+        view_context.form_with(**options) do |form|
+          @form = form
+          form.extend(ContentFormHelper)
+          capture(form, &block)
+        end
+      end
+
+      def content
+        @__vc_content_evaluated = true
+        return @__vc_content if defined?(@__vc_content)
+
+        @__vc_content = view_context.capture(@form, &@__vc_render_in_block)
+      end
+
+      def inspect
+        "#<#{self.class.name} model: #{model.inspect} url: #{url.inspect}>"
+      end
+
+      module ContentFormHelper
+        def content_heading_fieldset
+          govuk_fieldset(legend: { text: "Heading", size: "m" }) do
+            concat(content_heading_field(label: nil))
+            concat(content_heading_style_field)
+          end
+        end
+
+        def content_heading_field(args = {})
+          govuk_text_field :heading,
+                           **{ label: { text: "Heading", size: "s" } }.deep_merge(args)
+        end
+
+        def content_heading_style_field(args = {})
+          govuk_collection_radio_buttons :heading_style,
+                                         Katalyst::Content.config.heading_styles,
+                                         :itself,
+                                         :itself,
+                                         **{ small: true, legend: { text: "Style", size: "s" } }.deep_merge(args)
+        end
+
+        def content_url_field(args = {})
+          govuk_text_field :url,
+                           **{ label: { text: "URL", size: "s" } }.deep_merge(args)
+        end
+
+        def content_http_method_field(methods, args = {})
+          govuk_select :http_method, methods,
+                       **{ label: { text: "HTTP method", size: "s" } }.deep_merge(args)
+        end
+
+        def content_target_field(targets, args = {})
+          govuk_select :target, targets,
+                       **{ label: { text: "HTTP target", size: "s" } }.deep_merge(args)
+        end
+
+        def content_background_field(args = {})
+          govuk_select :background, Katalyst::Content.config.backgrounds,
+                       **{ label: { size: "s" } }.deep_merge(args)
+        end
+
+        def content_visible_field(args = {})
+          govuk_check_box_field :visible,
+                                **{ label: { text: "Visible? ", size: "s" }, small: true }.deep_merge(args)
+        end
+
+        def content_buttons
+          tag.div(class: "actions") do
+            concat(admin_save("Done"))
+            concat(admin_discard)
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/app/views/katalyst/content/asides/_aside.html+form.erb b/app/views/katalyst/content/asides/_aside.html+form.erb
@@ -1,18 +1,3 @@
-<%= form_with model: aside, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
-  <%= form.govuk_fieldset legend: nil do %>
-    <%= form.govuk_text_field :heading %>
-    <%= form.govuk_collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself,
-                                            legend: { text: "Heading style" } %>
-  <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
+<%= render Koi::Content::EditorComponent.new(model: aside, url: path) do |form| %>
+  <%= form.content_heading_fieldset %>
 <% end %>
diff --git a/app/views/katalyst/content/columns/_column.html+form.erb b/app/views/katalyst/content/columns/_column.html+form.erb
@@ -1,18 +1,3 @@
-<%= form_with model: column, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
-  <%= form.govuk_fieldset legend: nil do %>
-    <%= form.govuk_text_field :heading %>
-    <%= form.govuk_collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself,
-                                            legend: { text: "Heading style" } %>
-  <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
+<%= render Koi::Content::EditorComponent.new(model: column, url: path) do |form| %>
+  <%= form.content_heading_fieldset %>
 <% end %>
diff --git a/app/views/katalyst/content/contents/_content.html+form.erb b/app/views/katalyst/content/contents/_content.html+form.erb
@@ -1,20 +1,6 @@
-<%= form_with model: content, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
-  <%= form.govuk_fieldset legend: nil do %>
-    <%= form.govuk_text_field :heading %>
-    <%= form.govuk_collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself,
-                                            legend: { text: "Heading style" } %>
-  <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_rich_text_area :content, **content_editor_rich_text_options(class: "content") %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
+<%= render Koi::Content::EditorComponent.new(model: content, url: path) do |form| %>
+  <%= form.content_heading_fieldset %>
+  <%= form.govuk_rich_text_area :content,
+                                label: { size: "s" },
+                                class: "content" %>
 <% end %>
diff --git a/app/views/katalyst/content/figures/_figure.html+form.erb b/app/views/katalyst/content/figures/_figure.html+form.erb
@@ -1,17 +1,6 @@
-<%= form_with model: figure, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
+<%= render Koi::Content::EditorComponent.new(model: figure, url: path) do |form| %>
   <%= form.govuk_image_field :image do %>
-    <%= form.govuk_text_field :heading, label: { text: "Alternate text" } %>
-    <%= form.govuk_text_field :caption %>
+    <%= form.govuk_text_field :heading, label: { text: "Alternate text", size: "s" } %>
+    <%= form.govuk_text_field :caption, label: { text: "Caption (optional)", size: "s" }, optional: true %>
   <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
 <% end %>
diff --git a/app/views/katalyst/content/groups/_group.html+form.erb b/app/views/katalyst/content/groups/_group.html+form.erb
@@ -1,18 +1,3 @@
-<%= form_with model: group, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
-  <%= form.govuk_fieldset legend: nil do %>
-    <%= form.govuk_text_field :heading %>
-    <%= form.govuk_collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself,
-                                            legend: { text: "Heading style" } %>
-  <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
+<%= render Koi::Content::EditorComponent.new(model: group, url: path) do |form| %>
+  <%= form.content_heading_fieldset %>
 <% end %>
diff --git a/app/views/katalyst/content/items/_item.html+form.erb b/app/views/katalyst/content/items/_item.html+form.erb
@@ -1,18 +1,3 @@
-<%= form_with model: item, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
-  <%= form.govuk_fieldset legend: nil do %>
-    <%= form.govuk_text_field :heading %>
-    <%= form.govuk_collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself,
-                                            legend: { text: "Heading style" } %>
-  <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
+<%= render Koi::Content::EditorComponent.new(model: item, url: path) do |form| %>
+  <%= form.content_heading_fieldset %>
 <% end %>
diff --git a/app/views/katalyst/content/sections/_section.html+form.erb b/app/views/katalyst/content/sections/_section.html+form.erb
@@ -1,18 +1,3 @@
-<%= form_with model: section, scope: :item, url: path, builder: Koi::FormBuilder do |form| %>
-  <%= render "hidden_fields", form: %>
-
-  <%= form.govuk_fieldset legend: nil do %>
-    <%= form.govuk_text_field :heading %>
-    <%= form.govuk_collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself,
-                                            legend: { text: "Heading style" } %>
-  <% end %>
-
-  <%= form.govuk_select :background, Katalyst::Content.config.backgrounds %>
-
-  <%= form.govuk_check_box_field :visible, small: true, label: { text: "Visible?" } %>
-
-  <div class="actions">
-    <%= form.admin_save "Done" %>
-    <%= form.admin_discard %>
-  </div>
+<%= render Koi::Content::EditorComponent.new(model: section, url: path) do |form| %>
+  <%= form.content_heading_fieldset %>
 <% end %>