primer_view_components 0.0.9 → 0.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee845a3614e0d347957e7f16cf83750c9616bc63828d6ef9adaac62d6b5eb18d
-  data.tar.gz: 24d5d20ee47acdc6ed411c0ec609870fa7b8788d1debbdf15001a7851f7be54f
+  metadata.gz: f4ccf1dd55332ea7b350841d78e04a0f56a0f036749638c30041582500cc561c
+  data.tar.gz: f948087b2dba1cd217296a08260db95a8973cf8e58d4e1240a2c45295ef17e24
 SHA512:
-  metadata.gz: ade2e2c9febaa32e5be37d60efe47c5ef8c7b17f41602e6f470bee8c21a499ab98ff52992aa484c4de3ab2f40f654f1ddc226fa1ac45077285e4349834dec542
-  data.tar.gz: 3d1eed4c85f4d513234f6ea9cdde584f83e54f7f2b6cf9197137b8e0ca6eeb6f15e2f51798b411d502452f910c5d1309ef0c1269b2b91559920048a2dfeb05f8
+  metadata.gz: 2359e308fa78d78b5cb0f4e76791bfcd6a9714b7295320d04f293f0b7e0351c4fbad90a13743c61e9401de9c69c1269ee791167638715e7fafc594a47b8a242b
+  data.tar.gz: 2089d76d7cdef40b4bce9871d2b0ade0f492751ba057dc99e6fabc4654390656e0cdef57004931d66b1ea75f6189581dbf840bedbb7b89ee6d0fbfdb31d13136

data/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## main
 
+## 0.0.10
+
+* Add SpinnerComponent
+
+    *Cole Bemis*
+
 ## 0.0.9
 
 * BREAKING CHANGE: OcticonComponent no longer accepts `class` parameter; use `classes` instead.

data/app/components/primer/avatar_component.rb

@@ -1,9 +1,20 @@
 # frozen_string_literal: true
 
 module Primer
+  # Avatars are images 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.
   class AvatarComponent < Primer::Component
     SMALL_THRESHOLD = 24
 
+    #
+    # @example 34|Default
+    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
+    #
+    # @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.
     def initialize(src:, alt:, size: 20, square: false, **kwargs)
       @kwargs = kwargs
       @kwargs[:tag] = :img

data/app/components/primer/base_component.rb

@@ -2,18 +2,15 @@
 
 module Primer
   # Base component used by other Primer components.
-  #
-  # tag(symbol): HTML tag name to be passed to tag.send(tag)
-  # class_names(string): CSS class name value to be concatenated with generated Primer CSS classes
-  # args(hash): Combination of arguments for classes_from_hash and content_tag
-  #
-  # Example usage:
-  # <%= render Primer::BaseComponent, tag: :a, href: "http://www.google.com", mt: 4 do %>Link<% end %>
-  # generates:
-  # <a href="http://www.google.com" class="mt-4">Link</a>
   class BaseComponent < Primer::Component
     TEST_SELECTOR_TAG = :test_selector
 
+    #
+    # @example 34|Default
+    #   <%= render(Primer::BaseComponent.new(tag: :a, href: "http://www.google.com", mt: 4)) { "Link" } %>
+    #
+    # @param tag [Symbol] HTML tag name to be passed to tag.send(tag)
+    # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes
     def initialize(tag:, classes: nil, **args)
       @tag = tag
       @result = Primer::Classify.call(**args.merge(classes: classes))

data/app/components/primer/blankslate_component.rb

@@ -1,118 +1,73 @@
 # frozen_string_literal: true
 
 module Primer
-  # Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there.
-  #
-  # ## Basic example
-  #
-  # The `Primer::BlankslateComponent` supports the following arguments to add a basic blankslate:
-  #
-  # 1. `title` (`String` optional). Text that appears in a larger bold font.
-  # 2. `description` (`String` optional). Text that appears below the title. Typically a whole sentence.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   title: "Title",
-  #   description: "Description",
-  # ) %>
-  # ```
-  #
-  # ## Icon or graphic (optional)
-  #
-  # Add an `icon` to give additional context. Please refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "octoface",
-  #   title: "Title",
-  #   description: "Description",
-  # ) %>
-  # ```
-  #
-  # Alternatively you can also add a graphic by providing a path (`image_src`) to an image instead.Also, make sure to add an alternative description (`image_alt`). It will be used for the `alt` tag.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   image_src: "file.svg",
-  #   image_alt: "Description of the image",
-  #   title: "Title",
-  #   description: "Description",
-  # ) %>
-  # ```
-  #
-  # Both icon and graphic will appear above the title.
-  #
-  #
-  # ## Custom content (optional)
-  #
-  # You can add any custom content that typically is used instead of the description:
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "octoface",
-  #   title: "Title",
-  # ) do %>
-  #   <p>Your custom content here</p>
-  # <% end %>
-  # ```
-  #
-  # ## Action button (optional)
-  #
-  # You can provide an action button to help users replace the blankslate. The button will appear below the description and custom content. It takes the following arguments:
-  #
-  # - `button_text` (`String` optional). The text of the button.
-  # - `button_url` (`String` optional). The URL where the user will be taken after clicking the button.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "book",
-  #   title: "Welcome to the mona wiki!",
-  #   description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-  #
-  #   button_text: "Create the first page",
-  #   button_url: "https://github.com/monalisa/mona/wiki/_new",
-  # ) %>
-  # ```
-  #
-  # ## Link (optional)
-  #
-  # Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-  #
-  # - `link_text` (`String` optional). The text of the link.
-  # - `link_url` (`String` optional). The URL where the user will be taken after clicking the link.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "book",
-  #   title: "Welcome to the mona wiki!",
-  #   description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-  #   button_text: "Create the first page",
-  #   button_url: "https://github.com/monalisa/mona/wiki/_new",
-  #   link_text: "Learn more about wikis",
-  #   link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-  # ) %>
-  # ```
-  #
-  # ## Variations (optional)
-  #
-  # There are a few variations of how the Blankslate appears:
-  #
-  # - `narrow` (`Boolean` optional). Adds a maximum width.
-  # - `large` (`Boolean` optional). Increaeses the font size.
-  # - `spacious` (`Boolean` optional). Adds extra padding.
-  #
-  # ```ruby
-  # <%= render Primer::BlankslateComponent.new(
-  #   icon: "book",
-  #   title: "Welcome to the mona wiki!",
-  #   description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-  #
-  #   narrow: true,
-  #   large: true,
-  #   spacious: true,
-  # ) %>
-  # ```
+  # Use Primer::BlankslateComponent when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
   class BlankslateComponent < Primer::Component
