primer_view_components 0.0.111 → 0.0.112

data/previews/primer/alpha/dropdown_preview.rb

@@ -0,0 +1,210 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Dropdown
+    class DropdownPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param with_caret [Boolean] toggle
+      # @param overlay [Symbol] select [none, default, dark]
+      def playground(overlay: :default, with_caret: false)
+        render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c|
+          c.with_button { "Dropdown" }
+
+          c.with_menu(header: "Header") do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item(divider: true)
+            m.with_item { "Item 3" }
+            m.with_item { "Item 4" }
+          end
+        end
+      end
+
+      # @label Default
+      #
+      def default
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Menu
+      #
+      # @param as [Symbol] select [list, default]
+      # @param direction [Symbol] select [se, sw, w, e, ne, s]
+      # @param scheme [Symbol] select [default, dark]
+      def menu(as: :default, direction: :se, scheme: :default)
+        render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |m|
+          m.with_item { "Item 1" }
+          m.with_item { "Item 2" }
+          m.with_item(divider: true)
+          m.with_item { "Item 3" }
+          m.with_item { "Item 4" }
+        end
+      end
+
+      # @!group Direction
+      #
+      # @label Direction e
+      def direction_e
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :e) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction ne
+      def direction_ne
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :ne) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction s
+      def direction_s
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :s) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction se
+      def direction_se
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :se) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction sw
+      def direction_sw
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :sw) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction w
+      def direction_w
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :w) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Options
+      #
+      # @label With caret
+      def options_with_caret
+        render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label With header
+      def options_with_header
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(header: "Header") do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label With dividers
+      def options_with_dividers
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item(divider: true)
+            m.with_item { "Item 3" }
+            m.with_item { "Item 4" }
+            m.with_item(divider: true)
+            m.with_item { "Item 5" }
+          end
+        end
+      end
+
+      # @label As list
+      def options_as_list
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(as: :list) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Overlay none
+      def options_overlay_none
+        render(Primer::Alpha::Dropdown.new(overlay: :none)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Overlay dark
+      def options_overlay_dark
+        render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/tab_nav_preview.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TabNav
+    class TabNavPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_tabs [Integer] number
+      # @param with_icons [Boolean] toggle
+      # @param with_counters [Boolean] toggle
+      def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
+        render(Primer::Alpha::TabNav.new(label: "label")) do |c|
+          Array.new(number_of_tabs || 3) do |i|
+            c.with_tab(selected: i.zero?, href: "##{i + 1}") do |t|
+              t.icon(icon: :star) if with_icons
+              t.text { "Tab #{i + 1}" }
+              t.counter(count: 10) if with_counters
+            end
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::TabNav.new(label: "Default")) do |c|
+          c.with_tab(selected: true, href: "#") { "Tab 1" }
+          c.with_tab(href: "#") { "Tab 2" }
+          c.with_tab(href: "#") { "Tab 3" }
+        end
+      end
+
+      # @label With icons and counters
+      def with_icons_and_counters
+        render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |c|
+          c.with_tab(href: "#1", selected: true) do |t|
+            t.icon(icon: :star)
+            t.text { "Stars" }
+            t.counter(count: 10)
+          end
+          c.with_tab(href: "#2") do |t|
+            t.icon(icon: :heart)
+            t.text { "Sponsors" }
+            t.counter(count: 14)
+          end
+          c.with_tab(href: "#3") do |t|
+            t.icon(icon: :bookmark)
+            t.text { "Bookmarks" }
+            t.counter(count: 7)
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/border_box_preview.rb

@@ -6,9 +6,22 @@ module Primer
     class BorderBoxPreview < ViewComponent::Preview
       # @label Playground
       #
-      # @param padding [Symbol] select [default, condensed]
-      def playground(padding: :default)
+      # @param padding [Symbol] select [default, condensed, spacious]
+      # @param scheme [Symbol] select [default, neutral, info, warning]
+      def playground(padding: :default, scheme: :default)
         render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row one" }
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row two" }
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} row three" }
+          component.footer { "Footer" }
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::Beta::BorderBox.new) do |component|
           component.header { "Header" }
           component.body { "Body" }
           component.row { "Row one" }
@@ -18,11 +31,34 @@ module Primer
         end
       end
 
-      # @label Default options
+      # @label Header with title
+      def header_with_title
+        render(Primer::Beta::BorderBox.new) do |component|
+          component.with_header do |h|
+            h.title(tag: :h2) do
+              "Header with title"
+            end
+          end
+          component.body { "Body" }
+          component.footer { "Footer" }
+        end
+      end
+
+      # @label Row colors
+      def row_colors
+        render(Primer::Beta::BorderBox.new) do |component|
+          component.row(scheme: :default) { "Default" }
+          component.row(scheme: :neutral) { "Neutral" }
+          component.row(scheme: :info) { "Info" }
+          component.row(scheme: :warning) { "Warning" }
+        end
+      end
+
+      # @!group Padding
       #
-      # @param padding [Symbol] select [default, condensed]
-      def default(padding: :default)
-        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+      # @label Default
+      def padding_default
+        render(Primer::Beta::BorderBox.new) do |component|
           component.header { "Header" }
           component.body { "Body" }
           component.row { "Row one" }
@@ -32,15 +68,31 @@ module Primer
         end
       end
 
-      # @label Row schemes
-      #
-      # @param padding [Symbol] select [default, condensed]
-      # @param scheme [Symbol] select [default, neutral, info, warning]
-      def row_schemes(padding: :default, scheme: :default)
-        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
-          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} scheme" }
+      # @label Condensed
+      def padding_condensed
+        render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row { "Row one" }
+          component.row { "Row two" }
+          component.row { "Row three" }
+          component.footer { "Footer" }
         end
       end
