coveragebook_components 0.8.0.beta.2 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b89e4f8770587065a0d3967f7f767ff9b420e36e30abf97c3dc72bcf3bc41d34
-  data.tar.gz: 70662dbab01723243b282c24ea050f697f639044acf91157648945dfe52b9a1e
+  metadata.gz: ae77cd8872af17a8cd219cb7a618bd31ad7b91ab25b1c852d5b64f24e2d737d9
+  data.tar.gz: 9b81c6df5c45518c68cf232ee7ffa91e4624cd7a9ccb9313d27a216d2daf8630
 SHA512:
-  metadata.gz: eb05436465f98461bbbb58148fe1519e7e0b4bf2981328d0d16aa4a05312aa2755ee24f07de5a4137d138fd42ba0fa002cc4320cae9a687f29421848b9d651f6
-  data.tar.gz: 6dbc15f4ab52cf871137891789fed68a544ed90b824f11381b84559de0c4be3fb49129337a8a744f8c43d444fa23f0da2cba2b82605e29596640019aa698210b
+  metadata.gz: 675ca27e722a47f807018e81c069396b7f6476f8ac04a2cb63676442de5f2fbbe307354f6d693eea04318c81f205671627d5b50dcd978a1d848749b2853d971d
+  data.tar.gz: 20280d160c4ea2c53bd8fe600bb04180e42815091a60530c962ccabe0021fb8fedfaae6a8cc6c15dac2abfa6759fc2b2e45f5d6f74f8dbab6aff64fdea22df08

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

@@ -1395,6 +1395,8 @@ select{
   width: 100%;
   grid-template-rows: repeat(1, minmax(0, 1fr));
     grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr)}
