openproject-primer_view_components 0.6.3 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +28 -0
  3. data/README.md +13 -1
  4. data/app/assets/styles/primer_view_components.css +1 -1
  5. data/app/assets/styles/primer_view_components.css.map +1 -1
  6. data/app/components/primer/alpha/action_bar.rb +0 -7
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.map +1 -1
  9. data/app/components/primer/alpha/action_menu.rb +0 -269
  10. data/app/components/primer/alpha/auto_complete/item.rb +0 -12
  11. data/app/components/primer/alpha/auto_complete.css +1 -1
  12. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  13. data/app/components/primer/alpha/auto_complete.rb +0 -47
  14. data/app/components/primer/alpha/banner.css +1 -1
  15. data/app/components/primer/alpha/banner.css.map +1 -1
  16. data/app/components/primer/alpha/banner.rb +0 -31
  17. data/app/components/primer/alpha/button_marketing.rb +0 -12
  18. data/app/components/primer/alpha/dialog.css +1 -1
  19. data/app/components/primer/alpha/dialog.css.map +1 -1
  20. data/app/components/primer/alpha/dialog.rb +0 -17
  21. data/app/components/primer/alpha/dropdown.css +1 -1
  22. data/app/components/primer/alpha/dropdown.css.map +1 -1
  23. data/app/components/primer/alpha/dropdown.rb +0 -105
  24. data/app/components/primer/alpha/form_control.rb +0 -11
  25. data/app/components/primer/alpha/hellip_button.rb +0 -9
  26. data/app/components/primer/alpha/hidden_text_expander.rb +0 -9
  27. data/app/components/primer/alpha/image.rb +0 -16
  28. data/app/components/primer/alpha/image_crop.rb +0 -11
  29. data/app/components/primer/alpha/layout.css +1 -1
  30. data/app/components/primer/alpha/layout.css.map +1 -1
  31. data/app/components/primer/alpha/layout.pcss +1 -1
  32. data/app/components/primer/alpha/layout.rb +0 -118
  33. data/app/components/primer/alpha/menu.css +1 -1
  34. data/app/components/primer/alpha/menu.css.map +1 -1
  35. data/app/components/primer/alpha/menu.rb +0 -19
  36. data/app/components/primer/alpha/multi_input.rb +0 -33
  37. data/app/components/primer/alpha/nav_list.rb +0 -69
  38. data/app/components/primer/alpha/navigation/tab.rb +0 -35
  39. data/app/components/primer/alpha/octicon_symbols.rb +0 -6
  40. data/app/components/primer/alpha/overlay.rb +0 -14
  41. data/app/components/primer/alpha/segmented_control.css +1 -1
  42. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  43. data/app/components/primer/alpha/segmented_control.rb +0 -61
  44. data/app/components/primer/alpha/tab_container.rb +0 -18
  45. data/app/components/primer/alpha/tab_nav.css +1 -1
  46. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  47. data/app/components/primer/alpha/tab_nav.rb +0 -63
  48. data/app/components/primer/alpha/tab_panels.rb +0 -16
  49. data/app/components/primer/alpha/text_field.css +1 -1
  50. data/app/components/primer/alpha/text_field.css.map +1 -1
  51. data/app/components/primer/alpha/text_field.rb +0 -68
  52. data/app/components/primer/alpha/toggle_switch.css +1 -1
  53. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  54. data/app/components/primer/alpha/toggle_switch.rb +0 -18
  55. data/app/components/primer/alpha/tooltip.rb +1 -69
  56. data/app/components/primer/alpha/underline_nav.css +1 -1
  57. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  58. data/app/components/primer/alpha/underline_nav.rb +0 -61
  59. data/app/components/primer/alpha/underline_panels.rb +0 -19
  60. data/app/components/primer/beta/auto_complete/item.rb +0 -8
  61. data/app/components/primer/beta/auto_complete.rb +0 -56
  62. data/app/components/primer/beta/avatar.css +1 -1
  63. data/app/components/primer/beta/avatar.css.map +1 -1
  64. data/app/components/primer/beta/avatar.rb +0 -18
  65. data/app/components/primer/beta/avatar_stack.css +1 -1
  66. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  67. data/app/components/primer/beta/avatar_stack.rb +0 -21
  68. data/app/components/primer/beta/base_button.rb +0 -4
  69. data/app/components/primer/beta/blankslate.css +1 -1
  70. data/app/components/primer/beta/blankslate.css.map +1 -1
  71. data/app/components/primer/beta/blankslate.rb +0 -104
  72. data/app/components/primer/beta/border_box/header.rb +4 -11
  73. data/app/components/primer/beta/border_box.css +1 -1
  74. data/app/components/primer/beta/border_box.css.map +1 -1
  75. data/app/components/primer/beta/border_box.html.erb +2 -2
  76. data/app/components/primer/beta/border_box.rb +11 -55
  77. data/app/components/primer/beta/breadcrumbs.rb +0 -7
  78. data/app/components/primer/beta/button.css +1 -1
  79. data/app/components/primer/beta/button.css.map +1 -1
  80. data/app/components/primer/beta/button.pcss +2 -2
  81. data/app/components/primer/beta/button.rb +0 -42
  82. data/app/components/primer/beta/button_group.css +1 -1
  83. data/app/components/primer/beta/button_group.css.map +1 -1
  84. data/app/components/primer/beta/button_group.rb +0 -16
  85. data/app/components/primer/beta/clipboard_copy.rb +0 -12
  86. data/app/components/primer/beta/close_button.rb +0 -3
  87. data/app/components/primer/beta/counter.rb +0 -8
  88. data/app/components/primer/beta/details.rb +0 -11
  89. data/app/components/primer/beta/flash.css +1 -1
  90. data/app/components/primer/beta/flash.css.map +1 -1
  91. data/app/components/primer/beta/flash.rb +1 -23
  92. data/app/components/primer/beta/heading.rb +0 -8
  93. data/app/components/primer/beta/icon_button.rb +0 -21
  94. data/app/components/primer/beta/label.css +1 -1
  95. data/app/components/primer/beta/label.css.map +1 -1
  96. data/app/components/primer/beta/label.rb +0 -20
  97. data/app/components/primer/beta/link.rb +0 -22
  98. data/app/components/primer/beta/markdown.rb +1 -262
  99. data/app/components/primer/beta/octicon.rb +0 -10
  100. data/app/components/primer/beta/popover.css +1 -1
  101. data/app/components/primer/beta/popover.css.map +1 -1
  102. data/app/components/primer/beta/popover.rb +0 -43
  103. data/app/components/primer/beta/progress_bar.rb +1 -22
  104. data/app/components/primer/beta/relative_time.rb +0 -9
  105. data/app/components/primer/beta/spinner.rb +2 -10
  106. data/app/components/primer/beta/state.rb +0 -13
  107. data/app/components/primer/beta/subhead.rb +0 -55
  108. data/app/components/primer/beta/text.rb +0 -4
  109. data/app/components/primer/beta/timeline_item.css +1 -1
  110. data/app/components/primer/beta/timeline_item.css.map +1 -1
  111. data/app/components/primer/beta/timeline_item.rb +0 -9
  112. data/app/components/primer/beta/truncate.rb +0 -50
  113. data/app/components/primer/blankslate_component.rb +0 -76
  114. data/app/components/primer/box.rb +0 -6
  115. data/app/components/primer/button_component.rb +0 -49
  116. data/app/components/primer/conditional_wrapper.rb +2 -17
  117. data/app/components/primer/icon_button.rb +0 -30
  118. data/app/components/primer/layout_component.rb +0 -12
  119. data/app/components/primer/tooltip.rb +0 -27
  120. data/app/components/primer/truncate.rb +0 -19
  121. data/lib/primer/accessibility.rb +1 -1
  122. data/lib/primer/deprecations.yml +3 -3
  123. data/lib/primer/forms/dsl/input.rb +1 -0
  124. data/lib/primer/view_components/linters/migrations/truncate_component.rb +45 -0
  125. data/lib/primer/view_components/linters.rb +1 -0
  126. data/lib/primer/view_components/version.rb +2 -2
  127. data/lib/primer/yard.rb +8 -9
  128. data/static/arguments.json +12 -1
  129. data/static/info_arch.json +18 -1
  130. metadata +3 -3
  131. data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
