Skip to content

Commit 423341b

Browse files
mrmirmrmir
committed
Add previews and tests
1 parent 549e0e8 commit 423341b

File tree

14 files changed

+154
-60
lines changed

14 files changed

+154
-60
lines changed

Diff for: ‎app/components/primer/open_project/border_box/collapsible_header.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
22
<%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
3-
<%= flex.with_row(tag: "collapsible-header") do %>
3+
<%= flex.with_row do %>
44
<%= render(Primer::Beta::Text.new(mr: 2) ) { @title } %>
55
<% if @count.present? %>
66
<%= render(Primer::Beta::Counter.new(count: @count, mr: 2)) %>

Diff for: ‎app/components/primer/open_project/border_box/collapsible_header.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ def before_render
3939
end
4040

4141
def render?
42-
raise ArgumentError, "this component must be called inside the header of a `Primer::Beta::BorderBox`" unless @box.present? && @box.is_a?(Primer::Beta::BorderBox)
42+
raise ArgumentError, "This component must be called inside the header of a `Primer::Beta::BorderBox`" unless @box.present? && @box.is_a?(Primer::Beta::BorderBox)
4343
true
4444
end
4545
end

Diff for: ‎app/components/primer/open_project/border_box/collapsible_header.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@ class CollapsibleHeaderElement extends HTMLElement {
1717
}
1818

