primer_view_components 0.0.100 → 0.0.102

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +24 -0
  3. data/app/assets/javascripts/primer_view_components.js.map +1 -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_list/action-list.pcss +16 -29
  7. data/app/components/primer/alpha/action_list/item.rb +13 -11
  8. data/app/components/primer/alpha/action_list.rb +0 -2
  9. data/app/components/primer/alpha/nav_list/item.rb +43 -9
  10. data/app/components/primer/alpha/nav_list/section.rb +0 -5
  11. data/app/components/primer/alpha/toggle_switch.d.ts +2 -1
  12. data/app/components/primer/alpha/toggle_switch.js +0 -1
  13. data/app/components/primer/alpha/toggle_switch.ts +1 -1
  14. data/app/components/primer/alpha/tool-tip-element.d.ts +23 -0
  15. data/app/components/primer/alpha/tool-tip-element.js +352 -0
  16. data/app/components/primer/beta/button.pcss +3 -0
  17. data/app/components/primer/clipboard_copy_component.d.ts +1 -0
  18. data/app/components/primer/clipboard_copy_component.js +43 -0
  19. data/app/components/primer/layout_component.html.erb +1 -2
  20. data/app/components/primer/layout_component.rb +2 -0
  21. data/lib/primer/deprecations.rb +0 -2
  22. data/lib/primer/forms/check_box.html.erb +1 -5
  23. data/lib/primer/forms/check_box.rb +6 -0
  24. data/lib/primer/forms/dsl/check_box_input.rb +3 -2
  25. data/lib/primer/view_components/version.rb +1 -1
  26. data/lib/tasks/docs.rake +0 -2
  27. data/lib/tasks/test.rake +21 -1
  28. data/previews/primer/alpha/underline_nav_preview.rb +1 -1
  29. data/static/arguments.json +6 -60
  30. data/static/audited_at.json +0 -2
  31. data/static/constants.json +0 -60
  32. data/static/statuses.json +0 -2
  33. metadata +11 -9
  34. data/app/components/primer/flex_component.rb +0 -146
  35. data/app/components/primer/flex_item_component.rb +0 -55
