primer_view_components 0.0.41 → 0.0.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7688c3b98d5f6ccb72ff70e62ed06b97b0b5278249fb4aae39501b6b6fa8d009
-  data.tar.gz: b7cbebb4f08c8d380e164b62b9a15fc9fde7d03c1c7ca633f057e50daecbe6a4
+  metadata.gz: 84c899ab3302b9bffbfe3f0d6471a732d3f457fa8f2eec84a3e7e4b9a9e003b0
+  data.tar.gz: b3f96f4caf1154320ebe772c3696526901ad07b9cd0b2327383b94b995c8bac4
 SHA512:
-  metadata.gz: 70a4c3486366d38a89aed292a00a1b196b40031c3f0e53e13dd6bd330805bf0e74c4d631ece19d727c9dd358bfa14075cdd8ae099e2ef9dc715046151f700085
-  data.tar.gz: 94bbad0f1b3b7cb267e566f76deddbacd7ca18b9f8965988c67aff403f4fc297ca926aa55e8881d242a249a4bf61b4b428f4a42e2131a8b0f981ddea4b2c9154
+  metadata.gz: 9cab0b4a7016357d29d099e07ae047a335dc4e394422250cada38c4f861900433a639b20748ae239a0962eb49c4cb0b5a1279746bfab2c5713f51647834c6056
+  data.tar.gz: 89e0b7c38eff95e73b6e0f829153b14033644bd74553fef7a784a9d25d16b7fd52aea7305e4163c1ef294a8a758c4278d24b5f25d6bb194be994f31dd07401e5

data/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 ## main
 
+## 0.0.42
+
+### New
+
+* Add `font_family`, `font_style` and `text_transform` system arguments.
+
+    *Manuel Puyol*
+
+* Add more options for `font_size` and `font_weight`.
+
+    *Manuel Puyol*
+
+### Updates
+
+* Add `align` option to the `TabNav` extra slot to allow HTML ordering.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Auto-generate component previews from doc examples and run integration test checks.
+
+    *Kate Higa, Joel Hawksley*
+
+* Configure previews controller to allow view helper usage in preview template.
+
+    *Kate Higa*
+
+* Only include `ViewComponent::SlotableV2` if `ViewComponent::Base` does not already include it.
+
+    *Manuel Puyol*
+
+* Add `force_system_arguments` option to raise an error if a class is used instead of using System Arguments.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Restrict allowed tags for `Truncate`, `Markdown`, and `HiddenTextExpander`.
+
+    *Kate Higa*
+
 ## 0.0.41
 
 ### New
@@ -46,6 +88,10 @@
 
 ### Breaking changes
 
+* Rename `TooltipComponent` to `Tooltip`.
+
+    *Manuel Puyol*
+
 * Don't allow `OcticonComponent` height/width values under 16px
 
    *Jon Rohan*

data/app/components/primer/auto_complete.rb

@@ -54,7 +54,7 @@ module Primer
     # @example With custom classes for the results
     #   <%= render(Primer::AutoComplete.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
     #     <% c.input(type: :text, name: "input") %>
-    #     <% c.results(classes: "my-custom-class") do %>
+    #     <% c.results(classes: "custom-class") do %>
     #       <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
     #         Selected
     #       <% end %>

data/app/components/primer/base_component.rb

@@ -129,9 +129,12 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
-    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
+    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
+    # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
+    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
+    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
+    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
     # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
     #

data/app/components/primer/button_group.rb

@@ -22,7 +22,7 @@ module Primer
     #     <% component.button(scheme: :primary) { "Primary" } %>
     #     <% component.button(scheme: :danger) { "Danger" } %>
     #     <% component.button(scheme: :outline) { "Outline" } %>
-    #     <% component.button(classes: "my-class") { "Custom class" } %>
+    #     <% component.button(classes: "custom-class") { "Custom class" } %>
     #   <% end %>
     #
     # @example Variants

data/app/components/primer/component.rb

