primer_view_components 0.0.100 → 0.0.102

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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": "",