coveragebook_components 0.8.0.beta.2 → 0.8.0.beta.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b89e4f8770587065a0d3967f7f767ff9b420e36e30abf97c3dc72bcf3bc41d34
-  data.tar.gz: 70662dbab01723243b282c24ea050f697f639044acf91157648945dfe52b9a1e
+  metadata.gz: fd091a2e16041e7c228e055e43093de5a7b7fefb7747872059c313681993c774
+  data.tar.gz: 9161c4c85b14f3b1bcee2b57472fc0596d74b2543a36ddb714d9582abf897699
 SHA512:
-  metadata.gz: eb05436465f98461bbbb58148fe1519e7e0b4bf2981328d0d16aa4a05312aa2755ee24f07de5a4137d138fd42ba0fa002cc4320cae9a687f29421848b9d651f6
-  data.tar.gz: 6dbc15f4ab52cf871137891789fed68a544ed90b824f11381b84559de0c4be3fb49129337a8a744f8c43d444fa23f0da2cba2b82605e29596640019aa698210b
+  metadata.gz: cb9820183b0356270f175fa9b55a4627053b00c495caf31c7e9b1e3cd220f56d7ddbfa0e50486031eab376c373760102964d37d2d494d346377a45dd3ffda617
+  data.tar.gz: a799d7ed6d316ec0fad9d46d94b09c513833d80ab8e77777fa6d2664814d4a97f2511b865374a685c0162af51c2993a9d103a7dd9ab298c343cf26b4b438b17b

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-beta.3",
     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/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/lib/coco.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.0.beta.2
+  version: 0.8.0.beta.3
 platform: ruby
 authors:
 - Mark Perkins