1919
connectedCallback() {
20-
if (this.collapsed) {
20+
console.log(this.collapsed)
21+
if (Boolean(this.collapsed) === true) {
2122
this.hideAll()
2223
}
2324
}
2425

2526
public toggle() {
26-
if (this.collapsed) {
27+
if (Boolean(this.collapsed) === true) {
2728
this.collapsed = false
2829
this.expandAll()
2930
} else {
@@ -41,7 +42,9 @@ class CollapsibleHeaderElement extends HTMLElement {
4142

4243
this.arrowDown.classList.remove('d-none')
4344
this.arrowUp.classList.add('d-none')
44-
this.description.classList.add('d-none')
45+
if (this.description !== undefined) {
46+
this.description.classList.add('d-none')
47+
}
4548

4649
this.container.style.borderBottomLeftRadius = '0'
4750
this.container.style.borderBottomRightRadius = '0'
@@ -57,7 +60,9 @@ class CollapsibleHeaderElement extends HTMLElement {
5760

5861
this.arrowDown.classList.add('d-none')
5962
this.arrowUp.classList.remove('d-none')
60-
this.description.classList.remove('d-none')
63+
if (this.description !== undefined) {
64+
this.description.classList.remove('d-none')
65+
}
6166

6267
this.container.style.borderBottomLeftRadius = '0.375rem'
6368
this.container.style.borderBottomRightRadius = '0.375rem'

Diff for: ‎demo/Gemfile.lock

+6-6
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@ GEM
9696
faraday-patron (1.0.0)
9797
faraday-rack (1.0.0)
9898
faraday-retry (1.0.3)
99-
ffi (1.17.1-arm64-darwin)
100-
ffi (1.17.1-x86_64-darwin)
101-
ffi (1.17.1-x86_64-linux-gnu)
99+
ffi (1.17.0-arm64-darwin)
100+
ffi (1.17.0-x86_64-darwin)
101+
ffi (1.17.0-x86_64-linux-gnu)
102102
ffi-compiler (1.3.2)
103103
ffi (>= 1.15.5)
104104
rake
@@ -236,11 +236,11 @@ GEM
236236
mutex_m (0.2.0)
237237
netrc (0.11.0)
238238
nio4r (2.7.4)
239-
nokogiri (1.18.6-arm64-darwin)
239+
nokogiri (1.16.7-arm64-darwin)
240240
racc (~> 1.4)
241-
nokogiri (1.18.6-x86_64-darwin)
241+
nokogiri (1.16.7-x86_64-darwin)
242242
racc (~> 1.4)
243-
nokogiri (1.18.6-x86_64-linux-gnu)
243+
nokogiri (1.16.7-x86_64-linux)
244244
racc (~> 1.4)
245245
oj (3.16.3)
246246
bigdecimal (>= 3.0)

Diff for: ‎package-lock.json

+7-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -45,17 +45,17 @@
4545
"dependencies": {
4646
"@github/auto-check-element": "^5.2.0",
4747
"@github/auto-complete-element": "^3.6.2",
48-
"@github/catalyst": "^1.7.0",
48+
"@github/catalyst": "^1.6.0",
4949
"@github/clipboard-copy-element": "^1.3.0",
5050
"@github/details-menu-element": "^1.0.12",
5151
"@github/image-crop-element": "^5.0.0",
5252
"@github/include-fragment-element": "^6.1.1",
5353
"@github/relative-time-element": "^4.0.0",
5454
"@github/remote-input-element": "^0.4.0",
5555
"@github/tab-container-element": "^3.1.2",
56+
"@primer/live-region-element": "^0.7.1",
5657
"@oddbird/popover-polyfill": "^0.5.2",
57-
"@primer/behaviors": "^1.3.4",
58-
"@primer/live-region-element": "^0.7.1"
58+
"@primer/behaviors": "^1.3.4"
5959
},
6060
"peerDependencies": {
6161
"@primer/primitives": "9.x || 10.x"

Diff for: ‎previews/primer/open_project/border_box/collapsible_header_preview.rb

+31-28
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,43 @@ module BorderBox
99
# @label BorderBox::CollapsibleHeader
1010
class CollapsibleHeaderPreview < ViewComponent::Preview
1111
# @label Playground
12-
# @param string_example text
13-
# @param boolean_example toggle
14-
# @param email_example email
15-
# @param number_example number
16-
# @param url_example url
17-
# @param tel_example tel
18-
# @param textarea_example textarea
19-
# @param select_example select [one, two, three]
20-
# @param select_custom_labels select [[One label, one], [Two label, two], [Three label, three]]
21-
# With empty option (`~` in YAML)
22-
# @param select_empty_option select [~, one, two, three]
23-
# def playground(string_example: "Some value", boolean_example: false, select_example: :one)
24-
# render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(string_example: string_example, boolean_example: boolean_example, select_example: select_example))
25-
# end
12+
# @param title [String]
13+
# @param description [String]
14+
# @param collapsed toggle
15+
# @param count [Numeric]
16+
def playground(
17+
title: "Title text",
18+
description: "Long description text...",
19+
count: 42,
20+
collapsed: false
21+
)
22+
render_with_template(locals: {
23+
title: title,
24+
description: description,
25+
count: count,
26+
collapsed: collapsed
27+
})
28+
end
2629

2730
# @label Default
2831
def default
2932
render_with_template
3033
end
3134

32-
# @label with count
33-
# def playground(string_example: "Some value", boolean_example: false, select_example: :one)
34-
#
35-
# end
36-
#
37-
# @label with description
38-
# def playground(string_example: "Some value", boolean_example: false, select_example: :one)
39-
#
40-
# end
41-
#
42-
# @label with collapsed
43-
# def playground(string_example: "Some value", boolean_example: false, select_example: :one)
44-
#
45-
# end
35+
# @label With counter
36+
def with_count
37+
render_with_template
38+
end
39+
40+
# @label With description text
41+
def with_description
42+
render_with_template
43+
end
44+
45+
# @label Collapsed initially
46+
def collapsed
47+
render_with_template
48+
end
4649
end
4750
end
4851
end

Diff for: ‎previews/primer/open_project/border_box/collapsible_header_preview/collapsed.html.erb

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<%= render(Primer::Beta::BorderBox.new) do |component| %>
2+
<% component.with_header do %>
3+
<%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Default title",
4+
box: component,
5+
description: "This text should also be hidden when collapsed",
6+
collapsed: true)) %>
7+
<% end %>
8+
<% component.with_body { "Body" } %>
9+
<% component.with_row { "Row 1" } %>
10+
<% component.with_row { "Row 2" } %>
11+
<% component.with_row { "Row 3" } %>
12+
<% component.with_footer { "Footer" } %>
13+
<% end %>

Diff for: ‎previews/primer/open_project/border_box/collapsible_header_preview/default.html.erb

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<%= render(Primer::Beta::BorderBox.new) do |component| %>
22
<% component.with_header do %>
3-
<%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test",
4-
count: 3,
5-
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
6-
collapsed: true,
3+
<%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Default title",
74
box: component)) %>
85
<% end %>
96
<% component.with_body { "Body" } %>

Diff for: ‎previews/primer/open_project/border_box/collapsible_header_preview/playground.html.erb

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<%= render(Primer::Beta::BorderBox.new) do |component| %>
2+
<% component.with_header do %>
3+
<%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(box: component,
4+
title: title,
5+
description: description,
6+
count: count,
7+
collapsed: collapsed)) %>
8+
<% end %>
9+
<% component.with_body { "Body" } %>
10+
<% component.with_row { "Row 1" } %>
11+
<% component.with_row { "Row 2" } %>
12+
<% component.with_row { "Row 3" } %>
13+
<% component.with_footer { "Footer" } %>
14+
<% end %>

Diff for: ‎previews/primer/open_project/border_box/collapsible_header_preview/with_count.html.erb

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<%= render(Primer::Beta::BorderBox.new) do |component| %>
2+
<% component.with_header do %>
3+
<%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Default title",
4+
box: component,
5+
count: 42)) %>
6+
<% end %>
7+
<% component.with_body { "Body" } %>
8+
<% component.with_row { "Row 1" } %>
9+
<% component.with_row { "Row 2" } %>
10+
<% component.with_row { "Row 3" } %>
11+
<% component.with_footer { "Footer" } %>
12+
<% end %>