@@ -8,268 +8,7 @@ module Primer
8
8
 
9
9
  DEFAULT_TAG = :div
10
10
  TAG_OPTIONS = [DEFAULT_TAG, :article, :td].freeze
11
- # @example Default
12
- # <%= render(Primer::Beta::Markdown.new) do %>
13
- # <p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href="https://github.com">Links </a> should be blue with no underlines (unless hovered over).</p>
14
- #
15
- # <p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
16
- #
17
- # <p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
18
- #
19
- # <blockquote>
20
- # <p>There should be no margin above this first sentence.</p>
21
- # <p>Blockquotes should be a lighter gray with a gray border along the left side.</p>
22
- # <p>There should be no margin below this final sentence.</p>
23
- # </blockquote>
24
- #
25
- # <h1>Header 1</h1>
26
- #
27
- # <p>This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.</p>
28
- #
29
- # <h2>Header 2</h2>
30
- #
31
- # <blockquote>This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.</blockquote>
32
- #
33
- # <h3>Header 3</h3>
34
- #
35
- # <pre><code>This is a code block following a header.</code></pre>
36
- #
37
- # <h4>Header 4</h4>
38
- #
39
- # <ul>
40
- # <li>This is an unordered list following a header.</li>
41
- # <li>This is an unordered list following a header.</li>
42
- # <li>This is an unordered list following a header.</li>
43
- # </ul>
44
- #
45
- # <h5>Header 5</h5>
46
- #
47
- # <ol>
48
- # <li>This is an ordered list following a header.</li>
49
- # <li>This is an ordered list following a header.</li>
50
- # <li>This is an ordered list following a header.</li>
51
- # </ol>
52
- #
53
- # <h6>Header 6</h6>
54
- #
55
- # <table>
56
- # <thead>
57
- # <tr>
58
- # <th>What</th>
59
- # <th>Follows</th>
60
- # </tr>
61
- # </thead>
62
- # <tbody>
63
- # <tr>
64
- # <td>A table</td>
65
- # <td>A header</td>
66
- # </tr>
67
- # <tr>
68
- # <td>A table</td>
69
- # <td>A header</td>
70
- # </tr>
71
- # <tr>
72
- # <td>A table</td>
73
- # <td>A header</td>
74
- # </tr>
75
- # </tbody>
76
- # </table>
77
- #
78
- # <hr />
79
- #
80
- # <p>There's a horizontal rule above and below this.</p>
81
- #
82
- # <hr />
83
- #
84
- # <p>Here is an unordered list:</p>
85
- #
86
- # <ul>
87
- # <li>Salt-n-Pepa</li>
88
- # <li>Bel Biv DeVoe</li>
89
- # <li>Kid 'N Play</li>
90
- # </ul>
91
- #
92
- # <p>And an ordered list:</p>
93
- #
94
- # <ol>
95
- # <li>Michael Jackson</li>
96
- # <li>Michael Bolton</li>
97
- # <li>Michael Bublé</li>
98
- # </ol>
99
- #
100
- # <p>And an unordered task list:</p>
101
- #
102
- # <ul>
103
- # <li><input type="checkbox" id="create-markdown" checked /><label for="create-markdown">Create a sample markdown document</label><br></li>
104
- # <li><input type="checkbox" id="tasks-list" checked /><label for="tasks-list">Add tasks list to it</label><br></li>
105
- # <li><input type="checkbox" id="take-vacation" checked /><label for="take-vacation">Take a vacation</label><br></li>
106
- # </ul>
107
- #
108
- # <p>And a "mixed" task list:</p>
109
- #
110
- # <ul>
111
- # <li><input type="checkbox"id="steal-underpants"/><label for="steal-underpants">Steal underpants</label></li>
112
- # <li>?</li>
113
- # <li><input type="checkbox"id="profit"/><label for="profit">Profit!</label></li>
114
- # </ul>
115
- #
116
- # And a nested list:
117
- #
118
- # <ul>
119
- # <li>Jackson 5
120
- # <ul>
121
- # <li>Michael</li>
122
- # <li>Tito</li>
123
- # <li>Jackie</li>
124
- # <li>Marlon</li>
125
- # <li>Jermaine</li>
126
- # </ul>
127
- # </li>
128
- # <li>TMNT
129
- # <ul>
130
- # <li>Leonardo</li>
131
- # <li>Michelangelo</li>
132
- # <li>Donatello</li>
133
- # <li>Raphael</li>
134
- # </ul>
135
- # </li>
136
- # </ul>
137
- #
138
- # <p>Definition lists can be used with HTML syntax. Definition terms are bold and italic.</p>
139
- #
140
- # <dl>
141
- # <dt>Name</dt>
142
- # <dd>Godzilla</dd>
143
- # <dt>Born</dt>
144
- # <dd>1952</dd>
145
- # <dt>Birthplace</dt>
146
- # <dd>Japan</dd>
147
- # <dt>Color</dt>
148
- # <dd>Green</dd>
149
- # </dl>
150
- #
151
- # <hr />
152
- #
153
- # <p>Tables should have bold headings and alternating shaded rows.</p>
154
- #
155
- # <table>
156
- # <thead>
157
- # <tr>
158
- # <th>Artist</th>
159
- # <th>Album</th>
160
- # <th>Year</th>
161
- # </tr>
162
- # </thead>
163
- # <tbody>
164
- # <tr>
165
- # <td>David Bowie</td>
166
- # <td>Scary Monsters</td>
167
- # <td>1980</td>
168
- # </tr>
169
- # <tr>
170
- # <td>Prince</td>
171
- # <td>Purple Rain</td>
172
- # <td>1982</td>
173
- # </tr>
174
- # <tr>
175
- # <td>Beastie Boys</td>
176
- # <td>License to Ill</td>
177
- # <td>1986</td>
178
- # </tr>
179
- # <tr>
180
- # <td>Janet Jackson</td>
181
- # <td>Rhythm Nation 1814</td>
182
- # <td>1989</td>
183
- # </tr>
184
- # </tbody>
185
- # </table>
186
- #
187
- # <p>If a table is too wide, it should condense down and/or scroll horizontally.</p>
188
- #
189
- # <table>
190
- # <thead>
191
- # <tr>
192
- # <th>Artist</th>
193
- # <th>Album</th>
194
- # <th>Year</th>
195
- # <th>Label</th>
196
- # <th>Songs</th>
197
- # </tr>
198
- # </thead>
199
- # <tbody>
200
- # <tr>
201
- # <td>David Bowie</td>
202
- # <td>Scary Monsters</td>
203
- # <td>1980</td>
204
- # <td>RCA Records</td>
205
- # <td>It's No Game (No. 1), Up the Hill Backwards, Scary Monsters (And Super Creeps), Ashes to Ashes, Fashion, Teenage Wildlife, Scream Like a Baby, Kingdom Come, Because You're Young, It's No Game (No. 2)</td>
206
- # </tr>
207
- # <tr>
208
- # <td>Prince</td>
209
- # <td>Purple Rain</td>
210
- # <td>1982</td>
211
- # <td>Warner Brothers Records</td>
212
- # <td>Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain</td>
213
- # </tr>
214
- # <tr>
215
- # <td>Beastie Boys</td>
216
- # <td>License to Ill</td>
217
- # <td>1986</td>
218
- # <td>Def Jam</td>
219
- # <td>Rhymin &amp; Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, Fight for Your Right, No Sleep till Brooklyn, Paul Revere, "Hold It Now, Hit It", Brass Monkey, Slow and Low, Time to Get Ill</td>
220
- # </tr>
221
- # <tr>
222
- # <td>Janet Jackson</td>
223
- # <td>Rhythm Nation 1814</td>
224
- # <td>1989</td>
225
- # <td>A&amp;M</td>
226
- # <td>Interlude: Pledge, Rhythm Nation, Interlude: T.V., State of the World, Interlude: Race, The Knowledge, Interlude: Let's Dance, Miss You Much, Interlude: Come Back, Love Will Never Do (Without You), Livin' in a World (They Didn't Make), Alright, Interlude: Hey Baby, Escapade, Interlude: No Acid, Black Cat, Lonely, Come Back to Me, Someday Is Tonight, Interlude: Livin'...In Complete Darkness</td>
227
- # </tr>
228
- # </tbody>
229
- # </table>
230
- #
231
- # <hr />
232
- #
233
- # <p>Code snippets like <code>var foo = "bar";</code> can be shown inline.</p>
234
- #
235
- # <p>Also, <code>this should vertically align</code> <s><code>with this</code></s> <s>and this</s>.</p>
236
- #
237
- # <p>Code can also be shown in a block element.</p>
238
- #
239
- # <pre><code>var foo = "bar";</code></pre>
240
- #
241
- # <p>Code can also use syntax highlighting.</p>
242
- #
243
- # <pre><code>var foo = "bar";</code></pre>
244
- #
245
- # <pre tabindex="0"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
246
- #
247
- # <pre tabindex="0"><code>var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";</code></pre>
248
- #
249
- # <p>Inline code inside table cells should still be distinguishable.</p>
250
- #
251
- # <table>
252
- # <thead>
253
- # <tr>
254
- # <th>Language</th>
255
- # <th>Code</th>
256
- # </tr>
257
- # </thead>
258
- # <tbody>
259
- # <tr>
260
- # <td>JavasScript</td>
261
- # <td><code>var foo = "bar";</code></td>
262
- # </tr>
263
- # <tr>
264
- # <td>Ruby</td>
265
- # <td><code>foo = "bar"</code></td>
266
- # </tr>
267
- # </tbody>
268
- # </table>
269
- #
270
- # <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
271
- # <% end %>
272
- #
11
+
273
12
  # @param tag [Symbol] <%= one_of(Primer::Beta::Markdown::TAG_OPTIONS) %>