+
+      # @label Spacious
+      def padding_spacious
+        render(Primer::Beta::BorderBox.new(padding: :spacious)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row { "Row one" }
+          component.row { "Row two" }
+          component.row { "Row three" }
+          component.footer { "Footer" }
+        end
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/link_preview.rb

@@ -36,6 +36,34 @@ module Primer
           "Link with tooltip"
         end
       end
+
+      # @!group Color Scheme
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Link.new(href: "#")) { "This is a default link color." }
+      end
+
+      # @label Primary
+      def color_scheme_primary
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "This is a primary link color." }
+      end
+
+      # @label Primary, Muted
+      def color_scheme_primary_muted
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary, muted: true)) { "This is a muted primary link color." }
+      end
+
+      # @label Secondary
+      def color_scheme_secondary
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "This is a secondary link color." }
+      end
+
+      # @label Secondary, Muted
+      def color_scheme_secondary_muted
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
+      end
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/popover_preview.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Popover
+    class PopoverPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
+      def playground(caret: :top)
+        render Primer::Beta::Popover.new do |component|
+          component.with_heading do
+            "Activity feed"
+          end
+          component.with_body(caret: caret) do
+            "This is the Popover body."
+          end
+        end
+      end
+
+      # @label Default
+      #
+      # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
+      def default(caret: :top)
+        render Primer::Beta::Popover.new do |component|
+          component.with_heading do
+            "Activity feed"
+          end
+          component.with_body(caret: caret) do
+            "This is the Popover body."
+          end
+        end
+      end
+
+      # @label Large
+      def large
+        render Primer::Beta::Popover.new do |component|
+          component.with_body(large: true) do
+            "This is a large Popover body."
+          end
+        end
+      end
+
+      # @!group Directions
+      def bottom_right
+        render Primer::Beta::Popover.new do |component|
+          component.with_body(caret: :bottom_right) do
+            "This is the Popover body."
+          end
+        end
+      end
+
+      def top_right
+        render Primer::Beta::Popover.new do |component|
+          component.with_body(caret: :top_right) do
+            "This is the Popover body."
+          end
+        end
+      end
+
+      def bottom_left
+        render Primer::Beta::Popover.new do |component|
+          component.with_body(caret: :bottom_left) do
+            "This is the Popover body."
+          end
+        end
+      end
+
+      def top_left
+        render Primer::Beta::Popover.new do |component|
+          component.with_body(caret: :top_left) do
+            "This is the Popover body."
+          end
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/static/arguments.json

@@ -355,6 +355,32 @@
       }
     ]
   },
+  {
+    "component": "Dropdown",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/default/",
+    "parameters": [
+      {
+        "name": "overlay",
+        "type": "Symbol",
+        "default": "`:default`",
+        "description": "One of `:dark`, `:default`, or `:none`."
+      },
+      {
+        "name": "with_caret",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not a caret should be rendered in the button."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "HiddenTextExpander",
     "status": "alpha",
@@ -1683,6 +1709,20 @@
       }
     ]
   },
+  {
+    "component": "Popover",
+    "status": "beta",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/popover.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/popover/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "ProgressBar",
     "status": "beta",
@@ -1845,32 +1885,6 @@
       }
     ]
   },
-  {
-    "component": "Dropdown",
-    "status": "alpha",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/dropdown/default/",
-    "parameters": [
-      {
-        "name": "overlay",
-        "type": "Symbol",
-        "default": "`:default`",
-        "description": "One of `:dark`, `:default`, or `:none`."
-      },
-      {
-        "name": "with_caret",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether or not a caret should be rendered in the button."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "DropdownMenu",
     "status": "deprecated",
@@ -2227,20 +2241,6 @@
       }
     ]
   },
-  {
-    "component": "Popover",
-    "status": "beta",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/popover_component.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/popover/default/",
-    "parameters": [
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "Spinner",
     "status": "beta",

data/static/audited_at.json

@@ -11,6 +11,9 @@
   "Primer::Alpha::Dialog::Body": "",
   "Primer::Alpha::Dialog::Footer": "",
   "Primer::Alpha::Dialog::Header": "",
+  "Primer::Alpha::Dropdown": "",
+  "Primer::Alpha::Dropdown::Menu": "",
+  "Primer::Alpha::Dropdown::Menu::Item": "",
   "Primer::Alpha::HiddenTextExpander": "",
   "Primer::Alpha::Image": "",
   "Primer::Alpha::ImageCrop": "",
@@ -50,6 +53,7 @@
   "Primer::Beta::IconButton": "",
   "Primer::Beta::Label": "",
   "Primer::Beta::Link": "",
+  "Primer::Beta::Popover": "",
   "Primer::Beta::ProgressBar": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
@@ -67,7 +71,6 @@
   "Primer::DropdownMenuComponent": "",
   "Primer::HellipButton": "",
   "Primer::IconButton": "",
-  "Primer::Image": "",
   "Primer::LabelComponent": "",
   "Primer::LayoutComponent": "",
   "Primer::LinkComponent": "",
@@ -78,7 +81,6 @@
   "Primer::OcticonComponent": "",
   "Primer::OcticonSymbolsComponent": "",
   "Primer::PopoverComponent": "",
-  "Primer::ProgressBarComponent": "",
   "Primer::SpinnerComponent": "",
   "Primer::StateComponent": "",
   "Primer::SubheadComponent": "",