primer_view_components 0.0.111 → 0.0.113

data/previews/primer/alpha/text_field_preview.rb

@@ -63,62 +63,87 @@ module Primer
       end
 
       # @label Default
+      def default
+        render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field"))
+      end
+
+      # @!group Sizes
       #
-      # @param name text
-      # @param id text
-      # @param label text
-      # @param visually_hide_label toggle
-      # @param size [Symbol] select [small, medium, large]
-      # @param show_clear_button toggle
-      # @param clear_button_id text
-      # @param full_width toggle
-      # @param disabled toggle
-      # @param invalid toggle
-      # @param placeholder text
-      # @param inset toggle
-      # @param monospace toggle
-      # @param leading_visual_icon text
-      def default(
-        name: "my-text-field",
-        id: "my-text-field",
-        label: "My text field",
-        visually_hide_label: false,
-        size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
-        show_clear_button: false,
-        clear_button_id: "my-text-field-clear-button",
-        full_width: false,
-        disabled: false,
-        invalid: false,
-        placeholder: nil,
-        inset: false,
-        monospace: false,
-        leading_visual_icon: nil
-      )
-        system_arguments = {
-          name: name,
-          id: id,
-          label: label,
-          visually_hide_label: visually_hide_label,
-          size: size,
-          show_clear_button: show_clear_button,
-          clear_button_id: clear_button_id,
-          full_width: full_width,
-          disabled: disabled,
-          invalid: invalid,
-          placeholder: placeholder,
-          inset: inset,
-          monospace: monospace
-        }
+      # @label Small
+      def size_small
+        render(Primer::Alpha::TextField.new(size: :small, visually_hide_label: true, name: "my-text-field", label: "My text field"))
+      end
 
-        if leading_visual_icon
-          system_arguments[:leading_visual] = {
-            icon: leading_visual_icon,
-            size: :small
-          }
-        end
+      # @label Medium
+      def size_medium
+        render(Primer::Alpha::TextField.new(size: :medium, visually_hide_label: true, name: "my-text-field", label: "My text field"))
+      end
 
