primer_view_components 0.0.36 → 0.0.41

data/app/components/primer/image.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Image` to render images.
+  #
+  # @accessibility
+  #   Always provide a meaningful `alt`.
+  class Image < Primer::Component
+    # @example Default
+    #
+    #   <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub")) %>
+    #
+    # @example Helper
+    #
+    #   <%= primer_image(src: "https://github.com/github.png", alt: "GitHub") %>
+    #
+    # @example Lazy loading
+    #
+    #   <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
+    #
+    # @example Custom size
+    #
+    #   <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", height: 100, width: 100)) %>
+    #
+    # @param src [String] The source url of the image.
+    # @param alt [String] Specifies an alternate text for the image.
+    # @param lazy [Boolean] Whether or not to lazily load the image.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(src:, alt:, lazy: false, **system_arguments)
+      @system_arguments = system_arguments
+
+      @system_arguments[:tag] = :img
+      @system_arguments[:src] = src
+      @system_arguments[:alt] = alt
+
+      return unless lazy
+
+      @system_arguments[:loading] = :lazy
+      @system_arguments[:decoding] = :async
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments))
+    end
+  end
+end

data/app/components/primer/image_crop.d.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/components/primer/image_crop.html.erb

@@ -0,0 +1,12 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if loading.present? %>
+    <%= loading %>
+  <% else %>
+    <%= render(Primer::SpinnerComponent.new(size: :large, flex: 1, "data-loading-slot": true)) %>
+  <% end %>
+
+  <input type="hidden" data-image-crop-input="x" name="cropped_x">
+  <input type="hidden" data-image-crop-input="y" name="cropped_y">
+  <input type="hidden" data-image-crop-input="width" name="cropped_width">
+  <input type="hidden" data-image-crop-input="height" name="cropped_height">
+<% end %>

data/app/components/primer/image_crop.js

@@ -0,0 +1 @@
+import '@github/image-crop-element';

data/app/components/primer/image_crop.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  # A client-side mechanism to crop images.
+  class ImageCrop < Primer::Component
+    # A loading indicator that is shown while the image is loading.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :loading, lambda { |**system_arguments|
+      system_arguments[:tag] ||= :div
+      system_arguments[:"data-loading-slot"] = true
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example Simple cropper
+    #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png")) %>
+    #
+    # @example Square cropper
+    #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) %>
+    #
+    # @example Cropper with a custom loader
+    #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
+    #     <% cropper.loading(style: "width: 120px", tag: :img, src: "spinner.gif") %>
+    #   <% end %>
+    #
+    # @param src [String] The path of the image to crop.
+    # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(src:, rounded: true, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "image-crop"
+      @system_arguments[:src] = src
+      @system_arguments[:rounded] = true if rounded
+    end
+  end
+end

data/app/components/primer/image_crop.ts

@@ -0,0 +1 @@
+import '@github/image-crop-element'

data/app/components/primer/label_component.rb

@@ -1,10 +1,13 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use labels to add contextual metadata to a design.
+  # Use `Label` to add contextual metadata to a design.
   class LabelComponent < Primer::Component
     status :beta
 
+    DEFAULT_TAG = :span
+    TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
+
     SCHEME_MAPPINGS = {
       primary: "Label--primary",
       secondary: "Label--secondary",
@@ -38,13 +41,14 @@ module Primer
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
     #
+    # @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
     # @param title [String] `title` attribute for the component element.
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(title:, scheme: nil, variant: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, title:, scheme: nil, variant: nil, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :span
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:title] = title
       @system_arguments[:classes] = class_names(
         "Label",

data/app/components/primer/layout_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Layout to build a main/sidebar layout.
+  # Use `Layout` to build a main/sidebar layout.
   class LayoutComponent < Primer::Component
     # The main content
     #

data/app/components/primer/link_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use links for moving from one page to another. The Link component styles anchor tags with default blue styling and hover text-decoration.
+  # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.
   class LinkComponent < Primer::Component
     status :beta
 

data/app/components/primer/local_time.d.ts

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

data/app/components/primer/local_time.js

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

data/app/components/primer/local_time.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `LocalTime` to format a date and time in the user's preferred locale format. This component requires JavaScript.
+  class LocalTime < Primer::Component
+    DEFAULT_DIGIT_TYPE = :numeric
+    DIGIT_TYPE_OPTIONS = [DEFAULT_DIGIT_TYPE, :"2-digit"].freeze
+
+    DEFAULT_TEXT_TYPE = :short
+    TEXT_TYPE_OPTIONS = [DEFAULT_TEXT_TYPE, :long].freeze
+
+    # @example Default
+    #   <%= render(Primer::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"))) %>
+    #
+    # @example All the options
+    #   <%= render(Primer::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"), weekday: :long, year: :"2-digit", month: :long, day: :"2-digit", hour: :"2-digit", minute: :"2-digit", second: :"2-digit", time_zone_name: :long)) %>
+    #
+    # @example With initial content
+    #   <%= render(Primer::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"))) do %>
+    #     <!-- This content will be replaced once the component connects -->
+    #     2014/06/01 13:05
+    #   <% end %>
+    #
+    # @param datetime [DateTime] The date to parse
+    # @param initial_text [String] Text to render before component is initialized
+    # @param weekday [Symbol] <%= one_of(Primer::LocalTime::TEXT_TYPE_OPTIONS) %>
+    # @param year [Symbol] <%= one_of(Primer::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param month [Symbol] <%= one_of(Primer::LocalTime::TEXT_TYPE_OPTIONS) %>
+    # @param day [Symbol] <%= one_of(Primer::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param hour [Symbol] <%= one_of(Primer::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param minute [Symbol] <%= one_of(Primer::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param second [Symbol] <%= one_of(Primer::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param time_zone_name [Symbol] <%= one_of(Primer::LocalTime::TEXT_TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(datetime:, initial_text: nil, weekday: DEFAULT_TEXT_TYPE, year: DEFAULT_DIGIT_TYPE, month: DEFAULT_TEXT_TYPE, day: DEFAULT_DIGIT_TYPE, hour: DEFAULT_DIGIT_TYPE, minute: DEFAULT_DIGIT_TYPE, second: DEFAULT_DIGIT_TYPE, time_zone_name: DEFAULT_TEXT_TYPE, **system_arguments)
+      @system_arguments = system_arguments
+
+      @datetime = datetime
+
+      @system_arguments[:tag] = "local-time"
+      @system_arguments[:datetime] = datetime
+
+      @initial_text = initial_text
+
+      @system_arguments[:weekday] = fetch_or_fallback(TEXT_TYPE_OPTIONS, weekday, DEFAULT_TEXT_TYPE)
+      @system_arguments[:year] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, year, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:month] = fetch_or_fallback(TEXT_TYPE_OPTIONS, month, DEFAULT_TEXT_TYPE)
+      @system_arguments[:day] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, day, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:hour] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, hour, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:minute] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, minute, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:second] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, second, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:"time-zone-name"] = fetch_or_fallback(TEXT_TYPE_OPTIONS, time_zone_name, DEFAULT_TEXT_TYPE)
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments).with_content(@initial_text || @datetime.strftime("%B %-d, %Y %H:%M %Z")))
+    end
+  end
+end

data/app/components/primer/local_time.ts

@@ -0,0 +1 @@
+import '@github/time-elements'

data/app/components/primer/{markdown_component.rb → markdown.rb}

@@ -1,10 +1,11 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use MarkdownComponent to wrap markdown content
-  class MarkdownComponent < Primer::Component
+  # Use `Markdown` to wrap markdown content
+  class Markdown < Primer::Component
+    status :beta
     # @example Default
-    #   <%= render(Primer::MarkdownComponent.new) do %>
+    #   <%= render(Primer::Markdown.new) do %>
     #     <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>
@@ -235,11 +236,11 @@ module Primer
     #
     #     <p>Code can also use syntax highlighting.</p>
     #
-    #     <pre><code class="prism-code language-javascript">var foo = "bar";</code></pre>
+    #     <pre><code>var foo = "bar";</code></pre>
     #
     #     <pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
     #
-    #     <pre><code class="prism-code language-javascript">var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";</code></pre>
+    #     <pre><code>var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";</code></pre>
     #
     #     <p>Inline code inside table cells should still be distinguishable.</p>
     #

data/app/components/primer/menu_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use menus to create vertical lists of navigational links.
+  # Use `Menu` to create vertical lists of navigational links.
   class MenuComponent < Primer::Component
     # Optional menu heading
     #

data/app/components/primer/navigation/tab_component.rb

@@ -4,7 +4,13 @@ module Primer
   module Navigation
     # This component is part of navigation components such as `Primer::TabNavComponent`
     # and `Primer::UnderlineNavComponent` and should not be used by itself.
+    #
+    # @accessibility
+    #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
+    #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
     class TabComponent < Primer::Component
+      DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
+      ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
       # Panel controlled by the Tab. This will not render anything in the tab itself.
       # It will provide a accessor for the Tab's parent to call and render the panel
       # content in the appropriate place.
@@ -105,7 +111,8 @@ module Primer
         return unless @selected
 
         if @system_arguments[:tag] == :a
-          @system_arguments[:"aria-current"] = :page
+          aria_current = @system_arguments[:"aria-current"] || @system_arguments.dig(:aria, :current) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+          @system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
         else
           @system_arguments[:"aria-selected"] = true
         end

data/app/components/primer/octicon_component.html.erb

@@ -0,0 +1,7 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <% if @use_symbol %>
+    <use href="#octicon_<%= [@icon.symbol, @icon.height].join("_") %>"></use>
+  <% else %>
+    <%= @icon.path.html_safe %>
+  <% end %>
+<% end %>

data/app/components/primer/octicon_component.rb

@@ -1,46 +1,80 @@
 # frozen_string_literal: true
 
+require "octicons"
+
 module Primer
-  # Renders an [Octicon](https://primer.style/octicons/) with <%= link_to_system_arguments_docs %>.
+  # `Octicon` renders an <%= link_to_octicons %> with <%= link_to_system_arguments_docs %>.
+  # `Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.
   class OcticonComponent < Primer::Component
     status :beta
 
     SIZE_DEFAULT = :small