274
13
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
275
14
  def initialize(tag: DEFAULT_TAG, **system_arguments)
@@ -20,16 +20,6 @@ module Primer
20
20
  }.freeze
21
21
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
22
22
 
23
- # @example Default
24
- # <%= render(Primer::Beta::Octicon.new(:check)) %>
25
- # <%= render(Primer::Beta::Octicon.new(icon: :check)) %>
26
- #
27
- # @example Medium
28
- # <%= render(Primer::Beta::Octicon.new(:people, size: :medium)) %>
29
- #
30
- # @example Helper
31
- # <%= primer_octicon(:check) %>
32
- #
33
23
  # @param icon_name [Symbol, String] Name of <%= link_to_octicons %> to use.
34
24
  # @param icon [Symbol, String] Name of <%= link_to_octicons %> to use.
35
25
  # @param size [Symbol] <%= one_of(Primer::Beta::Octicon::SIZE_MAPPINGS, sort: false) %>
@@ -1 +1 @@
1
- .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
1
+ .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
@@ -1 +1 @@
1
- {"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,4CAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
1
+ {"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
@@ -59,49 +59,6 @@ module Primer
59
59
  Primer::Content.new
60
60
  }
61
61
 
62
- # @example Default
63
- # <%= render Primer::Beta::Popover.new do |component| %>
64
- # <% component.with_heading do %>
65
- # Activity feed
66
- # <% end %>
67
- # <% component.with_body do %>
68
- # This is the Popover body.
69
- # <% end %>
70
- # <% end %>
71
- #
72
- # @example Large
73
- # <%= render Primer::Beta::Popover.new do |component| %>
74
- # <% component.with_heading do %>
75
- # Activity feed
76
- # <% end %>
77
- # <% component.with_body(large: true) do %>
78
- # This is the large Popover body.
79
- # <% end %>
80
- # <% end %>
81
- #
82
- # @example Caret position
83
- # <%= render Primer::Beta::Popover.new do |component| %>
84
- # <% component.with_heading do %>
85
- # Activity feed
86
- # <% end %>
87
- # <% component.with_body(caret: :left) do %>
88
- # This is the Popover body.
89
- # <% end %>
90
- # <% end %>
91
- #
92
- # @example With multiple elements in the body
93
- # <%= render Primer::Beta::Popover.new do |component| %>
94
- # <% component.with_heading do %>
95
- # Activity feed
96
- # <% end %>
97
- # <% component.with_body(caret: :left) do %>
98
- # <p>This is the Popover body.</p>
99
- # <%= render Primer::ButtonComponent.new(type: :submit) do %>
100
- # Got it!
101
- # <% end %>
102
- # <% end %>
103
- # <% end %>
104
- #
105
62
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
106
63
  def initialize(**system_arguments)
107
64
  @system_arguments = deny_tag_argument(**system_arguments)
@@ -30,28 +30,7 @@ module Primer
30
30
  }.freeze