@@ -0,0 +1,352 @@
1
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
+ if (kind === "m") throw new TypeError("Private method is not writable");
3
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
+ };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
13
+ import { getAnchoredPosition } from '@primer/behaviors';
14
+ const TOOLTIP_OPEN_CLASS = 'tooltip-open';
15
+ const TOOLTIP_ARROW_EDGE_OFFSET = 6;
16
+ const DIRECTION_CLASSES = [
17
+ 'tooltip-n',
18
+ 'tooltip-s',
19
+ 'tooltip-e',
20
+ 'tooltip-w',
21
+ 'tooltip-ne',
22
+ 'tooltip-se',
23
+ 'tooltip-nw',
24
+ 'tooltip-sw'
25
+ ];
26
+ class ToolTipElement extends HTMLElement {
27
+ constructor() {
28
+ super(...arguments);
29
+ _ToolTipElement_instances.add(this);
30
+ _ToolTipElement_abortController.set(this, void 0);
31
+ _ToolTipElement_align.set(this, 'center');
32
+ _ToolTipElement_side.set(this, 'outside-bottom');
33
+ _ToolTipElement_allowUpdatePosition.set(this, false);
34
+ }
35
+ styles() {
36
+ return `
37
+ :host {
38
+ position: absolute;
39
+ z-index: 1000000;
40
+ padding: .5em .75em;
41
+ font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
42
+ -webkit-font-smoothing: subpixel-antialiased;
43
+ color: var(--color-fg-on-emphasis);
44
+ text-align: center;
45
+ text-decoration: none;
46
+ text-shadow: none;
47
+ text-transform: none;
48
+ letter-spacing: normal;
49
+ word-wrap: break-word;
50
+ white-space: pre;
51
+ background: var(--color-neutral-emphasis-plus);
52
+ border-radius: 6px;
53
+ opacity: 0;
54
+ max-width: 250px;
55
+ word-wrap: break-word;
56
+ white-space: normal;
57
+ width: max-content;
58
+ }
59
+
60
+ :host:before{
61
+ position: absolute;
62
+ z-index: 1000001;
63
+ color: var(--color-neutral-emphasis-plus);
64
+ content: "";
65
+ border: 6px solid transparent;
66
+ opacity: 0
67
+ }
68
+
69
+ @keyframes tooltip-appear {
70
+ from {
71
+ opacity: 0
72
+ }
73
+ to {
74
+ opacity: 1
75
+ }
76
+ }
77
+
78
+ :host:after{
79
+ position: absolute;
80
+ display: block;
81
+ right: 0;
82
+ left: 0;
83
+ height: 12px;
84
+ content: ""
85
+ }
86
+
87
+ :host(.${TOOLTIP_OPEN_CLASS}),
88
+ :host(.${TOOLTIP_OPEN_CLASS}):before {
89
+ animation-name: tooltip-appear;
90
+ animation-duration: .1s;
91
+ animation-fill-mode: forwards;
92
+ animation-timing-function: ease-in;
93
+ animation-delay: .4s
94
+ }
95
+
96
+ :host(.tooltip-s):before,
97
+ :host(.tooltip-n):before {
98
+ right: 50%;
99
+ margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
100
+ }
101
+
102
+ :host(.tooltip-s):before,
103
+ :host(.tooltip-se):before,
104
+ :host(.tooltip-sw):before {
105
+ bottom: 100%;
106
+ border-bottom-color: var(--color-neutral-emphasis-plus)
107
+ }
108
+
109
+ :host(.tooltip-s):after,
110
+ :host(.tooltip-se):after,
111
+ :host(.tooltip-sw):after {
112
+ bottom: 100%
113
+ }
114
+
115
+ :host(.tooltip-n):before,
116
+ :host(.tooltip-ne):before,
117
+ :host(.tooltip-nw):before {
118
+ top: 100%;
119
+ border-top-color: var(--color-neutral-emphasis-plus)
120
+ }
121
+
122
+ :host(.tooltip-n):after,
123
+ :host(.tooltip-ne):after,
124
+ :host(.tooltip-nw):after {
125
+ top: 100%
126
+ }
127
+
128
+ :host(.tooltip-se):before,
129
+ :host(.tooltip-ne):before {
130
+ left: 0;
131
+ margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
132
+ }
133
+
134
+ :host(.tooltip-sw):before,
135
+ :host(.tooltip-nw):before {
136
+ right: 0;
137
+ margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
138
+ }
139
+
140
+ :host(.tooltip-w):before {
141
+ top: 50%;
142
+ bottom: 50%;
143
+ left: 100%;
144
+ margin-top: -6px;
145
+ border-left-color: var(--color-neutral-emphasis-plus)
146
+ }
147
+
148
+ :host(.tooltip-e):before {
149
+ top: 50%;
150
+ right: 100%;
151
+ bottom: 50%;
152
+ margin-top: -6px;
153
+ border-right-color: var(--color-neutral-emphasis-plus)
154
+ }
155
+ `;
156
+ }
157
+ get htmlFor() {
158
+ return this.getAttribute('for') || '';
159
+ }
160
+ set htmlFor(value) {
161
+ this.setAttribute('for', value);
162
+ }
163
+ get type() {
164
+ const type = this.getAttribute('data-type');
165
+ return type === 'label' ? 'label' : 'description';
166
+ }
167
+ set type(value) {
168
+ this.setAttribute('data-type', value);
169
+ }
170
+ get direction() {
171
+ return (this.getAttribute('data-direction') || 's');
172
+ }
173
+ set direction(value) {
174
+ this.setAttribute('data-direction', value);
175
+ }
176
+ get control() {
177
+ return this.ownerDocument.getElementById(this.htmlFor);
178
+ }
179
+ connectedCallback() {
180
+ var _a;
181
+ if (!this.shadowRoot) {
182
+ const shadow = this.attachShadow({ mode: 'open' });
183
+ // eslint-disable-next-line github/no-inner-html
184
+ shadow.innerHTML = `
185
+ <style>
186
+ ${this.styles()}
187
+ </style>
188
+ <slot></slot>
189
+ `;
190
+ }
191
+ this.hidden = true;
192
+ __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
193
+ if (!this.id) {
194
+ this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
195
+ }
196
+ if (!this.control)
197
+ return;
198
+ this.setAttribute('role', 'tooltip');
199
+ (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
200
+ __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
201
+ const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
202
+ this.addEventListener('mouseleave', this, { signal });
203
+ this.control.addEventListener('mouseenter', this, { signal });
204
+ this.control.addEventListener('mouseleave', this, { signal });
205
+ this.control.addEventListener('focus', this, { signal });
206
+ this.control.addEventListener('blur', this, { signal });
207
+ this.ownerDocument.addEventListener('keydown', this, { signal });
208
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
209
+ }
210
+ disconnectedCallback() {
211
+ var _a;
212
+ (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
213
+ }
214
+ handleEvent(event) {
215
+ if (!this.control)
216
+ return;
217
+ // Ensures that tooltip stays open when hovering between tooltip and element
218
+ // WCAG Success Criterion 1.4.13 Hoverable
219
+ if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
220
+ this.hidden = false;
221
+ }
222
+ else if (event.type === 'blur') {
223
+ this.hidden = true;
224
+ }
225
+ else if (event.type === 'mouseleave' &&
226
+ event.relatedTarget !== this.control &&
227
+ event.relatedTarget !== this) {
228
+ this.hidden = true;
229
+ }
230
+ else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
231
+ this.hidden = true;
232
+ }
233
+ }
234
+ attributeChangedCallback(name) {
235
+ if (name === 'id' || name === 'data-type') {
236
+ if (!this.id || !this.control)
237
+ return;
238
+ if (this.type === 'label') {
239
+ this.control.setAttribute('aria-labelledby', this.id);
240
+ this.setAttribute('aria-hidden', 'true');
241
+ }
242
+ else {
243
+ let describedBy = this.control.getAttribute('aria-describedby');
244
+ describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id);
245
+ this.control.setAttribute('aria-describedby', describedBy);
246
+ }
247
+ }
248
+ else if (this.isConnected && name === 'hidden') {
249
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
250
+ }
251
+ else if (name === 'data-direction') {
252
+ this.classList.remove(...DIRECTION_CLASSES);
253
+ const direction = this.direction;
254
+ if (direction === 'n') {
255
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
256
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
257
+ }
258
+ else if (direction === 'ne') {
259
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
260
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
261
+ }
262
+ else if (direction === 'e') {
263
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
264
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
265
+ }
266
+ else if (direction === 'se') {
267
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
268
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
269
+ }
270
+ else if (direction === 's') {
271
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
272
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
273
+ }
274
+ else if (direction === 'sw') {
275
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
276
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
277
+ }
278
+ else if (direction === 'w') {
279
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
280
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
281
+ }
282
+ else if (direction === 'nw') {
283
+ __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
284
+ __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
285
+ }
286
+ }
287
+ }
288
+ }
289
+ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
290
+ if (this.hidden) {
291
+ this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
292
+ }
293
+ else {
294
+ this.classList.add(TOOLTIP_OPEN_CLASS);
295
+ for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
296
+ if (tooltip !== this)
297
+ tooltip.hidden = true;
298
+ }
299
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
300
+ }
301
+ }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
302
+ if (!this.control)
303
+ return;
304
+ if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
305
+ return;
306
+ const TOOLTIP_OFFSET = 10;
307
+ this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
308
+ const position = getAnchoredPosition(this, this.control, {
309
+ side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
310
+ align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
311
+ anchorOffset: TOOLTIP_OFFSET
312
+ });
313
+ const anchorSide = position.anchorSide;
314
+ const align = position.anchorAlign;
315
+ this.style.top = `${position.top}px`;
316
+ this.style.left = `${position.left}px`;
317
+ let direction = 's';
318
+ if (anchorSide === 'outside-left') {
319
+ direction = 'w';
320
+ }
321
+ else if (anchorSide === 'outside-right') {
322
+ direction = 'e';
323
+ }
324
+ else if (anchorSide === 'outside-top') {
325
+ if (align === 'center') {
326
+ direction = 'n';
327
+ }
328
+ else if (align === 'start') {
329
+ direction = 'ne';
330
+ }
331
+ else {
332
+ direction = 'nw';
333
+ }
334
+ }
335
+ else {
336
+ if (align === 'center') {
337
+ direction = 's';
338
+ }
339
+ else if (align === 'start') {
340
+ direction = 'se';
341
+ }
342
+ else {
343
+ direction = 'sw';
344
+ }
345
+ }
346
+ this.classList.add(`tooltip-${direction}`);
347
+ };
348
+ ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
349
+ if (!window.customElements.get('tool-tip')) {
350
+ window.ToolTipElement = ToolTipElement;
351
+ window.customElements.define('tool-tip', ToolTipElement);
352
+ }
@@ -1,4 +1,5 @@
1
1
  /* CSS for Button */
