openproject-primer_view_components 0.6.3

data/app/components/primer/beta/popover.pcss

@@ -0,0 +1,225 @@
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+
+  /* Carets */
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -16px;
+    margin-left: -9px;
+    border: 8px solid transparent;
+    border-bottom-color: var(--borderColor-default);
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -8px;
+    border: 7px solid transparent;
+    border-bottom-color: var(--overlay-bgColor);
+  }
+}
+
+/* No caret */
+.Popover-message--no-caret {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+/* Bottom-oriented carets */
+.Popover-message--bottom,
+.Popover-message--bottom-right,
+.Popover-message--bottom-left {
+  &::before,
+  &::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    bottom: -16px;
+    border-top-color: var(--borderColor-default);
+  }
+
+  &::after {
+    bottom: -14px;
+    border-top-color: var(--overlay-bgColor);
+  }
+}
+
+/* Top and Bottom: Right-oriented carets */
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+
+  &::before,
+  &::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+  &::before {
+    right: 20px;
+  }
+
+  &::after {
+    right: 21px;
+  }
+}
+
+/* Top and Bottom: Left-oriented carets */
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+
+  &::before,
+  &::after {
+    left: 24px;
+    margin-left: 0;
+  }
+
+  &::after {
+    left: 25px;
+  }
+}
+
+/* Right- and Left-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom,
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    margin-top: -9px;
+  }
+
+  &::after {
+    margin-top: -8px;
+  }
+}
+
+/* Right-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom {
+  &::before {
+    right: -16px;
+    border-left-color: var(--borderColor-default);
+  }
+
+  &::after {
+    right: -14px;
+    border-left-color: var(--overlay-bgColor);
+  }
+}
+
+/* Left-oriented carets */
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before {
+    left: -16px;
+    border-right-color: var(--borderColor-default);
+  }
+
+  &::after {
+    left: -14px;
+    border-right-color: var(--overlay-bgColor);
+  }
+}
+
+/* Right and Left: Top-oriented carets */
+.Popover-message--right-top,
+.Popover-message--left-top {
+  &::before,
+  &::after {
+    top: 24px;
+  }
+}
+
+/* Right and Left: Bottom-oriented carets */
+.Popover-message--right-bottom,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: auto;
+  }
+
+  &::before {
+    bottom: 16px;
+  }
+
+  &::after {
+    bottom: 17px;
+  }
+}
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: var(--stack-gap-condensed);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--control-medium-paddingInline-normal) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

data/app/components/primer/beta/popover.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+    #
+    # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
+    class Popover < Primer::Component
+      status :beta
+
+      CARET_DEFAULT = :top
+      CARET_MAPPINGS = {
+        CARET_DEFAULT => "",
+        :bottom => "Popover-message--bottom",
+        :bottom_right => "Popover-message--bottom-right",
+        :bottom_left => "Popover-message--bottom-left",
+        :left => "Popover-message--left",
+        :left_bottom => "Popover-message--left-bottom",
+        :left_top => "Popover-message--left-top",
+        :right => "Popover-message--right",
+        :right_bottom => "Popover-message--right-bottom",
+        :right_top => "Popover-message--right-top",
+        :top_left => "Popover-message--top-left",
+        :top_right => "Popover-message--top-right"
+      }.freeze
+
+      DEFAULT_HEADING_TAG = :h4
+
+      # The heading
+      #
+      # @param tag [Symbol] (Primer::Beta::Popover::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
+        system_arguments[:tag] = tag
+        system_arguments[:mb] ||= 2
+
+        Primer::Beta::Heading.new(**system_arguments)
+      }
+
+      # The body
+      #
+      # @param caret [Symbol] <%= one_of(Primer::Beta::Popover::CARET_MAPPINGS.keys) %>
+      # @param large [Boolean] Whether to use the large version of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
+        @body_arguments = system_arguments
+        @body_arguments[:classes] = class_names(
+          @body_arguments[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @body_arguments[:p] ||= 4
+        @body_arguments[:mt] ||= 2
+        @body_arguments[:mx] ||= :auto
+        @body_arguments[:text_align] ||= :left
+        @body_arguments[:box_shadow] ||= :large
+
+        Primer::Content.new
+      }
+
+      # @example Default
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(large: true) do %>
+      #       This is the large Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Caret position
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With multiple elements in the body
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       <p>This is the Popover body.</p>
+      #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
+      #         Got it!
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Popover"
+        )
+        @system_arguments[:position] ||= :relative
+        @system_arguments[:right] = false unless @system_arguments.delete(:right)
+        @system_arguments[:left] = false unless @system_arguments.delete(:left)
+      end
+
+      def render?
+        body.present?
+      end
+
+      def body_component
+        Primer::Box.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/beta/progress_bar.css

