coveragebook_components 0.17.2 → 0.17.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2af0604e33ee8ea690a93abf997f126ecaeb23528b3bf682fadc79eed353df2
-  data.tar.gz: 6d055a247adaa8f2a794d3a6864d38a23fd2059d0c01d08ea183e751c06c440c
+  metadata.gz: 640690640d1cb09848352d16bf5eab6b24525775a46bff8773c316eadc349333
+  data.tar.gz: 64520da2e244704072216713b5d08376b468015145850bdf393f6636b73a4dd1
 SHA512:
-  metadata.gz: eb41e2bfb905a693fb9a9ac36019d09699001552fa9f6aa2ce0df0b7f8281ebcc159f15cf41a58c059e1f83fe6907c085265cddee43dc893d8d475e34b146092
-  data.tar.gz: 9c229a0bf2926994c7bf5699485365d74956e3fc23cb0df41842b11ca5e27df24f3603c9339a86771316acdf94b185e83250f9e2b5c651771f0fcb130c0f7f24
+  metadata.gz: dd6d5464840a829d94a91093897bebc91c0af1c73d64729088a4563fe89b8f00e401c245067e8c95f50d878fb8ac6af7e394fbbe2022f28113f196fa5573a6f2
+  data.tar.gz: edda3f86449b0cf48c5c2811a4ee9b61b3c5b706727fe8e8259abebf34135e235489d6288cea5cd533ad8401ba3069c7044422a604dd29e82e4dfeb51aabfeeb

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

@@ -4383,6 +4383,12 @@ select{
   opacity: 0
 }
 
+[data-coco][data-component="tooltip"] {
+    display: block;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
 [data-coco][data-component="modal"]{
   position: fixed;
   inset: 0px;
@@ -4549,56 +4555,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 +4631,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 +4659,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
   }
 }
 
@@ -6861,9 +6903,6 @@ select{
 
 .tippy-box[data-theme~="coco-tooltip"] .tippy-content{
   max-width: 240px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;

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.4",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -16358,8 +16358,26 @@ var toast_default = CocoComponent("toast", () => {
   };
 });
 
+// ../../components/coco/messaging/tooltip/tooltip.js
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  default: () => tooltip_default2
+});
+var tooltip_default2 = CocoComponent("tooltip", () => {
+  return {
+    init() {
+      tippy_default(this.$el, {
+        theme: "coco-tooltip",
+        appendTo: () => {
+          return this.$el.firstElementChild;
+        }
+      });
+    }
+  };
+});
+
 // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@components/messaging/**/*.js
-var modules7 = [alert_exports, notice_exports, snackbar_exports, system_banner_exports, toast_exports];
+var modules7 = [alert_exports, notice_exports, snackbar_exports, system_banner_exports, toast_exports, tooltip_exports];
 var __default7 = modules7;
 
 // ../../components/coco/modals/modal/modal.js

data/app/assets/css/base/tippy.css

@@ -35,7 +35,7 @@
   @apply bg-background-dark-2 text-white label-sm rounded-lg shadow-xl;
 
   .tippy-content {
-    @apply px-3 py-2 truncate max-w-[240px];
+    @apply px-3 py-2 max-w-[240px];
   }
 
   /* arrow background */

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/messaging/tooltip/tooltip.css

@@ -0,0 +1,6 @@
+@layer components {
+  [data-coco][data-component="tooltip"] {
+    display: block;
+    width: fit-content;
+  }
+}

data/app/components/coco/messaging/tooltip/tooltip.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag(x:{data: "tooltip"}, data: {tippy_content: text}) do %>
+  <%= content %>
+<% end %>

data/app/components/coco/messaging/tooltip/tooltip.js

@@ -0,0 +1,15 @@
+import { CocoComponent } from "@assets/js/coco/component";
+import tippy from "@js/base/tippy";
+
+export default CocoComponent("tooltip", () => {
+  return {
+    init() {
+      tippy(this.$el, {
+        theme: "coco-tooltip",
+        appendTo: () => {
+          return this.$el.firstElementChild;
+        },
+      });
+    },
+  };
+});

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

@@ -0,0 +1,9 @@
+module Coco
+  class Tooltip < Coco::Component
+    attr_reader :text
+
+    def initialize(text:, **)
+      @text = text
+    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

@@ -146,6 +146,10 @@ module Coco
 
     # Messaging
 
+    def coco_tooltip(text, **, &)
+      render(Coco::Tooltip.new(text:, **), &)
+    end
+
     def coco_notice(**, &)
       render(Coco::Notice.new(**), &)
     end
@@ -168,9 +172,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.4"
 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.4
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-21 00:00:00.000000000 Z
+date: 2024-04-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1653,6 +1653,10 @@ files:
 - app/components/coco/messaging/toast/toast.html.erb
 - app/components/coco/messaging/toast/toast.js
 - app/components/coco/messaging/toast/toast.rb
+- app/components/coco/messaging/tooltip/tooltip.css
+- app/components/coco/messaging/tooltip/tooltip.html.erb
+- app/components/coco/messaging/tooltip/tooltip.js
+- app/components/coco/messaging/tooltip/tooltip.rb
 - app/components/coco/modals/modal/modal.css
 - app/components/coco/modals/modal/modal.html.erb
 - app/components/coco/modals/modal/modal.js