coveragebook_components 0.17.2 → 0.17.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2af0604e33ee8ea690a93abf997f126ecaeb23528b3bf682fadc79eed353df2
-  data.tar.gz: 6d055a247adaa8f2a794d3a6864d38a23fd2059d0c01d08ea183e751c06c440c
+  metadata.gz: 1fc0953881f78a258a61ca7b0f24ea84133a1f63046af384ea9d081cbc2db6d8
+  data.tar.gz: dfc32ff156d2b19aa5271e42a44c540e0337a9c1b0674d470e88e8b4c4e74845
 SHA512:
-  metadata.gz: eb41e2bfb905a693fb9a9ac36019d09699001552fa9f6aa2ce0df0b7f8281ebcc159f15cf41a58c059e1f83fe6907c085265cddee43dc893d8d475e34b146092
-  data.tar.gz: 9c229a0bf2926994c7bf5699485365d74956e3fc23cb0df41842b11ca5e27df24f3603c9339a86771316acdf94b185e83250f9e2b5c651771f0fcb130c0f7f24
+  metadata.gz: e4730eeebb41cd89b8bd77645fc50779339b83c3157bab022990d3bfcfcfae2a21b217d7f6d03f011830a6491623f5cfd8fe2529d4acf4625d878551ecf0a061
+  data.tar.gz: 3c0929b433a8eab7860b52107965f3cb7f5b481603e6d903cec8c2bf0554e2ee32f26cd0ac695a8074fceb6037682b413b89ab90957c8f28b2756e6be9785062

data/app/assets/build/coco/coco.css

