primer_view_components 0.0.43 → 0.0.47

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

@@ -1,42 +0,0 @@
-# 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_component.rb

@@ -1,75 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # `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::AvatarStackComponent) %>.
-  #
-  # @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 AvatarComponent < Primer::Component
-    status :beta
-
-    SMALL_THRESHOLD = 24
-
-    # @example Default
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
-    #
-    # @example Square
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
-    #
-    # @example Link
-    #   <%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
-    #
-    # @example With size
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
-    #   <%= render(Primer::AvatarComponent.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

data/app/components/primer/button_marketing_component.rb

@@ -1,68 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
-  class ButtonMarketingComponent < Primer::Component
-    DEFAULT_SCHEME = :default
-    SCHEME_MAPPINGS = {
-      DEFAULT_SCHEME => "",
-      :primary => "btn-primary-mktg",
-      :outline => "btn-outline-mktg",
-      :transparent => "btn-transparent"
-    }.freeze
-    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
-
-    DEFAULT_VARIANT = :default
-    VARIANT_MAPPINGS = {
-      DEFAULT_VARIANT => "",
-      :large => "btn-large-mktg"
-    }.freeze
-    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
-
-    DEFAULT_TAG = :button
-    TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
-
-    DEFAULT_TYPE = :button
-    TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
-
-    # @example Schemes
-    #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
-    #   <%= render(Primer::ButtonMarketingComponent.new(scheme: :primary, mr: 2)) { "Primary" } %>
-    #   <%= render(Primer::ButtonMarketingComponent.new(scheme: :outline)) { "Outline" } %>
-    #   <div class="color-bg-canvas-inverse">
-    #     <%= render(Primer::ButtonMarketingComponent.new(scheme: :transparent)) { "Transparent" } %>
-    #   </div>
-    #
-    # @example Sizes
-    #   <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
-    #   <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
-    #
-    # @param scheme [Symbol] <%= one_of(Primer::ButtonMarketingComponent::SCHEME_OPTIONS) %>
-    # @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
-    # @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(
-      scheme: DEFAULT_SCHEME,
-      variant: DEFAULT_VARIANT,
-      tag: DEFAULT_TAG,
-      type: DEFAULT_TYPE,
-      **system_arguments
-    )
-      @system_arguments = system_arguments
-      @system_arguments[:block] = false
-      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-      @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-      @system_arguments[:classes] = class_names(
-        "btn-mktg",
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
-        system_arguments[:classes]
-      )
-    end
-
-    def call
-      render(Primer::BaseButton.new(**@system_arguments)) { content }
-    end
-  end
-end

data/app/components/primer/dropdown/menu_component.html.erb

@@ -1,12 +0,0 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if @header.present? %>
-    <div class="dropdown-header">
-      <%= @header %>
-    </div>
-  <% end %>
-  <ul>
-    <% items.each do |item| %>
-      <%= item %>
-    <% end %>
-  </ul>
-<% end %>

data/app/components/primer/dropdown/menu_component.rb

@@ -1,46 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  module Dropdown
-    # This component is part of `Dropdown` and should not be
-    # used as a standalone component.
-    class MenuComponent < Primer::Component
-      SCHEME_DEFAULT = :default
-      SCHEME_MAPPINGS = {
-        SCHEME_DEFAULT => "",
-        :dark => "dropdown-menu-dark"
-      }.freeze
-
-      DIRECTION_DEFAULT = :se
-      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
-
-      renders_many :items, lambda { |divider: false, **system_arguments|
-        system_arguments[:tag] = :li
-        system_arguments[:role] = :none if divider
-        system_arguments[:classes] = class_names(
-          system_arguments[:classes],
-          "dropdown-item" => !divider,
-          "dropdown-divider" => divider
-        )
-
-        Primer::BaseComponent.new(**system_arguments)
-      }
-
-      def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
-        @header = header
-        @direction = direction
-        @system_arguments = system_arguments
-
-        @system_arguments[:tag] = "details-menu"
-        @system_arguments[:role] = "menu"
-
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "dropdown-menu",
-          "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
-          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
-        )
-      end
-    end
-  end
-end

data/app/components/primer/dropdown_component.rb

