primer_view_components 0.0.110 → 0.0.112

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "erb_lint/utils/severity_levels"
+
+module ERBLint
+  module Linters
+    class SeveritySchema < LinterConfig
+      # SEVERITY_NAMES :info, :refactor, :convention, :warning, :error, :fatal
+      # see https://github.com/Shopify/erb-lint/blob/main/lib/erb_lint/utils/severity_levels.rb
+
+      property :severity, accepts: ERBLint::Utils::SeverityLevels::SEVERITY_NAMES, default: nil, reader: :severity
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 110
+      PATCH = 112
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -58,7 +58,7 @@ namespace :docs do
       Primer::Beta::Counter,
       Primer::Beta::Details,
       Primer::Alpha::Dialog,
-      Primer::Dropdown,
+      Primer::Alpha::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
       Primer::Beta::Heading,
@@ -70,7 +70,7 @@ namespace :docs do
       Primer::MenuComponent,
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
-      Primer::PopoverComponent,
+      Primer::Beta::Popover,
       Primer::Beta::ProgressBar,
       Primer::StateComponent,
       Primer::SpinnerComponent,
@@ -99,7 +99,7 @@ namespace :docs do
     ]
 
     js_components = [
-      Primer::Dropdown,
+      Primer::Alpha::Dropdown,
       Primer::LocalTime,
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,

data/previews/primer/alpha/banner_preview.rb

@@ -48,7 +48,7 @@ module Primer
       #
       # @!endgroup
 
-      # @label Dismissable 
+      # @label Dismissable
       def dismissable
         render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
       end

data/previews/primer/alpha/button_marketing_preview.rb

@@ -21,6 +21,42 @@ module Primer
       def default(tag: :button, type: :button, scheme: :default, variant: :default)
         render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
       end
+
+      # @!group Size Variants
+      #
+      # @label Default
+      def sizes_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Large
+      def sizes_large
+        render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" }
+      end
+      # @!endgroup
+
+      # @!group Schemes
+      #
+      # @label Default
+      def scheme_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Primary
+      def scheme_primary
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Outline
+      def scheme_outline
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" }
+      end
+
+      # @label Transparent
+      def scheme_transparent
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" }
+      end
+      # @!endgroup
     end
   end
 end

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/avatar_preview.rb

@@ -13,14 +13,70 @@ module Primer
         render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label As link
       #
-      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]
-      # @param shape [Symbol] select [circle, square]
       # @param href [String] text
-      def default(size: 24, shape: :circle, href: nil)
-        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
+      def as_link(href: "#")
+        render(Primer::Beta::Avatar.new(href: href, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @!group Sizes
+      #
+      # @label 16px
+      def size_16
+        render(Primer::Beta::Avatar.new(size: 16, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 20px
+      def size_20
+        render(Primer::Beta::Avatar.new(size: 20, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 24px
+      def size_24
+        render(Primer::Beta::Avatar.new(size: 24, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 32px
+      def size_32
+        render(Primer::Beta::Avatar.new(size: 32, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
+
+      # @label 40px
+      def size_40
+        render(Primer::Beta::Avatar.new(size: 40, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 48px
+      def size_48
+        render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 80px
+      def size_80
+        render(Primer::Beta::Avatar.new(size: 80, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
+
+      # @!group Shape
+      #
+      # @label Circle
+      def shape_circle
+        render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label Square
+      def shape_square
+        render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -19,23 +19,64 @@ module Primer
         end
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @!group Multiple avatars
       #
-      # @param number_of_avatars [Integer] number
-      # @param tag select [["div", div], ["span", span]]
-      # @param align select [["Left", left], ["Right", right]]
-      # @param tooltipped toggle
-      # @param tooltip_label text
-      def default(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
-        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |c|
-          Array.new(number_of_avatars || 1) do
-            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          end
+      # @label 1 avatar
+      def avatar_1
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
-      # @!group More Examples
+      # @label 2 avatars
+      def avatar_2
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
 
+      # @label 3 avatars
+      def avatar_3
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 4 avatars
+      def avatar_4
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 5 avatars
+      def avatar_5
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
       # @label Align right
       def align_right
         render(Primer::Beta::AvatarStack.new(align: :right)) do |c|
@@ -53,6 +94,7 @@ module Primer
           c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
+      #
       # @!endgroup
     end
   end

data/previews/primer/beta/blankslate_preview.rb

@@ -17,16 +17,40 @@ module Primer
       end
 
       # @label Default options
+      def default
+        render Primer::Beta::Blankslate.new do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @!group Options
       #
-      # @param narrow [Boolean] toggle
-      # @param spacious [Boolean] toggle
-      # @param border [Boolean] toggle
-      def default(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
+      # @label Narrow
+      def option_narrow
+        render Primer::Beta::Blankslate.new(narrow: true) do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @label Spacious
+      def option_spacious
+        render Primer::Beta::Blankslate.new(spacious: true) do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @label Border
+      def option_border
+        render Primer::Beta::Blankslate.new(border: true) do |c|
           c.heading(tag: :h2).with_content("Title")
           c.description { "Description" }
         end
       end
+      #
+      # @!endgroup
 
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle

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