@@ -4549,56 +4549,72 @@ select{
 
 [data-coco][data-component="modal-dialog"]{
   width: 100%;
-  border-radius: 0.75rem
+  border-radius: 2rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
 
 .modal-frame [data-coco][data-component="modal-dialog"]{
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-width: 42rem /* temp until sizes added */
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+.modal-frame [data-coco][data-component="modal-dialog"][data-size="sm"] {
+        max-width: 480px;
+      }
+
+.modal-frame [data-coco][data-component="modal-dialog"][data-size="md"] {
+        max-width: 520px;
+      }
+
+.modal-frame [data-coco][data-component="modal-dialog"][data-size="lg"] {
+        max-width: 640px;
+      }
+
 [data-coco][data-component="modal-dialog"] .modal-dialog-header{
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 3.5rem;
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 0.75rem;
-  border-bottom-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  border-top-left-radius: 2rem;
+  border-top-right-radius: 2rem;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-left: 1rem;
-  padding-right: 1rem
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem
 }
 
 @media (min-width: 576px){
 
   [data-coco][data-component="modal-dialog"] .modal-dialog-header{
-    height: 4rem;
-    padding-left: 2rem;
-    padding-right: 2rem
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem
   }
 }
 
+[data-coco][data-component="modal-dialog"] .modal-dialog-header-container{
+  position: relative;
+  display: flex;
+  height: 2.75rem;
+  align-items: center
+}
+
 [data-coco][data-component="modal-dialog"] .modal-dialog-title{
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 1.5rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 20px;
+  line-height: 24px;
   font-weight: 700
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close{
   position: absolute;
   top: 50%;
-  right: 0.25rem;
+  right: -0.25rem;
   display: block;
   flex: none;
   --tw-translate-y: -50%;
@@ -4609,18 +4625,24 @@ select{
 @media (min-width: 576px){
 
   [data-coco][data-component="modal-dialog"] .modal-dialog-close{
-    right: 0.75rem
+    right: -0.5rem
   }
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close{
+  border-radius: 9999px;
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity))
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity))
+  color: rgb(17 24 39 / var(--tw-text-opacity))
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close:focus{
@@ -4631,23 +4653,37 @@ select{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }
 
+[data-coco][data-component="modal-dialog"] .modal-dialog-notice [data-component="notice"]{
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem
+}
+
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-notice [data-component="notice"]{
+    margin-bottom: 1.5rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem
+  }
+}
+
 [data-coco][data-component="modal-dialog"] .modal-dialog-content{
-  border-radius: 0.75rem;
+  border-bottom-right-radius: 2rem;
+  border-bottom-left-radius: 2rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem
+  padding-bottom: 1.5rem
 }
 
 @media (min-width: 576px){
 
   [data-coco][data-component="modal-dialog"] .modal-dialog-content{
-    padding-left: 2rem;
-    padding-right: 2rem;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    padding-bottom: 2rem
   }
 }
 

data/app/assets/build/coco/coco.js

@@ -15415,7 +15415,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.17.2",
+  version: "0.17.3",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",

data/app/components/coco/messaging/alert/alert.rb

@@ -35,6 +35,11 @@ module Coco
       unless tag_attr?(:id)
         set_tag_attr(:id, "alert-#{rand(1000)}")
       end
+      with_title { @title } unless title?
+    end
+
+    def initialize(title: nil, **kwargs)
+      @title = title
     end
 
     def dismissable?

data/app/components/coco/messaging/notice/notice.rb

@@ -14,5 +14,13 @@ module Coco
         alert.send(:"with_#{slot_name}", *args, **kwargs, &block)
       end
     end
+
+    before_render do
+      with_title { @title } unless title?
+    end
+
+    def initialize(title: nil, **kwargs)
+      @title = title
+    end
   end
 end

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

@@ -1,28 +1,46 @@
 @layer components {
   [data-coco][data-component="modal-dialog"] {
-    @apply rounded-xl w-full;
+    @apply rounded-[2rem] w-full bg-background-light-1;
 
     .modal-frame & {
-      @apply shadow-2xl;
-      @apply max-w-2xl; /* temp until sizes added */
+      @apply shadow-xl;
+
+      &[data-size="sm"] {
+        max-width: 480px;
+      }
+
+      &[data-size="md"] {
+        max-width: 520px;
+      }
+
+      &[data-size="lg"] {
+        max-width: 640px;
+      }
     }
 
     .modal-dialog-header {
-      @apply relative flex items-center;
-      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-coco-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-10 py-4 sm:py-6 rounded-t-[2rem] bg-background-light-1;
+    }
+
+    .modal-dialog-header-container {
+      @apply relative flex items-center h-11;
     }
 
     .modal-dialog-title {
-      @apply text-lg pr-6 w-full font-bold truncate;
+      @apply text-heading-5 pr-6 w-full font-bold truncate;
     }
 
     .modal-dialog-close {
-      @apply flex-none block p-2 absolute top-1/2 right-1 sm:right-3 -translate-y-1/2;
-      @apply focus:ring-0 focus:outline-none text-content-dark-muted hover:text-content-dark-2;
+      @apply flex-none block p-2 absolute top-1/2 -right-1 sm:-right-2 -translate-y-1/2;
+      @apply focus:ring-0 focus:outline-none text-content-dark-1 hover:text-content-dark-1 rounded-full hover:bg-coco-gray-100 transition-colors;
+    }
+
+    .modal-dialog-notice [data-component="notice"] {
+      @apply px-4 sm:px-10 mb-4 sm:mb-6;
     }
 
     .modal-dialog-content {
-      @apply px-4 sm:px-8 py-4 sm:py-6 rounded-xl bg-background-light-3;
+      @apply px-4 sm:px-10 pb-6 sm:pb-8 rounded-b-[2rem] bg-background-light-1;
     }
 
     .modal-dialog-header + .modal-dialog-content {

data/app/components/coco/modals/modal_dialog/modal_dialog.html.erb

@@ -1,18 +1,27 @@
 <%= render component_tag(x: {data: x_data("modalDialog")}) do %>
   <% if header? %>
     <header class="modal-dialog-header">
-      <% if title? %>
-        <h4 class="modal-dialog-title" data-role="title">
-          <%= title %>
-        </h4>
-      <% end %>
-      <% if dismissable? %>
-        <button type="button" class="modal-dialog-close" data-role="close" @click="close">
-          <%= coco_icon(:x, size: :md) %>
-        </button>
-      <% end %>
+      <div class="modal-dialog-header-container">
+        <% if title? %>
+          <h4 class="modal-dialog-title" data-role="title">
+            <%= title %>
+          </h4>
+        <% end %>
+        <% if dismissable? %>
+          <button type="button" class="modal-dialog-close" data-role="close" @click="close">
+            <%= coco_icon(:x, size: :md) %>
+          </button>
+        <% end %>
+      </div>
     </header>
   <% end %>
+  
+  <% if notice? %>
+    <div class="modal-dialog-notice">
+      <%= notice %>
+    </div>
+  <% end %>
+  
   <div class="modal-dialog-content">
     <%= content %>
   </div>

data/app/components/coco/modals/modal_dialog/modal_dialog.rb

@@ -3,6 +3,11 @@ module Coco
     include Concerns::AcceptsOptions
 
     accepts_option :dismissable, from: [true, false], default: true
+    accepts_option :size, from: [:sm, :md, :lg], default: :md
+
+    renders_one :notice, ->(**kwargs) do
+      Coco::Notice.new(**kwargs, dismissable: false)
+    end
 
     renders_one :title
 

data/app/helpers/coco/components_helper.rb

@@ -168,9 +168,9 @@ module Coco
       render(Coco::Modal.new(name: name, **), &)
     end
 
-    def coco_modal_dialog(name = "default", **, &block)
+    def coco_modal_dialog(name = "default", size: :md, **, &block)
       render(Coco::Modal.new(name: name, **)) do |modal|
-        modal.with_container_dialog(&block)
+        modal.with_container_dialog(size: size, &block)
       end
     end
 

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.17.2"
+  VERSION = "0.17.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.17.2
+  version: 0.17.3
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-21 00:00:00.000000000 Z
+date: 2024-03-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails