primer_view_components 0.0.104 → 0.0.105

data/previews/primer/beta/details_preview.rb

@@ -4,6 +4,21 @@ module Primer
   module Beta
     # @label Details
     class DetailsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param overlay [Symbol] select [none, default, dark]
+      # @param reset [Boolean] toggle
+      def playground(reset: false, overlay: :default)
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
+          c.with_summary do
+            "Summary"
+          end
+          c.with_body do
+            "Body"
+          end
+        end
+      end
+
       # @label Default options
       #
       # @param overlay [Symbol] select [none, default, dark]

data/previews/primer/beta/flash_preview.rb

@@ -4,6 +4,18 @@ module Primer
   module Beta
     # @label Flash
     class FlashPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param spacious toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] select [alert, check, info, people]
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @param content text
+      def playground(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::Beta::Flash::DEFAULT_SCHEME, content: "This is a flash message!")
+        render(Primer::Beta::Flash.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content }
+      end
+
       # @label Default
       #
       # @param full toggle

data/previews/primer/beta/heading_preview.rb

@@ -4,6 +4,14 @@ module Primer
   module Beta
     # @label Heading
     class HeadingPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6]
+      # @param content [String] text
+      def playground(tag: :h2, content: "Heading")
+        render(Primer::Beta::Heading.new(tag: tag)) { content }
+      end
+
       # @label Default options
       #
       # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6]

data/previews/primer/beta/label_preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Label
+    class LabelPreview < ViewComponent::Preview
+      # @label Default Options
+      #
+      # @param size [Symbol] select [medium, large]
+      # @param tag [Symbol] select [span, summary, a, div]
+      # @param inline [Boolean] toggle
+      def default(size: :medium, tag: :span, inline: false)
+        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      end
+
+      # @label Playground
+      #
+      # @param size [Symbol] select [medium, large]
+      # @param tag [Symbol] select [span, summary, a, div]
+      # @param inline [Boolean] toggle
+      def playground(size: :medium, tag: :span, inline: false)
+        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      end
+    end
+  end
+end

data/previews/primer/beta/link_preview.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Link
+    class LinkPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param underline [Boolean]
+      # @param muted [Boolean]
+      # @param tag [Symbol] select [a, span]
+      # @param scheme [Symbol] select [default, primary, secondary]
+      def playground(tag: :a, scheme: :default, muted: false, underline: true)
+        render(Primer::Beta::Link.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      end
+
+      # @label Default Options
+      #
+      # @param underline [Boolean]
+      # @param muted [Boolean]
+      # @param tag [Symbol] select [a, span]
+      # @param scheme [Symbol] select [default, primary, secondary]
+      def default(tag: :a, scheme: :default, muted: false, underline: true)
+        render(Primer::Beta::Link.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      end
+
+      # @label With Tooltip
+      #
+      # @param underline [Boolean]
+      # @param muted [Boolean]
+      # @param tag [Symbol] select [a, span]
+      # @param scheme [Symbol] select [default, primary, secondary]
+      def tooltip(tag: :a, scheme: :default, muted: false, underline: true)
+        render(Primer::Beta::Link.new(href: "#", id: "tooltip-link", tag: tag, scheme: scheme, muted: muted, underline: underline)) do |component|
+          component.with_tooltip(text: "Tooltip text")
+          "Link with tooltip"
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/text_preview.rb

@@ -4,6 +4,14 @@ module Primer
   module Beta
     # @label Text
     class TextPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param tag [Symbol] select [div, p, span]
+      # @param content [String] text
+      def playground(tag: :span, content: "Text")
+        render(Primer::Beta::Text.new(tag: tag)) { content }
+      end
+
       # @label Default options
       #
       # @param tag [Symbol] select [div, p, span]

data/previews/primer/beta/truncate_preview.rb

@@ -4,6 +4,13 @@ module Primer
   module Beta
     # @label Truncate
     class TruncatePreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param text [String] text
+      def playground(text: "branch-name-that-is-really-long")
+        render(Primer::Beta::Truncate.new) { text }
+      end
+
       # @label Default options
       #
       # @param text [String] text

data/previews/primer/clipboard_copy_preview.rb

@@ -3,6 +3,14 @@
 module Primer
   # @label ClipboardCopy
   class ClipboardCopyPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param aria_label [String]
+    # @param value [String]
+    def playground(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+      render(Primer::ClipboardCopy.new(value: value, "aria-label": aria_label))
+    end
+
     # @label Default Options
     #
     # @param aria_label [String]

data/previews/primer/dropdown_preview.rb

@@ -3,6 +3,24 @@
 module Primer
   # @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::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 Options
     #
     # @param with_caret [Boolean] toggle

data/previews/primer/hellip_button_preview.rb

@@ -10,5 +10,13 @@ module Primer
     def default(inline: false, aria_label: "No effect")
       render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label))
     end
+
+    # @label Playground
+    #
+    # @param aria_label [String]
+    # @param inline [Boolean]
+    def playground(inline: false, aria_label: "No effect")
+      render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label))
+    end
   end
 end

data/previews/primer/layout_component_preview.rb

@@ -3,7 +3,19 @@
 module Primer
   # @label LayoutComponent
   class LayoutComponentPreview < ViewComponent::Preview
-    # @label Default Options
+    # @label Playground
+    #
+    # @param responsive [Boolean]
+    # @param side [Symbol] select [left, right]
+    # @param sidebar_col [Integer] select [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    def playground(responsive: false, side: :right, sidebar_col: 3)
+      render(Primer::LayoutComponent.new(responsive: responsive, side: side, sidebar_col: sidebar_col)) do |component|
+        component.with_main { "Main" }
+        component.with_sidebar { "Sidebar" }
+      end
+    end
+
+    # @label Default
     #
     # @param responsive [Boolean]
     # @param side [Symbol] select [left, right]

data/previews/primer/local_time_component_preview.rb

@@ -3,6 +3,19 @@
 module Primer
   # @label LocalTime
   class LocalTimeComponentPreview < ViewComponent::Preview
+    # @param datetime datetime-local
+    # @param weekday [Symbol] select [long, short]
+    # @param month [Symbol] select [long, short]
+    # @param year [Symbol] select [numeric, "2-digit"]
+    # @param day [Symbol] select [numeric, "2-digit"]
+    # @param hour [Symbol] select [numeric, "2-digit"]
+    # @param minute [Symbol] select [numeric, "2-digit"]
+    # @param second [Symbol] select [numeric, "2-digit"]
+    # @param time_zone_name [Symbol] select [long, short]
+    def playground(datetime: "2014-04-01T16:30:00-08:00", weekday: :short, month: :short, year: :numeric, day: :numeric, hour: :numeric, minute: :numeric, second: :numeric, time_zone_name: :short)
+      render(Primer::LocalTime.new(datetime: DateTime.parse(datetime), weekday: weekday, month: month, year: year, day: day, hour: hour, minute: minute, second: second, time_zone_name: time_zone_name))
+    end
+
     # @param datetime datetime-local
     # @param weekday [Symbol] select [long, short]
     # @param month [Symbol] select [long, short]