primer_view_components 0.0.45 → 0.0.49

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8953ba874b51d234f8b42590fb30c2cc073c54ffd3b7a56dad24b9e6aa4d2f26
-  data.tar.gz: a0ac7e3a02d41fde2096547c8c68a91f99c003dee28bcb18a5e0862f46c1058f
+  metadata.gz: 43c27ddfb1f920ba9dfd9989d859cc61b3fd26bc3788a44873412c971ad58cc1
+  data.tar.gz: 640aed54b2b1e68bb24c06989320f445da9e2e3c2981e959e693345f61fc92cf
 SHA512:
-  metadata.gz: 89aa1e3a6f977a4bf25675092205034efc9797d275ea9d8e01b7bc50423506f67b2d05ca03a74b69dd3b16b669c6fa68d12b96895647218ca758034ed00d29ab
-  data.tar.gz: 46eead3cd6ae2b57008f2f7699e572029e736c5000dfd480c0cd5f399de7ac6160f746ccfab2d79305216f7e0602fc280b356051cd120e796f88988dde0fe303
+  metadata.gz: 7c6b6ce07b479c462a01cfe65ccda3da920689c5e6642231f897bf5f92f559836d30d6f01bfec2c7ae99545c391abe25b85e7cd45da18de8249f63176b00bedb
+  data.tar.gz: ef88c518675d73c7c418fee48a11f173200f3a98ab4f10115fcfad5ccf5fa4ef0b3452da7bb9577a55a3d3286a3536f616f56aac4a07108421e8466abc76250b

data/CHANGELOG.md

@@ -1,7 +1,201 @@
 # CHANGELOG
 
+<!--
+Authoring changelog entries
+
+This file holds all the changes made in previous versions of Primer View Components and the ones coming to the next version.
+To add yours, you need to find in which category to write it under the `main` section. `Main` is the first section on top of the document.
+There are six categories currently in use, `New`, `Updates`, `Bug fixes`, `Breaking changes`, `Deprecations` and `Misc`.
+
+- New
+Category for new components, system behaviours, options and arguments changes
+
+- Updates
+Every non-breaking change to the source code go there.
+
+- Bug Fixes
+Non-breaking bug fixes to existing code.
+
+- Breaking Changes
+The category for changes creating incompatibilities to code written with previous versions.
+It includes any changes to components name, signature and behaviour. Also, include removing tags options or changing file location.
+If you are not sure you made breaking changes, ask us in your pull request.
+
+- Deprecations
+For changes that explicitly deprecate part of the code base.
+
+- Misc
+The category for changes related to documentation, testing and tooling. Also, for pull requests that can't fit in other sections.
+-->
+
 ## main
 
+## 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
+
+* Default to matching `name` and `id` of `input`.
+
+    *Kate Higa*
+
+* Restrict usage of padding system arguments on BorderBox, recommending use of `padding` density instead.
+
+    *Joel Hawksley*
+
+### Breaking changes
+
+* Restrict `TabNav`and `Tab` tags.
+
+    *Kate Higa*
+
+* Restrict `AvatarStack` body slot tag and `ImageCrop` spinner tag.
+
+    *Kate Higa*
+
+* Restrict `Details` body slot tags and `UnderlineNav` body slot tags.
+
+    *Kate Higa*
+
+* Move Primer::Classify from `app/lib/` to `lib/`. This requires an extra `require "primer/classify"` statement for anywhere Classify is needed.
+
+    *Manuel Puyol, Jon Rohan*
+
+* Restrict `Menu` heading slot tags to heading tags and require `tag` argument.
+
+    *Kate Higa*
+
+* Adding animation, vertical_align, word_break, display, visibility, & position arguments to the utilities class. `animation: :grow` is now `animation: :hover_grow` this was a change because we changed the class name in primer.
+
+    *Jon Rohan*
+
+### Misc
+
+* Update contributing guidelines with release instructions.
+
+    *Kate Higa*
+
+* Prevent flexible tag syntax with rubocop rule.
+
+    *Kate Higa*
+
+* Update linter autocorrection to use `""` instead of `true` for boolean attributes.
+
+    *Manuel Puyol*
+
+* Update Storybook version.
+
+    *Manuel Puyol*
+
+* Added a changelog authoring guide to `CHANGELOG.md`.
+
+    *Amélia Chavot*
+
 ## 0.0.45
 
 ### Updates

data/app/components/primer/base_component.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "primer/classify"
+
 module Primer
   # All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).
   #
@@ -43,7 +45,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
+    # | `animation` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:animation)) %> |
     #
     # ## Border
     #
@@ -61,7 +63,7 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
+    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBackgroundColors::OPTIONS, lower: true) %> |
     # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
     # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
     #
@@ -91,11 +93,11 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
+    # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
     # | `height` | Symbol | <%= one_of([:fit]) %> |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
-    # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
-    # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
+    # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
+    # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |
     #
     # ## Position
     #
@@ -104,7 +106,7 @@ module Primer
     # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
     # | `float` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:float)) %> |
     # | `left` | Boolean | If `false`, sets `left: 0`. |
-    # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
+    # | `position` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:position)) %> |
     # | `right` | Boolean | If `false`, sets `right: 0`. |
     # | `top` | Boolean | If `false`, sets `top: 0`. |
     #
@@ -138,7 +140,7 @@ module Primer
     # | `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`. |
+    # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Primer::Classify::Utilities.mappings(:word_break)) %> |
     #
     # ## Other
     #
@@ -152,6 +154,33 @@ module Primer
 
       raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?
 
+      if (denylist = system_arguments[:system_arguments_denylist])
+        if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
+          # Convert denylist from:
+          # { [:p, :pt] => "message" } to:
+          # { p: "message", pt: "message" }
+          unpacked_denylist =
+            denylist.each_with_object({}) do |(keys, value), memo|
+              keys.each { |key| memo[key] = value }
+            end
+
+          violations = unpacked_denylist.keys & @system_arguments.keys
+
+          if violations.any?
+            message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
+            violations.each do |violation|
+              message += "\n The #{violation} system argument is not allowed here. #{unpacked_denylist[violation]}"
+            end
+
+            raise(ArgumentError, message)
+          end
+        end
+
+        # Remove :system_arguments_denylist key and any denied keys from system arguments
+        @system_arguments.except!(:system_arguments_denylist)
+        @system_arguments.except!(*denylist.keys.flatten)
+      end
+
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
       @system_arguments[:"data-view-component"] = true

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