primer_view_components 0.0.123 → 0.1.1

data/lib/primer/deprecations.yml

@@ -26,6 +26,10 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::IconButton"
 
+  - component: "Primer::Navigation::TabComponent"
+    autocorrect: true
+    replacement: "Primer::Alpha::Navigation::Tab"
+
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"

data/lib/primer/view_components/linters/base_linter.rb

@@ -40,7 +40,7 @@ module ERBLint
 
         tags.each do |tag|
           next if tag.closing?
-          next unless self.class::TAGS&.include?(tag.name)
+          next if self.class::TAGS&.none?(tag.name)
 
           classes = tag.attributes["class"]&.value&.split(" ") || []
           tag_tree[tag][:offense] = false

data/lib/primer/view_components/linters/disallow_component_css_counter.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "base_linter"
+
+# Load all the other linters so we can filter out their restricted
+# CLASSES—they will be responsible for complaining about the use of
+# those HTML classes.
+Dir[File.join(__dir__, "*.rb")].sort.each do |file|
+  require file unless file == __FILE__
+end
+
+module ERBLint
+  module Linters
+    # Counts the number of times a class reserved for ViewComponents is used
+    class DisallowComponentCssCounter < BaseLinter
+      CLASSES = (
+        JSON.parse(
+          File.read(
+            File.join(__dir__, "..", "..", "..", "..", "static", "classes.json")
+          )
+        ) - BaseLinter.subclasses.reduce([]) do |html_classes, klass|
+          html_classes.concat(klass.const_get(:CLASSES))
+        end
+      ).freeze
+
+      TAGS = nil
+      MESSAGE = "Primer ViewComponents defines some HTML classes with associated styles that should not be used outside those components. (These classes might have their styles changed or even disappear in the future.) Instead of using this class directly, please use its component if appropriate or define the styles you need some other way."
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -45,6 +45,7 @@ module Primer
         Primer::Beta::Markdown => {},
         Primer::Alpha::Menu => {},
         Primer::Navigation::TabComponent => {},
+        Primer::Alpha::Navigation::Tab => {},
         Primer::Beta::Octicon => {},
         Primer::Beta::Popover => {},
         Primer::Beta::ProgressBar => {},
@@ -63,11 +64,12 @@ module Primer
         Primer::Alpha::TabPanels => { js: true },
         Primer::Alpha::Tooltip => { js: true },
         Primer::Alpha::ToggleSwitch => { js: true },
+        Primer::Alpha::Overlay => { js: true },
 
         # Examples can be seen in the NavList docs
         Primer::Alpha::NavList => { js: true },
         Primer::Alpha::NavList::Item => { js: true, examples: false },
-        Primer::Alpha::NavList::Section => { js: true, examples: false },
+        Primer::Alpha::NavList::Group => { js: true, examples: false },
 
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own

data/lib/tasks/docs.rake

@@ -64,7 +64,7 @@ namespace :docs do
 
     if components_needing_docs.any?
       puts
-      puts "The following components needs docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
+      puts "The following components need docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
     end
   end
 

data/previews/primer/alpha/action_list_preview.rb

@@ -17,8 +17,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Item one", href: "/") do |item|
@@ -46,8 +45,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Item one", href: "/") do |item|
@@ -75,8 +73,7 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  role: role,
                  scheme: scheme,
-                 show_dividers: show_dividers,
-                 aria: { label: "Action List" }
+                 show_dividers: show_dividers
                )) do |component|
           component.with_heading(title: "Action List")
           component.with_item(label: "Leading SVG visual", href: "/") do |item|
@@ -113,14 +110,9 @@ module Primer
         list_id: "unique-id",
         subtitle: "This is a subtitle"
       )
-        render_with_template(
-          locals: {
-            scheme: scheme,
-            title: title,
-            list_id: list_id,
-            subtitle: subtitle
-          }
-        )
+        render(Primer::Alpha::ActionList::Heading.new(
+          scheme: scheme, list_id: list_id, title: title, subtitle: subtitle
+        ))
       end
 
       # @label Item [playground]

