openproject-primer_view_components 0.6.3

data/previews/primer/beta/relative_time_preview.rb

@@ -0,0 +1,286 @@
+# 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 format_style [Symbol] select [~, long, short, narrow]
+      # @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,
+        format_style: 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,
+                 format_style: format_style,
+                 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 format_style [Symbol] select [~, long, short, narrow]
+      # @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,
+        format_style: 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,
+                 format_style: format_style,
+                 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 format_style [Symbol] select [~, long, short, narrow]
+      # @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,
+        format_style: 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,
+                 format_style: format_style,
+                 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 format_style [Symbol] select [~, long, short, narrow]
+      # @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,
+        format_style: 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,
+                 format_style: format_style,
+                 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 format_style [Symbol] select [~, long, short, narrow]
+      # @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,
+        format_style: 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,
+                 format_style: format_style,
+                 datetime: datetime,
+                 lang: lang,
+                 title: title
+               ))
+      end
+    end
+  end
+end

data/previews/primer/beta/spinner_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Spinner
+    class SpinnerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [small, medium, large]
+      def playground(size: :medium)
+        render(Primer::Beta::Spinner.new(size: size))
+      end
+
+      # @label Default Options
+      #
+      # @param size [Symbol] select [small, medium, large]
+      # @snapshot
+      def default(size: :medium)
+        render(Primer::Beta::Spinner.new(size: size))
+      end
+    end
+  end
+end

data/previews/primer/beta/state_preview.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label State
+    class StatePreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title [String]
+      # @param tag [Symbol] select [span, div]
+      # @param size [Symbol] select [default, small]
+      # @param scheme [Symbol] select [default, open, closed, merged]
+      def playground(title: "State", scheme: :default, size: :default, tag: :span)
+        render(Primer::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
+      end
+
+      # @label Default
+      #
+      # @param title [String]
+      # @param tag [Symbol] select [span, div]
+      # @param size [Symbol] select [default, small]
+      # @param scheme [Symbol] select [default, open, closed, merged]
+      # @snapshot
+      def default(title: "State", scheme: :default, size: :default, tag: :span)
+        render(Primer::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
+      end
+
+      # @!group States
+      #
+      # @label Default
+      def states_default
+        render(Primer::Beta::State.new(title: "Default")) { "Default state" }
+      end
+
+      # @label Open
+      # @snapshot
+      def states_open
+        render(Primer::Beta::State.new(title: "Open", scheme: :open)) { "Open state" }
+      end
+
+      # @label Closed
+      # @snapshot
+      def states_closed
+        render(Primer::Beta::State.new(title: "Closed", scheme: :closed)) { "Closed state" }
+      end
+
+      # @label Merged
+      # @snapshot
+      def states_merged
+        render(Primer::Beta::State.new(title: "Merged", scheme: :merged)) { "Merged state" }
+      end
+      #
+      # @!endgroup
+
+      # @!group Sizes
+      #
+      # @label Default
+      # @snapshot
+      def sizes_default
+        render(Primer::Beta::State.new(title: "Default")) { "Default size" }
+      end
+
+      # @label Small
+      # @snapshot
+      def sizes_small
+        render(Primer::Beta::State.new(title: "Default", size: :small)) { "Small size" }
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/subhead_preview/actions.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::Beta::Subhead.new) do |component| %>
+  <% component.with_heading do %>
+    A Heading
+  <% end %>
+  <% component.with_description do %>
+    A description with actions
+  <% end %>
+  <% component.with_actions do %>
+    <% render(Primer::Beta::Button.new(scheme: :primary)) do %>
+      An action
+    <% end %>
+  <% end %>
+<% end %>
+

data/previews/primer/beta/subhead_preview.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Subhead
+    class SubheadPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param spacious [Boolean]
+      # @param hide_border [Boolean]
+      # @param heading_danger [Boolean]
+      # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
+      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+        render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
+          component.with_heading(tag: heading_tag, danger: heading_danger) do
+            "My Heading"
+          end
+          component.with_description do
+            "My Description"
+          end
+        end
+      end
+
+      # @label Default Options
+      #
+      # @param spacious [Boolean]
+      # @param hide_border [Boolean]
+      # @param heading_danger [Boolean]
+      # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
+      # @snapshot
+      def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+        render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
+          component.with_heading(tag: heading_tag, danger: heading_danger) do
+            "My Heading"
+          end
+          component.with_description do
+            "My Description"
+          end
+        end
+      end
+
+      # @label Danger
+      # @snapshot
+      def danger
+        render(Primer::Beta::Subhead.new) do |component|
+          component.with_heading(danger: true) do
+            "Danger Heading"
+          end
+          component.with_description do
+            "A description of the 'danger'"
+          end
+        end
+      end
+
+      # @label Actions
+      # @snapshot
+      def actions
+        render_with_template(locals: {})
+      end
+
+      # @!group Spacing
+      #
+      # @label Default
+      def spacing_default
+        render(Primer::Beta::Subhead.new(spacious: false)) do |component|
+          component.with_heading do
+            "Default Spacing"
+          end
+          component.with_description do
+            "Default spacing above the component"
+          end
+        end
+      end
+
+      # @label Spacious
+      # @snapshot
+      def spacing_spacious
+        render(Primer::Beta::Subhead.new(spacious: true)) do |component|
+          component.with_heading do
+            "Spacious"
+          end
+          component.with_description do
+            "With extra space above the component"
+          end
+        end
+      end
+
+      # @label Spacious w/ Danger Heading
+      def spacing_dangerous
+        render(Primer::Beta::Subhead.new(spacious: true)) do |component|
+          component.with_heading(danger: true) do
+            "Danger Heading"
+          end
+          component.with_description do
+            "With extra space above the component, and a 'danger' heading"
+          end
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/text_preview.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+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]
+      # @param content [String] text
+      # @snapshot
+      def default(tag: :span, content: "Text")
+        render(Primer::Beta::Text.new(tag: tag)) { content }
+      end
+    end
+  end
+end