@@ -1,73 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # `Dropdown` is a lightweight context menu for housing navigation and actions.
-  # They're great for instances where you don't need the full power (and code) of the select menu.
-  class DropdownComponent < Primer::Component
-    # Required trigger for the dropdown. Only accepts a content.
-    # Its classes can be customized by the `summary_classes` param in the parent component
-    renders_one :button
-
-    # Required context menu for the dropdown
-    #
-    # @param direction [Symbol] <%= one_of(Primer::Dropdown::MenuComponent::DIRECTION_OPTIONS) %>
-    # @param scheme [Symbol] Pass `:dark` for dark mode theming
-    # @param header [String] Optional string to display as the header
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :menu, Primer::Dropdown::MenuComponent
-
-    # @example Default
-    #   <div>
-    #     <%= render(Primer::DropdownComponent.new) do |c| %>
-    #       <% c.button do %>
-    #         Dropdown
-    #       <% end %>
-    #
-    #       <%= c.menu(header: "Options") do |menu|
-    #         menu.item { "Item 1" }
-    #         menu.item { "Item 2" }
-    #         menu.item(divider: true)
-    #         menu.item { "Item 3" }
-    #         menu.item { "Item 4" }
-    #       end %>
-    #     <% end %>
-    #   </div>
-    #
-    # @example With Direction
-    #   <div>
-    #     <%= render(Primer::DropdownComponent.new) do |c| %>
-    #       <% c.button do %>
-    #         Dropdown
-    #       <% end %>
-    #
-    #       <%= c.menu(header: "Options", direction: :s) do |menu|
-    #         menu.item { "Item 1" }
-    #         menu.item { "Item 2" }
-    #         menu.item(divider: true)
-    #         menu.item { "Item 3" }
-    #         menu.item { "Item 4" }
-    #       end %>
-    #     <% end %>
-    #   </div>
-    #
-    # @param overlay [Symbol] <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
-    # @param reset [Boolean] Whether to hide the default caret on the button
-    # @param summary_classes [String] Custom classes to add to the button
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(overlay: :default, reset: true, summary_classes: "", **system_arguments)
-      @system_arguments = system_arguments
-      @system_arguments[:overlay] = overlay
-      @system_arguments[:reset] = reset
-      @system_arguments[:position] = :relative
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "dropdown"
-      )
-      @summary_classes = summary_classes
-    end
-
-    def render?
-      button.present? && menu.present?
-    end
-  end
-end

data/app/components/primer/text_component.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # `Text` is a wrapper component that will apply typography styles to the text inside.
-  class TextComponent < Primer::Component
-    status :beta
-
-    DEFAULT_TAG = :span
-
-    # @example Default
-    #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
-    #   <%= render(Primer::TextComponent.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
-    #
-    # @param tag [Symbol]
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, **system_arguments)
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = tag
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
-  end
-end

data/app/lib/primer/classify/spacing.rb

@@ -1,63 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  class Classify
-    # Handler for PrimerCSS spacing classes.
-    class Spacing
-      BASE_OPTIONS = (0..6).to_a.freeze
-      BASE_MAPPINGS = {
-        my: BASE_OPTIONS,
-        pb: BASE_OPTIONS,
-        pl: BASE_OPTIONS,
-        pr: BASE_OPTIONS,
-        pt: BASE_OPTIONS,
-        px: BASE_OPTIONS,
-        py: BASE_OPTIONS
-      }.freeze
-
-      MARGIN_DIRECTION_OPTIONS = [*(-6..-1), *BASE_OPTIONS].freeze
-      MARGIN_DIRECTION_MAPPINGS = {
-        mb: MARGIN_DIRECTION_OPTIONS,
-        ml: MARGIN_DIRECTION_OPTIONS,
-        mr: MARGIN_DIRECTION_OPTIONS,
-        mt: MARGIN_DIRECTION_OPTIONS
-      }.freeze
-
-      AUTO_OPTIONS = [*BASE_OPTIONS, :auto].freeze
-      AUTO_MAPPINGS = {
-        m: AUTO_OPTIONS,
-        mx: AUTO_OPTIONS
-      }.freeze
-
-      RESPONSIVE_OPTIONS = [*BASE_OPTIONS, :responsive].freeze
-      RESPONSIVE_MAPPINGS = {
-        p: RESPONSIVE_OPTIONS
-      }.freeze
-
-      MAPPINGS = {
-        **BASE_MAPPINGS,
-        **MARGIN_DIRECTION_MAPPINGS,
-        **AUTO_MAPPINGS,
-        **RESPONSIVE_MAPPINGS
-      }.freeze
-      KEYS = MAPPINGS.keys.freeze
-
-      class << self
-        def spacing(key, val, breakpoint)
-          validate(key, val) unless Rails.env.production?
-
-          return "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}" if val.is_a?(Numeric) && val.negative?
-
-          "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
-        end
-
-        private
-
-        def validate(key, val)
-          raise ArgumentError, "#{key} is not a spacing key" unless KEYS.include?(key)
-          raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of  #{MAPPINGS[key]}" unless MAPPINGS[key].include?(val)
-        end
-      end
-    end
-  end
-end