primer_view_components 0.0.46 → 0.0.50

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19a15f3c293e45a99165f8fe3ceb6967626cabfa15e726cdbcb614223c6e39c5
-  data.tar.gz: 6554eeda36440b40d83ee5b5cd395fd6af3cfc9e35c0ac971e14be31dae5d5bf
+  metadata.gz: 81f226f5fd176e5a1565b2064ba3a85a8af1c11bfd7c3c9503714f3f5cd41dac
+  data.tar.gz: d655dc0cfa7260a09de3f1f662a1317eb2540914407f33cfdbc07b369a6cd5b0
 SHA512:
-  metadata.gz: d480348ff38e2a89907c58c352632bf3462f1bb8a2cd365e70a04318e9843bf7bf5ba9f4d945d4a51601b5d6786afb2db323d7dd237101ad200f62a297e0d299
-  data.tar.gz: dc0876004af2d8e32cb06b8b703ea0290f764c4d53333b3d0c9053bd73e2f8d87facb12f76776c54d03ca4a7a73fd2e41e1b41db0600a32a4039f442db0840f1
+  metadata.gz: 07bc38eedefeae46a76d6f7a4b28892a4f01ab0018564c610d8143919c3fed93da3ad91c7970225fdfaac1fd12a294b51e245633f690e87b7392a21d3d3d65f8
+  data.tar.gz: c162cf3fca8accf0a92b9045e9e77bce16d3e646793a3fd479b12efd7e545e0cb9c56cc60884b39965ed7f41baf502d990cee3279170a3b896c845558a3ba714

data/CHANGELOG.md