data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::NavList.new) do |list| %>
+  <% list.with_group do |group| %>
+    <%= group.with_heading(title: "Shopping list") %>
+    <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
+      <%= item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+    <% end %>
+    <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script type="text/javascript" data-eval="true">
+  const breadButton = document.querySelector("[name=bread_button]")
+  breadButton.addEventListener("click", () => alert("You selected bread."))
+
+  const cheeseButton = document.querySelector("[name=cheese_button]")
+  cheeseButton.addEventListener("click", () => alert("You selected cheese."))
+</script>

data/previews/primer/alpha/nav_list_preview.rb

@@ -7,22 +7,22 @@ module Primer
       # @label Playground
       def playground
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_section(aria: { label: "Repository settings" }) do |section|
-            section.with_heading(title: "Repository settings")
+          list.with_group do |group|
+            group.with_heading(title: "Repository settings")
 
-            section.with_item(label: "General", href: "/general") do |item|
+            group.with_item(label: "General", href: "/general") do |item|
               item.with_leading_visual_icon(icon: :gear)
             end
           end
 
-          list.with_section(aria: { label: "Access" }) do |section|
-            section.with_heading(title: "Access")
+          list.with_group do |group|
+            group.with_heading(title: "Access")
 
-            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+            group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
               item.with_leading_visual_icon(icon: :people)
             end
 
-            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+            group.with_item(label: "Moderation options") do |item|
               item.with_leading_visual_icon(icon: :"comment-discussion")
 
               item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
@@ -36,22 +36,22 @@ module Primer
       # @label Default
       def default
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_section(aria: { label: "Repository settings" }) do |section|
-            section.with_heading(title: "Repository settings")
+          list.with_group do |group|
+            group.with_heading(title: "Repository settings")
 
-            section.with_item(label: "General", href: "/general") do |item|
+            group.with_item(label: "General", href: "/general") do |item|
               item.with_leading_visual_icon(icon: :gear)
             end
           end
 
-          list.with_section(aria: { label: "Access" }) do |section|
-            section.with_heading(title: "Access")
+          list.with_group do |group|
+            group.with_heading(title: "Access")
 
-            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+            group.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
               item.with_leading_visual_icon(icon: :people)
             end
 
-            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+            group.with_item(label: "Moderation options") do |item|
               item.with_leading_visual_icon(icon: :"comment-discussion")
 
               item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
@@ -65,28 +65,17 @@ module Primer
       # @label Show more item
       def show_more_item
         render(Primer::Alpha::NavList.new) do |list|
-          list.with_section(aria: { label: "List of foods" }) do |section|
-            section.with_heading(title: "My favorite foods")
-            section.with_item(label: "Popplers", href: "/foods/popplers")
-            section.with_item(label: "Slurm", href: "/foods/slurm")
-            section.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
+          list.with_group do |group|
+            group.with_heading(title: "My favorite foods")
+            group.with_item(label: "Popplers", href: "/foods/popplers")
+            group.with_item(label: "Slurm", href: "/foods/slurm")
+            group.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
           end
         end
       end
 
       # @label Trailing action
       def trailing_action
-        render(Primer::Alpha::NavList.new) do |list|
-          list.with_section(aria: { label: "List of items to buy" }) do |section|
-            section.with_heading(title: "Shopping list")
-            section.with_item(label: "Bread", href: "/list/1") do |item|
-              item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Button tooltip" })
-            end
-            section.with_item(label: "Cheese", href: "/list/2") do |item|
-              item.with_trailing_action(icon: :plus, aria: { label: "Button tooltip" })
-            end
-          end
-        end
       end
     end
   end

data/previews/primer/alpha/overlay_preview/middle_of_page.html.erb

