primer_view_components 0.0.31 → 0.0.36

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f3b2f2609173d59173576d7bd384ae8902540a1be4434930c9b982d3f86c50c
-  data.tar.gz: 4d0d573d72270fcb808857fa502a9cda31279755dc7859121301e97ea6a1b305
+  metadata.gz: ccc56525f479af9da0ee1dea8985e5a54aad6567e9ec932eef93707b896b91d3
+  data.tar.gz: c718f55ccc5e7fc6d76640410c4c2f3df140f45ab4765eeef3d3e3355893ed07
 SHA512:
-  metadata.gz: f14ba8ad8f0698e04791c839ac68f1f355c15d37436306c510589c3a67f1197cdc7449ee4301f87b5cecf6f0234c5d704c074ecdc52fd3d5dbad735d9b7bd6c9
-  data.tar.gz: a6b4b86bd72500b3d853a5ca2f68a14b76188a6e219b33f091d992f509772dd7f0e707d1a609b2a8ff4e382f6237104b4423c5ba9bec6ca8a0b0cf8c7822417a
+  metadata.gz: c3859007d82a2ae6653a215894021f6f49318c21cd608d333cfbb0beef659b17d66e71bc913933ab758846c07dc35c72a791ddd12d05e40795e17798c5fffe53
+  data.tar.gz: 26898a446277ee8df6be61241af11506220e29bcf94a180cdf334b54b19df932486f42737320f61b87c3c4cdc867f0b5980c99cc4623d8760d85cf92e0510ade

data/CHANGELOG.md

@@ -2,6 +2,100 @@
 
 ## main
 
+## 0.0.36
+
+* Add `block` flag to `ButtonComponent`.
+
+    *Manuel Puyol*
+
+* Add `link` and `invisible` schemes to `ButtonComponent`.
+
+    *Manuel Puyol*
+
+* Create `CloseButton` and `HiddenTextExpander` component.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `AutoCompleteComponent` to `AutoComplete` and `AutoCompleteItemComponent` to `AutoComplete::Item`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `TruncateComponent` to `Truncate` and promote it to beta.
+
+    *Manuel Puyol*
+
+## 0.0.35
+
+* Promote `AutoCompleteComponent`, `AutoCompleteItemComponent`, `AvatarStackComponent` and `ButtonComponent` to beta.
+
+    *Manuel Puyol*
+
+* Allow `UnderlineNav` tabs to be rendered as a `<ul><li>` list.
+
+    *Manuel Puyol*
+
+* _Accessibility:_ Don't add tab roles when `UnderlineNav` or `TabNav` use link redirects.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Make `label` required for `UnderlineNav` and `TabNav`.
+
+    *Manuel Puyol*
+
+## 0.0.34
+
+* Add `p: :responsive` and `m: :auto` system arguments.
+
+    *Manuel Puyol*
+
+* Remove `my: :auto` and negative `m:` system arguments.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `FlashComponent` `variant` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `LinkComponent` `variant` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `ButtonComponent` `button_type` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `ButtonMarketingComponent` `button_type` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `StateComponent` `color` argument to `scheme`.
+
+    *Manuel Puyol*
+
+## 0.0.33
+
+* Remove `TabbedComponent` validation requiring a tab to be selected.
+
+    *Manuel Puyol*
+
+## 0.0.32
+
+* Allow passing the icon name as a positional argument to `OcticonComponent`.
+
+    *Manuel Puyol*
+
+* Promote `TimeAgoComponent` to beta.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Update `TabNav#tab` API to accept the tab content as a block and panel content as a slot.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Update `UnderlineNavComponent` API be more strict and support `TabContainer`.
+
+    *Manuel Puyol*
+
 ## 0.0.31
 
 * Fix `Popover` bug where body was only returning the last line of the HTML.

data/README.md

@@ -1,12 +1,12 @@
 <p align="center">
-  <img width="300px" src="/static/assets/readme-components.png">
+  <img width="300px" src="/static/assets/view-components.svg">
 </p>
 
 <h1 align="center">Primer ViewComponents</h1>
 
 <p align="center">ViewComponents for the Primer Design System</p>
 
-_Note: This library is in pre-release development and should not be considered stable._
+_Note: This library is under active pre-1.0 development. Breaking changes are likely in patch releases._
 
 ## Documentation
 

data/app/components/primer/{auto_complete_component.rb → auto_complete.rb}

@@ -2,15 +2,15 @@
 
 module Primer
   # Use AutoComplete to populate input values from server search results.
-  class AutoCompleteComponent < Primer::Component
-    include ViewComponent::SlotableV2
+  class AutoComplete < Primer::Component
+    status :beta
 
     DEFAULT_INPUT_TYPE = :text
     INPUT_TYPE_OPTIONS = [DEFAULT_INPUT_TYPE, :search].freeze
 
     # Required input used to search for results
     #