31
31
 
32
32
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
33
- # @example Default
34
- # <%= render(Primer::Beta::ProgressBar.new) do |component| %>
35
- # <% component.with_item(percentage: 25) %>
36
- # <% end %>
37
- #
38
- # @example Small
39
- # <%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %>
40
- # <% component.with_item(bg: :accent_emphasis, percentage: 50) %>
41
- # <% end %>
42
- #
43
- # @example Large
44
- # <%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %>
45
- # <% component.with_item(bg: :danger_emphasis, percentage: 75) %>
46
- # <% end %>
47
- #
48
- # @example Multiple items
49
- # <%= render(Primer::Beta::ProgressBar.new) do |component| %>
50
- # <% component.with_item(percentage: 10) %>
51
- # <% component.with_item(bg: :accent_emphasis, percentage: 20) %>
52
- # <% component.with_item(bg: :danger_emphasis, percentage: 30) %>
53
- # <% end %>
54
- #
33
+
55
34
  # @param size [Symbol] <%= one_of(Primer::Beta::ProgressBar::SIZE_OPTIONS) %> Increases height.
56
35
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
57
36
  def initialize(size: SIZE_DEFAULT, **system_arguments)
@@ -84,15 +84,6 @@ module Primer
84
84
  PRECISION_DEFAULT = nil