2
+
2
3
  /* temporary, pre primitives release */
3
4
  :root {
4
5
  --primer-duration-fast: 80ms;
@@ -79,6 +80,7 @@ summary.Button {
79
80
  grid-template-columns: min-content minmax(0, auto) min-content;
80
81
  align-items: center;
81
82
  place-content: center;
83
+
82
84
  /* padding-bottom: 1px; optical alignment for firefox */
83
85
 
84
86
  & > :not(:last-child) {
@@ -324,6 +326,7 @@ summary.Button {
324
326
  }
325
327
  }
326
328
 
329
+
327
330
  .Button--iconOnly {
328
331
  display: grid;
329
332
  place-content: center;
@@ -0,0 +1 @@
1
+ import '@github/clipboard-copy-element';
@@ -0,0 +1,43 @@
1
+ import '@github/clipboard-copy-element';
2
+ const CLIPBOARD_COPY_TIMER_DURATION = 2000;
3
+ function showSVG(svg) {
4
+ svg.style.display = 'inline-block';
5
+ }
6
+ function hideSVG(svg) {
7
+ svg.style.display = 'none';
8
+ }
9
+ // Toggle a copy button.
10
+ function showCopy(button) {
11
+ const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
12
+ if (!copyIcon || !checkIcon)
13
+ return;
14
+ showSVG(copyIcon);
15
+ hideSVG(checkIcon);
16
+ }
17
+ // Toggle a copy button.
18
+ function showCheck(button) {
19
+ const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
20
+ if (!copyIcon || !checkIcon)
21
+ return;
22
+ hideSVG(copyIcon);
23
+ showSVG(checkIcon);
24
+ }
25
+ const clipboardCopyElementTimers = new WeakMap();
26
+ document.addEventListener('clipboard-copy', function ({ target }) {
27
+ if (!(target instanceof HTMLElement))
28
+ return;
29
+ if (!target.hasAttribute('data-view-component'))
30
+ return;
31
+ const currentTimeout = clipboardCopyElementTimers.get(target);
32
+ if (currentTimeout) {
33
+ clearTimeout(currentTimeout);
34
+ clipboardCopyElementTimers.delete(target);
35
+ }
36
+ else {
37
+ showCheck(target);
38
+ }
39
+ clipboardCopyElementTimers.set(target, setTimeout(() => {
40
+ showCopy(target);
41
+ clipboardCopyElementTimers.delete(target);
42
+ }, CLIPBOARD_COPY_TIMER_DURATION));
43
+ });
@@ -1,5 +1,4 @@
1
- <%# erblint:counter DeprecatedComponentsCounter 1 %>
2
- <%= render(Primer::FlexComponent.new(**@system_arguments)) do %>
1
+ <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
3
2
  <% if @side == :left %>
4
3
  <%= sidebar %>
5
4
  <% end %>
@@ -61,6 +61,8 @@ module Primer
61
61
  @system_arguments[:classes]
62
62
  )
63
63
  @system_arguments[:direction] = responsive ? [:column, nil, :row] : nil
64
+ @system_arguments[:display] = :flex
65
+ @system_arguments[:tag] = :div
64
66
 
65
67
  @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
66
68
  @main_col = MAX_COL - @sidebar_col
@@ -13,8 +13,6 @@ module Primer
13
13
  "Primer::CounterComponent" => "Primer::Beta::Counter",
14
14
  "Primer::DetailsComponent" => "Primer::Beta::Details",
15
15
  "Primer::DropdownMenuComponent" => nil,
16
- "Primer::FlexComponent" => nil,
17
- "Primer::FlexItemComponent" => nil,
18
16
  "Primer::HeadingComponent" => "Primer::Beta::Heading",
19
17
  "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
20
18
  "Primer::IconButton" => "Primer::Beta::IconButton",
@@ -1,9 +1,5 @@
1
1
  <div class="FormControl-checkbox-wrap">
2
- <% if @input.scheme == :array %>
3
- <%= builder.check_box(@input.name, @input.input_arguments, checked_value, nil) %>
4
- <% else %>
5
- <%= builder.check_box(@input.name, @input.input_arguments) %>
6
- <% end %>
2
+ <%= builder.check_box(@input.name, @input.input_arguments, checked_value, unchecked_value) %>
7
3
  <span class="FormControl-checkbox-labelWrap">
8
4
  <%= builder.label(@input.name, **@input.label_arguments) do %>
9
5
  <%= @input.label %>
@@ -22,6 +22,12 @@ module Primer
22
22
  def checked_value
23
23
  @input.value || "1"
24
24
  end
25
+
26
+ def unchecked_value
27
+ return if @input.scheme == :array
28
+
29
+ @input.unchecked_value || "0"
30
+ end
25
31
  end
26
32
  end
27
33
  end
@@ -8,9 +8,9 @@ module Primer
8
8
  DEFAULT_SCHEME = :boolean
9
9
  SCHEMES = [DEFAULT_SCHEME, :array].freeze
10
10
 
11
- attr_reader :name, :label, :value, :scheme
11
+ attr_reader :name, :label, :value, :unchecked_value, :scheme
12
12
 
13
- def initialize(name:, label:, value: nil, scheme: DEFAULT_SCHEME, **system_arguments)
13
+ def initialize(name:, label:, value: nil, unchecked_value: nil, scheme: DEFAULT_SCHEME, **system_arguments)
14
14
  raise ArgumentError, "Check box scheme must be one of #{SCHEMES.join(', ')}" unless SCHEMES.include?(scheme)
15
15
 
16
16
  raise ArgumentError, "Check box needs an explicit value if scheme is array" if scheme == :array && value.nil?
@@ -18,6 +18,7 @@ module Primer
18
18
  @name = name
19
19
  @label = label
20
20
  @value = value
21
+ @unchecked_value = unchecked_value
21
22
  @scheme = scheme
22
23
 
23
24
  super(**system_arguments)
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 100
8
+ PATCH = 102
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  end
data/lib/tasks/docs.rake CHANGED
@@ -59,8 +59,6 @@ namespace :docs do
59
59
  Primer::Dropdown,
60
60
  Primer::DropdownMenuComponent,
61
61
  Primer::Beta::Flash,
62
- Primer::FlexComponent,
63
- Primer::FlexItemComponent,
64
62
  Primer::Beta::Heading,
65
63
  Primer::Alpha::HiddenTextExpander,
66
64
  Primer::LabelComponent,
data/lib/tasks/test.rake CHANGED
@@ -4,7 +4,7 @@ require "rake/testtask"
4
4
 
5
5
  namespace :test do
6
6
  desc "Run all tests"
7
- task all: [:fast, :system]
7
+ task all: [:fast, :system, :accessibility, :bench]
8
8
 
9
9
  Rake::TestTask.new(:single) do |t|
10
10
  ENV["TZ"] = "Asia/Taipei"
@@ -22,6 +22,7 @@ namespace :test do
22
22
  t.test_files = FileList[
23
23
  "test/components/**/*_test.rb",
24
24
  "test/lib/**/*_test.rb",
25
+ "test/forms/**/*_test.rb",
25
26
  "test/primer/**/*_test.rb",
26
27
  "test/linters/**/*_test.rb",
27
28
  "test/rubocop/**/*_test.rb"
@@ -36,6 +37,25 @@ namespace :test do
36
37
  t.test_files = FileList["test/system/**/*_test.rb"]
37
38
  end
38
39
 
40
+ Rake::TestTask.new(:accessibility) do |t|
41
+ ENV["TZ"] = "Asia/Taipei"
42
+
43
+ t.libs << "test"
44
+ t.libs << "lib"
45
+ t.test_files = FileList["test/accessibility_test.rb"]
46
+ end
47
+
48
+ Rake::TestTask.new(:snapshots) do |t|
49
+ # Clear folder
50
+ FileUtils.rm_rf("test/snapshots")
51
+
52
+ ENV["TZ"] = "Asia/Taipei"
53
+
54
+ t.libs << "test"
55
+ t.libs << "lib"
56
+ t.test_files = FileList["test/snapshots_test.rb"]
57
+ end
58
+
39
59
  Rake::TestTask.new(:bench) do |t|
40
60
  t.libs << "test"
41
61
  t.test_files = FileList["test/benchmarks/**/bench_*.rb"]
@@ -31,7 +31,7 @@ module Primer
31
31
  component.with_tab(href: "#", selected: i.zero?) do |t|
32
32
  t.icon(icon: :star)
33
33
  t.text { "Item #{i + 1}" }
34
- t.counter(count: rand(1..10))
34
+ t.counter(count: (i + 1) * 5)
35
35
  end
36
36
  end
37
37
  end
@@ -123,6 +123,12 @@
123
123
  "default": "`nil`",
124
124
  "description": "CSS classes that will be added to the label."
125
125
  },
126
+ {
127
+ "name": "content_arguments",
128
+ "type": "Hash",
129
+ "default": "`{}`",
130
+ "description": "[System arguments](/system-arguments) used to construct the item's anchor or span tag."
131
+ },
126
132
  {
127
133
  "name": "truncate_label",
128
134
  "type": "Boolean",
@@ -1553,66 +1559,6 @@
1553
1559
  }
1554
1560
  ]
1555
1561
  },