-    # @param type [Symbol] <%= one_of(Primer::AutoCompleteComponent::INPUT_TYPE_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::AutoComplete::INPUT_TYPE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :input, lambda { |type: DEFAULT_INPUT_TYPE, classes: "form-control", **system_arguments|
       system_arguments[:tag] = :input
@@ -37,40 +37,40 @@ module Primer
     }
 
     # @example Default
-    #   <%= render(Primer::AutoCompleteComponent.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
+    #   <%= render(Primer::AutoComplete.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
     #     <% c.input(type: :text, name: "input") %>
     #     <% c.results do %>
-    #       <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>
+    #       <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
     #         Selected
     #       <% end %>
-    #       <%= render(Primer::AutoCompleteItemComponent.new(value: "value")) do |c| %>
+    #       <%= render(Primer::AutoComplete::Item.new(value: "value")) do |c| %>
     #         Not selected
     #       <% end %>
     #     <% end %>
     #   <% end %>
     #
     # @example With custom classes for the results
-    #   <%= render(Primer::AutoCompleteComponent.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
+    #   <%= 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 %>
-    #       <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>
+    #       <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
     #         Selected
     #       <% end %>
-    #       <%= render(Primer::AutoCompleteItemComponent.new(value: "value")) do |c| %>
+    #       <%= render(Primer::AutoComplete::Item.new(value: "value")) do |c| %>
     #         Not selected
     #       <% end %>
     #     <% end %>
     #   <% end %>
     #
     # @example With Icon
-    #   <%= render(Primer::AutoCompleteComponent.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
+    #   <%= render(Primer::AutoComplete.new(src: "/users/search", id: "user-popup", position: :relative)) do |c| %>
     #     <% c.input(type: :text, name: "input") %>
     #     <% c.icon(icon: :search) %>
     #     <% c.results do %>
-    #       <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>
+    #       <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
     #         Selected
     #       <% end %>
-    #       <%= render(Primer::AutoCompleteItemComponent.new(value: "value")) do |c| %>
+    #       <%= render(Primer::AutoComplete::Item.new(value: "value")) do |c| %>
     #         Not selected
     #       <% end %>
     #     <% end %>

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

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

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

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

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  class AutoComplete
+    # Use AutoCompleteItem to list results of an auto-completed search.
+    class Item < Primer::Component
+      status :beta
+
+      # @example Default
+      #   <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
+      #     Selected
+      #   <% end %>
+      #   <%= render(Primer::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

data/app/components/primer/avatar_stack_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use AvatarStack to stack multiple avatars together.
   class AvatarStackComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    status :beta
 
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze

data/app/components/primer/base_component.rb

@@ -22,94 +22,124 @@ module Primer
   # ```html
   # <h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>
   # ```
-  #
-  # ## HTML attributes
-  #
-  # System arguments include most HTML attributes. For example:
-  #
-  # | Name | Type | Description |
-  # | :- | :- | :- |
-  # | `width` | `Integer` | Width. |
-  # | `height` | `Integer` | Height. |
-  # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
-  # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
-  # | `title` | `String` | The `title` attribute. |
-  # | `style` | `String` | Inline styles. |
-  # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
   class BaseComponent < Primer::Component
     status :beta
 