-        render(Primer::Alpha::TextField.new(**system_arguments))
+      # @label Large
+      def size_large
+        render(Primer::Alpha::TextField.new(size: :large, visually_hide_label: true, name: "my-text-field", label: "My text field"))
+      end
+      #
+      # @!endgroup
+
+      # @!group Options
+      #
+      # @label With caption
+      def with_caption
+        render(Primer::Alpha::TextField.new(caption: "With a caption", name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Visually hidden label
+      def visually_hide_label
+        render(Primer::Alpha::TextField.new(visually_hide_label: true, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Show clear button
+      def show_clear_button
+        render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::TextField.new(full_width: true, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Disabled
+      def disabled
+        render(Primer::Alpha::TextField.new(disabled: true, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::TextField.new(invalid: true, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With placeholder
+      def with_placeholder
+        render(Primer::Alpha::TextField.new(placeholder: "with a placeholder", name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Inset
+      def inset
+        render(Primer::Alpha::TextField.new(inset: true, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label Monospace
+      def monospace
+        render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field", label: "My text field"))
       end
+
+      # @label With leading visual
+      def with_leading_visual
+        render(Primer::Alpha::TextField.new(leading_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
+      end
+
+      # @label With validation message
+      def with_validation_message
+        render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field", label: "My text field"))
+      end
+      #
+      # @!endgroup
     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/clipboard_copy_preview/element.html.erb

@@ -0,0 +1,2 @@
+<%= render(Primer::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": aria_label)) %>
+<div id="blob-path">src/index.js</div>

data/previews/primer/beta/clipboard_copy_preview.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @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::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
+      end
+
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      def default(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+        render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
+      end
+
+      # @label With text instead of icons
+      #
+      # @param aria_label [String]
+      # @param value [String]
+      def text(value: "Text to copy", aria_label: "Copy text to the system clipboard")
+        render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label)) { "Click to copy!" }
+      end
+
+      # @label Copying from an element
+      #
+      # @param aria_label [String]
+      def element(aria_label: "Copy text to the system clipboard")
+        render_with_template(locals: { aria_label: aria_label })
+      end
+    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/previews/primer/beta/relative_time_preview.rb

@@ -0,0 +1,271 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module Beta
+    # @label RelativeTime
+    class RelativeTimePreview < ViewComponent::Preview
+      # @label Playground
+      # @param datetime datetime-local
+      # @param tense [Symbol] select [~, auto, past, future]
+      # @param prefix [String] text
+      # @param second [Symbol] select [~, numeric, two_digit]
+      # @param minute [Symbol] select [~, numeric, two_digit]
+      # @param hour [Symbol] select [~, numeric, two_digit]
+      # @param weekday [Symbol] select [~, long, short, narrow]
+      # @param day [Symbol] select [~, numeric, two_digit]
+      # @param month [Symbol] select [~, numeric, two_digit, short, long, narrow]
+      # @param year [Symbol] select [~, numeric, two_digit]
+      # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic]
+      # @param precision [Symbol] select [~, second, minute, hour, day, month, year]
+      # @param format [Symbol] select [~, auto, micro, elapsed]
+      # @param lang [String] text
+      # @param title [String] text
+      def playground(
+        tense: nil,
+        prefix: nil,
+        second: nil,
+        minute: nil,
+        hour: nil,
+        weekday: nil,
+        day: nil,
+        month: nil,
+        year: nil,
+        time_zone_name: nil,
+        threshold: nil,
+        precision: nil,
+        format: nil,
+        datetime: Time.utc(2020, 1, 1, 0, 0, 0),
+        lang: nil,
+        title: nil
+      )
+        render(Primer::Beta::RelativeTime.new(
+                 tense: tense,
+                 prefix: prefix,
+                 second: second,
+                 minute: minute,
+                 hour: hour,
+                 weekday: weekday,
+                 day: day,
+                 month: month,
+                 year: year,
+                 time_zone_name: time_zone_name,
+                 threshold: threshold,
+                 precision: precision,
+                 format: format,
+                 datetime: datetime,
+                 lang: lang,
+                 title: title
+               ))
+      end
+
+      # @label Default
+      # @param datetime datetime-local
+      # @param tense [Symbol] select [~, auto, past, future]
+      # @param prefix [String] text
+      # @param second [Symbol] select [~, numeric, two_digit]
+      # @param minute [Symbol] select [~, numeric, two_digit]
+      # @param hour [Symbol] select [~, numeric, two_digit]
+      # @param weekday [Symbol] select [~, long, short, narrow]
+      # @param day [Symbol] select [~, numeric, two_digit]
+      # @param month [Symbol] select [~, numeric, two_digit, short, long, narrow]
+      # @param year [Symbol] select [~, numeric, two_digit]
+      # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic]
+      # @param precision [Symbol] select [~, second, minute, hour, day, month, year]
+      # @param format [Symbol] select [~, auto, micro, elapsed]
+      # @param lang [String] text
+      # @param title [String] text
+      def default(
+        tense: nil,
+        prefix: nil,
+        second: nil,
+        minute: nil,
+        hour: nil,
+        weekday: nil,
+        day: nil,
+        month: nil,
+        year: nil,
+        time_zone_name: nil,
+        threshold: nil,
+        precision: nil,
+        format: nil,
+        datetime: Time.now.utc,
+        lang: nil,
+        title: nil
+      )
+        render(Primer::Beta::RelativeTime.new(
+                 tense: tense,
+                 prefix: prefix,
+                 second: second,
+                 minute: minute,
+                 hour: hour,
+                 weekday: weekday,
+                 day: day,
+                 month: month,
+                 year: year,
+                 time_zone_name: time_zone_name,
+                 threshold: threshold,
+                 precision: precision,
+                 format: format,
+                 datetime: datetime,
+                 lang: lang,
+                 title: title
+               ))
+      end
+
+      # @label Micro Format
+      # @param datetime datetime-local
+      # @param tense [Symbol] select [~, auto, past, future]
+      # @param prefix [String] text
+      # @param second [Symbol] select [~, numeric, two_digit]
+      # @param minute [Symbol] select [~, numeric, two_digit]
+      # @param hour [Symbol] select [~, numeric, two_digit]
+      # @param weekday [Symbol] select [~, long, short, narrow]
+      # @param day [Symbol] select [~, numeric, two_digit]
+      # @param month [Symbol] select [~, numeric, two_digit, short, long, narrow]
+      # @param year [Symbol] select [~, numeric, two_digit]
+      # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic]
+      # @param precision [Symbol] select [~, second, minute, hour, day, month, year]
+      # @param lang [String] text
+      # @param title [String] text
+      def micro_format(
+        tense: nil,
+        prefix: nil,
+        second: nil,
+        minute: nil,
+        hour: nil,
+        weekday: nil,
+        day: nil,
+        month: nil,
+        year: nil,
+        time_zone_name: nil,
+        threshold: nil,
+        precision: nil,
+        datetime: Time.now.iso8601,
+        lang: nil,
+        title: nil
+      )
+        render(Primer::Beta::RelativeTime.new(
+                 tense: tense,
+                 prefix: prefix,
+                 second: second,
+                 minute: minute,
+                 hour: hour,
+                 weekday: weekday,
+                 day: day,
+                 month: month,
+                 year: year,
+                 time_zone_name: time_zone_name,
+                 threshold: threshold,
+                 precision: precision,
+                 format: :micro,
+                 datetime: datetime,
+                 lang: lang,
+                 title: title
+               ))
+      end
+
+      # @label Recent Time
+      # @param datetime datetime-local
+      # @param tense [Symbol] select [~, auto, past, future]
+      # @param prefix [String] text
+      # @param second [Symbol] select [~, numeric, two_digit]
+      # @param minute [Symbol] select [~, numeric, two_digit]
+      # @param hour [Symbol] select [~, numeric, two_digit]
+      # @param weekday [Symbol] select [~, long, short, narrow]
+      # @param day [Symbol] select [~, numeric, two_digit]
+      # @param month [Symbol] select [~, numeric, two_digit, short, long, narrow]
+      # @param year [Symbol] select [~, numeric, two_digit]
+      # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic]
+      # @param precision [Symbol] select [~, second, minute, hour, day, month, year]
+      # @param format [Symbol] select [~, auto, micro, elapsed]
+      # @param lang [String] text
+      # @param title [String] text
+      def recent_time(
+        tense: nil,
+        prefix: nil,
+        second: nil,
+        minute: nil,
+        hour: nil,
+        weekday: nil,
+        day: nil,
+        month: nil,
+        year: nil,
+        time_zone_name: nil,
+        threshold: nil,
+        precision: nil,
+        format: nil,
+        datetime: Time.now.iso8601,
+        lang: nil,
+        title: nil
+      )
+        render(Primer::Beta::RelativeTime.new(
+                 tense: tense,
+                 prefix: prefix,
+                 second: second,
+                 minute: minute,
+                 hour: hour,
+                 weekday: weekday,
+                 day: day,
+                 month: month,
+                 year: year,
+                 time_zone_name: time_zone_name,
+                 threshold: threshold,
+                 precision: precision,
+                 format: format,
+                 datetime: datetime,
+                 lang: lang,
+                 title: title
+               ))
+      end
+
+      # @label Count Down Timer
+      # @param datetime datetime-local
+      # @param tense [Symbol] select [~, auto, past, future]
+      # @param prefix [String] text
+      # @param second [Symbol] select [~, numeric, two_digit]
+      # @param minute [Symbol] select [~, numeric, two_digit]
+      # @param hour [Symbol] select [~, numeric, two_digit]
+      # @param weekday [Symbol] select [~, long, short, narrow]
+      # @param year [Symbol] select [~, numeric, two_digit]
+      # @param time_zone_name [Symbol] select [~, long, short, short_offset, long_offset, short_generic, long_generic]
+      # @param precision [Symbol] select [~, second, minute, hour, day, month, year]
+      # @param lang [String] text
+      # @param title [String] text
+      def count_down_timer(
+        tense: nil,
+        prefix: nil,
+        second: nil,
+        minute: nil,
+        hour: nil,
+        weekday: nil,
+        year: nil,
+        time_zone_name: nil,
+        threshold: nil,
+        precision: nil,
+        datetime: Time.utc(2038, 1, 19, 0o3, 14, 8),
+        lang: nil,
+        title: nil
+      )
+        render(Primer::Beta::RelativeTime.new(
+                 tense: tense,
+                 prefix: prefix,
+                 second: second,
+                 minute: minute,
+                 hour: hour,
+                 weekday: weekday,
+                 year: year,
+                 time_zone_name: time_zone_name,
+                 threshold: threshold,
+                 precision: precision,
+                 format: :elapsed,
+                 datetime: datetime,
+                 lang: lang,
+                 title: title
+               ))
+      end
+    end
+  end
+end

data/previews/primer/forms/forms_preview.rb

@@ -2,6 +2,7 @@
 
 module Primer
   module Forms
+    # :nodoc:
     class FormsPreview < ViewComponent::Preview
       def single_text_field_form; end