85
85
  PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
86
86
 
87
- # @example Default
88
- # <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400))) %>
89
- #
90
- # @example Past Time
91
- # <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), tense: :past)) %>
92
- #
93
- # @example Elapsed Time
94
- # <%= render(Primer::Beta::RelativeTime.new(datetime: Time.at(628232400), format: :elapsed)) %>
95
- #
96
87
  # @param datetime [Time] The time to be formatted.
97
88
  # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
98
89
  # @param prefix [sring] What to prefix the relative ime display with.
@@ -12,21 +12,13 @@ module Primer
12
12
  DEFAULT_SIZE => 32,
13
13
  :large => 64
14
14
  }.freeze
15
+
15
16
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
17
+
16
18
  # Setting `box-sizing: content-box` allows consumers to add padding
17
19
  # to the spinner without shrinking the icon
18
20
  DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
19
21
 
20
- #
21
- # @example Default
22
- # <%= render(Primer::Beta::Spinner.new) %>
23
- #
24
- # @example Small
25
- # <%= render(Primer::Beta::Spinner.new(size: :small)) %>
26
- #
27
- # @example Large
28
- # <%= render(Primer::Beta::Spinner.new(size: :large)) %>
29
- #
30
22
  # @param size [Symbol] <%= one_of(Primer::Beta::Spinner::SIZE_MAPPINGS) %>