data/previews/primer/beta/timeline_item_preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label TimelineItem
+    class TimelineItemPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param condensed [Boolean]
+      def playground(condensed: false)
+        render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+
+      # @label Default
+      #
+      # @param condensed [Boolean]
+      # @snapshot
+      def default(condensed: false)
+        render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
+          component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
+          component.with_body { "Success!" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/truncate_preview.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+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
+      def default(text: "branch-name-that-is-really-long")
+        render(Primer::Beta::Truncate.new) { text }
+      end
+
+      # @label Multiple items
+      def multiple_items
+        render(Primer::Beta::Truncate.new) do |component|
+          component.with_item do
+            "really-long-repository-owner-name"
+          end
+          component.with_item(font_weight: :bold) do
+            "really-long-repository-name"
+          end
+        end
+      end
+
+      # @label Advanced multiple items
+      def advanced_multiple_items
+        render(Primer::Beta::Truncate.new(tag: :ol)) do |component|
+          component.with_item(tag: :li) { "primer" }
+          component.with_item(tag: :li, priority: true) { "/ css" }
+          component.with_item(tag: :li) { "/ Issues" }
+          component.with_item(tag: :li) { "/ #123" }
+          component.with_item(tag: :li, priority: true) { "Visual bug on primer.style found in lists" }
+        end
+      end
+
+      # @label Max widths
+      # @snapshot
+      def max_widths
+        render(Primer::Beta::Truncate.new) do |component|
+          component.with_item(max_width: 300) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+          component.with_item(max_width: 200) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+          component.with_item(max_width: 100) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/box_preview.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Primer
+  # @label Box
+  class BoxPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param content [String] text
+    def playground(content: "Playground")
+      render(Primer::Box.new) { content }
+    end
+
+    # @label Default
+    def default(content: "Default")
+      render(Primer::Box.new) { content }
+    end
+
+    # @label Border
+    # @snapshot
+    def border(content: "Box with border")
+      render(Primer::Box.new(border: true, p: 3)) { content }
+    end
+
+    # @label Border Bottom
+    # @snapshot
+    def border_bottom(content: "Box with bottom border")
+      render(Primer::Box.new(border: :bottom, p: 3)) { content }
+    end
+  end
+end

data/previews/primer/forms_preview/after_content_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(AfterContentForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/array_check_box_group_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(ArrayCheckBoxGroupForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/caption_template_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(CaptionTemplateForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/check_box_group_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(CheckBoxGroupForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/check_box_with_nested_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(CheckBoxWithNestedForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/composed_form.html.erb

@@ -0,0 +1,4 @@
+<p>Each of these fields comes from its own form definition.</p>
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(ComposedForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/example_toggle_switch_form.html.erb

@@ -0,0 +1,3 @@
+<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
+<hr>
+<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", label: "Bad example", src: toggle_switch_index_path, id: "error-toggle")) %>

data/previews/primer/forms_preview/horizontal_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(HorizontalForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/immediate_validation_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(ImmediateValidationForm.new(f)) %>
+<% end %>