@@ -5,7 +5,7 @@ require "view_component/version"
 module Primer
   # @private
   class Component < ViewComponent::Base
-    include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
+    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper

data/app/components/primer/hidden_text_expander.rb

@@ -10,14 +10,14 @@ module Primer
     #   <%= render(Primer::HiddenTextExpander.new(inline: true)) %>
     #
     # @example Styling the button
-    #   <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "my-custom-class" })) %>
+    #   <%= render(Primer::HiddenTextExpander.new(button_arguments: { p: 1, classes: "custom-class" })) %>
     #
     # @param inline [Boolean] Whether or not the expander is inline.
     # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(inline: false, button_arguments: {}, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :span
+      @system_arguments[:tag] = :span
       @system_arguments[:classes] = class_names(
         "hidden-text-expander",
         @system_arguments[:classes],

data/app/components/primer/image_crop.rb

@@ -20,7 +20,7 @@ module Primer
     #
     # @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") %>
+    #     <% cropper.loading(style: "width: 120px").with_content("Loading...") %>
     #   <% end %>
     #
     # @param src [String] The path of the image to crop.

data/app/components/primer/markdown.rb

@@ -4,6 +4,9 @@ module Primer
   # Use `Markdown` to wrap markdown content
   class Markdown < Primer::Component
     status :beta
+
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :article, :td].freeze
     # @example Default
     #   <%= 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>
@@ -276,10 +279,11 @@ module Primer
     #     <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     #   <% end %>
     #
+    # @param tag [Symbol] <%= one_of(Primer::Markdown::TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
+    def initialize(tag: DEFAULT_TAG, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
 
       @system_arguments[:classes] = class_names(
         "markdown-body",

data/app/components/primer/octicon_component.rb

@@ -35,7 +35,7 @@ module Primer
       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
+      if system_arguments[:height].present? && system_arguments[:height].to_i < 16 || system_arguments[:width].present? && system_arguments[:width].to_i < 16
         system_arguments.delete(:height)
         system_arguments.delete(:width)
       end

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

@@ -1,12 +1,14 @@
 <%= wrapper do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <%= extra %>
+    <%= extra if @align == :left %>
 
     <%= render Primer::BaseComponent.new(**@body_arguments) do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
+
+    <%= extra if @align == :right %>
   <% end %>
 
   <% if @with_panel %>

data/app/components/primer/tab_nav_component.rb

@@ -5,6 +5,9 @@ module Primer
   class TabNavComponent < Primer::Component
     include Primer::TabbedComponentHelper
 
+    DEFAULT_EXTRA_ALIGN = :left
+    EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
+
     # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
     # @param selected [Boolean] Whether the tab is selected.
@@ -23,7 +26,13 @@ module Primer
     }
 
     # Renders extra content to the `TabNav`. This will be rendered after the tabs.
-    renders_one :extra
+    #
+    # @param align [Symbol] <%= one_of(Primer::TabNavComponent::EXTRA_ALIGN_OPTIONS) %>
+    renders_one :extra, lambda { |align: DEFAULT_EXTRA_ALIGN, &block|
+      @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, DEFAULT_EXTRA_ALIGN)
+
+      view_context.capture { block&.call }
+    }
 
     # @example Default
     #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
@@ -72,7 +81,7 @@ module Primer
     #   <% end %>
     #
     # @example With extra content
-    #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
+    #   <%= render(Primer::TabNavComponent.new(label: "With extra content")) do |c| %>
     #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
     #     <% c.tab(href: "#") { "Tab 2" } %>
     #     <% c.tab(href: "#") { "Tab 3" } %>
@@ -81,11 +90,24 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Adding extra content after the tabs
+    #   <%= render(Primer::TabNavComponent.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #     <% c.extra(align: :right) do %>
+    #       <div>
+    #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
+    #       </div>
+    #     <% end %>
+    #   <% 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 system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(label:, with_panel: false, body_arguments: {}, **system_arguments)
+      @align = DEFAULT_EXTRA_ALIGN
       @with_panel = with_panel
       @system_arguments = system_arguments
       @body_arguments = body_arguments