1556
- {
1557
- "component": "Flex",
1558
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb",
1559
- "parameters": [
1560
- {
1561
- "name": "justify_content",
1562
- "type": "Symbol",
1563
- "default": "`JUSTIFY_CONTENT_DEFAULT`",
1564
- "description": "Use this param to distribute space between and around flex items along the main axis of the container. One of `nil`, `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`."
1565
- },
1566
- {
1567
- "name": "inline",
1568
- "type": "Boolean",
1569
- "default": "`false`",
1570
- "description": "Defaults to false."
1571
- },
1572
- {
1573
- "name": "flex_wrap",
1574
- "type": "Boolean",
1575
- "default": "`FLEX_WRAP_DEFAULT`",
1576
- "description": "Defaults to nil."
1577
- },
1578
- {
1579
- "name": "align_items",
1580
- "type": "Symbol",
1581
- "default": "`ALIGN_ITEMS_DEFAULT`",
1582
- "description": "Use this param to align items on the cross axis. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
1583
- },
1584
- {
1585
- "name": "direction",
1586
- "type": "Symbol",
1587
- "default": "`nil`",
1588
- "description": "Use this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. One of `nil`, `:column`, `:column_reverse`, `:row`, or `:row_reverse`."
1589
- },
1590
- {
1591
- "name": "system_arguments",
1592
- "type": "Hash",
1593
- "default": "N/A",
1594
- "description": "[System arguments](/system-arguments)"
1595
- }
1596
- ]
1597
- },
1598
- {
1599
- "component": "FlexItem",
1600
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb",
1601
- "parameters": [
1602
- {
1603
- "name": "flex_auto",
1604
- "type": "Boolean",
1605
- "default": "`false`",
1606
- "description": "Fills available space and auto-sizes based on the content. Defaults to false"
1607
- },
1608
- {
1609
- "name": "system_arguments",
1610
- "type": "Hash",
1611
- "default": "N/A",
1612
- "description": "[System arguments](/system-arguments)"
1613
- }
1614
- ]
1615
- },
1616
1562
  {
1617
1563
  "component": "HellipButton",
1618
1564
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb",
@@ -60,8 +60,6 @@
60
60
  "Primer::Dropdown::Menu": "",
61
61
  "Primer::Dropdown::Menu::Item": "",
62
62
  "Primer::DropdownMenuComponent": "",
63
- "Primer::FlexComponent": "",
64
- "Primer::FlexItemComponent": "",
65
63
  "Primer::HeadingComponent": "",
66
64
  "Primer::HellipButton": "",
67
65
  "Primer::HiddenTextExpander": "",