@@ -0,0 +1 @@
+.Progress{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));border-radius:6px;display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:2px}

data/app/components/primer/beta/progress_bar.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "beta/progress_bar",
+  "selectors": [
+    ".Progress",
+    ".Progress--large",
+    ".Progress--small",
+    ".Progress-item",
+    ".Progress-item+.Progress-item"
+  ]
+}

data/app/components/primer/beta/progress_bar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,yEAA8C,CAC9C,iBAAkB,CAJlB,YAAa,CACb,UAAW,CAIX,uBAA8B,CAH9B,eAIF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,eACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--bgColor-neutral-muted);\n  border-radius: 6px;\n  outline: 1px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n  margin-left: 2px;\n}\n"]}

data/app/components/primer/beta/progress_bar.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/progress_bar.pcss

@@ -0,0 +1,26 @@
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--bgColor-neutral-muted);
+  border-radius: 6px;
+  outline: 1px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: 2px;
+}

data/app/components/primer/beta/progress_bar.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `ProgressBar` to visualize task completion.
+    class ProgressBar < Primer::Component
+      status :beta
+
+      # Use the Item slot to add an item to the progress bar
+      #
+      # @param percentage [Integer] The percent complete
+      # @param bg [Symbol] The background color
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :span
+        system_arguments[:bg] = bg
+        system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
+        system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      SIZE_DEFAULT = :default
+
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => "",
+        :small => "Progress--small",
+        :large => "Progress--large"
+      }.freeze
+
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+      # @example Default
+      #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
+      #     <% component.with_item(percentage: 25) %>
+      #   <% end %>
+      #
+      # @example Small
+      #   <%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 50) %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 75) %>
+      #   <% end %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
+      #     <% component.with_item(percentage: 10) %>
+      #     <% component.with_item(bg: :accent_emphasis, percentage: 20) %>
+      #     <% component.with_item(bg: :danger_emphasis, percentage: 30) %>
+      #   <% end %>
+      #
+      # @param size [Symbol] <%= one_of(Primer::Beta::ProgressBar::SIZE_OPTIONS) %> Increases height.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: SIZE_DEFAULT, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Progress",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        )
+        @system_arguments[:tag] = :span
+      end
+
+      def render?
+        items?
+      end
+    end
+  end
+end