+    #
+    # @example 150|Basic
+    #   <%= render Primer::BlankslateComponent.new(
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @example 190|Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "octoface",
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @example 150|Custom content|Pass custom content as a block in place of `description`.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     title: "Title",
+    #   ) do %>
+    #     <em>Your custom content here</em>
+    #   <% end %>
+    #
+    # @example 270|Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "book",
+    #     title: "Welcome to the mona wiki!",
+    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #
+    #     button_text: "Create the first page",
+    #     button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #   ) %>
+    #
+    # @example 225|Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "book",
+    #     title: "Welcome to the mona wiki!",
+    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #     link_text: "Learn more about wikis",
+    #     link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #   ) %>
+    #
+    # @example 340|Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   <%= render Primer::BlankslateComponent.new(
+    #     icon: "book",
+    #     title: "Welcome to the mona wiki!",
+    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #     narrow: true,
+    #     large: true,
+    #     spacious: true,
+    #   ) %>
+    #
+    # @param title [String] Text that appears in a larger bold font.
+    # @param title_tag [Symbol] HTML tag to use for title.
+    # @param icon [String] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] One of <%= Primer::OcticonComponent::SIZE_MAPPINGS.keys.map { |k| "`:#{k}`" }.to_sentence %>
+    # @param image_src [String] Image to display.
+    # @param image_alt [String] Alt text for image.
+    # @param description [String] Text that appears below the title. Typically a whole sentence.
+    # @param button_text [String] The text of the button.
+    # @param button_url [String] The URL where the user will be taken after clicking the button.
+    # @param button_classes [String] Classes to apply to action button
+    # @param link_text [String] The text of the link.
+    # @param link_url [String] The URL where the user will be taken after clicking the link.
+    # @param narrow [Boolean] Adds a maximum width.
+    # @param large [Boolean] Increases the font size.
+    # @param spacious [Boolean] Adds extra padding.
     def initialize(
       title: "",
       title_tag: :h3,

data/app/components/primer/counter_component.rb

@@ -10,6 +10,10 @@ module Primer
       :light_gray => "Counter Counter--gray-light",
     }.freeze
 
+    #
+    # @example 34|Default
+    #   <%= render(Primer::CounterComponent.new(count: 25)) %>
+    #
     # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
     # @param scheme [Symbol] Color scheme. One of `SCHEME_MAPPINGS.keys`.
     # @param limit [Integer] Maximum value to display. (e.x. if count == 6,000 and limit == 5000, counter will display "5,000+")

data/app/components/primer/spinner_component.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
+    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
+  </path>
+<% end %>

data/app/components/primer/spinner_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use Primer::SpinnerComponent to let users know that content is being loaded.
+  class SpinnerComponent < Primer::Component
+
+    DEFAULT_SIZE = :medium
+    SIZE_MAPPINGS = {
+      :small => 16,
+      DEFAULT_SIZE => 32,
+      :large => 64,
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    #
+    # @example 48|Default
+    #   <%= render(Primer::SpinnerComponent.new) %>
+    #
+    # @example 32|Small
+    #   <%= render(Primer::SpinnerComponent.new(size: :small)) %>
+    #
+    # @example 80|Large
+    #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
+    #
+    # @param size [Symbol] One of <%= Primer::SpinnerComponent::SIZE_OPTIONS.map { |k| "`:#{k}`" }.to_sentence(last_word_connector: ', or ') %>
+    def initialize(size: DEFAULT_SIZE, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :svg
+      @kwargs[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @kwargs[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+      @kwargs[:viewBox] = "0 0 16 16"
+      @kwargs[:fill] = :none
+      # Setting `box-sizing: content-box` allows consumers to add padding
+      # to the spinner without shrinking the icon
+      @kwargs[:style] = "box-sizing: content-box; color: var(--color-icon-primary);"
+    end
+  end
+end

data/app/components/primer/view_components.rb

@@ -43,6 +43,7 @@ require_relative "link_component"
 require_relative "octicon_component"
 require_relative "popover_component"
 require_relative "progress_bar_component"
+require_relative "spinner_component"
 require_relative "state_component"
 require_relative "subhead_component"
 require_relative "text_component"

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 9
+      PATCH = 10
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.10
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-12 00:00:00.000000000 Z
+date: 2020-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -223,6 +223,8 @@ files:
 - app/components/primer/progress_bar_component.html.erb
 - app/components/primer/progress_bar_component.rb
 - app/components/primer/slot.rb
+- app/components/primer/spinner_component.html.erb
+- app/components/primer/spinner_component.rb
 - app/components/primer/state_component.rb
 - app/components/primer/subhead_component.html.erb
 - app/components/primer/subhead_component.rb
@@ -258,7 +260,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System