primer_view_components 0.0.59 → 0.0.60

data/app/components/primer/alpha/border_box/header.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    module BorderBox
+      # BorderBox::Header: used inside the BorderBoxComponent to render its header slot
+      # Optional title slot
+      #
+      # @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
+      class Header < Primer::Component
+        TITLE_TAG_FALLBACK = :h2
+        TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+        # Optional Title.
+        #
+        # @param tag [Symbol] <%= one_of(Primer::Alpha::BorderBox::Header::TITLE_TAG_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :title, lambda { |tag:, **system_arguments|
+          system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
+          system_arguments[:classes] = class_names(
+            "Box-title",
+            system_arguments[:classes]
+          )
+
+          Primer::BaseComponent.new(**system_arguments)
+        }
+
+        # @example default use case
+        #
+        #   <%= render(Primer::Alpha::BorderBox::Header.new) do %>
+        #     Header
+        #   <% end %>
+        #
+        # @example with title
+        #   <%= render(Primer::Alpha::BorderBox::Header.new) do |h| %>
+        #     <% h.title(tag: :h3) do %>I am a title<% end %>
+        #   <% end %>
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Box-header",
+            system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tab_nav.rb

@@ -119,9 +119,8 @@ module Primer
         @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
         @system_arguments[:classes] = tab_nav_classes(system_arguments[:classes])
 
-        @body_arguments = body_arguments
         @body_arguments[:tag] = BODY_TAG_DEFAULT
-        @body_arguments[:classes] = tab_nav_body_classes(system_arguments[:classes])
+        @body_arguments[:classes] = tab_nav_body_classes(body_arguments[:classes])
 
         aria_label_for_page_nav(label)
       end

data/app/components/primer/base_component.rb

@@ -85,8 +85,8 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `clearfix` | Boolean | Wether to assign the `clearfix` class. |
-    # | `col` | Integer | Number of columns. <%= one_of(Primer::Classify::Grid::COL_VALUES) %> |
-    # | `container` | Symbol | Size of the container. <%= one_of(Primer::Classify::Grid::CONTAINER_VALUES) %> |
+    # | `col` | Integer | Number of columns. <%= one_of(Primer::Classify::Utilities.mappings(:col)) %> |
+    # | `container` | Symbol | Size of the container. <%= one_of(Primer::Classify::Utilities.mappings(:container)) %> |
     #
     # ## Layout
     #

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

@@ -4,7 +4,7 @@ module Primer
   module Beta
     # `Avatar` can be used to represent users and organizations on GitHub.
     #
-    # - Use the default round avatar for users, and the `square` argument
+    # - Use the default circle avatar for users, and the square shape
     # for organizations or any other non-human avatars.
     # - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
     # - Set `size` to update the height and width of the `Avatar` in pixels.
@@ -19,13 +19,19 @@ module Primer
     class Avatar < Primer::Component
       status :beta
 
+      DEFAULT_SIZE = 20
       SMALL_THRESHOLD = 24
 
+      DEFAULT_SHAPE = :circle
+      SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
+
+      SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
+
       # @example Default
       #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
       #
       # @example Square
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>
       #
       # @example Link
       #   <%= render(Primer::Beta::Avatar.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
@@ -34,31 +40,32 @@ module Primer
       #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
       #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
       #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
       #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 36)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>
       #
       # @param src [String] The source url of the avatar image.
       # @param alt [String] Passed through to alt on img tag.
-      # @param size [Integer] Adds the avatar-small class if less than 24.
-      # @param square [Boolean] Used to create a square avatar.
+      # @param size [Integer] <%= one_of(Primer::Beta::Avatar::SIZE_OPTIONS) %>
+      # @param shape [Symbol] Shape of the avatar. <%= one_of(Primer::Beta::Avatar::SHAPE_OPTIONS) %>
       # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
+      def initialize(src:, alt:, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, **system_arguments)
         @href = href
         @system_arguments = system_arguments
         @system_arguments[:tag] = :img
         @system_arguments[:src] = src
         @system_arguments[:alt] = alt
