coveragebook_components 0.8.8 → 0.8.9

data/app/components/coco/base/modal/modal.css

@@ -73,4 +73,16 @@
   .modal-frame {
     @apply contents;
   }
+
+  /*
+    Limit the size of modal content when rendered in the
+    host page rather than displayed as a modal.
+   */
+  [data-role="inline-modal-content"] {
+    @apply max-w-2xl mx-auto;
+
+    [data-component="modal-dialog"] {
+      @apply border border-gray-300 shadow-md rounded-xl;
+    }
+  }
 }

data/app/components/coco/base/modal/modal.html.erb

@@ -22,5 +22,15 @@
     <%= render_flash_messages %>
   <% end %>
 <% else %>
-  <%= content %>
+  <div data-role="inline-modal-content">
+    <% if container_type == :dialog %>
+      <%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= coco_panel do %>
+        <%= content %>
+      <% end %>
+    <% end %>
+  </div>
 <% end %>

data/app/components/coco/base/modal/modal.rb

@@ -11,10 +11,12 @@ module Coco
     renders_one :container, types: {
       dialog: ->(**kwargs, &block) do
         @container_content = block
+        @container_type = :dialog
         Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
       end,
 
       lightbox: ->(**kwargs, &block) do
+        @container_type = :lightbox
         Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
       end
     }
@@ -25,11 +27,12 @@ module Coco
       end
     end
 
-    attr_reader :name, :show
+    attr_reader :name, :show, :container_type
 
     def initialize(name:, show: false, **kwargs)
       @name = name
       @show = show
+      @container_type = nil
       title { kwargs[:title] } if kwargs[:title]
     end
 

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -1,7 +1,11 @@
 @layer components {
   [data-coco][data-component="modal-dialog"] {
-    @apply shadow-2xl rounded-xl w-full;
-    @apply max-w-2xl; /* temp until sizes added */
+    @apply rounded-xl w-full;
+
+    .modal-frame & {
+      @apply shadow-2xl;
+      @apply max-w-2xl; /* temp until sizes added */
+    }
 
     .modal-dialog-header {
       @apply relative flex items-center;

data/app/components/coco/base/panel/panel.css

@@ -0,0 +1,19 @@
+@layer components {
+  [data-coco][data-component="panel"] {
+    @apply contents;
+
+    .panel-content {
+      @apply contents;
+    }
+
+    /* Only style Coco panels that are not rendered inside legacy panel components */
+    &:not([data-component="panel"] [data-component="panel"]) {
+      @apply block bg-content-light-1 border border-gray-300 shadow-md rounded-xl;
+
+      .panel-content {
+        @apply block;
+        padding: max(min(5%, 2rem), 1rem);
+      }
+    }
+  }
+}

data/app/components/coco/base/panel/panel.html.erb

@@ -0,0 +1,5 @@
+<%= render component_tag do %>
+  <div class="panel-content">
+    <%= content %>
+  </div>
+<% end %>

data/app/components/coco/base/panel/panel.rb

@@ -0,0 +1,4 @@
+module Coco
+  class Panel < Coco::Component
+  end
+end

data/app/helpers/coco/app_helper.rb

@@ -84,6 +84,10 @@ module Coco
       render Coco::App::Elements::SystemBanner.new(**), &block
     end
 
+    def coco_panel(**, &block)
+      render Coco::Panel.new(**), &block
+    end
+
     def coco_form_with(**, &block)
       form_with(**, builder: Coco::AppFormBuilder, &block)
     end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.8.8"
+  VERSION = "0.8.9"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.8
+  version: 0.8.9
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-15 00:00:00.000000000 Z
+date: 2023-11-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -74,8 +74,12 @@ extensions: []
 extra_rdoc_files: []
 files:
 - app/assets/build/coco/app.css
+- app/assets/build/coco/app.dev.css
+- app/assets/build/coco/app.dev.js
 - app/assets/build/coco/app.js
 - app/assets/build/coco/book.css
+- app/assets/build/coco/book.dev.css
+- app/assets/build/coco/book.dev.js
 - app/assets/build/coco/book.js
 - app/assets/build/coco/icons/accessibility.svg
 - app/assets/build/coco/icons/activity-square.svg
@@ -1653,6 +1657,9 @@ files:
 - app/components/coco/base/pager_link/pager_link.css
 - app/components/coco/base/pager_link/pager_link.html.erb
 - app/components/coco/base/pager_link/pager_link.rb
+- app/components/coco/base/panel/panel.css
+- app/components/coco/base/panel/panel.html.erb
+- app/components/coco/base/panel/panel.rb
 - app/components/coco/base/placeholder/placeholder.css
 - app/components/coco/base/placeholder/placeholder.html.erb
 - app/components/coco/base/placeholder/placeholder.rb