okonomi_ui_kit 0.1.13 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: adca3d7c87bf516fc8f0e4d46eaab53f413939422d69d764333c4567c4cb851c
-  data.tar.gz: 229d5bad01930a081e3ed1350ef7c4aff21f00c00aa30603f0e63f6dc062d324
+  metadata.gz: 56ed44988417d6630c5a19c81f9b5ebe5a5f746bc50bceaf367bfae211ccf2c5
+  data.tar.gz: 13dccf96cf57029453d93fed7be5caf5c24e3433d0c0533e29121c0e6afbc6a7
 SHA512:
-  metadata.gz: 66ad9faf08d8102a80cd968b8866dc7969d8e96698ba34a1498cabaadac92cd8cf04e0e1720574bd199d2b45a73c664737ad1e834499a5cd9edd28cb7314ca00
-  data.tar.gz: 6877453a2cc1440568b5aa85e34b47597dfbeca1a1de7ba01b121ea79a500bcabb24d99aae9499bfaecc4e8e279cb6e4c53c424ef09d2b3d16ba333e85b18175
+  metadata.gz: ca51c73c4400d20071e4b68e4a65b6578e8cbf2f750f107e9d982d490aab21b1d717c84220784462c0225ec34c5935fcd75ec3991a1b2a06b05a1bc7d6f2b6d3
+  data.tar.gz: 5d1f047793d156fb8d71ebb9898bb567692550432e25eaac7bfa6affa8d28aec5269d3e8f2f73c5c3b2ca29dc62f80878756a539943dc1d93892d71e3c776426

data/app/assets/builds/okonomi_ui_kit/application.tailwind.css

@@ -1501,6 +1501,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }

data/app/helpers/okonomi_ui_kit/component.rb

@@ -14,6 +14,13 @@ module OkonomiUiKit
       self.class.name.demodulize.underscore
     end
 
+    def variant_style(*args)
+      tw_merge(
+        styles.dig(*args[1..-1]),
+        styles.dig(*args)
+      )
+    end
+
     def style(*args)
       styles.dig(*args)
     end

data/app/helpers/okonomi_ui_kit/components/page.rb

@@ -16,7 +16,7 @@ module OkonomiUiKit
 
       register_styles :default do
         {
-          root: "flex flex-col gap-8 p-8"
+          root: "flex flex-col"
         }
       end
     end
@@ -34,9 +34,15 @@ module OkonomiUiKit
         @content_parts << @template.ui.page_header(options, &block)
         nil
       end
+      alias header page_header
+
+      def body(**options, &block)
+        @content_parts << @template.ui.page_body(options, &block)
+        nil
+      end
 
       def section(**options, &block)
-        @content_parts << @template.ui.page_section(options, &block)
+        @content_parts << @template.ui.segment(options, &block)
         nil
       end
 

data/app/helpers/okonomi_ui_kit/components/page_body.rb

@@ -0,0 +1,15 @@
+module OkonomiUiKit
+  module Components
+    class PageBody < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        view.render(template_path, component: self, options:, &block)
+      end
+
+      register_styles :default do
+        {
+          root: "overflow-auto-y p-4"
+        }
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/page_header.rb

@@ -16,7 +16,7 @@ module OkonomiUiKit
 
       register_styles :default do
         {
-          root: "flex flex-col gap-2",
+          root: "flex flex-col gap-2 p-4",
           row: "flex w-full justify-between items-center",
           actions: "mt-4 flex md:ml-4 md:mt-0 gap-2"
         }

data/app/helpers/okonomi_ui_kit/components/{page_section.rb → segment.rb}

@@ -1,19 +1,15 @@
 module OkonomiUiKit
   module Components
-    class PageSection < OkonomiUiKit::Component
+    class Segment < OkonomiUiKit::Component
       def render(options = {}, &block)
         options = options.with_indifferent_access
         title = options.delete(:title)
+        variant = options.delete(:variant) || :default
 
-        classes = tw_merge(
-          style(:root),
-          options.delete(:class)
-        )
-
-        builder = SectionBuilder.new(view, self)
+        builder = SectionBuilder.new(view, self, variant)
         builder.title(title) if title
 
-        view.render(template_path, builder: builder, options: options.merge(class: classes), &block)
+        view.render(template_path, builder: builder, component: self, variant: variant, &block)
       end
 
       register_styles :default do
@@ -24,10 +20,11 @@ module OkonomiUiKit
           title: "text-base/7 font-semibold text-gray-900",
           subtitle: "mt-1 max-w-2xl text-sm/6 text-gray-500",
           actions: "mt-4 flex md:ml-4 md:mt-0",
-          attribute_list: "divide-y divide-gray-100",
-          attribute_row: "py-6 sm:grid sm:grid-cols-3 sm:gap-4",
-          attribute_label: "text-sm font-medium text-gray-900",
-          attribute_value: "mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0"
+          variants: {
+            default: {
+              body: "px-4 py-5 sm:px-6"
+            }
+          }
         }
       end
     end
@@ -36,7 +33,9 @@ module OkonomiUiKit
       include ActionView::Helpers::TagHelper
       include ActionView::Helpers::CaptureHelper
 