31
23
  # @param style [String] Custom element styles.
32
24
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -32,19 +32,6 @@ module Primer
32
32
  TAG_DEFAULT = :span
33
33
  TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
34
34
 
35
- # @example Default
36
- # <%= render(Primer::Beta::State.new(title: "title")) { "State" } %>
37
- #
38
- # @example Schemes
39
- # <%= render(Primer::Beta::State.new(title: "title")) { "Default" } %>
40
- # <%= render(Primer::Beta::State.new(title: "title", scheme: :open)) { "Open" } %>
41
- # <%= render(Primer::Beta::State.new(title: "title", scheme: :closed)) { "Closed" } %>
42
- # <%= render(Primer::Beta::State.new(title: "title", scheme: :merged)) { "Merged" } %>
43
- #
44
- # @example Sizes
45
- # <%= render(Primer::Beta::State.new(title: "title")) { "Default" } %>
46
- # <%= render(Primer::Beta::State.new(title: "title", size: :small)) { "Small" } %>
47
- #
48
35
  # @param title [String] `title` HTML attribute.
49
36
  # @param scheme [Symbol] Background color. <%= one_of(Primer::Beta::State::SCHEME_OPTIONS) %>
50
37
  # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::Beta::State::TAG_OPTIONS) %>
@@ -55,61 +55,6 @@ module Primer
55
55
  Primer::BaseComponent.new(**system_arguments)
