primer_view_components 0.0.42 → 0.0.43

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84c899ab3302b9bffbfe3f0d6471a732d3f457fa8f2eec84a3e7e4b9a9e003b0
-  data.tar.gz: b3f96f4caf1154320ebe772c3696526901ad07b9cd0b2327383b94b995c8bac4
+  metadata.gz: 78f4fe987616d5ab746cbd6d6a0bc79ff62ecf33eb2365af3ade87a43461d35b
+  data.tar.gz: 2813cf307508ab9a413d98edbba54e1d7735dc86e853a42587487c7293d42571
 SHA512:
-  metadata.gz: 9cab0b4a7016357d29d099e07ae047a335dc4e394422250cada38c4f861900433a639b20748ae239a0962eb49c4cb0b5a1279746bfab2c5713f51647834c6056
-  data.tar.gz: 89e0b7c38eff95e73b6e0f829153b14033644bd74553fef7a784a9d25d16b7fd52aea7305e4163c1ef294a8a758c4278d24b5f25d6bb194be994f31dd07401e5
+  metadata.gz: 7b13c5c05eb27d2a635396d736daa1039024bef7ddb456d20ec037f2cf270e8cb157ebd40619ca8eed4523e9cde5af2d990b428dc2ff663a42faaf01070a48ef
+  data.tar.gz: c5e126fcf17bf04914a2ea054ca181991a8cb0fda5659753c4e03241e6dfcfe8a5e876b915033cfc69b11c10b3b7946403fdb86f1fca3161eb1278eae29d99ed

data/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 ## main
 
+## 0.0.43
+
+* Upgrade primer/css to 17.2.1
+
+  *Jon Rohan*
+
+### New
+
+* Add `clearfix` and `container` system arguments.
+
+    *Manuel Puyol*
+
+### Updates
+
+* Promote `TabNav` component to beta.
+
+    *Manuel Puyol*
+
+* Allow customizing `TabContainer` when using `TabNav` and `UnderlineNav` components.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Restrict `col` system arguments to only accept values between 1 and 12.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Raise an error if `class` is used as a system argument.
+
+    *Manuel Puyol*
+
+* Don't commit auto-generated component previews.
+
+    *Kate Higa*
+
+* Provide linters for component migrations.
+
+    *Manuel Puyol*
+
+* Update docs to accept multiline descriptions.
+
+    *Manuel Puyol*
+
 ## 0.0.42
 
 ### New

data/app/components/primer/base_component.rb

@@ -83,7 +83,9 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `col` | Integer | Number of columns. |
+    # | `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) %> |
     #
     # ## Layout
     #
@@ -148,6 +150,8 @@ module Primer
       @tag = tag
       @system_arguments = system_arguments
 
+      raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?
+
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
       @system_arguments[:"data-view-component"] = true

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

@@ -1,3 +1,4 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if spinner.present? %>
     <%= spinner %>

data/app/components/primer/blankslate_component.rb

@@ -23,56 +23,74 @@ module Primer
     #     description: "Description",
     #   ) %>
     #
-    # @example Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :globe,
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
     #
-    # @example Loading|Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) do |component| %>
-    #     <% component.spinner(size: :large) %>
-    #   <% end %>
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.spinner(size: :large) %>
+    #     <% end %>
     #
-    # @example Custom content|Pass custom content as a block in place of `description`.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #   ) do %>
-    #     <em>Your custom content here</em>
-    #   <% end %>
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
     #
-    # @example Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :book,
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
     #
-    #     button_text: "Create the first page",
-    #     button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #   ) %>
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
     #
-    # @example Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :book,
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     link_text: "Learn more about wikis",
-    #     link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #   ) %>
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
     #
-    # @example Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: :book,
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     narrow: true,
-    #     large: true,
-    #     spacious: true,
-    #   ) %>
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
     #
     # @param title [String] Text that appears in a larger bold font.
     # @param title_tag [Symbol] HTML tag to use for title.

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

