Create Spinner component
MODIFY
Rakefile
Rakefile
@@ -61,7 +61,8 @@ namespace :docs do
Primer::AvatarComponent,
Primer::BaseComponent,
Primer::BlankslateComponent,
- Primer::CounterComponent
+ Primer::CounterComponent,
+ Primer::SpinnerComponent
]
components.each do |component|
documentation = registry.get(component.name)

MODIFY
app/components/primer/spinner_component.html.erb
app/components/primer/spinner_component.html.erb
-<span title="<%= @title %>"><%= content %></span>
+<svg width="<%= @size %>" height="<%= @size %>" viewBox="0 0 16 16" color="var(--color-icon-primary)" fill="none">
+ <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>
+</svg>
+
+

MODIFY
app/components/primer/spinner_component.rb
app/components/primer/spinner_component.rb
+# frozen_string_literal: true
+
module Primer
class SpinnerComponent < Primer::Component
- def initialize(title:)
- @title = title
+
+ #
+ # @example 48|Default
+ # <%= render(Primer::SpinnerComponent.new()) %>
+ #
+ # @example 32|Small
+ # <%= render(Primer::SpinnerComponent.new(size: 16)) %>
+ #
+ # @param size [Integer] Sets the size of the spinner
+ def initialize(size: 32)
+ @size = size
end
end
end
\ No newline at end of file

ADD
docs/content/components/spinner.md
+---
+title: Primer::SpinnerComponent
+---
+
+
+
+## Examples
+
+### Default
+
+<iframe style="width: 100%; border: 0px; height: 48px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg width='32' height='32' viewBox='0 0 16 16' color='var(--color-icon-primary)' fill='none'> <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></svg></body></html>"></iframe>
+
+```erb
+<%= render(Primer::SpinnerComponent.new()) %>
+```
+
+### Small
+
+<iframe style="width: 100%; border: 0px; height: 32px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg width='16' height='16' viewBox='0 0 16 16' color='var(--color-icon-primary)' fill='none'> <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></svg></body></html>"></iframe>
+
+```erb
+<%= render(Primer::SpinnerComponent.new(size: 16)) %>
+```
+
+## Arguments
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| size | Integer | 32 | Sets the size of the spinner |

MODIFY
docs/src/@primer/gatsby-theme-doctocat/nav.yml
docs/src/@primer/gatsby-theme-doctocat/nav.yml
url: /components/blankslate
- title: Counter
url: /components/counter
+ - title: Spinner
+ url: /components/spinner

MODIFY
stories/primer/spinner_component_stories.rb
stories/primer/spinner_component_stories.rb
@@ -5,7 +5,7 @@ class Primer::SpinnerComponentStories < ViewComponent::Storybook::Stories
story(:spinner) do
controls do
- text(:title, "github")
+ size 32
end
end
end

Create Spinner component