openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,218 @@
+# 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.
+    #
+    #   * `label_text` is required and visible by default.
+    #   * If you must hide the label, set `visually_hide_label` to `true`.
+    #   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
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "FormControl-small",
+        DEFAULT_SIZE => "FormControl-medium",
+        :large => "FormControl-large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_WIDTH = :auto
+      WIDTH_MAPPINGS = {
+        DEFAULT_WIDTH => "Overlay--width-auto",
+        :small => "Overlay--width-small",
+        :medium => "Overlay--width-medium",
+        :large => "Overlay--width-large",
+        :xlarge => "Overlay--width-xlarge",
+        :xxlarge => "Overlay--width-xxlarge"
+      }.freeze
+      WIDTH_OPTIONS = WIDTH_MAPPINGS.keys
+
+      # Customizable results list.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :results, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :ul
+        system_arguments[:id] = @list_id
+        system_arguments[:classes] = class_names(
+          "ActionListWrap ActionListWrap--inset",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Leading visual.
+      #
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          system_arguments[:classes] = class_names("FormControl-input-leadingVisual")
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
+      # Customizable input used to search for results.
+      # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :input, lambda { |**system_arguments|
+        sanitized_args = deny_tag_argument(**system_arguments)
+        sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
+        deny_aria_key(
+          :label,
+          "instead of `aria-label`, include `label_text` and set `visually_hide_label` to `true` on the component initializer.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :id,
+          "`id` will always be set to @input_id.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :name,
+          "Set @input_name on the component initializer instead with `input_name`.",
+          **sanitized_args
+        )
+        sanitized_args[:id] = @input_id
+        sanitized_args[:name] = @input_name
+        sanitized_args[:tag] = :input
+        sanitized_args[:autocomplete] = "off"
+        sanitized_args[:disabled] = true if @disabled
+        sanitized_args[:invalid] = true if @invalid
+        sanitized_args[:type] = :text
+        sanitized_args[:classes] = class_names(
+          "FormControl-input",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          sanitized_args[:classes],
+          "FormControl-inset": @inset,
+          "FormControl-monospace": @monospace
+        )
+        sanitized_args[:placeholder] = @placeholder
+
+        Primer::BaseComponent.new(**sanitized_args)
+      }
+
+      # @example Leading visual
+      #   @description
+      #     Display any Octicon as a leading visual within the field
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/view-components/rails-app/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
+      #     <% end %>
+      #
+      # @example Trailing action
+      #   @description
+      #     Show a clear button
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/view-components/rails-app/auto_complete", show_clear_button: true )) %>
+      #
+      # @example Visually hidden label
+      #   @description
+      #     A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/view-components/rails-app/auto_complete", visually_hide_label: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
+      #     <% end %>
+      #
+      # @example Full width field
+      #   @description
+      #     To allow field to span width of its container, set `full_width` to `true`.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", full_width: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
+      #     <% end %>
+      #
+      # @example Inset variant
+      #   @description
+      #     Use the `inset` variant to change the input background color to be subtle.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", inset: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
+      #     <% end %>
+      #
+      # @example Monospace variant
+      #   @description
+      #     Use the `monospace` variant to change the input font family.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/view-components/rails-app/auto_complete", monospace: true)) do |component| %>
+      #       <% component.with_leading_visual_icon(icon: :search) %>
+      #     <% end %>
+      #
+      # @example With custom classes for the input
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
+      #     <% component.with_input(classes: "custom-class") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
+      #     <% component.with_results(classes: "custom-class") %>
+      #   <% end %>
+      #
+      # @param label_text [String] The label of the input.
+      # @param src [String] The route to query.
+      # @param input_id [String] Id of the input element.
+      # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
+      # @param list_id [String] Id of the list element.
+      # @param visually_hide_label [Boolean] Controls if the label is visible. If `true`, screen reader only text will be added.
+      # @param show_clear_button [Boolean] Adds optional clear button.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param size [Hash] Input size can be small, medium (default), or large
+      # @param full_width [Boolean] Input can be full-width or fit to content
+      # @param width [String] Optional parameter to set max width of results list. <%= one_of(Primer::Beta::AutoComplete::WIDTH_OPTIONS) %>
+      # @param disabled [Boolean] Disabled input
+      # @param invalid [Boolean] Invalid input
+      # @param placeholder [String] The placeholder text displayed within the input
+      # @param inset [Boolean] subtle input background color
+      # @param monospace [Boolean] monospace input font family
+      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, width: DEFAULT_WIDTH, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
+        @label_text = label_text
+        @list_id = list_id
+        @input_id = input_id
+        @input_name = input_name || input_id
+        @placeholder = placeholder
+        @visually_hide_label = visually_hide_label
+        @show_clear_button = show_clear_button
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "auto-complete"
+        @system_arguments[:src] = src
+        @system_arguments[:for] = list_id
+        @disabled = disabled
+        @invalid = invalid
+        @size = size
+        @inset = inset
+        @monospace = monospace
+        @full_width = full_width
+        @width = width
+        @field_wrap_classes = class_names(
+          "FormControl-input-wrap",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          "FormControl-input-wrap--trailingAction": show_clear_button
+        )
+        @form_group_classes = class_names(
+          "FormControl",
+          "FormControl--fullWidth": full_width
+        )
+        @overlay_classes = class_names(
+          "Overlay",
+          "Overlay--height-auto",
+          WIDTH_MAPPINGS[fetch_or_fallback(WIDTH_OPTIONS, @width, DEFAULT_WIDTH)]
+        )
+      end
+
+      # add `input` and `results` without needing to explicitly call them in the view
+      def before_render
+        with_results(classes: "") unless results?
+        with_input(classes: "") unless input?
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.avatar{background-color:var(--avatar-bgColor,var(--color-avatar-bg));border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border));display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}