data/app/components/primer/beta/relative_time.d.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/components/primer/beta/relative_time.js

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/components/primer/beta/relative_time.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
+    class RelativeTime < Primer::Component
+      status :beta
+
+      TENSE_DEFAULT = :auto
+      TENSE_OPTIONS = [TENSE_DEFAULT, :past, :future].freeze
+
+      FORMAT_DEFAULT = :auto
+      FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze
+
+      FORMAT_STYLE_DEFAULT = nil
+      FORMAT_STYLE_OPTIONS = [FORMAT_STYLE_DEFAULT, :long, :short, :narrow].freeze
+
+      SECOND_DEFAULT = nil
+      SECOND_MAPPINGS = {
+        SECOND_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      SECOND_OPTIONS = SECOND_MAPPINGS.keys
+
+      MINUTE_DEFAULT = nil
+      MINUTE_MAPPINGS = {
+        MINUTE_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      MINUTE_OPTIONS = MINUTE_MAPPINGS.keys
+
+      HOUR_DEFAULT = nil
+      HOUR_MAPPINGS = {
+        HOUR_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      HOUR_OPTIONS = HOUR_MAPPINGS.keys
+
+      WEEKDAY_DEFAULT = nil
+      WEEKDAY_OPTIONS = [WEEKDAY_DEFAULT, :long, :short, :narrow].freeze
+
+      DAY_DEFAULT = nil
+      DAY_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      DAY_OPTIONS = DAY_MAPPINGS.keys
+
+      MONTH_DEFAULT = nil
+      MONTH_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit",
+        :short => "short",
+        :long => "long",
+        :narrow => "narrow"
+      }.freeze
+      MONTH_OPTIONS = MONTH_MAPPINGS.keys
+
+      YEAR_DEFAULT = nil
+      YEAR_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :numeric => "numeric",
+        :two_digit => "2-digit"
+      }.freeze
+      YEAR_OPTIONS = YEAR_MAPPINGS.keys
+
+      TIMEZONENAME_DEFAULT = nil
+      TIMEZONE_MAPPINGS = {
+        DAY_DEFAULT => nil,
+        :long => "long",
+        :short => "short",
+        :short_offset => "shortOffset",
+        :long_offset => "longOffset",
+        :short_generic => "shortGeneric",
+        :long_generic => "longGeneric"
+      }.freeze
+      TIMEZONENAME_OPTIONS = TIMEZONE_MAPPINGS.keys
+
+      PRECISION_DEFAULT = nil
+      PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400))) %>
+      #
+      # @example Past Time
+      #   <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), tense: :past)) %>
+      #
+      # @example Elapsed Time
+      #   <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), format: :elapsed)) %>
+      #
+      # @param datetime [Time] The time to be formatted.
+      # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
+      # @param prefix [sring] What to prefix the relative ime display with.
+      # @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
+      # @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
+      # @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
+      # @param weekday [Symbol] What format weekdays should take. <%= one_of(Primer::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
+      # @param day [Symbol] What format days should take. <%= one_of(Primer::Beta::RelativeTime::DAY_OPTIONS) %>
+      # @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
+      # @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
+      # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
+      # @param threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
+      # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
+      # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
+      # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
+      # @param lang [string] The language to use.
+      # @param title [string] Provide a custom title to the element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        datetime:,
+        tense: TENSE_DEFAULT,
+        prefix: nil,
+        second: SECOND_DEFAULT,
+        minute: MINUTE_DEFAULT,
+        hour: HOUR_DEFAULT,
+        weekday: WEEKDAY_DEFAULT,
+        day: DAY_DEFAULT,
+        month: MONTH_DEFAULT,
+        year: YEAR_DEFAULT,
+        time_zone_name: TIMEZONENAME_DEFAULT,
+        threshold: nil,
+        precision: PRECISION_DEFAULT,
+        format: nil,
+        format_style: nil,
+        lang: nil,
+        title: nil,
+        **system_arguments
+      )
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "relative-time"
+        @system_arguments[:tense] = tense if tense.present?
+        @system_arguments[:prefix] = prefix if prefix.present?
+        @system_arguments[:second] = fetch_or_fallback(SECOND_OPTIONS, second, SECOND_DEFAULT) if second.present?
+        @system_arguments[:minute] = fetch_or_fallback(MINUTE_OPTIONS, minute, MINUTE_DEFAULT) if minute.present?
+        @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
+        @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
+        @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
+        @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
+        @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
+        @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
+        @system_arguments[:threshold] = threshold if threshold.present?
+        @system_arguments[:precision] = precision if precision.present?
+        @system_arguments[:title] = title if title.present?
+        @system_arguments[:lang] = lang if lang.present?
+        @system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
+        @system_arguments[:"format-style"] = format_style if format_style.present?
+        if datetime.present? && datetime.respond_to?(:iso8601)
+          @datetime = datetime
+          @system_arguments[:datetime] = datetime.iso8601
+        elsif datetime.present?
+          @datetime = Time.iso8601 datetime
+          @system_arguments[:datetime] = @datetime
+        end
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments).with_content(@datetime.strftime("%B %-d, %Y %H:%M")))
+      end
+    end
+  end
+end

data/app/components/primer/beta/relative_time.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element'

data/app/components/primer/beta/spinner.html.erb

@@ -0,0 +1,4 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
+<% end %>