Skip to content

Commit d278433

Browse files
mrmirmrmir
committed
Add previews and tests
1 parent 8d30792 commit d278433

File tree

11 files changed

+150
-52
lines changed

11 files changed

+150
-52
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

+21-13
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { attr, controller, target } from '@github/catalyst'
1+
import {attr, controller, target} from '@github/catalyst'
22

33
@controller
44
class CollapsibleHeaderElement extends HTMLElement {
5-
container = null
5+
container: HTMLElement
66
@target arrowDown: HTMLElement
77
@target arrowUp: HTMLElement
88
@target description: HTMLElement
@@ -13,17 +13,21 @@ class CollapsibleHeaderElement extends HTMLElement {
1313
constructor() {
1414
super()
1515

16-
this.container = this.closest('.Box')
16+
const found = this.closest('.Box')
17+
if (!found) {
18+
throw new Error("Container element '.Box' not found")
19+
}
20+
this.container = found as HTMLElement
1721
}
1822

1923
connectedCallback() {
20-
if (this.collapsed) {
24+
if (Boolean(this.collapsed) === true) {
2125
this.hideAll()
2226
}
2327
}
2428

2529
public toggle() {
26-
if (this.collapsed) {
30+
if (Boolean(this.collapsed) === true) {
2731
this.collapsed = false
2832
this.expandAll()
2933
} else {
@@ -35,13 +39,15 @@ class CollapsibleHeaderElement extends HTMLElement {
3539
private hideAll() {
3640
const rows = this.container.querySelectorAll('.Box-row, .Box-body, .Box-footer')
3741

38-
rows.forEach(row => {
39-
row.classList.add('d-none')
40-
})
42+
for (const row of rows) {
43+
(row as HTMLElement).classList.add('d-none')
44+
}
4145

4246
this.arrowDown.classList.remove('d-none')
4347
this.arrowUp.classList.add('d-none')
44-
this.description.classList.add('d-none')
48+
if (this.description !== undefined) {
49+
this.description.classList.add('d-none')
50+
}
4551

4652
this.container.style.borderBottomLeftRadius = '0'
4753
this.container.style.borderBottomRightRadius = '0'
@@ -51,13 +57,15 @@ class CollapsibleHeaderElement extends HTMLElement {
5157
private expandAll() {
5258
const rows = this.container.querySelectorAll('.Box-row, .Box-body, .Box-footer')
5359

54-
rows.forEach(row => {
55-
row.classList.remove('d-none')
56-
})
60+
for (const row of rows) {
61+
(row as HTMLElement).classList.remove('d-none')
62+
}
5763

5864
this.arrowDown.classList.add('d-none')
5965
this.arrowUp.classList.remove('d-none')
60-
this.description.classList.remove('d-none')
66+
if (this.description !== undefined) {
67+
this.description.classList.remove('d-none')
68+
}
6169

6270
this.container.style.borderBottomLeftRadius = '0.375rem'
6371
this.container.style.borderBottomRightRadius = '0.375rem'

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)