data/app/components/primer/beta/avatar.css.json

@@ -0,0 +1,17 @@
+{
+  "name": "beta/avatar",
+  "selectors": [
+    ".avatar",
+    ".avatar-link",
+    ".avatar-group-item",
+    ".avatar-1",
+    ".avatar-2",
+    ".avatar-small",
+    ".avatar-3",
+    ".avatar-4",
+    ".avatar-5",
+    ".avatar-6",
+    ".avatar-7",
+    ".avatar-8"
+  ]
+}

data/app/components/primer/beta/avatar.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,6DAAuC,CACvC,4CAAyC,CAEzC,yEAA+C,CAP/C,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--avatar-borderColor);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.avatar-2 {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.avatar-3 {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.avatar-4 {\n  width: var(--base-size-28);\n  height: var(--base-size-28);\n}\n\n.avatar-5 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.avatar-6 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.avatar-7 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.avatar-8 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n"]}

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

@@ -0,0 +1,73 @@
+/* avatar */
+
+.avatar {
+  display: inline-block;
+  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
+  line-height: 1;
+  vertical-align: middle;
+  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */
+  border-radius: var(--borderRadius-medium);
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px var(--avatar-borderColor);
+}
+
+.avatar-link {
+  float: left;
+  line-height: 1;
+}
+
+/* User for example on /stars and /user for grids of avatars */
+.avatar-group-item {
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+/* Border radius */
+
+.avatar-1,
+.avatar-2,
+.avatar-small {
+  border-radius: var(--borderRadius-small);
+}
+
+/* Sizes */
+
+.avatar-1 {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
+.avatar-2 {
+  width: var(--base-size-20);
+  height: var(--base-size-20);
+}
+
+.avatar-3 {
+  width: var(--base-size-24);
+  height: var(--base-size-24);
+}
+
+.avatar-4 {
+  width: var(--base-size-28);
+  height: var(--base-size-28);
+}
+
+.avatar-5 {
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+}
+
+.avatar-6 {
+  width: var(--base-size-40);
+  height: var(--base-size-40);
+}
+
+.avatar-7 {
+  width: var(--base-size-48);
+  height: var(--base-size-48);
+}
+
+.avatar-8 {
+  width: var(--base-size-64);
+  height: var(--base-size-64);
+}

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

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Avatar` can be used to represent users and organizations on GitHub.
+    #
+    # - Use the default circle avatar for users, and the square shape
+    # 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
+
+      DEFAULT_SIZE = 20
+      SMALL_THRESHOLD = 24
+
+      DEFAULT_SHAPE = :circle
+      SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
+
+      SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")) %>
+      #
+      # @example Square
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", shape: :square)) %>
+      #
+      # @example Link
+      #   <%= render(Primer::Beta::Avatar.new(href: "#", src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser profile")) %>
+      #
+      # @example With size
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 16)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 20)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 24)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 32)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 40)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 48)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 80)) %>
+      #
+      # @param src [String] The source url of the avatar image.
+      # @param alt [String] Passed through to alt on img tag.
+      # @param size [Integer] <%= one_of(Primer::Beta::Avatar::SIZE_OPTIONS) %>
+      # @param shape [Symbol] Shape of the avatar. <%= one_of(Primer::Beta::Avatar::SHAPE_OPTIONS) %>
+      # @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: nil, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, **system_arguments)
+        @href = href
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :img
+        @system_arguments[:src] = src
+        @system_arguments[:alt] = alt
+        @system_arguments[:size] = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+        @system_arguments[:height] = @system_arguments[:size]
+        @system_arguments[:width] = @system_arguments[:size]
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "avatar",
+          "avatar-small" => size < SMALL_THRESHOLD,
+          "circle" => shape == DEFAULT_SHAPE,
+          "lh-0" => href # Addresses an overflow issue with linked avatars
+        )
+      end
+
+      def call
+        if @href
+          render(Primer::Beta::Link.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

data/app/components/primer/beta/avatar_stack.css

@@ -0,0 +1 @@
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default,var(--color-canvas-default));border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted,var(--color-canvas-subtle));margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade))}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted,var(--color-canvas-subtle));width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));border-right:0;margin-left:-11px;margin-right:0}

data/app/components/primer/beta/avatar_stack.css.json

@@ -0,0 +1,28 @@
+{
+  "name": "beta/avatar_stack",
+  "selectors": [
+    ".AvatarStack",
+    ".AvatarStack .AvatarStack-body",
+    ".AvatarStack.AvatarStack--two",
+    ".AvatarStack.AvatarStack--three-plus",
+    ".AvatarStack-body",
+    ".AvatarStack-body .avatar",
+    ".AvatarStack-body .avatar:first-child",
+    ".AvatarStack-body .avatar:last-child",
+    ".AvatarStack-body .avatar img",
+    ".AvatarStack-body .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar",
+    ".AvatarStack-body:hover .avatar:nth-child(n+4)",
+    ".AvatarStack-body:hover .avatar-more",
+    ".avatar.avatar-more",
+    ".avatar.avatar-more:after",
+    ".avatar.avatar-more:before",
+    ".AvatarStack--right .AvatarStack-body",
+    ".AvatarStack--right .AvatarStack-body:hover .avatar",
+    ".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
+    ".AvatarStack--right .avatar.avatar-more",
+    ".AvatarStack--right .avatar.avatar-more:before",
+    ".AvatarStack--right .avatar.avatar-more:after",
+    ".AvatarStack--right .avatar"
+  ]
+}

data/app/components/primer/beta/avatar_stack.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,6DAAkC,CAClC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,mEAAwC,CAExC,2CAAwC,CADxC,+GAAkE,CAElE,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,2CACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,0DAAgC,CADhC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,0GAA6D,CAL7D,iBAMF,CAEA,2BAEE,oFAAiD,CADjD,UAEF,CAEA,0BAEE,iFAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,iFAUF,CARE,+CACE,SACF,CAEA,8CAEE,0DAAgC,CADhC,SAEF,CAGF,4BAIE,8GAAiE,CADjE,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--bgColor-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--bgColor-default);\n    border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n    border-radius: var(--borderRadius-small);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--bgColor-muted);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--avatarStack-fade-bgColor-muted);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--avatarStack-fade-bgColor-default);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--avatarStack-fade-bgColor-default);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--bgColor-muted);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n}\n"]}

data/app/components/primer/beta/avatar_stack.html.erb

@@ -0,0 +1,10 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= render body_component do %>
+    <% avatars.each_with_index do |avatar, i| %>
+      <% if i == 2 %>
+        <div class="avatar avatar-more"></div>
+      <% end %>
+      <%= avatar %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/avatar_stack.pcss

@@ -0,0 +1,141 @@
+/* AvatarStack */
+
+/* Stacked avatars can be used to show who is participating in thread when
+** there is limited space available. */
+
+.AvatarStack {
+  position: relative;
+  min-width: 26px;
+  height: 20px;
+
+  & .AvatarStack-body {
+    position: absolute;
+  }
+
+  &.AvatarStack--two {
+    min-width: 36px;
+  }
+
+  &.AvatarStack--three-plus {
+    min-width: 46px;
+  }
+}
+
+.AvatarStack-body {
+  display: flex;
+  background: var(--bgColor-default);
+  border-radius: 100px;
+
+  & .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    margin-right: -11px;
+    background-color: var(--bgColor-default);
+    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
+    border-radius: var(--borderRadius-small);
+    box-shadow: none;
+    transition: margin 0.1s ease-in-out;
+
+    &:first-child {
+      z-index: 3;
+    }
+
+    &:last-child {
+      z-index: 1;
+      border-right: 0;
+    }
+
+    & img {
+      border-radius: var(--borderRadius-small);
+    }
+
+    /* Account for 4+ avatars */
+    &:nth-child(n + 4) {
+      display: none;
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    & .avatar {
+      margin-right: 3px;
+    }
+
+    & .avatar:nth-child(n + 4) {
+      display: flex;
+      opacity: 1;
+    }
+
+    & .avatar-more {
+      display: none !important;
+    }
+  }
+}
+
+.avatar.avatar-more {
+  z-index: 1;
+  margin-right: 0;
+  background: var(--bgColor-muted);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: '';
+    border-radius: 2px;
+    outline: var(--borderWidth-thin) solid var(--bgColor-default);
+  }
+
+  &::before {
+    width: 17px;
+    background: var(--avatarStack-fade-bgColor-muted);
+  }
+
+  &::after {
+    width: 14px;
+    background: var(--avatarStack-fade-bgColor-default);
+  }
+}
+
+/* Right aligned variation */
+
+.AvatarStack--right {
+  & .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+
+    &:hover .avatar {
+      margin-right: 0;
+      margin-left: 3px;
+    }
+
+    & .avatar:not(:last-child) {
+      border-left: 0;
+    }
+  }
+
+  & .avatar.avatar-more {
+    background: var(--avatarStack-fade-bgColor-default);
+
+    &::before {
+      width: 5px;
+    }
+
+    &::after {
+      width: 2px;
+      background: var(--bgColor-muted);
+    }
+  }
+
+  & .avatar {
+    margin-right: 0;
+    margin-left: -11px;
+    border-right: 0;
+    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
+  }
+}