+    SIZE_MEDIUM = :medium
+
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
-      :medium => 32,
-      :large => 64
+      SIZE_MEDIUM => 24
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     # @example Default
-    #   <%= render(Primer::OcticonComponent.new("check")) %>
-    #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #   <%= render(Primer::OcticonComponent.new(:check)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check)) %>
     #
     # @example Medium
-    #   <%= render(Primer::OcticonComponent.new("people", size: :medium)) %>
+    #   <%= render(Primer::OcticonComponent.new(:people, size: :medium)) %>
     #
-    # @example Large
-    #   <%= render(Primer::OcticonComponent.new("x", size: :large)) %>
+    # @example Helper
+    #   <%= primer_octicon(:check) %>
     #
-    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param icon [Symbol] Name of <%= link_to_octicons %> to use.
     # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
+    # @param use_symbol [Boolean] EXPERIMENTAL (May change or be removed) - Set to true when using with <%= link_to_component(Primer::OcticonSymbolsComponent) %>.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, **system_arguments)
-      @icon = icon_name || icon
+    def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, use_symbol: false, **system_arguments)
+      icon_key = icon_name || icon
+
+      # Don't allow sizes under 16px
+      if system_arguments[:height].present? && system_arguments[:height] < 16 || system_arguments[:width].present? && system_arguments[:width] < 16
+        system_arguments.delete(:height)
+        system_arguments.delete(:width)
+      end
+
+      cache_key = Primer::Octicon::Cache.get_key(symbol: icon_key, size: size, **system_arguments.slice(:height, :width))
+
       @system_arguments = system_arguments
