primer_view_components 0.0.112 → 0.0.114

data/lib/tasks/docs.rake

@@ -29,6 +29,7 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
+      Primer::Beta::RelativeTime,
       Primer::Beta::IconButton,
       Primer::Beta::Button,
       Primer::Alpha::SegmentedControl,
@@ -53,7 +54,7 @@ namespace :docs do
       Primer::ButtonComponent,
       Primer::Beta::ButtonGroup,
       Primer::Alpha::ButtonMarketing,
-      Primer::ClipboardCopy,
+      Primer::Beta::ClipboardCopy,
       Primer::Beta::CloseButton,
       Primer::Beta::Counter,
       Primer::Beta::Details,
@@ -66,7 +67,7 @@ namespace :docs do
       Primer::Beta::Label,
       Primer::LayoutComponent,
       Primer::Beta::Link,
-      Primer::Markdown,
+      Primer::Beta::Markdown,
       Primer::MenuComponent,
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
@@ -104,7 +105,7 @@ namespace :docs do
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,
       Primer::Alpha::Banner,
-      Primer::ClipboardCopy,
+      Primer::Beta::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TimeAgoComponent,
       Primer::Alpha::UnderlinePanels,

data/previews/primer/alpha/auto_complete_preview.rb

@@ -11,7 +11,9 @@ module Primer
       # @param with_icon toggle
       # @param is_clearable toggle
       def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label Default Options
@@ -21,29 +23,39 @@ module Primer
       # @param with_icon toggle
       # @param is_clearable toggle
       def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @!group More examples
 
       # @label AutoComplete with non-visible label
       def with_non_visible_label
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-1", list_id: "test-id-1", src: "/auto_complete?version=alpha", is_label_visible: false))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with inline label
       def with_inline_label
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "test-id-2", src: "/auto_complete?version=alpha", is_label_inline: true))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with search icon
       def with_icon
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-3", list_id: "test-id-3", src: "/auto_complete?version=alpha", with_icon: true))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with clear button
       def with_clear_button
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-4", list_id: "test-id-4", src: "/auto_complete?version=alpha", is_clearable: true))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @!endgroup

data/previews/primer/alpha/segmented_control_preview.rb

@@ -34,8 +34,9 @@ module Primer
 
       # @!group Full width
       # @label Size small
-      def full_width_small(hide_labels: false, size: :small)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :small)) do |c|
+      # @param hide_labels [Boolean] toggle
+      def full_width_small(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
@@ -43,8 +44,9 @@ module Primer
       end
 
       # @label Size medium
-      def full_width_medium(hide_labels: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :medium)) do |c|
+      # @param hide_labels [Boolean] toggle
+      def full_width_medium(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
@@ -52,8 +54,9 @@ module Primer
       end
 
       # @label Size large
-      def full_width_large(hide_labels: false, size: :large)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :large)) do |c|
+      # @param hide_labels [Boolean] toggle
+      def full_width_large(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")

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/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/{markdown_preview.rb → beta/markdown_preview.rb}

@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
 module Primer
-  # @label Markdown
-  class MarkdownPreview < ViewComponent::Preview
-    MD_FIXTURE = %(
+  module Beta
+    # @label Markdown
+    class MarkdownPreview < ViewComponent::Preview
+      MD_FIXTURE = %(
       <p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href=\"https://github.com\">Links </a> should be blue with no underlines (unless hovered over).</p>
 
       <p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
@@ -274,17 +275,18 @@ module Primer
       <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     ).html_safe # rubocop:disable Rails/OutputSafety
 
-    # @label Playground
-    def playground
-      render(Primer::Markdown.new) do
-        MD_FIXTURE
+      # @label Playground
+      def playground
+        render(Primer::Beta::Markdown.new) do
+          MD_FIXTURE
+        end
       end
-    end
 
-    # @label Default Options
-    def default
-      render(Primer::Markdown.new) do
-        MD_FIXTURE
+      # @label Default Options
+      def default
+        render(Primer::Beta::Markdown.new) do
+          MD_FIXTURE
+        end
       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