@@ -30,6 +30,150 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.50
+
+### New
+
+* Add linter suggestions for `CloseButton` component.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Update to `octicons` `v15`, removing open-ended dependency. See [https://github.com/primer/octicons/releases/tag/v15.0.0] for icon name changes in release.
+
+    *Joel Hawksley*
+
+### Updates
+
+* Don't require `title` for `Label`.
+
+    *Manuel Puyol*
+
+* Improve autocorrectable linters to convert known SystemArgument classes.
+
+    *Manuel Puyol*
+
+* Add support for `width: :full` and `height: :full` to System Arguments.
+
+    *Joel Hawksley*
+
+### Bug fixes
+
+* Update linters to not autocorrect attributes with ERB blocks.
+
+    *Manuel Puyol*
+
+* Fix `:height` and `:width` docs to pull from Utilities
+
+    *Jon Rohan*
+
+## 0.0.49
+
+### New
+
+* Add linter suggestions for `Label` component.
+
+    *Manuel Puyol*
+
+* Add linter suggestions for `ClipboardCopy` component.
+
+    *Manuel Puyol*
+
+### Updates
+
+* Update the `Truncate` component to accept `:strong` as a tag.
+
+    *Amélia Chavot*
+
+* Improve `Primer::Classify::Utilities.classes_to_hash` performance.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Require tab with panels to have `panel_id` so `aria-controls` can be set.
+
+    *Kate Higa*
+
+* Renames:
+  * `Primer::AvatarStackComponent` to `Primer::Beta::AvatarStack`.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Extract example tag parsing into helper.
+
+    *Kate Higa*
+
+* Generate a static constant JSON and use it when defining linters.
+
+    *Manuel Puyol*
+
+## 0.0.48
+
+### Breaking changes
+
+* Ensure panels in `Navigation::Tab` have a label.
+
+    *Kate Higa*
+
+### Misc
+
+* Expose custom cops and default config for erblint.
+
+    *Manuel Puyol*
+
+* Fix double constant assign.
+
+    *Manuel Puyol*
+
+## 0.0.47
+
+### Breaking changes
+
+* Restrict tag for `Popover` to `:div` and `Popover` heading slot to headings.
+
+    *Kate Higa*
+
+* Renames:
+  * `Primer::AutoComplete` to `Primer::Beta::AutoComplete`
+  * `Primer::AutoComplete::Item` to `Primer::Beta::AutoComplete::Item`
+  * `Primer::AvatarComponent` to `Primer::Beta::Avatar`
+
+    *Manuel Puyol*
+
+### Misc
+
+* Update `doc_examples_axe_test` to exclude non-standalone components and fix `Markdown` example.
+
+    *Kate Higa*
+
+* Update `DetailsComponent` examples.
+
+    *Manuel Puyol*
+
+* Add linter to suggest system arguments instead of classes.
+
+    *Manuel Puyol*
+
+* Update component generator to create components in the right status module.
+
+    *Manuel Puyol*
+
+* Add example for truncating HTML to `Truncate`.
+
+    *Joel Hawksley*
+
+* Update docs generation to point to the correct file sources.
+
+    *Manuel Puyol*
+
+* Add ENV flag to dump linter data into a file.
+
+    *Manuel Puyol*
+
 ## 0.0.46
 
 ### Updates

data/app/components/primer/base_component.rb

@@ -79,7 +79,6 @@ module Primer
     # | `flex_shrink` | Integer | To enable, set to `0`. |
     # | `flex_wrap` | Symbol | <%= one_of(Primer::Classify::Flex::WRAP_MAPPINGS.keys) %> |
     # | `justify_content` | Symbol | <%= one_of(Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES) %> |
-    # | `width` | Symbol | <%= one_of([:fit]) %> |
     #
     # ## Grid
     #
@@ -94,7 +93,8 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
-    # | `height` | Symbol | <%= one_of([:fit]) %> |
+    # | `width` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:width)) %>. Also supports integer values. |
+    # | `height` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:height)) %>. Also supports integer values. |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
     # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
     # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |

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

@@ -0,0 +1,159 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
+    # input field. This list is populated by server search results.
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    #
+    #   * Set the `label` slot to render a visible label. Alternatively, associate an existing visible text element
+    #   as a label by setting `aria-labelledby`.
+    #   * If you must use a non-visible label, set `:"aria-label"` on `AutoComplete` and Primer
+    #   will apply it to the correct elements. However, please note that a visible label should almost
+    #   always be used unless there is compelling reason not to. A placeholder is not a label.
+    class AutoComplete < Primer::Component
+      status :beta
+
+      # Optionally render a visible label. See <%= link_to_accessibility %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :label, lambda { |**system_arguments|
+        system_arguments[:for] = @input_id
+        system_arguments[:tag] = :label
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Required input used to search for results
+      #
+      # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :input, lambda { |**system_arguments|
+        aria_label = aria("label", system_arguments) || @aria_label
+        if aria_label.present?
+          system_arguments[:"aria-label"] = aria_label
+          system_arguments[:aria]&.delete(:label)
+        end
+
+        name = system_arguments[:name] || @input_id
+        Input.new(id: @input_id, name: name, **system_arguments)
+      }
+
+      # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      #
+      renders_one :icon, Primer::OcticonComponent
+
+      # Customizable results list.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :results, lambda { |**system_arguments|
+        system_arguments[:tag] = :ul
+        system_arguments[:id] = @list_id
+        system_arguments[:classes] = class_names(
+          "autocomplete-results",
+          system_arguments[:classes]
+        )
+
+        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        system_arguments[:"aria-label"] = aria_label if aria_label.present?
+        system_arguments[:aria]&.delete(:label)
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) do |c| %>
+      #     <% c.label(classes:"").with_content("Fruits") %>
+      #     <% c.input(type: :text) %>
+      #   <% end %>
+      #
+      # @example With `aria-label`
+      #   <%= render(Primer::Beta::AutoComplete.new("aria-label": "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", position: :relative)) do |c| %>
+      #     <% c.input(type: :text) %>
+      #   <% end %>
+      #
+      # @example With `aria-labelledby`
+      #   <%= render(Primer::HeadingComponent.new(tag: :h2, id: "search-1")) { "Search" } %>
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-2", position: :relative)) do |c| %>
+      #     <% c.input("aria-labelledby": "search-1") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-4", list_id: "fruits-popup-3", position: :relative)) do |c| %>
+      #     <% c.label(classes:"").with_content("Fruits") %>
+      #     <% c.input(type: :text) %>
+      #     <% c.results(classes: "custom-class") do %>
+      #       <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
+      #         Apple
+      #       <% end %>
+      #       <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |c| %>
+      #         Orange
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With Icon
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
+      #     <% c.label(classes:"").with_content("Fruits") %>
+      #     <% c.input(type: :text) %>
+      #     <% c.icon(icon: :search) %>
+      #   <% end %>
+      #
+      # @param src [String] The route to query.
+      # @param input_id [String] Id of the input element.
+      # @param list_id [String] Id of the list element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, list_id:, input_id:, **system_arguments)
+        @list_id = list_id
+        @input_id = input_id
+        @aria_label = aria("label", system_arguments)
+
+        system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "auto-complete"
+        @system_arguments[:src] = src
+        @system_arguments[:for] = list_id
+      end
+
+      # add `results` without needing to explicitly call it in the view
+      def before_render
+        raise ArgumentError, "Missing `input` slot" if input.blank?
+        raise ArgumentError, "Accessible label is required." if label.blank? && input.missing_label?
+
+        results(classes: "") unless results
+      end
+
+      # This component is part of `Primer::Beta::AutoCompleteComponent` and should not be
+      # used as a standalone component.
+      class Input < Primer::Component
+        DEFAULT_TYPE = :text
+        TYPE_OPTIONS = [DEFAULT_TYPE, :search].freeze
+
+        # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(type: DEFAULT_TYPE, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :input
+
+          @aria_label = system_arguments[:"aria-label"]
+          @aria_labelledby = system_arguments[:"aria-labelledby"] || system_arguments.dig(:aria, :labelledby)
+
+          @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+          @system_arguments[:classes] = class_names(
+            "form-control",
+            system_arguments[:classes]
+          )
+        end
+
+        def missing_label?
+          @aria_label.blank? && @aria_labelledby.blank?
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

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

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

