coveragebook_components 0.18.8 → 0.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a51adb34f4dc39457d366fbbc14b9e2abbd2fff64af693cb117911d3268edb1
-  data.tar.gz: 2778a57ba70462d2fd13d789808f07c5c04fb3706da3a137528b783cd19e733e
+  metadata.gz: eb5049eeec9c70081fd0cc9fec4723e35da58b39e02597077cc1a20625370b8f
+  data.tar.gz: c99db45370f570dd98fb3c67016925f7a1d6c950bbe1b446b3be253a6023ebe2
 SHA512:
-  metadata.gz: ed9dfd6d27da7988a058de1a47e5a8ab28d8705f8bab863e9c06af7b853cf258c4eae4d141a1e1fcbe140903df52088ad3868a98270edfd8fe3377364c3bcea7
-  data.tar.gz: 1133b75a1f2d5c687aa80ba08d4badc01bd763d107a1aada465f2ea94217c1505a59005d04218f99cf587dbd125a7e8deb1f06a9c08224adaf5a434b02e902d0
+  metadata.gz: '09a1eb6b7ec6f403018617a0f2a9ae3a6a3947673756714a314a3372e20443ce1bea81eb9f8dd755b91fb401fdc3ee034a74280639d9fe15cfb8d0101e6f41a3'
+  data.tar.gz: 805735413da217fedda4b939504d1b0f627effce246aea20fee7aa13ee65870b581060e5513c0a8f19938b089a064a08a83b58bf037a5037092628928a1cd497

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

@@ -5032,6 +5032,48 @@ select{
   margin-right: -0.25rem
 }
 
+[data-coco][data-component="tabs"]{
+  border-bottom-width: 1px;
+  border-color: rgba(0, 12, 39, 0.18)
+}
+
+[data-coco][data-component="tabs"] [role="tablist"] {
+      display: flex;
+      position: relative;
+      width: 100%;
+    }
+
+[data-coco][data-component="tabs"] [role="tab"]{
+  border-bottom-width: 2px;
+  border-color: transparent;
+      position: relative;
+      bottom: -1px
+}
+
+[data-coco][data-component="tabs"] [role="tab"] .coco-button{
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+
+[data-coco][data-component="tabs"] [role="tab"] .coco-button:hover{
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity))
+}
+
+[data-coco][data-component="tabs"] [role="tab"].active{
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity))
+}
+
+[data-coco][data-component="tabs"] [role="tab"].active .coco-button{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+[data-coco][data-component="tabs"][data-fit="full"] [role="tab"] {
+      width: 100%;
+    }
+
 [data-coco][data-component="color-picker"]{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))

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

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

data/app/components/coco/navigation/tabs/tabs.css

@@ -0,0 +1,37 @@
+@layer components {
+  [data-coco][data-component="tabs"] {
+    @apply border-b border-gray-transparent-200;
+
+    [role="tablist"] {
+      display: flex;
+      position: relative;
+      width: 100%;
+    }
+
+    [role="tab"] {
+      @apply border-b-2 border-transparent;
+      position: relative;
+      bottom: -1px;
+
+      .coco-button {
+        @apply text-content-dark-muted;
+
+        &:hover {
+          @apply text-content-dark-2;
+        }
+      }
+
+      &.active {
+        @apply border-background-dark-1;
+
+        .coco-button {
+          @apply text-content-dark-1;
+        }
+      }
+    }
+
+    &[data-fit="full"] [role="tab"] {
+      width: 100%;
+    }
+  }
+}

data/app/components/coco/navigation/tabs/tabs.html.erb

@@ -0,0 +1,5 @@
+<%= render component_tag(:nav) do %>
+  <ul role="tablist">
+    <%= safe_join(tabs) %>
+  </ul>
+<% end %>

data/app/components/coco/navigation/tabs/tabs.rb

@@ -0,0 +1,13 @@
+module Coco
+  class Tabs < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :fit, from: [:auto, :full], default: :auto
+
+    renders_many :tabs, ->(*args, active: false, **kwargs, &block) do
+      tag.li(class: {active:}, role: "tab") do
+        coco_button(*args, **kwargs, theme: :blank, fit: get_option_value(:fit), &block)
+      end
+    end
+  end
+end

data/app/helpers/coco/components_helper.rb

@@ -236,6 +236,10 @@ module Coco
       render(Coco::PagerButton.new(direction:, **), &)
     end
 
+    def coco_tabs(**, &)
+      render(Coco::Tabs.new(**), &)
+    end
+
     # Typography
 
     def coco_prose(**, &)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.18.8"
+  VERSION = "0.19.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.18.8
+  version: 0.19.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-05 00:00:00.000000000 Z
+date: 2024-07-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1685,6 +1685,9 @@ files:
 - app/components/coco/navigation/pager_button/pager_button.css
 - app/components/coco/navigation/pager_button/pager_button.html.erb
 - app/components/coco/navigation/pager_button/pager_button.rb
+- app/components/coco/navigation/tabs/tabs.css
+- app/components/coco/navigation/tabs/tabs.html.erb
+- app/components/coco/navigation/tabs/tabs.rb
 - app/components/coco/pickers/color_picker/color_picker.css
 - app/components/coco/pickers/color_picker/color_picker.html.erb
 - app/components/coco/pickers/color_picker/color_picker.js