coveragebook_components 0.8.2 → 0.8.4

data/app/components/coco/app/blocks/sidebar_nav/menu/menu.rb

@@ -0,0 +1,48 @@
+module Coco
+  module App
+    module Blocks
+      module SidebarNav
+        class Menu < Coco::Component
+          component_name :app_sidebar_nav_menu
+
+          renders_many :items, types: {
+            link: ->(label, href, qualifier: nil, **kwargs, &block) do
+              if items.size < max_links
+                coco_link(href, **kwargs, theme: nil, underline: false) do
+                  tag.span(label, class: "menu-item-label") +
+                    tag.span(qualifier, class: "menu-item-qualifier")
+                end
+              else
+                overflow_items << ["#{label}#{qualifier.present? ? " (#{qualifier})" : ""}", href]
+                nil
+              end
+            end,
+            block_link: ->(href, **kwargs, &block) do
+              coco_link(href, **kwargs, theme: nil, underline: false, &block)
+            end
+          }
+
+          renders_one :action, ->(*args, **kwargs, &block) do
+            coco_button(*args, theme: :primary, **kwargs, size: :sm, fit: :full, &block)
+          end
+
+          attr_reader :max_links, :overflow_items, :prompt
+
+          def initialize(max_links: 6, prompt: "More links...", **kwargs)
+            @max_links = max_links
+            @prompt = prompt
+            @overflow_items = []
+          end
+
+          def with_link(...)
+            with_item_link(...)
+          end
+
+          def with_block_link(...)
+            with_item_block_link(...)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,75 @@
+@layer components {
+  [data-coco][data-component="app-sidebar-nav"] {
+    @apply bg-background-dark-2 antialiased;
+
+    @media screen(max-sm) {
+      @apply app-sidebar-nav-horizontal;
+    }
+
+    @media screen(sm) and screen(max-md) {
+      @apply app-sidebar-nav-vertical-narrow;
+    }
+
+    @media screen(md) {
+      @apply app-sidebar-nav-vertical-wide;
+    }
+
+    @media screen(letterbox) {
+      @apply app-sidebar-nav-vertical-narrow;
+    }
+  }
+}
+
+@layer utilities {
+  .app-sidebar-nav-horizontal {
+    @apply w-full h-14 grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+
+    .nav-item {
+      @apply flex items-stretch;
+
+      &[data-show-on-mobile="false"] {
+        @apply hidden;
+      }
+    }
+
+    .nav-item-action {
+      .nav-item-label {
+        @apply hidden;
+      }
+    }
+  }
+
+  .app-sidebar-nav-vertical {
+    @apply h-full;
+
+    .nav-item-action {
+      .nav-item-label {
+        @apply text-content-primary-inverse-vivid;
+      }
+    }
+  }
+
+  .app-sidebar-nav-vertical-narrow {
+    @apply app-sidebar-nav-vertical;
+    @apply w-16;
+
+    .nav-item-action {
+      [data-component="app-sidebar-nav-item"] {
+        @apply pb-2.5;
+      }
+    }
+  }
+
+  .app-sidebar-nav-vertical-wide {
+    @apply app-sidebar-nav-vertical;
+    @apply w-24;
+
+    .nav-item-action {
+      [data-component="app-sidebar-nav-item"] {
+        @apply pb-3;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+<%= render component_tag(x: {data: "appSidebarNav"}) do %>
+  <% if actions? %>
+    <div class="nav-item nav-item-action">
+      <%= render Coco::App::Blocks::SidebarNav::Item.new(label: "Add") do |item| %>
+        <% item.with_icon do %>
+          <span class="nav-item-action-button">
+            <%= coco_icon :plus, size: :full %>
+          </span>
+        <% end %>
+
+        <% item.with_menu do %>
+          <%= coco_sidebar_nav_menu(class: "nav-card-menu") do |menu| %>
+            <% actions_data.each do |action| %>
+              <% menu.with_block_link(action[:href], **action.except(:href, :icon, :label, :description)) do %>
+                <div class="card">
+                  <%= coco_icon(action[:icon], size: :md) %>
+                  <h4><%= action[:label] %></h4>
+                  <div><%= raw action[:description] %></div>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= safe_join(items) %>
+<% end %>

data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb

@@ -0,0 +1,50 @@
+module Coco
+  module App
+    module Blocks
+      module SidebarNav
+        class Navbar < Coco::Component
+          tag_name :nav
+          component_name :app_sidebar_nav
+
+          renders_many :actions, ->(label, href, icon:, **kwargs) do
+            actions_data << {label: label, href: href, icon: icon, **kwargs}
+          end
+
+          renders_many :items, types: {
+            link: ->(label, href, show_on_mobile: true, **kwargs, &block) do
+              nav_item(mobile: show_on_mobile) do
+                render Coco::App::Blocks::SidebarNav::Item.new(label: label, href: href, **kwargs), &block
+              end
+            end,
+            menu: ->(label, show_on_mobile: true, **kwargs, &block) do
+              nav_item(mobile: show_on_mobile) do
+                render Coco::App::Blocks::SidebarNav::Item.new(label: label, **kwargs) do |item|
+                  item.with_menu(&block)
+                end
+              end
+            end
+          }
+
+          attr_reader :actions_data
+
+          def initialize(**)
+            @actions_data = []
+            @menus_data = {}
+          end
+
+          def nav_item(mobile: true, &block)
+            tag.div(class: "nav-item", data: {show_on_mobile: mobile.to_s}, &block)
+          end
+
+          def with_link(...)
+            with_item_link(...)
+          end
+
+          def with_menu(...)
+            with_item_menu(...)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/coco/base/icon/icon.rb

@@ -7,6 +7,7 @@ module Coco
     ALIASES = {
       edit: "pen-line",
       "edit-3": "pen-line",
+      "git-commit": "git-commit-horizontal",
       grid: "grid-3x3"
     }.freeze
 

data/app/components/coco/component.rb

@@ -47,8 +47,8 @@ module Coco
       tag_attrs.compact!
     end
 
-    def component_tag(tag = nil, **attrs)
-      Tag.new(tag || tag_name || :div, root: true, **merge_tag_attrs(**attrs))
+    def component_tag(tag = nil, **)
+      Tag.new(tag || tag_name || :div, root: true, **merge_tag_attrs(**))
     end
 
     def merge_tag_attrs(**attrs)

data/app/helpers/coco/app_helper.rb

@@ -105,7 +105,11 @@ module Coco
     end
 
     def coco_sidebar_nav(*, **, &block)
-      render Coco::App::Blocks::SidebarNav.new(*, **), &block
+      render Coco::App::Blocks::SidebarNav::Navbar.new(*, **), &block
+    end
+
+    def coco_sidebar_nav_menu(*, **, &block)
+      render Coco::App::Blocks::SidebarNav::Menu.new(*, **), &block
     end
 
     def coco_menu_item(type, **, &block)

data/app/helpers/coco/book_helper.rb

@@ -1,11 +1,11 @@
 module Coco
   module BookHelper
-    def coco_editable_slide(**kwargs, &block)
-      render Coco::Book::Blocks::Slides::EditableSlide.new(**kwargs), &block
+    def coco_editable_slide(**, &block)
+      render Coco::Book::Blocks::Slides::EditableSlide.new(**), &block
     end
 
-    def coco_media_slide(src = nil, **kwargs, &block)
-      render Coco::Book::Blocks::Slides::MediaSlide.new(src: src, **kwargs), &block
+    def coco_media_slide(src = nil, **, &block)
+      render Coco::Book::Blocks::Slides::MediaSlide.new(src: src, **), &block
     end
   end
 end

data/app/helpers/coco/component_helper.rb

@@ -4,8 +4,8 @@ module Coco
     include Coco::BookHelper
     include Coco::AppHelper
 
-    def coco_component(name, *args, **kwargs)
-      resolve_component("coco/#{name}", *args, **kwargs)
+    def coco_component(name, *, **)
+      resolve_component("coco/#{name}", *, **)
     end
 
     def resolve_component(...)

data/app/helpers/coco/integration_helper.rb

@@ -1,15 +1,15 @@
 module Coco
   module IntegrationHelper
-    def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **opts)
-      javascript_include_tag "coco/#{context}#{".dev" if dev}", **opts
+    def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **)
+      javascript_include_tag("coco/#{context}#{".dev" if dev}", **)
     end
 
     def coco_javascript_file_path(context, dev: ENV["COCO_PATH"])
       File.join(Coco::Engine.root, "app/assets/build/coco/#{context}#{".dev" if dev}.js")
     end
 
-    def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **opts)
-      stylesheet_link_tag "coco/#{context}#{".dev" if dev}", **opts
+    def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
+      stylesheet_link_tag("coco/#{context}#{".dev" if dev}", **)
     end
 
     def coco_stylesheet_file_path(context, dev: ENV["COCO_PATH"], **opts)

data/config/icons.json

@@ -603,12 +603,18 @@
   "gift",
   "git-branch",
   "git-branch-plus",
-  "git-commit",
+  "git-commit-horizontal",
+  "git-commit-vertical",
   "git-compare",
+  "git-compare-arrows",
   "git-fork",
+  "git-graph",
   "git-merge",
   "git-pull-request",
+  "git-pull-request-arrow",
   "git-pull-request-closed",
+  "git-pull-request-create",
+  "git-pull-request-create-arrow",
   "git-pull-request-draft",
   "github",
   "gitlab",
@@ -945,7 +951,9 @@
   "popsicle",
   "pound-sterling",
   "power",
+  "power-circle",
   "power-off",
+  "power-square",
   "presentation",
   "printer",
   "projector",

data/config/tokens.cjs

@@ -172,6 +172,12 @@ const screens = {
   xl: "1200px",
   "2xl": "1400px",
   max: "1800px",
+  "max-sm": { max: "576px" },
+  "max-md": { max: "768px" },
+  "max-lg": { max: "992px" },
+  "max-xl": { max: "1200px" },
+  "max-2xl": { max: "1400px" },
+  "max-max": { max: "1800px" },
   letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
   print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
 };

data/lib/coco/options/group.rb

@@ -54,23 +54,23 @@ module Coco
         get_option!(...).value
       end
 
-      def set_option_value(*args, value)
-        if option?(*args)
-          get_option(*args).value = value
-        elsif group?(*args)
-          group = get_group(*args)
+      def set_option_value(*, value)
+        if option?(*)
+          get_option(*).value = value
+        elsif group?(*)
+          group = get_group(*)
           if group.shorthand
             group.set_option_value(group.shorthand, value)
           end
         end
       end
 
-      def option_value_equals?(*args, check)
-        get_option_value(*args) == check
+      def option_value_equals?(*, check)
+        get_option_value(*) == check
       end
 
-      def merge_option_values(*args, values, overwrite: true)
-        get_group!(*args).items.each do |item|
+      def merge_option_values(*, values, overwrite: true)
+        get_group!(*).items.each do |item|
           if values.key?(item.name)
             value = values[item.name]
             if item.is_a?(Option)

data/lib/coco/test_helpers.rb

@@ -8,8 +8,8 @@ module Coco
       klass
     end
 
-    def assert_component_selector(name, text: nil, visible: nil, **opts)
-      assert_selector(component_selector(name, **opts), text: text, visible: visible)
+    def assert_component_selector(name, text: nil, visible: nil, **)
+      assert_selector(component_selector(name, **), text: text, visible: visible)
     end
 
     def component_selector(name, **opts)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.8.2"
+  VERSION = "0.8.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.2
+  version: 0.8.4
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-26 00:00:00.000000000 Z
+date: 2023-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -688,11 +688,17 @@ files:
 - app/assets/build/coco/icons/gift.svg
 - app/assets/build/coco/icons/git-branch-plus.svg
 - app/assets/build/coco/icons/git-branch.svg
-- app/assets/build/coco/icons/git-commit.svg
+- app/assets/build/coco/icons/git-commit-horizontal.svg
+- app/assets/build/coco/icons/git-commit-vertical.svg
+- app/assets/build/coco/icons/git-compare-arrows.svg
 - app/assets/build/coco/icons/git-compare.svg
 - app/assets/build/coco/icons/git-fork.svg
+- app/assets/build/coco/icons/git-graph.svg
 - app/assets/build/coco/icons/git-merge.svg
+- app/assets/build/coco/icons/git-pull-request-arrow.svg
 - app/assets/build/coco/icons/git-pull-request-closed.svg
+- app/assets/build/coco/icons/git-pull-request-create-arrow.svg
+- app/assets/build/coco/icons/git-pull-request-create.svg
 - app/assets/build/coco/icons/git-pull-request-draft.svg
 - app/assets/build/coco/icons/git-pull-request.svg
 - app/assets/build/coco/icons/github.svg
@@ -1029,7 +1035,9 @@ files:
 - app/assets/build/coco/icons/popcorn.svg
 - app/assets/build/coco/icons/popsicle.svg
 - app/assets/build/coco/icons/pound-sterling.svg
+- app/assets/build/coco/icons/power-circle.svg
 - app/assets/build/coco/icons/power-off.svg
+- app/assets/build/coco/icons/power-square.svg
 - app/assets/build/coco/icons/power.svg
 - app/assets/build/coco/icons/presentation.svg
 - app/assets/build/coco/icons/printer.svg
@@ -1470,14 +1478,18 @@ files:
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.html.erb
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.js
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.rb
-- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css
-- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb
-- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.js
-- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb
-- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css
-- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb
-- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js
-- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb
+- app/components/coco/app/blocks/sidebar_nav/item/item.css
+- app/components/coco/app/blocks/sidebar_nav/item/item.html.erb
+- app/components/coco/app/blocks/sidebar_nav/item/item.js
+- app/components/coco/app/blocks/sidebar_nav/item/item.rb
+- app/components/coco/app/blocks/sidebar_nav/menu/menu.css
+- app/components/coco/app/blocks/sidebar_nav/menu/menu.html.erb
+- app/components/coco/app/blocks/sidebar_nav/menu/menu.js
+- app/components/coco/app/blocks/sidebar_nav/menu/menu.rb
+- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css
+- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb
+- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.js
+- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb
 - app/components/coco/app/blocks/slat/slat.css
 - app/components/coco/app/blocks/slat/slat.rb
 - app/components/coco/app/blocks/slide_editor/slide_editor.css

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

@@ -1,110 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-sidebar-nav"] {
-    @apply bg-background-dark-2 antialiased;
-    @apply w-full h-14 grid grid-rows-1;
-    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
-
-    .nav-action {
-      @apply cursor-pointer;
-
-      > a {
-        @apply hover:!bg-background-dark-2;
-      }
-
-      .nav-item-label {
-        @apply hidden !text-content-primary-inverse-vivid;
-      }
-    }
-
-    .nav-actions-button {
-      @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
-      @apply h-10 w-10 flex items-center justify-center mx-auto rounded-full cursor-pointer;
-
-      &:hover {
-        transform: scale(1.05);
-      }
-
-      .coco-icon {
-        @apply h-6 w-6;
-      }
-    }
-
-    .nav-item {
-      @apply hidden sm:contents h-full justify-center w-full;
-    }
-
-    .mobile-nav-item {
-      @apply flex sm:contents;
-    }
-
-    @media screen(sm) {
-      @apply sidebar-nav-vertical-condensed;
-    }
-
-    @media screen(lg) {
-      @apply sidebar-nav-vertical;
-    }
-
-    @media screen(letterbox) {
-      @apply sidebar-nav-vertical-condensed;
-    }
-  }
-
-  .sidebar-nav-action {
-    @apply flex items-start p-1;
-
-    .sidebar-nav-action-icon {
-      @apply flex-none mr-3 text-content-light-1;
-    }
-
-    .sidebar-nav-action-detail {
-      @apply w-full text-left;
-    }
-
-    .sidebar-nav-action-label {
-      @apply mb-0.5 font-semibold text-content-light-1;
-    }
-
-    .sidebar-nav-action-description {
-      @apply text-para-xs;
-    }
-  }
-
-  .sidebar-nav-menu a.sidebar-nav-actions-item {
-    width: 320px;
-  }
-}
-
-@layer utilities {
-  .sidebar-nav-vertical-condensed {
-    @apply block w-18 h-full;
-
-    .nav-action .nav-item-label {
-      @apply block;
-    }
-
-    .nav-actions-button {
-      @apply h-14 w-14 mb-2;
-
-      .coco-icon {
-        @apply w-8 h-8;
-      }
-    }
-  }
-
-  .sidebar-nav-vertical {
-    @apply block w-24 h-full;
-
-    .nav-action .nav-item-label {
-      @apply block;
-    }
-
-    .nav-actions-button {
-      @apply h-[72px] w-[72px];
-
-      .coco-icon {
-        @apply h-10 w-10;
-      }
-    }
-  }
-}

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

@@ -1,42 +0,0 @@
-<%= render component_tag(:nav, x: {data: "appSidebarNav"}) do %>
-  <% if actions? %>
-    <div class="nav-item mobile-nav-item nav-action">
-      <%= render Coco::App::Blocks::SidebarNavItem.new(label: "Add", emphasise: true) do |item| %>
-        <% item.with_icon do %>
-          <span class="nav-actions-button">
-            <%= coco_icon :plus, size: :xl %>
-          </span>
-        <% end %>
-
-        <% item.with_menu(id: "actions-nav-link") do %>
-          <% actions_data.each do |action| %>
-            <%= coco_link(action[:href],
-              **action.except(:label, :description, :href, :icon),
-              theme: nil,
-              class: "sidebar-nav-menu-item sidebar-nav-actions-item") do %>
-              <div class="sidebar-nav-action">
-                <div class="sidebar-nav-action-icon">
-                  <%= coco_icon(action[:icon], size: :md) %>
-                </div>
-                <div class="sidebar-nav-action-detail">
-                  <h4 class="sidebar-nav-action-label">
-                    <%= action[:label] %>
-                  </h4>
-                  <% if action.key?(:description) %>
-                    <div class="sidebar-nav-action-description">
-                      <%= raw action[:description] %>
-                    </div>
-                  <% end %>
-                </div>
-              </div>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    </div>
-  <% end %>
-
-  <% items.each do |item| %>
-    <%= item %>
-  <% end %>
-<% end %>

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

@@ -1,28 +0,0 @@
-module Coco
-  module App
-    module Blocks
-      class SidebarNav < Coco::Component
-        renders_many :actions, ->(label, href, icon:, **kwargs) do
-          @actions_data << {label: label, href: href, icon: icon, **kwargs}
-        end
-
-        renders_many :items, ->(label, href, show_on_mobile: true, **kwargs, &block) do
-          tag.div class: ["nav-item", ("mobile-nav-item" if show_on_mobile)] do
-            render Coco::App::Blocks::SidebarNavItem.new(
-              label: label,
-              href: href,
-              active: helpers.current_page?(href),
-              **kwargs
-            ), &block
-          end
-        end
-
-        attr_reader :actions_data
-
-        def initialize(**)
-          @actions_data = []
-        end
-      end
-    end
-  end
-end