-      def initialize(template, component)
+      attr_reader :view, :component, :variant
+
+      def initialize(template, component, variant = :default)
         @template = template
         @component = component
         @title_content = nil
@@ -44,18 +43,19 @@ module OkonomiUiKit
         @actions_content = nil
         @body_content = nil
         @attributes = []
+        @variant = variant
       end
 
       def title(text, **options)
-        @title_content = tag.h3(text, class: @component.style(:title))
+        @title_content = tag.h3(text, class: @component.variant_style(variant, :title))
       end
 
       def subtitle(text, **options)
-        @subtitle_content = tag.p(text, class: @component.style(:subtitle))
+        @subtitle_content = tag.p(text, class: @component.variant_style(variant, :subtitle))
       end
 
       def actions(&block)
-        @actions_content = tag.div(class: @component.style(:actions)) do
+        @actions_content = tag.div(class: @component.variant_style(variant, :actions)) do
           capture(&block) if block_given?
         end
       end
@@ -65,47 +65,18 @@ module OkonomiUiKit
           # Capture the content first to see if attributes were used
           content = capture { yield(self) }
 
-          @body_content = if @attributes.any?
-            # If attributes were added, wrap them in dl
-            tag.div do
-              tag.dl(class: @component.style(:attribute_list)) do
-                @template.safe_join(@attributes)
-              end
-            end
-          else
-            # Otherwise, just return the captured content
-            tag.div do
-              content
-            end
+          @body_content = tag.div class: @component.variant_style(variant, :body) do
+            content
           end
         end
       end
 
-      def attribute(label, value = nil, **options, &block)
-        content = if block_given?
-          capture(&block)
-        elsif value.respond_to?(:call)
-          value.call
-        else
-          value
-        end
-
-        attribute_html = tag.div(class: @component.style(:attribute_row)) do
-          dt_content = tag.dt(label, class: @component.style(:attribute_label))
-          dd_content = tag.dd(content, class: @component.style(:attribute_value))
-
-          dt_content + dd_content
-        end
-
-        @attributes << attribute_html
-      end
-
       def render_header
         return nil unless @title_content || @subtitle_content || @actions_content
 
-        tag.div(class: @component.style(:header)) do
+        tag.div(class: @component.variant_style(variant, :header)) do
           if @actions_content
-            tag.div(class: @component.style(:header_with_actions)) do
+            tag.div(class: @component.variant_style(variant, :header_with_actions)) do
               title_section = tag.div do
                 content_parts = []
                 content_parts << @title_content if @title_content

data/app/views/okonomi/components/page_body/_page_body.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag "div", class: component.style(:root) do %>
+  <%= yield %>
+<% end %>

data/app/views/okonomi/components/segment/_segment.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag :div, class: component.variant_style(variant, :root) do %>
+  <% yield(builder) if block_given? %>
+  <%= builder.render_content %>
+<% end %>

data/lib/okonomi_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module OkonomiUiKit
-  VERSION = "0.1.13"
+  VERSION = "0.1.15"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.13
+  version: 0.1.15
 platform: ruby
 authors:
 - Okonomi GmbH
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-07 00:00:00.000000000 Z
+date: 2025-08-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1395,9 +1395,10 @@ files:
 - app/helpers/okonomi_ui_kit/components/link_to.rb
 - app/helpers/okonomi_ui_kit/components/navigation.rb
 - app/helpers/okonomi_ui_kit/components/page.rb
+- app/helpers/okonomi_ui_kit/components/page_body.rb
 - app/helpers/okonomi_ui_kit/components/page_header.rb
-- app/helpers/okonomi_ui_kit/components/page_section.rb
 - app/helpers/okonomi_ui_kit/components/progress_bar.rb
+- app/helpers/okonomi_ui_kit/components/segment.rb
 - app/helpers/okonomi_ui_kit/components/table.rb
 - app/helpers/okonomi_ui_kit/components/typography.rb
 - app/helpers/okonomi_ui_kit/config.rb
@@ -1433,9 +1434,10 @@ files:
 - app/views/okonomi/components/navigation/_link.html.erb
 - app/views/okonomi/components/navigation/_navigation.html.erb
 - app/views/okonomi/components/page/_page.html.erb
+- app/views/okonomi/components/page_body/_page_body.html.erb
 - app/views/okonomi/components/page_header/_page_header.html.erb
-- app/views/okonomi/components/page_section/_page_section.html.erb
 - app/views/okonomi/components/progress_bar/_progress_bar.html.erb
+- app/views/okonomi/components/segment/_segment.html.erb
 - app/views/okonomi/components/table/_table.html.erb
 - app/views/okonomi/components/typography/_typography.html.erb
 - app/views/okonomi/forms/tailwind/_checkbox_label.html.erb

data/app/views/okonomi/components/page_section/_page_section.html.erb

@@ -1,4 +0,0 @@
-<div class="<%= options[:class] %>">
-  <% yield(builder) if block_given? %>
-  <%= builder.render_content %>
-</div>