-        @system_arguments[:size] = size
-        @system_arguments[:height] = size
-        @system_arguments[:width] = size
+        @system_arguments[:size] = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+        @system_arguments[:height] = @system_arguments[:size]
+        @system_arguments[:width] = @system_arguments[:size]
 
         @system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "avatar",
           "avatar-small" => size < SMALL_THRESHOLD,
-          "circle" => !square,
+          "circle" => shape == DEFAULT_SHAPE,
           "lh-0" => href # Addresses an overflow issue with linked avatars
         )
       end

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

@@ -3,6 +3,13 @@
 module Primer
   module Beta
     # Use `Breadcrumbs` to display page hierarchy.
+    #
+    # #### Known issues
+    #
+    # ##### Responsiveness
+    #
+    # `Breadcrumbs` is not optimized for responsive designs.
+    #
     # @accessibility
     #   `Breadcrumbs` renders a list of links within a `nav` element and has an implicit landmark role of `navigation`.
     #   By default, the component labels the `nav` element with "Breadcrumbs" which helps distinguish the type of navigation.

data/app/components/primer/border_box_component.rb

@@ -24,15 +24,9 @@ module Primer
     # Optional Header.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :header, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-header",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
+    # @accessibility
+    # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+    renders_one :header, "Primer::Alpha::BorderBox::Header"
 
     # Optional Body.
     #
@@ -75,10 +69,12 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
-    # @example Header, body, rows, and footer
+    # @example Header with title, body, rows, and footer
     #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.header do %>
-    #       Header
+    #     <% component.header do |h| %>
+    #       <% h.title(tag: :h2) do %>
+    #         Header
+    #       <% end %>
     #     <% end %>
     #     <% component.body do %>
     #       Body

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

@@ -3,6 +3,6 @@
     <%= content %>
   <% else %>
     <%= render Primer::OcticonComponent.new(:copy) %>
-    <%= render Primer::OcticonComponent.new(:check, color: :icon_success, style: "display: none;") %>
+    <%= render Primer::OcticonComponent.new(:check, color: :success, style: "display: none;") %>
   <% end %>
 <% end %>

data/app/components/primer/component.rb

@@ -12,6 +12,7 @@ module Primer
     include JoinStyleArgumentsHelper
     include ViewHelper
     include Status::Dsl
+    include Audited::Dsl
 
     private
 

data/app/components/primer/label_component.rb

@@ -33,16 +33,16 @@ module Primer
 
     # @example Schemes
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new( scheme: :primary)) { "Primary" } %>
-    #   <%= render(Primer::LabelComponent.new( scheme: :secondary)) { "Secondary" } %>
-    #   <%= render(Primer::LabelComponent.new( scheme: :info)) { "Info" } %>
-    #   <%= render(Primer::LabelComponent.new( scheme: :success)) { "Success" } %>
-    #   <%= render(Primer::LabelComponent.new( scheme: :warning)) { "Warning" } %>
-    #   <%= render(Primer::LabelComponent.new( scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :secondary)) { "Secondary" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :info)) { "Info" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :success)) { "Success" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :warning)) { "Warning" } %>
+    #   <%= render(Primer::LabelComponent.new(scheme: :danger)) { "Danger" } %>
     #
     # @example Variants
     #   <%= render(Primer::LabelComponent.new) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new( variant: :large)) { "Large" } %>
+    #   <%= render(Primer::LabelComponent.new(variant: :large)) { "Large" } %>
     #
     # @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>

data/app/components/primer/markdown.rb

@@ -266,16 +266,6 @@ module Primer
     #       </tbody>
     #     </table>
     #
-    #     <hr />
-    #
-    #     <p>Small images should be shown at their actual size.</p>
-    #
-    #     <p><img alt="kitten" src="http://placekitten.com/g/300/200/"/></p>
-    #
-    #     <p>Large images should always scale down and fit in the content container.</p>
-    #
-    #     <p><img alt="kitten" src="http://placekitten.com/g/1200/800/"/></p>
-    #
     #     <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     #   <% end %>
     #

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

@@ -1,4 +1,7 @@
-<%= 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 %>
+<span role="status">
+  <span class="sr-only">Loading</span>
+  <%= 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 %>
+</span>