data/app/components/primer/truncate.rb

@@ -5,6 +5,9 @@ module Primer
   class Truncate < Primer::Component
     status :beta
 
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p].freeze
+
     # @example Default
     #   <div class="col-2">
     #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
@@ -19,13 +22,14 @@ module Primer
     # @example Custom size
     #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
     #
+    # @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
     # @param inline [Boolean] Whether the element is inline (or inline-block).
     # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
     # @param max_width [Integer] Sets the max-width of the text.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(inline: false, expandable: false, max_width: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, inline: false, expandable: false, max_width: nil, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "css-truncate",

data/app/lib/primer/classify.rb

@@ -16,7 +16,7 @@ module Primer
     BG_KEY = :bg
     VERTICAL_ALIGN_KEY = :vertical_align
     WORD_BREAK_KEY = :word_break
-    TEXT_KEYS = %i[text_align font_weight].freeze
+    TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
@@ -123,7 +123,7 @@ module Primer
       def validated_class_names(classes)
         return if classes.blank?
 
-        if ENV["RAILS_ENV"] == "development" && !ENV["PRIMER_WARNINGS_DISABLED"]
+        if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
           invalid_class_names =
             classes.split(" ").each_with_object([]) do |class_name, memo|
               memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
@@ -215,7 +215,11 @@ module Primer
         elsif TEXT_KEYS.include?(key)
           memo[:classes] << "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)
-          memo[:classes] << "f#{val.to_s.dasherize}"
+          memo[:classes] << if val == :small || val == :normal
+                              "text-#{val.to_s.dasherize}"
+                            else
+                              "f#{val.to_s.dasherize}"
+                            end
         elsif key == BOX_SHADOW_KEY
           memo[:classes] << if val == true
                               "color-shadow-small"
@@ -236,6 +240,10 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end
       end
+
+      def force_system_arguments?
+        Rails.application.config.primer_view_components.force_system_arguments
+      end
     end
 
     Cache.preload!

data/lib/primer/view_components/engine.rb

@@ -13,7 +13,9 @@ module Primer
       ]
 
       config.primer_view_components = ActiveSupport::OrderedOptions.new
+
       config.primer_view_components.force_functional_colors = true
+      config.primer_view_components.force_system_arguments = false
       config.primer_view_components.silence_deprecations = false
 
       initializer "primer_view_components.assets" do |app|

data/lib/primer/view_components/version.rb

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

data/lib/tasks/docs.rake

@@ -302,6 +302,41 @@ namespace :docs do
 
     puts "Markdown compiled."
 
+    # Generate previews from documentation examples
+    components.each do |component|
+      documentation = registry.get(component.name)
+      short_name = component.name.gsub(/Primer|::/, "")
+      initialize_method = documentation.meths.find(&:constructor?)
+
+      next unless initialize_method.tags(:example).any?
+
+      yard_example_tags = initialize_method.tags(:example)
+
+      path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview.rb")
+      path.dirname.mkdir unless path.dirname.exist?
+
+      File.open(path, "w") do |f|
+        f.puts("module Primer")
+        f.puts("  module Docs")
+        f.puts("    class #{short_name}Preview < ViewComponent::Preview")
+
+        yard_example_tags.each_with_index do |tag, index|
+          method_name = tag.name.split("|").first.downcase.parameterize.underscore
+          f.puts("      def #{method_name}; end")
+          f.puts unless index == yard_example_tags.size - 1
+          path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
+          path.dirname.mkdir unless path.dirname.exist?
+          File.open(path, "w") do |view_file|
+            view_file.puts(tag.text.to_s)
+          end
+        end
+
+        f.puts("    end")
+        f.puts("  end")
+        f.puts("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?"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.41
+  version: 0.0.42
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-05-17 00:00:00.000000000 Z
+date: 2021-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -482,7 +482,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System