56
56
  }
57
57
 
58
- # @example Default
59
- # <%= render(Primer::Beta::Subhead.new) do |component| %>
60
- # <% component.with_heading(tag: :h3) do %>
61
- # My Heading
62
- # <% end %>
63
- # <% component.with_description do %>
64
- # My Description
65
- # <% end %>
66
- # <% end %>
67
- #
68
- # @example With dangerous heading
69
- # <%= render(Primer::Beta::Subhead.new) do |component| %>
70
- # <% component.with_heading(tag: :h3, danger: true) do %>
71
- # My Heading
72
- # <% end %>
73
- # <% component.with_description do %>
74
- # My Description
75
- # <% end %>
76
- # <% end %>
77
- #
78
- # @example With long description
79
- # <%= render(Primer::Beta::Subhead.new) do |component| %>
80
- # <% component.with_heading(tag: :h3) do %>
81
- # My Heading
82
- # <% end %>
83
- # <% end %>
84
- # <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
85
- #
86
- # @example Without border
87
- # <%= render(Primer::Beta::Subhead.new(hide_border: true)) do |component| %>
88
- # <% component.with_heading do %>
89
- # My Heading
90
- # <% end %>
91
- # <% component.with_description do %>
92
- # My Description
93
- # <% end %>
94
- # <% end %>
95
- #
96
- # @example With actions
97
- # <%= render(Primer::Beta::Subhead.new) do |component| %>
98
- # <% component.with_heading do %>
99
- # My Heading
100
- # <% end %>
101
- # <% component.with_description do %>
102
- # My Description
103
- # <% end %>
104
- # <% component.with_actions do %>
105
- # <%= render(
106
- # Primer::ButtonComponent.new(
107
- # tag: :a, href: "http://www.google.com", scheme: :danger
108
- # )
109
- # ) { "Action" } %>
110
- # <% end %>
111
- # <% end %>
112
- #
113
58
  # @param spacious [Boolean] Whether to add spacing to the Subhead.