Diff for: ‎previews/primer/open_project/border_box/collapsible_header_preview/with_description.html.erb

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<%= render(Primer::Beta::BorderBox.new) do |component| %>
2+
<% component.with_header do %>
3+
<%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Default title",
4+
box: component,
5+
description: "This is the description text... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")) %>
6+
<% end %>
7+
<% component.with_body { "Body" } %>
8+
<% component.with_row { "Row 1" } %>
9+
<% component.with_row { "Row 2" } %>
10+
<% component.with_row { "Row 3" } %>
11+
<% component.with_footer { "Footer" } %>
12+
<% end %>

Diff for: ‎test/components/primer/open_project/border_box/collapsible_header_test.rb

+43-4
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,51 @@
22

33
require "components/test_helper"
44

5-
class PrimerOpenProjectBorderBox::CollapsibleHeaderTest < Minitest::Test
5+
class Primer::OpenProject::BorderBox::CollapsibleHeaderTest < Minitest::Test
66
include Primer::ComponentTestHelpers
77

8-
def test_renders
9-
render_inline(Primer::BorderBox::CollapsibleHeader.new)
8+
def test_renders_default
9+
render_preview(:default)
1010

11-
assert_text("Add a test here")
11+
assert_selector(".CollapsibleHeader", text: "Default title")
12+
assert_selector("svg.up-icon")
13+
assert_selector("svg.down-icon.d-none")
14+
# Test for border style
15+
end
16+
17+
def test_does_not_render_without_title_and_box
18+
render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new)
19+
20+
refute_component_rendered
21+
end
22+
23+
def test_does_not_render_without_valid_box
24+
render_inline(Primer::OpenProject::BorderBox::CollapsibleHeader.new(title: "Test title", box: "Some component"))
25+
26+
refute_component_rendered
27+
end
28+
29+
def test_renders_with_description
30+
render_preview(:with_description)
31+
32+
assert_selector(".CollapsibleHeader .color-fg-subtle", text: "This is the description text... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
33+
assert_no_selector(".CollapsibleHeader .color-fg-subtle.d-none")
34+
end
35+
36+
def test_renders_with_count
37+
render_preview(:with_count)
38+
39+
assert_selector(".CollapsibleHeader .Counter", text: "42")
40+
end
41+
42+
def test_renders_collapsed
43+
render_preview(:collapsed)
44+
45+
sleep(2) # More delay or something else?
46+
assert_selector(".CollapsibleHeader", text: "Default title")
47+
assert_selector("svg.up-icon.d-none")
48+
assert_selector("svg.down-icon")
49+
assert_no_text("This text should also be hidden when collapsed")
50+
# Test for border style
1251
end
1352
end

Diff for: ‎test/system/open_project/border_box/collapsible_header_test.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
require "system/test_case"
44

5-
class IntegrationOpenProjectBorderBox::CollapsibleHeaderTest < System::TestCase
5+
class IntegrationOpenProjectBorderBoxCollapsibleHeaderTest < System::TestCase
66
def test_renders_component
77
visit_preview(:default)
88

0 commit comments

Comments
 (0)