+      @system_arguments[:tag] = :svg
+      @system_arguments[:aria] ||= {}
+      @use_symbol = use_symbol
+
+      if @system_arguments[:aria][:label] || @system_arguments[:"aria-label"]
+        @system_arguments[:role] = "img"
+      else
+        @system_arguments[:aria][:hidden] = true
+      end
+
+      if (cache_icon = Primer::Octicon::Cache.read(cache_key))
+        @icon = cache_icon
+      else
+        # Filter out classify options to prevent them from becoming invalid html attributes.
+        # Note height and width are both classify options and valid html attributes.
+        octicon_options = {
+          height: SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        }.merge(@system_arguments.slice(:height, :width))
 
-      @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
-      @system_arguments[:height] ||= SIZE_MAPPINGS[size]
+        @icon = Octicons::Octicon.new(icon_key, octicon_options)
+        Primer::Octicon::Cache.set(cache_key, @icon)
+      end
 
-      # Filter out classify options to prevent them from becoming invalid html attributes.
-      # Note height and width are both classify options and valid html attributes.
-      octicon_helper_options = @system_arguments.slice(:height, :width)
-      @system_arguments = add_test_selector(@system_arguments).except(*Primer::Classify::VALID_KEYS, :classes).merge(octicon_helper_options)
+      @system_arguments[:classes] = class_names(
+        @icon.options[:class],
+        @system_arguments[:classes]
+      )
+      @system_arguments.merge!(@icon.options.except(:class, :'aria-hidden'))
     end
 