-    include TestSelectorHelper
-
-    # @param test_selector [String] Adds `data-test-selector='given value'` in non-Production environments for testing purposes.
-    #
-    # @param m [Integer] Margin. <%= one_of((-6..6).to_a) %>
-    # @param mt [Integer] Margin top. <%= one_of((-6..6).to_a) %>
-    # @param mr [Integer] Margin right. <%= one_of((-6..6).to_a) %>
-    # @param mb [Integer] Margin bottom. <%= one_of((-6..6).to_a) %>
-    # @param ml [Integer] Margin left. <%= one_of((-6..6).to_a) %>
-    # @param mx [Integer] Horizontal margins. <%= one_of((-6..6).to_a + [:auto]) %>
-    # @param my [Integer] Vertical margins. <%= one_of((-6..6).to_a) %>
-    # @param p [Integer] Padding. <%= one_of((0..6).to_a) %>
-    # @param pt [Integer] Padding left. <%= one_of((0..6).to_a) %>
-    # @param pr [Integer] Padding right. <%= one_of((0..6).to_a) %>
-    # @param pb [Integer] Padding bottom. <%= one_of((0..6).to_a) %>
-    # @param pl [Integer] Padding left. <%= one_of((0..6).to_a) %>
-    # @param px [Integer] Horizontal padding. <%= one_of((0..6).to_a) %>
-    # @param py [Integer] Vertical padding. <%= one_of((0..6).to_a) %>
-    #
-    # @param position [Symbol] <%= one_of([:relative, :absolute, :fixed]) %>
-    #
-    # @param top [Boolean] If `false`, sets `top: 0`.
-    # @param right [Boolean] If `false`, sets `right: 0`.
-    # @param bottom [Boolean] If `false`, sets `bottom: 0`.
-    # @param left [Boolean] If `false`, sets `left: 0`.
-    #
-    # @param display [Symbol] <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %>
-    #
-    # @param v [Symbol] Visibility. <%= one_of([:hidden, :visible]) %>
-    #
-    # @param hide [Symbol] Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %>
-    #
-    # @param vertical_align [Symbol] <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %>
-    #
-    # @param float [Symbol] <%= one_of([:left, :right]) %>
-    #
-    # @param col [Integer] Number of columns.
-    #
-    # @param underline [Boolean] Whether text should be underlined.
-    #
-    # @param color [Symbol] Text color. <br /> <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS) %>
-    # @param bg [String, Symbol] Background color. Accepts either a hex value as a String or a color name as a Symbol.
-    #
-    # @param box_shadow [Boolean, Symbol] Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %>
-    # @param border [Symbol] <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %>
-    # @param border_color [Symbol] <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalBorderColors::DEPRECATED_OPTIONS) %>
-    # @param border_top [Integer] Set to `0` to remove the top border.
-    # @param border_bottom [Integer] Set to `0` to remove the bottom border.
-    # @param border_left [Integer] Set to `0` to remove the left border.
-    # @param border_right [Integer] Set to `0` to remove the right border.
-    # @param border_radius [Integer] <%= one_of([0, 1, 2, 3]) %>
-    #
-    # @param font_size [String, Integer] <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %>
-    # @param text_align [Symbol] Text alignment. <%= one_of([:left, :right, :center]) %>
-    # @param font_weight [Symbol] Font weight. <%= one_of([:light, :normal, :bold]) %>
-    #
-    # @param flex [Integer, Symbol] <%= one_of([1, :auto]) %>
-    # @param flex_grow [Integer] To enable, set to `0`.
-    # @param flex_shrink [Integer] To enable, set to `0`.
-    # @param align_self [Symbol] <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %>
-    # @param justify_content [Symbol] <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %>
-    # @param align_items [Symbol] <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %>
-    # @param width [Symbol] <%= one_of([:fit, :fill]) %>
-    # @param height [Symbol] <%= one_of([:fit, :fill]) %>
-    #
-    # @param word_break [Symbol] Whether to break words on line breaks. Can only be `:break_all`.
-    #
-    # @param animation [Symbol] <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %>
-    #
-    # @param tag [Symbol] HTML tag name to be passed to `tag.send`.
-    # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes.
+    # ## HTML attributes
+    #
+    # System arguments include most HTML attributes. For example:
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
+    # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
+    # | `height` | `Integer` | Height. |
+    # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
+    # | `style` | `String` | Inline styles. |
+    # | `title` | `String` | The `title` attribute. |
+    # | `width` | `Integer` | Width. |
+    #
+    # ## Animation
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
+    #
+    # ## Border
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
+    # | `border_left` | Integer | Set to `0` to remove the left border. |
+    # | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
+    # | `border_right` | Integer | Set to `0` to remove the right border. |
+    # | `border_top` | Integer | Set to `0` to remove the top border. |
+    # | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
+    # | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
+    #
+    # ## Color
+    #
+    # | 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) %> |
+    # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
+    # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
+    #
+    # ## Flex
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `align_items` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %> |
+    # | `align_self` | Symbol | <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %> |
+    # | `flex_grow` | Integer | To enable, set to `0`. |
+    # | `flex_shrink` | Integer | To enable, set to `0`. |
+    # | `flex` | Integer, Symbol | <%= one_of([1, :auto]) %> |
+    # | `justify_content` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %> |
+    # | `width` | Symbol | <%= one_of([:fit, :fill]) %> |
+    #
+    # ## Grid
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `col` | Integer | Number of columns. |
+    #
+    # ## Layout
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %> |
+    # | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
+    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
+    # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
+    # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
+    #
+    # ## Position
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
+    # | `float` | Symbol | <%= one_of([:left, :right]) %> |
+    # | `left` | Boolean | If `false`, sets `left: 0`. |
+    # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
+    # | `right` | Boolean | If `false`, sets `right: 0`. |
+    # | `top` | Boolean | If `false`, sets `top: 0`. |
+    #
+    # ## Spacing
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
+    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
+    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
+    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
+    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
+    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
+    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
+    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
+    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
+    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
+    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
+    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
+    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
+    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
+    #
+    # ## Typography
+    #
+    # | 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]) %> |
+    # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
+    # | `underline` | Boolean | Whether text should be underlined. |
+    # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
+    #
+    # ## Other
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
+    # | tag | Symbol | HTML tag name to be passed to `content_tag`. |
+    # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
       @result = Primer::Classify.call(**system_arguments.merge(classes: classes))