openproject-primer_view_components 0.84.5 → 0.86.0

data/app/components/primer/open_project/sub_header_element.js

@@ -23,17 +23,17 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         }
     }
     expandFilterInput() {
-        for (const item of this.hiddenItemsOnExpandedFilter) {
-            item.classList.add('d-none');
-        }
         for (const item of this.shownItemsOnExpandedFilter) {
             item.classList.remove('d-none');
         }
+        for (const item of this.filterExpandButton) {
+            item.classList.add('d-none');
+        }
         this.classList.add('SubHeader--expandedSearch');
         this.filterInput.focus();
     }
     collapseFilterInput() {
-        for (const item of this.hiddenItemsOnExpandedFilter) {
+        for (const item of this.filterExpandButton) {
             item.classList.remove('d-none');
         }
         for (const item of this.shownItemsOnExpandedFilter) {
@@ -63,10 +63,10 @@ __decorate([
 ], SubHeaderElement.prototype, "filterInput", void 0);
 __decorate([
     targets
-], SubHeaderElement.prototype, "hiddenItemsOnExpandedFilter", void 0);
+], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
 __decorate([
     targets
-], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
+], SubHeaderElement.prototype, "filterExpandButton", void 0);
 SubHeaderElement = __decorate([
     controller
 ], SubHeaderElement);

data/app/components/primer/open_project/sub_header_element.ts

@@ -3,8 +3,8 @@ import {controller, target, targets} from '@github/catalyst'
 @controller
 class SubHeaderElement extends HTMLElement {
   @target filterInput: HTMLInputElement
-  @targets hiddenItemsOnExpandedFilter: HTMLElement[]
   @targets shownItemsOnExpandedFilter: HTMLElement[]
+  @targets filterExpandButton: HTMLElement[]
 
   connectedCallback() {
     this.setupFilterInputClearButton()
@@ -28,28 +28,23 @@ class SubHeaderElement extends HTMLElement {
   }
 
   expandFilterInput() {
-    for (const item of this.hiddenItemsOnExpandedFilter) {
-      item.classList.add('d-none')
-    }
-
     for (const item of this.shownItemsOnExpandedFilter) {
       item.classList.remove('d-none')
     }
-
+    for (const item of this.filterExpandButton) {
+      item.classList.add('d-none')
+    }
     this.classList.add('SubHeader--expandedSearch')
-
     this.filterInput.focus()
   }
 
   collapseFilterInput() {
-    for (const item of this.hiddenItemsOnExpandedFilter) {
+    for (const item of this.filterExpandButton) {
       item.classList.remove('d-none')
     }
-
     for (const item of this.shownItemsOnExpandedFilter) {
       item.classList.add('d-none')
     }
-
     this.classList.remove('SubHeader--expandedSearch')
   }
 

data/app/components/primer/primer.pcss

@@ -56,3 +56,4 @@
 @import "./open_project/border_box/collapsible_header.pcss";
 @import "./open_project/collapsible_section.pcss";
 @import "./open_project/pagination.pcss";
+@import "./open_project/filterable_tree_view.pcss";

data/app/controllers/primer/view_components/filterable_tree_view_items_controller.rb

@@ -0,0 +1,192 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class FilterableTreeViewItemsController < ApplicationController
+      # A node in the demo tree. Leaf nodes have no children.
+      TreeNode = Data.define(:id, :label, :children, :all_descendant_ids) do
+        def leaf?
+          children.nil? || children.empty?
+        end
+
+        # Returns a filtered copy of this node. Leaf nodes are included if they match the query.
+        # Sub-tree nodes are included if they match OR any descendant matches. The all_descendant_ids
+        # field always reflects the ORIGINAL (unfiltered) descendant set, so clients can use it to
+        # determine which nodes to select when "include sub-items" is active on a filtered tree.
+        def filter(query)
+          return self if query.empty?
+
+          if leaf?
+            matches?(query) ? self : nil
+          else
+            filtered_children = children.filter_map { |child| child.filter(query) }
+            if matches?(query) || !filtered_children.empty?
+              self.class.new(
+                id: id,
+                label: label,
+                children: filtered_children,
+                all_descendant_ids: all_descendant_ids
+              )
+            end
+          end
+        end
+
+        private
+
+        def matches?(query)
+          label.downcase.include?(query.downcase)
+        end
+      end
+
+      # Build a leaf node
+      def self.leaf(id:, label:)
+        TreeNode.new(id: id, label: label, children: [], all_descendant_ids: [])
+      end
+
+      # Build a branch node, computing all_descendant_ids automatically
+      def self.branch(id:, label:, children:)
+        all_ids = children.flat_map { |c| [c.id] + c.all_descendant_ids }
+        TreeNode.new(id: id, label: label, children: children, all_descendant_ids: all_ids)
+      end
+
+      TREE = [
+        branch(
+          id: "hogwarts",
+          label: "Hogwarts School of Witchcraft and Wizardry",
+          children: [
+            branch(
+              id: "hogwarts-students",
+              label: "Students",
+              children: [
+                branch(
+                  id: "gryffindor",
+                  label: "Gryffindor",
+                  children: [
+                    leaf(id: "harry-potter",       label: "Harry Potter"),
+                    leaf(id: "ron-weasley",         label: "Ron Weasley"),
+                    leaf(id: "hermione-granger",    label: "Hermione Granger"),
+                    leaf(id: "neville-longbottom",  label: "Neville Longbottom"),
+                    leaf(id: "ginny-weasley",       label: "Ginny Weasley")
+                  ]
+                ),
+                branch(
+                  id: "slytherin",
+                  label: "Slytherin",
+                  children: [
+                    leaf(id: "draco-malfoy",    label: "Draco Malfoy"),
+                    leaf(id: "pansy-parkinson", label: "Pansy Parkinson"),
+                    leaf(id: "blaise-zabini",   label: "Blaise Zabini")
+                  ]
+                ),
+                branch(
+                  id: "ravenclaw",
+                  label: "Ravenclaw",
+                  children: [
+                    leaf(id: "luna-lovegood", label: "Luna Lovegood"),
+                    leaf(id: "cho-chang",     label: "Cho Chang"),
+                    leaf(id: "terry-boot",    label: "Terry Boot")
+                  ]
+                ),
+                branch(
+                  id: "hufflepuff",
+                  label: "Hufflepuff",
+                  children: [
+                    leaf(id: "cedric-diggory", label: "Cedric Diggory"),
+                    leaf(id: "susan-bones",    label: "Susan Bones"),
+                    leaf(id: "hannah-abbott",  label: "Hannah Abbott")
+                  ]
+                )
+              ]
+            ),
+            branch(
+              id: "hogwarts-teachers",
+              label: "Teachers",
+              children: [
+                leaf(id: "albus-dumbledore",  label: "Albus Dumbledore"),
+                leaf(id: "minerva-mcgonagall", label: "Minerva McGonagall"),
+                leaf(id: "severus-snape",     label: "Severus Snape"),
+                leaf(id: "rubeus-hagrid",     label: "Rubeus Hagrid"),
+                leaf(id: "remus-lupin",       label: "Remus Lupin"),
+                leaf(id: "sybill-trelawney",  label: "Sybill Trelawney")
+              ]
+            )
+          ]
+        ),
+        branch(
+          id: "beauxbatons",
+          label: "Beauxbatons Academy of Magic",
+          children: [
+            branch(
+              id: "beauxbatons-students",
+              label: "Students",
+              children: [
+                leaf(id: "fleur-delacour",    label: "Fleur Delacour"),
+                leaf(id: "gabrielle-delacour", label: "Gabrielle Delacour"),
+                leaf(id: "cecile-fontaine",   label: "Cécile Fontaine")
+              ]
+            ),
+            branch(
+              id: "beauxbatons-teachers",
+              label: "Teachers",
+              children: [
+                leaf(id: "olympe-maxime",   label: "Olympe Maxime"),
+                leaf(id: "sylvie-beaumont", label: "Sylvie Beaumont")
+              ]
+            )
+          ]
+        ),
+        branch(
+          id: "durmstrang",
+          label: "Durmstrang Institute",
+          children: [
+            branch(
+              id: "durmstrang-students",
+              label: "Students",
+              children: [
+                leaf(id: "viktor-krum",      label: "Viktor Krum"),
+                leaf(id: "dmitri-poliakoff", label: "Dmitri Poliakoff"),
+                leaf(id: "gregor-tarasov",   label: "Gregor Tarasov")
+              ]
+            ),
+            branch(
+              id: "durmstrang-teachers",
+              label: "Teachers",
+              children: [
+                leaf(id: "igor-karkaroff", label: "Igor Karkaroff"),
+                leaf(id: "fyodor-dolohov", label: "Fyodor Dolohov")
+              ]
+            )
+          ]
+        )
+      ].freeze
+
+      def index
+        query = params[:query].to_s.strip
+        select_variant = (params[:select_variant].presence || "multiple").to_sym
+        nodes = TREE.filter_map { |node| node.filter(query) }
+
+        render locals: {
+          nodes: nodes,
+          query: query,
+          select_variant: select_variant
+        }
+      end
+
+      def async_form_tree
+        query = params[:query].to_s.strip
+        name = params[:name].to_s.presence || "characters"
+        nodes = TREE.filter_map { |node| node.filter(query) }
+        builder = ActionView::Helpers::FormBuilder.new("", nil, view_context, {})
+
+        render locals: {
+          nodes: nodes,
+          query: query,
+          name: name,
+          builder: builder
+        }
+      end
+    end
+  end
+end

data/app/views/primer/view_components/filterable_tree_view_items/_node.html.erb

@@ -0,0 +1,38 @@
+<% if node.leaf? %>
+  <% component.with_leaf(
+    label: node.label,
+    select_variant: select_variant,
+    data: { node_id: node.id }
+  ) %>
+<% else %>
+  <%
+    # At the top-level TreeView we must explicitly provide sub_tree_component_klass and
+    # select_strategy. At nested levels, FilterableTreeView::SubTree#with_sub_tree already
+    # passes both via super and would raise "keyword argument duplicated" if we passed them again.
+    sub_tree_opts = {}
+    if component.is_a?(Primer::Alpha::TreeView)
+      sub_tree_opts[:sub_tree_component_klass] = Primer::OpenProject::FilterableTreeView::SubTree
+      sub_tree_opts[:select_strategy] = :self
+    end
+
+    # When a filter query is active, every sub-tree in the result is either a match or an ancestor
+    # of a match – either way it should be expanded so the user sees the results immediately.
+    sub_tree_opts[:expanded] = true if query.present?
+
+    hierarchy_only = query.present? && !node.label.downcase.include?(query.downcase)
+  %>
+  <% component.with_sub_tree(
+    label: node.label,
+    select_variant: select_variant,
+    **sub_tree_opts,
+    data: {
+      node_id: node.id,
+      hierarchy_only: (hierarchy_only ? true : nil)
+    }
+  ) do |sub| %>
+    <% node.children.each do |child| %>
+      <%= render partial: "primer/view_components/filterable_tree_view_items/node",
+                 locals: { component: sub, node: child, query: query, select_variant: select_variant } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/primer/view_components/filterable_tree_view_items/async_form_tree.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::TreeView.new(
+  data: { target: "filterable-tree-view.treeViewList" },
+  form_arguments: { builder: builder, name: name }
+)) do |tree| %>
+  <% nodes.each do |node| %>
+    <%= render partial: "primer/view_components/filterable_tree_view_items/node",
+               locals: { component: tree, node: node, query: query, select_variant: :multiple } %>
+  <% end %>
+<% end %>

data/app/views/primer/view_components/filterable_tree_view_items/index.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Alpha::TreeView.new(data: { target: "filterable-tree-view.treeViewList" })) do |tree| %>
+  <% nodes.each do |node| %>
+    <%= render partial: "primer/view_components/filterable_tree_view_items/node",
+               locals: { component: tree, node: node, query: query, select_variant: select_variant } %>
+  <% end %>
+<% end %>

data/config/routes.rb

@@ -12,6 +12,10 @@ Primer::ViewComponents::Engine.routes.draw do
   resources :tree_view_items, only: [:index]
   get "/tree_view_items/async_alpha", to: "tree_view_items#async_alpha", as: :tree_view_items_async_alpha
 
+  resources :filterable_tree_view_items, only: [:index]
+  get "/filterable_tree_view_items/tree", to: "filterable_tree_view_items#index", as: :filterable_tree_view_items_tree
+  get "/filterable_tree_view_items/async_form_tree", to: "filterable_tree_view_items#async_form_tree", as: :filterable_tree_view_items_async_form_tree
+
   # generic form submission path
   post "/form_handler", to: "form_handler#form_action", as: :generic_form_submission
 

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 84
-      PATCH = 5
+      MINOR = 86
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/select_panel_preview.rb

@@ -54,7 +54,6 @@ module Primer
 
       # @label Default
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def default(open_on_load: false, show_filter: true)
@@ -66,7 +65,6 @@ module Primer
 
       # @label Local fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def local_fetch(open_on_load: false, show_filter: true)
@@ -75,7 +73,6 @@ module Primer
 
       # @label Eventually local fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def eventually_local_fetch(open_on_load: false, show_filter: true)
@@ -84,7 +81,6 @@ module Primer
 
       # @label Remote fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def remote_fetch(open_on_load: false, selected_items: "Phaser")
@@ -93,7 +89,6 @@ module Primer
 
       # @label Custom loading label
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def custom_loading_label(open_on_load: false, selected_items: "Phaser")
@@ -102,7 +97,6 @@ module Primer
 
       # @label Custom loading description
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def custom_loading_description(open_on_load: false, selected_items: "Phaser")
@@ -111,7 +105,6 @@ module Primer
 
       # @label Local fetch (no results)
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def local_fetch_no_results(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -119,7 +112,6 @@ module Primer
 
       # @label Eventually local fetch (no results)
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def eventually_local_fetch_no_results(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -127,7 +119,6 @@ module Primer
 
       # @label Remote fetch (no results)
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def remote_fetch_no_results(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -135,7 +126,6 @@ module Primer
 
       # @label Single select
       #
-      # @snapshot interactive
       # @param dynamic_label toggle
       # @param open_on_load toggle
       def single_select(dynamic_label: false, open_on_load: false)
@@ -144,7 +134,6 @@ module Primer
 
       # @label Multiselect
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def multiselect(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -154,7 +143,6 @@ module Primer
 
       # @label With dynamic label
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_dynamic_label(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -162,7 +150,6 @@ module Primer
 
       # @label With dynamic label and aria prefix
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_dynamic_label_and_aria_prefix(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -172,7 +159,6 @@ module Primer
 
       # @label Footer buttons
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def footer_buttons(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -180,7 +166,6 @@ module Primer
 
       # @label With avatar items
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_avatar_items(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -188,7 +173,6 @@ module Primer
 
       # @label SelectPanel with Primer::IconButton
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def select_panel_with_icon_button(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -198,7 +182,6 @@ module Primer
 
       # @label With leading icons
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_leading_icons(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -206,7 +189,6 @@ module Primer
 
       # @label With trailing icons
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_trailing_icons(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -216,7 +198,6 @@ module Primer
 
       # @label With subtitle
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def with_subtitle(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -224,7 +205,6 @@ module Primer
 
       # @label Remote fetch initial failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def remote_fetch_initial_failure(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -232,7 +212,6 @@ module Primer
 
       # @label Remote fetch filter failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param banner_scheme [Symbol] select [danger, warning]
       # @param show_results toggle
@@ -253,7 +232,6 @@ module Primer
 
       # @label Eventually local fetch initial failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def eventually_local_fetch_initial_failure(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -261,7 +239,6 @@ module Primer
 
       # @label Single-select form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def single_select_form(open_on_load: false, route_format: :html)
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
@@ -269,7 +246,6 @@ module Primer
 
       # @label Remote fetch form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def remote_fetch_form(open_on_load: false, selected_items: "Phaser",  route_format: :html)
@@ -278,7 +254,6 @@ module Primer
 
       # @label Multi-select form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def multiselect_form(open_on_load: false, route_format: :html)
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
@@ -286,7 +261,6 @@ module Primer
 
       # @label List of links
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def list_of_links(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -294,7 +268,6 @@ module Primer
 
       # @label No values
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def no_values(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })

data/previews/primer/alpha/text_area_preview.rb

@@ -107,7 +107,6 @@ module Primer
       end
 
       # @label With character limit, over limit
-      # @snapshot interactive
       def with_character_limit_over_limit
         render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-over-limit", name: "my-text-area-with-character-limit-over-limit", character_limit: 10, label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end

data/previews/primer/alpha/text_field_preview.rb

@@ -236,7 +236,6 @@ module Primer
       end
 
       # @label With character limit, over limit
-      # @snapshot interactive
       def with_character_limit_over_limit
         render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-19", label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end

data/previews/primer/alpha/tree_view_preview/leaf_node_playground.html.erb

@@ -11,5 +11,9 @@
     <% if leading_action_icon && leading_action_icon != :none %>
       <% node.with_leading_action_button(icon: leading_action_icon, aria: { label: "Leading action icon" }) %>
     <% end %>
+
+    <% if trailing_action_icon && trailing_action_icon != :none %>
+      <% node.with_trailing_action_button(icon: trailing_action_icon, aria: { label: "Trailing action icon" }) %>
+    <% end %>
   <% end %>
 <% end %>

data/previews/primer/alpha/tree_view_preview.rb

@@ -126,6 +126,7 @@ module Primer
       # @param leading_visual_icon [Symbol] octicon
       # @param leading_action_icon [Symbol] octicon
       # @param trailing_visual_icon [Symbol] octicon
+      # @param trailing_action_icon [Symbol] octicon
       # @param select_variant [Symbol] select [multiple, single, none]
       # @param disabled [Boolean] toggle
       def leaf_node_playground(
@@ -133,6 +134,7 @@ module Primer
         leading_visual_icon: nil,
         leading_action_icon: nil,
         trailing_visual_icon: nil,
+        trailing_action_icon: nil,
         select_variant: Primer::Alpha::TreeView::Node::DEFAULT_SELECT_VARIANT,
         disabled: false
       )
@@ -141,6 +143,7 @@ module Primer
           leading_visual_icon: leading_visual_icon,
           leading_action_icon: leading_action_icon,
           trailing_visual_icon: trailing_visual_icon,
+          trailing_action_icon: trailing_action_icon,
           select_variant: select_variant.to_sym,
           disabled: disabled
         })

data/previews/primer/open_project/filterable_tree_view_preview/async.html.erb

@@ -0,0 +1,3 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(
+  src: primer_view_components.filterable_tree_view_items_tree_path(select_variant: select_variant)
+)) %>

data/previews/primer/open_project/filterable_tree_view_preview/async_form_input.html.erb

@@ -0,0 +1,9 @@
+<%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::OpenProject::FilterableTreeView.new(
+      src: primer_view_components.filterable_tree_view_items_async_form_tree_path(name: "characters"),
+      form_arguments: { builder: f, name: "characters" }
+    )) %>
+    <%= render(Primer::Alpha::SubmitButton.new(name: :submit, scheme: :primary, label: "Submit")) %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/filterable_tree_view_preview/link_nodes.html.erb

@@ -0,0 +1,18 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(
+  tree_view_arguments: { node_variant: :anchor },
+  filter_mode_control_arguments: { hidden: true }
+)) do |tree| %>
+  <% tree.with_sub_tree(label: "Cloud Services", select_variant: :none, expanded: expanded, href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "_blank") do |cloud| %>
+    <% cloud.with_leaf(label: "OpenProject", select_variant: :none, href: "https://www.openproject.org", target: "_blank") do |node| %>
+      <% node.with_trailing_visual_icon(icon: :"link-external") %>
+    <% end %>
+
+    <% cloud.with_leaf(label: "Hetzner", select_variant: :none, href: "https://www.hetzner.com", target: "_blank") do |node| %>
+      <% node.with_trailing_visual_icon(icon: :"link-external") %>
+    <% end %>
+  <% end %>
+
+  <% tree.with_leaf(label: "GitHub", select_variant: :none, href: "https://github.com", target: "_blank") do |node| %>
+    <% node.with_trailing_visual_icon(icon: :"link-external") %>
+  <% end %>
+<% end %>