Content v3 integration changes

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    katalyst-content (3.0.0.alpha.5)
+    katalyst-content (3.0.0.alpha.6)
       active_storage_validations
       activerecord
       katalyst-html-attributes

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;
+  }
+}

app/models/katalyst/content/item.rb

@@ -60,7 +60,7 @@ def item_type
       end
 
       def theme
-        super.presence || parent&.theme
+        super.presence || parent&.theme || Config.default_theme
       end
 
       private

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 %>

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>

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 %>

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 %>

katalyst-content.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name    = "katalyst-content"
-  spec.version = "3.0.0.alpha.5"
+  spec.version = "3.0.0.alpha.6"
   spec.authors = ["Katalyst Interactive"]
   spec.email   = ["developers@katalyst.com.au"]
 

lib/katalyst/content/config.rb

@@ -8,6 +8,7 @@ class Config
       include ActiveSupport::Configurable
 
       config_accessor(:themes) { %w[light dark] }
+      config_accessor(:default_theme) { themes.first }
       alias_method :backgrounds, :themes
       alias_method :backgrounds=, :themes=