@@ -0,0 +1,17 @@
+<div style="width:100%; height: 400px; display: flex; justify-content: center; align-items: center;">
+  <%= render(Primer::Alpha::Overlay.new(
+    title: title,
+    subtitle: subtitle,
+    role: role,
+    size: size,
+    placement: placement,
+    anchor_align: anchor_align,
+    anchor_side: anchor_side,
+    allow_out_of_bounds: allow_out_of_bounds,
+    visually_hide_title: visually_hide_title,
+  )) do |d| %>
+    <% d.with_header(title: title, size: header_size) %>
+    <% d.with_show_button { button_text } %>
+    <% d.with_body { body_text } %>
+  <% end %>
+</div>

data/previews/primer/alpha/overlay_preview.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Overlay
+    class OverlayPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_offset [Symbol] select [normal, spacious]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      # @param icon [Symbol] octicon
+      def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "", icon: :none)
+        render(Primer::Alpha::Overlay.new(
+                 title: title,
+                 subtitle: subtitle,
+                 role: role,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_offset: anchor_offset,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds,
+                 visually_hide_title: visually_hide_title,
+               )) do |d|
+          d.with_header(title: title, size: header_size)
+          if icon.present? and icon != :none
+            d.with_show_button(icon: icon, "aria-label": icon.to_s)
+          else
+            d.with_show_button { button_text }
+          end
+          d.with_body { body_text }
+        end
+      end
+
+      # @label Default
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def default(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render(Primer::Alpha::Overlay.new(
+                 title: title,
+                 subtitle: subtitle,
+                 role: role,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds,
+                 visually_hide_title: visually_hide_title,
+               )) do |d|
+          d.with_header(title: title, size: header_size)
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
+      # @label Middle Of Page
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def middle_of_page(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, placement: :anchored, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               role: role,
+                               size: size,
+                               placement: placement,
+                               anchor_align: anchor_align,
+                               anchor_side: anchor_side,
+                               allow_out_of_bounds: allow_out_of_bounds,
+                               visually_hide_title: visually_hide_title,
+                               header_size: header_size,
+                               button_text: button_text,
+                               body_text: body_text
+                             })
+      end
+    end
+  end
+end

data/previews/primer/alpha/tab_nav_preview/with_extra.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
+  <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+  <% component.with_tab(href: "#") { "Tab 2" } %>
+  <% component.with_tab(href: "#") { "Tab 3" } %>
+  <% component.with_extra(align: align) do %>
+    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tab_nav_preview.rb

@@ -50,6 +50,11 @@ module Primer
           end
         end
       end
+
+      # @param align [Symbol] select [left, right]
+      def with_extra(align: :right)
+        render_with_template(locals: { align: align })
+      end
     end
   end
 end

data/previews/primer/alpha/tab_panels_preview/with_extra.html.erb

@@ -0,0 +1,17 @@
+<%= render(Primer::Alpha::TabPanels.new(label: "label")) do |component| %>
+  <% component.with_tab(selected: true, id: "tab-1") do |tab| %>
+    <% tab.with_panel { "Panel 1" } %>
+    <% tab.with_text { "Tab 1" } %>
+  <% end %>
+  <% component.with_tab(id: "tab-2") do |tab| %>
+    <% tab.with_panel { "Panel 2" } %>
+    <% tab.with_text { "Tab 2" } %>
+  <% end %>
+  <% component.with_tab(id: "tab-3") do |tab| %>
+    <% tab.with_panel { "Panel 3" } %>
+    <% tab.with_text { "Tab 3" } %>
+  <% end %>
+  <% component.with_extra(align: align) do %>
+    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tab_panels_preview.rb

@@ -33,6 +33,11 @@ module Primer
           end
         end
       end
+
+      # @param align [Symbol] select [left, right]
+      def with_extra(align: :right)
+        render_with_template(locals: { align: align })
+      end
     end
   end
 end