@@ -1,4 +1,4 @@
-<%= wrapper do %>
+<%= wrapper(**@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= extra if @align == :left %>
 

data/app/components/primer/tab_nav_component.rb

@@ -5,6 +5,8 @@ module Primer
   class TabNavComponent < Primer::Component
     include Primer::TabbedComponentHelper
 
+    status :beta
+
     DEFAULT_EXTRA_ALIGN = :left
     EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
 
@@ -102,15 +104,31 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Customizing the body
+    #   <%= render(Primer::TabNavComponent.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
+    # @example Customizing the wrapper
+    #   <%= render(Primer::TabNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
     # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
     # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
     # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+    # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, body_arguments: {}, **system_arguments)
+    def initialize(label:, with_panel: false, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
       @align = DEFAULT_EXTRA_ALIGN
       @with_panel = with_panel
       @system_arguments = system_arguments
       @body_arguments = body_arguments
+      @wrapper_arguments = wrapper_arguments
 
       @system_arguments[:tag] ||= :div
       @system_arguments[:classes] = class_names(

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

@@ -1,4 +1,4 @@
-<%= wrapper do %>
+<%= wrapper(**@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>

data/app/components/primer/underline_nav_component.rb

@@ -116,14 +116,30 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Customizing the body
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", body_arguments: { tag: :ul, classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
+    # @example Customizing the wrapper
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
     # @param label [String] The `aria-label` on top level `<nav>` element.
     # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
     # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
     # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+    # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, **system_arguments)
+    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, wrapper_arguments: {}, **system_arguments)
       @with_panel = with_panel
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+      @wrapper_arguments = wrapper_arguments
 
       @system_arguments = system_arguments
       @system_arguments[:tag] = navigation_tag(with_panel)

data/app/lib/primer/classify.rb

@@ -7,7 +7,7 @@ module Primer
     SPACING_KEYS = Primer::Classify::Spacing::KEYS
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
+    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
       (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
@@ -22,9 +22,10 @@ module Primer
     BOX_SHADOW_KEY = :box_shadow
     VISIBILITY_KEY = :visibility
     ANIMATION_KEY = :animation
+    CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, :float, Primer::Classify::Grid::COL_KEY] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -84,6 +85,7 @@ module Primer
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       Primer::Classify::Flex::KEYS +
+      Primer::Classify::Grid::KEYS +
       [
         BORDER_KEY,
         BORDER_COLOR_KEY,
@@ -97,7 +99,8 @@ module Primer
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
         VISIBILITY_KEY,
-        ANIMATION_KEY
+        ANIMATION_KEY,
+        CONTAINER_KEY
       ]
     ).freeze
 
@@ -206,6 +209,8 @@ module Primer
           memo[:classes] << "rounded-#{val}"
         elsif Primer::Classify::Flex::KEYS.include?(key)
           memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
+        elsif Primer::Classify::Grid::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Grid.classes(key, val, breakpoint)
         elsif key == WIDTH_KEY || key == HEIGHT_KEY
           if val == :fit
             memo[:classes] << "#{key}-#{val}"

data/app/lib/primer/classify/cache.rb

@@ -54,6 +54,21 @@ 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: Primer::Classify::DISPLAY_KEY,
             values: [:flex, :block, :inline_block, :inline_flex, :none, :table, :table_cell]

data/app/lib/primer/classify/grid.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Handler for PrimerCSS grid classes.
+    class Grid
+      extend Primer::FetchOrFallbackHelper
+
+      CONTAINER_KEY = :container
+      CONTAINER_VALUES = [:xl, :lg, :md, :sm].freeze
+
+      CLEARFIX_KEY = :clearfix
+      CLEARFIX_VALUES = [true, false].freeze
+
+      COL_KEY = :col
+      COL_VALUES = (1..12).to_a.freeze
+
+      KEYS = [CONTAINER_KEY, CLEARFIX_KEY, COL_KEY].freeze
+
+      class << self
+        def classes(key, value, breakpoint)
+          send(key, value, breakpoint)
+        end
+
+        private
+
+        def container(value, _breakpoint)
+          val = fetch_or_fallback(CONTAINER_VALUES, value)
+
+          "container-#{val}"
+        end
+
+        def clearfix(value, _breakpoint)
+          "clearfix" if fetch_or_fallback(CLEARFIX_VALUES, value)
+        end
+
+        def col(value, breakpoint)
+          val = fetch_or_fallback(COL_VALUES, value.to_i)
+
+          "col#{breakpoint}-#{val}"
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/tabbed_component_helper.rb

@@ -20,10 +20,10 @@ module Primer
       with_panel ? :div : :nav
     end
 
-    def wrapper
+    def wrapper(**system_arguments)
       return yield unless @with_panel
 
-      render Primer::TabContainerComponent.new do
+      render Primer::TabContainerComponent.new(**system_arguments) do
         yield
       end
     end

data/lib/primer/view_components/linters.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Dir[File.join(__dir__, "linters", "*.rb")].sort.each { |file| require file }

data/lib/primer/view_components/linters/button_component_migration_counter.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require_relative "helpers"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML button is used instead of the component.
+    class ButtonComponentMigrationCounter < Linter
+      include Helpers
+
+      TAGS = %w[button summary a].freeze
+      CLASS = "btn"
+      MESSAGE = "We are migrating buttons to use [Primer::ButtonComponent](https://primer.style/view-components/components/button), please try to use that instead of raw HTML."
+    end
+  end
+end

data/lib/primer/view_components/linters/flash_component_migration_counter.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require_relative "helpers"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML flash is used instead of the component.
+    class FlashComponentMigrationCounter < Linter
+      include Helpers
+
+      TAGS = %w[div].freeze
+      CLASS = "flash"
+      MESSAGE = "We are migrating flashes to use [Primer::FlashComponent](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
+    end
+  end
+end

data/lib/primer/view_components/linters/helpers.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require "json"
+require "openssl"
+
+module ERBLint
+  module Linters
+    # Helper methods for linting ERB.
+    module Helpers
+      def self.included(base)
+        base.include(LinterRegistry)
+
+        define_method "run" do |processed_source|
+          tags(processed_source).each do |tag|
+            next if tag.closing?
+            next unless self.class::TAGS&.include?(tag.name)
+
+            classes = tag.attributes["class"]&.value&.split(" ")
+
+            next unless !self.class::CLASS || classes&.include?(self.class::CLASS)
+
+            generate_offense(self.class, processed_source, tag, self.class::MESSAGE)
+          end
+
+          counter_correct?(processed_source)
+        end
+
+        define_method "autocorrect" do |processed_source, offense|
+          return unless offense.context
+
+          lambda do |corrector|
+            if processed_source.file_content.include?("erblint:counter #{self.class.name.demodulize}")
+              # update the counter if exists
+              corrector.replace(offense.source_range, offense.context)
+            else
+              # add comment with counter if none
+              corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
+            end
+          end
+        end
+      end
+
+      private
+
+      def tags(processed_source)
+        processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
+      end
+
+      def counter_correct?(processed_source)
+        comment_node = nil
+        expected_count = 0
+        rule_name = self.class.name.match(/:?:?(\w+)\Z/)[1]
+        offenses_count = @offenses.length
+
+        processed_source.parser.ast.descendants(:erb).each do |node|
+          indicator_node, _, code_node, = *node
+          indicator = indicator_node&.loc&.source
+          comment = code_node&.loc&.source&.strip
+
+          if indicator == "#" && comment.start_with?("erblint:count") && comment.match(rule_name)
+            comment_node = code_node
+            expected_count = comment.match(/\s(\d+)\s?$/)[1].to_i
+          end
+        end
+
+        if offenses_count.zero?
+          add_offense(processed_source.to_source_range(comment_node.loc), "Unused erblint:count comment for #{rule_name}") if comment_node
+          return
+        end
+
+        first_offense = @offenses[0]
+
+        if comment_node.nil?
+          add_offense(processed_source.to_source_range(first_offense.source_range), "#{rule_name}: If you must, add <%# erblint:counter #{rule_name} #{offenses_count} %> to bypass this check.", "<%# erblint:counter #{rule_name} #{offenses_count} %>")
+        else
+          clear_offenses
+          add_offense(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{offenses_count}.", " erblint:counter #{rule_name} #{offenses_count} ") if expected_count != offenses_count
+        end
+      end
+
+      def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
+        message ||= klass::MESSAGE
+        klass_name = klass.name.split("::")[-1]
+        offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
+        add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 42
+      PATCH = 43
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -20,32 +20,12 @@ namespace :docs do
   end
 
   task :build do
-    require File.expand_path("./../../demo/config/environment.rb", __dir__)
-    require "primer/view_components"
-    require "yard/docs_helper"
-    require "view_component/test_helpers"
-    include ViewComponent::TestHelpers
-    include Primer::ViewHelper
-    include YARD::DocsHelper
-
-    Dir["./app/components/primer/**/*.rb"].sort.each { |file| require file }
-
-    YARD::Rake::YardocTask.new
-
-    # Custom tags for yard
-    YARD::Tags::Library.define_tag("Accessibility", :accessibility)
-    YARD::Tags::Library.define_tag("Deprecation", :deprecation)
-
-    puts "Building YARD documentation."
-    Rake::Task["yard"].execute
+    registry = generate_yard_registry
 
     puts "Converting YARD documentation to Markdown files."
 
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
-
-    registry = YARD::RegistryStore.new
-    registry.load!(".yardoc")
     components = [
       Primer::Image,
       Primer::LocalTime,
@@ -172,7 +152,18 @@ namespace :docs do
         end
 
         initialize_method.tags(:example).each do |tag|
-          (name, description) = tag.name.split("|")
+          name = tag.name
+          description = nil
+          code = nil
+
+          if tag.text.include?("@description")
+            splitted = tag.text.split(/@description|@code/)
+            description = splitted.second.gsub(/^[ \t]{2}/, "").strip
+            code = splitted.last.gsub(/^[ \t]{2}/, "").strip
+          else
+            code = tag.text
+          end
+
           f.puts
           f.puts("### #{name}")
           if description
@@ -180,14 +171,14 @@ namespace :docs do
             f.puts(description)
           end
           f.puts
-          html = view_context.render(inline: tag.text)
+          html = view_context.render(inline: code)
           html.scan(/class="([^"]*)"/) do |classnames|
             classes_found_in_examples.concat(classnames[0].split(" ").reject { |c| c.starts_with?("octicon", "js", "my-") }.map { ".#{_1}"})
           end
           f.puts("<Example src=\"#{html.tr('"', "\'").delete("\n")}\" />")
           f.puts
           f.puts("```erb")
-          f.puts(tag.text.to_s)
+          f.puts(code.to_s)
           f.puts("```")
         end
 
@@ -302,6 +293,22 @@ namespace :docs do
 
     puts "Markdown compiled."
 
+    if components_without_examples.any?
+      puts
+      puts "The following components have no examples defined: #{components_without_examples.map(&:name).join(', ')}. Consider adding an example?"
+    end
+
+    if components_needing_docs.any?
+      puts
+      puts "The following components needs docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
+    end
+  end
+
+  task :preview do
+    registry = generate_yard_registry
+
+    components = Primer::Component.descendants
+
     # Generate previews from documentation examples
     components.each do |component|
       documentation = registry.get(component.name)
@@ -336,15 +343,30 @@ namespace :docs do
         f.puts("end")
       end
     end
+  end
 
-    if components_without_examples.any?
-      puts
-      puts "The following components have no examples defined: #{components_without_examples.map(&:name).join(', ')}. Consider adding an example?"
-    end
+  def generate_yard_registry
+    require File.expand_path("./../../demo/config/environment.rb", __dir__)
+    require "primer/view_components"
+    require "yard/docs_helper"
+    require "view_component/test_helpers"
+    include ViewComponent::TestHelpers
+    include Primer::ViewHelper
+    include YARD::DocsHelper
 
-    if components_needing_docs.any?
-      puts
-      puts "The following components needs docs. Care to contribute them? #{components_needing_docs.map(&:name).join(', ')}"
-    end
+    Dir["./app/components/primer/**/*.rb"].sort.each { |file| require file }
+
+    YARD::Rake::YardocTask.new
+
+    # Custom tags for yard
+    YARD::Tags::Library.define_tag("Accessibility", :accessibility)
+    YARD::Tags::Library.define_tag("Deprecation", :deprecation)
+
+    puts "Building YARD documentation."
+    Rake::Task["yard"].execute
+
+    registry = YARD::RegistryStore.new
+    registry.load!(".yardoc")
+    registry
   end
 end

data/static/statuses.json

@@ -43,7 +43,7 @@
   "Primer::StateComponent": "beta",
   "Primer::SubheadComponent": "beta",
   "Primer::TabContainerComponent": "alpha",
-  "Primer::TabNavComponent": "alpha",
+  "Primer::TabNavComponent": "beta",
   "Primer::TextComponent": "beta",
   "Primer::TimeAgoComponent": "beta",
   "Primer::TimelineItemComponent": "beta",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.42
+  version: 0.0.43
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-05-25 00:00:00.000000000 Z
+date: 2021-06-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -142,6 +142,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: '0.13'
+- !ruby/object:Gem::Dependency
+  name: erb_lint
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: listen
   requirement: !ruby/object:Gem::Requirement
@@ -444,6 +458,7 @@ files:
 - app/lib/primer/classify/functional_border_colors.rb
 - app/lib/primer/classify/functional_colors.rb
 - app/lib/primer/classify/functional_text_colors.rb
+- app/lib/primer/classify/grid.rb
 - app/lib/primer/classify/spacing.rb
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
@@ -454,6 +469,10 @@ files:
 - app/lib/primer/view_helper.rb
 - lib/primer/view_components.rb
 - lib/primer/view_components/engine.rb
+- lib/primer/view_components/linters.rb
+- lib/primer/view_components/linters/button_component_migration_counter.rb
+- lib/primer/view_components/linters/flash_component_migration_counter.rb
+- lib/primer/view_components/linters/helpers.rb
 - lib/primer/view_components/version.rb
 - lib/tasks/coverage.rake
 - lib/tasks/docs.rake