+[data-coco][data-component="app-sidebar-nav"] .nav-action{
+  cursor: pointer}
 [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
   display: none;
   --tw-text-opacity: 1 !important;
@@ -1514,6 +1516,7 @@ select{
   }
 [data-coco][data-component="app-sidebar-nav-item"]{
   flex: none;
+  cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
   text-align: center;
@@ -1545,6 +1548,7 @@ select{
 [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
   margin-top: 0.125rem;
   display: block;
+  cursor: pointer;
   font-size: 10px;
   line-height: 12px;
   font-weight: 600;
@@ -2686,26 +2690,29 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-button"][data-theme="neutral-light"]{
+  border-width: 1px;
+  border-color: transparent}
+[data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"]:hover{
+[data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"]:active{
+[data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element:active{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"]{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"]{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"]{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-inner{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-element .button-inner{
   opacity: 0.4}
 [data-coco][data-component="app-button"][data-theme="text-neutral-light"]{
   background-color: transparent;

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

@@ -14038,7 +14038,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.8.0-beta.2",
+    version: "0.8.0",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",

data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css

@@ -5,6 +5,8 @@
     grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
 
     .nav-action {
+      @apply cursor-pointer;
+
       .nav-item-label {
         @apply hidden !text-content-primary-inverse-vivid;
       }

data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb

@@ -8,7 +8,7 @@
           </span>
         <% end %>
 
-        <% item.with_menu do %>
+        <% item.with_menu(id: "actions-nav-link") do %>
           <% actions_data.each do |action| %>
             <%= coco_link(action[:href],
               **action.except(:label, :description, :href, :icon),

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco][data-component="app-sidebar-nav-item"] {
-    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none;
+    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none cursor-pointer;
     @apply flex items-center justify-center px-4 w-full flex-col;
 
     &[href] {
@@ -13,7 +13,7 @@
     }
 
     .nav-item-label {
-      @apply block font-semibold text-label-xxs transition-colors mt-0.5;
+      @apply block font-semibold text-label-xxs transition-colors mt-0.5 cursor-pointer;
     }
 
     &.emphasised {

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb

@@ -12,8 +12,10 @@
     <%= label %>
   </label>
   <% if menu? || menu_items? %>
-    <template x-ref="menu">
-      <div class="sidebar-nav-menu" x-cloak>
+    <%= tag.template id: menu_template_id, "x-ref": "menu" do %>
+      <%= tag.div id: menu_id,
+        class: "sidebar-nav-menu",
+        "x-cloak": "" do %>
         <% if menu? %>
           <%= menu %>
         <% else %>
@@ -37,7 +39,7 @@
 
           <%= menu_action %>
         <% end %>
-      </div>
-    </template>
+      <% end %>
+    <% end %>
   <% end %>
 <% end %>

data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb

@@ -25,6 +25,7 @@ module Coco
         end
 
         before_render do
+          set_tag_attr(:id, item_id)
           if @icon && !icon?
             with_icon do
               tag.span(class: "nav-item-icon") do
@@ -34,9 +35,10 @@ module Coco
           end
         end
 
-        attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items
+        attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items, :item_id
 
-        def initialize(label:, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
+        def initialize(label:, id: nil, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
+          @item_id = id
           @label = label
           @icon = icon
           @emphasise = emphasise
@@ -63,6 +65,14 @@ module Coco
           @menu_select_placeholder || "More items..."
         end
 
+        def menu_id
+          "#{item_id}-menu" if item_id.present?
+        end
+
+        def menu_template_id
+          "#{menu_id}-template" if menu_id.present?
+        end
+
         class SidebarNavMenuItem < Coco::Component
           attr_reader :icon, :href, :modal
 

data/app/components/coco/app/elements/alert/alert.html.erb

@@ -20,7 +20,7 @@
         <% end %>
 
         <p class="alert-message"<% if single_line? %> x-dimensions="checkSingleLineWrap(dimensions)"<% end %>>
-          <%= content %>
+          <%= message? ? message : content %>
         </p>
 
         <% if link? %>

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

@@ -26,6 +26,7 @@ module Coco
         accepts_option :condensed, from: [true, false], default: false
 
         renders_one :title
+        renders_one :message
 
         renders_one :action, ->(*args, **kwargs, &block) do
           theme = vivid? ? "neutral-dark" : get_option_value(:theme)

data/app/components/coco/app/elements/button/button.css

@@ -241,17 +241,21 @@
     }
 
     &[data-theme="neutral-light"] {
-      @apply bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;
+      @apply border border-transparent;
 
-      &[data-state="loading"] {
+      .button-element {
+        @apply bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;
+      }
+
+      &[data-state="loading"] .button-element {
         @apply bg-background-light-1;
       }
 
-      &[data-state="active"] {
+      &[data-state="active"] .button-element {
         @apply bg-background-light-3;
       }
 
-      &[data-disabled="true"] {
+      &[data-disabled="true"] .button-element {
         @apply bg-background-light-1;
 
         .button-inner {

data/app/components/coco/app/elements/system_banner/system_banner.html.erb

@@ -1,5 +1,4 @@
-<%= render component_tag(
-  x: { data: x_data("appSystemBanner", alpine_data), bind: "root"}) do %>
+<%= render component_tag(x: { data: x_data("appSystemBanner", alpine_data), bind: "root"}) do %>
   <%= render alert do %>
     <%= content %>
   <% end %>

data/app/components/coco/app/elements/system_banner/system_banner.rb

@@ -20,12 +20,20 @@ module Coco
           )
         end
 
-        %i[title action secondary_action link].each do |slot_name|
+        %i[action secondary_action link].each do |slot_name|
           renders_one slot_name, ->(*args, **kwargs, &block) do
             alert.send("with_#{slot_name}".to_sym, *args, **kwargs, &block)
           end
         end
 
+        renders_one :title, ->(text = nil, **kwargs, &block) do
+          alert.public_send(:with_title, **kwargs) { text.presence || block.call }
+        end
+
+        renders_one :message, ->(text = nil, **kwargs, &block) do
+          alert.public_send(:with_message, **kwargs) { text.presence || block.call }
+        end
+
         before_render do
           if dismissable? && id.blank?
             raise ArgumentError, "Dismissable banners must be given an ID"

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.8.0.beta.2"
+  VERSION = "0.8.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.0.beta.2
+  version: 0.8.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-23 00:00:00.000000000 Z
+date: 2023-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1605,9 +1605,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.4.19
 signing_key: