coveragebook_components 0.18.7 → 0.19.0

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.7"
+  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.7
+  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