-    def call
-      octicon(@icon, { **@system_arguments })
+    def self._after_compile
+      Primer::Octicon::Cache.preload!
     end
   end
 end

data/app/components/primer/octicon_symbols_component.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" hidden>
+  <%= symbol_tags %>
+</svg>

data/app/components/primer/octicon_symbols_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+require "octicons"
+
+module Primer
+  # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
+  class OcticonSymbolsComponent < Primer::Component
+    # @example Symbol dictionary
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :icon_success)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :text_danger)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, size: :medium)) %>
+    #   <%= render(Primer::OcticonSymbolsComponent.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
+    #
+    # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
+    def initialize(icons: [])
+      @icons = {}
+      icons.each do |icon|
+        symbol = icon[:symbol]
+        size = Primer::OcticonComponent::SIZE_MAPPINGS[
+          fetch_or_fallback(Primer::OcticonComponent::SIZE_OPTIONS, icon[:size] || Primer::OcticonComponent::SIZE_DEFAULT, Primer::OcticonComponent::SIZE_DEFAULT)
+        ]
+
+        cache_key = Primer::Octicon::Cache.get_key(symbol: symbol, size: size)
+
+        if (cache_icon = Primer::Octicon::Cache.read(cache_key))
+          icon_instance = cache_icon
+        else
+          icon_instance = Octicons::Octicon.new(symbol, height: size)
+
+          Primer::Octicon::Cache.set(cache_key, icon_instance)
+        end
+
+        # Don't put the same icon twice
+        @icons[[symbol, icon_instance.height]] = icon_instance if @icons[[symbol, icon_instance.height]].nil?
+      end
+    end
+
+    def render?
+      @icons.any?
+    end
+
+    def self._after_compile
+      Primer::Octicon::Cache.preload!
+    end
+
+    def symbol_tags
+      safe_join(
+        @icons.values.map do |icon|
+          content_tag(
+            :symbol,
+            icon.path.html_safe, # rubocop:disable Rails/OutputSafety
+            id: "octicon_#{icon.symbol}_#{icon.height}",
+            viewBox: icon.options[:viewBox],
+            width: icon.width,
+            height: icon.height
+          )
+        end
+      )
+    end
+  end
+end