data/app/components/primer/beta/auto_complete/item.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    class AutoComplete
+      # Use `AutoCompleteItem` to list results of an auto-completed search.
+      class Item < Primer::Component
+        status :beta
+
+        # @example Default
+        #   <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
+        #     Selected
+        #   <% end %>
+        #   <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do |c| %>
+        #     Not selected
+        #   <% end %>
+        #
+        # @param value [String] Value of the item.
+        # @param selected [Boolean] Whether the item is selected.
+        # @param disabled [Boolean] Whether the item is disabled.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(value:, selected: false, disabled: false, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :option
+          @system_arguments[:"data-autocomplete-value"] = value
+
+          @system_arguments[:"aria-selected"] = true if selected
+          @system_arguments[:"aria-disabled"] = true if disabled
+
+          @system_arguments[:classes] = class_names(
+            "autocomplete-item",
+            system_arguments[:classes],
+            "disabled" => disabled
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+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
+    # 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.
+    # - To stack multiple avatars together, use <%= link_to_component(Primer::Beta::AvatarStack) %>.
+    #
+    # @accessibility
+    #   Images should have text alternatives that describe the information or function represented.
+    #   If the avatar functions as a link, provide alt text that helps convey the function. For instance,
+    #   if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
+    #   rather than `@kittenuser`.
+    #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
+    class Avatar < Primer::Component
+      status :beta
+
+      SMALL_THRESHOLD = 24
+
+      # @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)) %>
+      #
+      # @example Link
+      #   <%= render(Primer::Beta::Avatar.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
+      #
+      # @example With size
+      #   <%= 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)) %>
+      #
+      # @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 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)
+        @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[:classes] = class_names(
+          system_arguments[:classes],
+          "avatar",
+          "avatar-small" => size < SMALL_THRESHOLD,
+          "circle" => !square,
+          "lh-0" => href # Addresses an overflow issue with linked avatars
+        )
+      end
+
+      def call
+        if @href
+          render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
+            render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
+          end
+        else
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end