data/app/components/primer/timeline_item_component.rb

@@ -8,13 +8,13 @@ module Primer
     # Avatar to be rendered to the left of the Badge.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
-    renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
+    renders_one :avatar, lambda { |src:, size: 40, shape: :square, **system_arguments|
       system_arguments[:classes] = class_names(
         "TimelineItem-avatar",
         system_arguments[:classes]
       )
 
-      Primer::Beta::Avatar.new(src: src, size: size, square: square, **system_arguments)
+      Primer::Beta::Avatar.new(src: src, size: size, shape: shape, **system_arguments)
     }
 
     # Badge that will be connected to other TimelineItems.

data/app/lib/primer/audited/dsl.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Primer
+  # :nodoc:
+  module Audited
+    # DSL to register when a component has passed an accessibility audit.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Primer::Audited::Dsl
+    #   audited_at 'YYYY-MM-DD'
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      included do
+        class_attribute :audit_date, instance_writer: false
+      end
+
+      class_methods do
+        def audited_at(date = nil)
+          return audit_date if date.nil?
+
+          self.audit_date = date
+        end
+      end
+    end
+  end
+end

data/lib/primer/classify/cache.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require_relative "flex"
-require_relative "grid"
 
 module Primer
   class Classify
@@ -51,21 +50,6 @@ module Primer
           values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
         )
 
-        preload(
-          keys: Primer::Classify::Grid::CONTAINER_KEY,
-          values: Primer::Classify::Grid::CONTAINER_VALUES
-        )
-
-        preload(
-          keys: Primer::Classify::Grid::CLEARFIX_KEY,
-          values: [true]
-        )
-
-        preload(
-          keys: Primer::Classify::Grid::COL_KEY,
-          values: Primer::Classify::Grid::COL_VALUES
-        )
-
         preload(
           keys: :text_align,
           values: [:left, :center, :right]

data/lib/primer/classify/utilities.rb

@@ -28,14 +28,21 @@ module Primer
         "^width" => "w",
         "^height" => "h",
         "^color-bg" => "bg",
-        "^color-border" => "border_color"
+        "^color-border" => "border_color",
+        "^color-fg" => "color"
       }.freeze
 
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
       BREAKPOINT_INDEX_CACHE = Hash.new { |h, k| h[k] = BREAKPOINTS.index(k) }
 
       class << self
+        attr_accessor :validate_class_names
+        alias validate_class_names? validate_class_names
+
         def classname(key, val, breakpoint = "")
+          # For cases when `argument: false` is passed in, treat like we would nil
+          return nil unless val
+
           if (valid = validate(key, val, breakpoint))
             valid
           else
@@ -63,7 +70,7 @@ module Primer
         # returns Boolean
         def supported_selector?(selector)
           # This method is too slow to run in production
-          return false if ENV["RAILS_ENV"] == "production"
+          return false unless validate_class_names?
 
           find_selector(selector).present?
         end
@@ -87,7 +94,7 @@ module Primer
         # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
         def classes_to_hash(classes)
           # This method is too slow to run in production
-          return { classes: classes } if ENV["RAILS_ENV"] == "production"
+          return { classes: classes } unless validate_class_names?
 
           obj = {}
           classes = classes.split
@@ -170,19 +177,19 @@ module Primer
 
         def validate(key, val, breakpoint)
           unless supported_key?(key)
-            raise ArgumentError, "#{key} is not a valid Primer utility key" unless ENV["RAILS_ENV"] == "production"
+            raise ArgumentError, "#{key} is not a valid Primer utility key" if validate_class_names?
 
             return ""
           end
 
           unless breakpoint.empty? || responsive?(key, val)
-            raise ArgumentError, "#{key} does not support responsive values" unless ENV["RAILS_ENV"] == "production"
+            raise ArgumentError, "#{key} does not support responsive values" if validate_class_names?
 
             return ""
           end
 
           unless supported_value?(key, val)
-            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless ENV["RAILS_ENV"] == "production"
+            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" if validate_class_names?
 
             return "#{key.to_s.dasherize}-#{val.to_s.dasherize}"
           end