114
59
  # @param hide_border [Boolean] Whether to hide the border under the heading.
115
60
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -8,10 +8,6 @@ module Primer
8
8
 
9
9
  DEFAULT_TAG = :span
10
10
 
11
- # @example Default
12
- # <%= render(Primer::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
13
- # <%= render(Primer::Beta::Text.new(tag: :p, color: :danger)) { "Danger Text" } %>
14
- #
15
11
  # @param tag [Symbol]
16
12
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
17
13
  def initialize(tag: DEFAULT_TAG, **system_arguments)
@@ -1 +1 @@
1
- .TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-fg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}
1
+ .TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-emphasis));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}
@@ -1 +1 @@
1
- {"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,mEAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,sEAAgD,CAChD,6EACF,CAGF,oBASE,kBAAmB,CACnB,4EAA8C,CAC9C,yGAA6D,CAC7D,iBAAkB,CAJlB,gDAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,wEAAiD,CACjD,4DAAiD,CAFjD,2DAGF,CAEA,mBAIE,gDAA2B,CAC3B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,mEAAwC,CACxC,QAAS,CACT,kHAAuE,CANvE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--stack-padding-normal) 0;\n margin-left: var(--stack-gap-normal);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--borderWidth-thick);\n content: '';\n background-color: var(--borderColor-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--borderColor-accent-emphasis);\n box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--control-medium-size);\n height: var(--control-medium-size);\n margin-right: var(--controlStack-medium-gap-condensed);\n margin-left: calc(var(--control-medium-size) / -2 + 1px);\n color: var(--fgColor-muted);\n align-items: center;\n background-color: var(--timelineBadge-bgColor);\n border: var(--borderWidth-thick) solid var(--bgColor-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-success-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--stack-gap-spacious);\n margin: 0;\n margin-bottom: calc(var(--stack-gap-normal) * -1);\n margin-left: -56px;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--stack-gap-normal);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16);\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n}\n"]}
1
+ {"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,mEAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,4EAAgD,CAChD,6EACF,CAGF,oBASE,kBAAmB,CACnB,4EAA8C,CAC9C,yGAA6D,CAC7D,iBAAkB,CAJlB,gDAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,8EAAiD,CACjD,4DAAiD,CAFjD,2DAGF,CAEA,mBAIE,gDAA2B,CAC3B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,mEAAwC,CACxC,QAAS,CACT,kHAAuE,CANvE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--stack-padding-normal) 0;\n margin-left: var(--stack-gap-normal);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--borderWidth-thick);\n content: '';\n background-color: var(--borderColor-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--borderColor-accent-emphasis);\n box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--control-medium-size);\n height: var(--control-medium-size);\n margin-right: var(--controlStack-medium-gap-condensed);\n margin-left: calc(var(--control-medium-size) / -2 + 1px);\n color: var(--fgColor-muted);\n align-items: center;\n background-color: var(--timelineBadge-bgColor);\n border: var(--borderWidth-thick) solid var(--bgColor-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-success-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--stack-gap-spacious);\n margin: 0;\n margin-bottom: calc(var(--stack-gap-normal) * -1);\n margin-left: -56px;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--stack-gap-normal);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16);\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n}\n"]}
@@ -38,15 +38,6 @@ module Primer
38
38
  Primer::BaseComponent.new(**system_arguments)
39
39
  }
40
40
 
41
- # @example Default
42
- # <div style="padding-left: 60px">
43
- # <%= render(Primer::Beta::TimelineItem.new) do |component| %>
44
- # <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
45
- # <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
46
- # <% component.with_body { "Success!" } %>
47
- # <% end %>
48
- # </div>
49
- #
50
41
  # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
51
42
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
52
43
  def initialize(condensed: false, **system_arguments)