Skip to content

Commit f75a9f2

Browse files
Merge pull request #68 from basemate/caption-core-component
Add caption with doc and specs
2 parents e3f5da2 + 942e8fe commit f75a9f2

File tree

4 files changed

+152
-0
lines changed

4 files changed

+152
-0
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
%caption{@tag_attributes}
2+
- if options[:text].nil?
3+
- if block_given?
4+
= yield
5+
- else
6+
= options[:text]
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module Matestack::Ui::Core::Caption
2+
class Caption < Matestack::Ui::Core::Component::Static
3+
4+
end
5+
end

docs/components/caption.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# matestack core component: Caption
2+
3+
Show [specs](../../spec/usage/components/caption_spec.rb)
4+
5+
The HTML `<caption>` tag implemented in ruby. According to the [W3C specification](https://www.w3schools.com/tags/tag_caption.asp), it defines a table caption, it must be inserted directly after the `<table>` tag, and there should only be one caption per table.
6+
7+
## Parameters
8+
9+
This component can take 3 optional configuration params and optional content.
10+
11+
#### # id (optional)
12+
Expects a string with all ids the caption should have.
13+
14+
#### # class (optional)
15+
Expects a string with all classes the caption should have.
16+
17+
#### # text (optional)
18+
Expects a string with the text that should go inside the `<caption>` tag.
19+
20+
## Example 1
21+
22+
Specifying the text directly
23+
24+
```ruby
25+
table do
26+
caption text: "table caption"
27+
# table contents
28+
end
29+
```
30+
31+
returns
32+
33+
```html
34+
<table>
35+
<caption>table caption</caption>
36+
<!-- table contents -->
37+
</table>
38+
```
39+
40+
## Example 2
41+
42+
Rendering a content block between the `<caption>` tags
43+
44+
```ruby
45+
table id: 'foo', class: 'bar' do
46+
caption do
47+
plain "table caption"
48+
end
49+
end
50+
```
51+
52+
returns
53+
54+
```html
55+
<table id="foo" class="bar">
56+
<caption>table caption</caption>
57+
</table>
58+
```
59+
60+
## Example 3
61+
62+
Rendering a `<span>` tag inside `<caption>` tags
63+
64+
```ruby
65+
table do
66+
caption do
67+
plain "Hello"
68+
span do
69+
plain "table contents"
70+
end
71+
end
72+
end
73+
```
74+
75+
returns
76+
77+
```html
78+
<table>
79+
<caption>
80+
Hello <span>table contents</span>
81+
</caption>
82+
</table>
83+
```

spec/usage/components/caption_spec.rb

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
require_relative '../../support/utils'
2+
include Utils
3+
4+
describe 'Caption Component', type: :feature, js: true do
5+
6+
it 'Example 1 - using the text option' do
7+
8+
class ExamplePage < Matestack::Ui::Page
9+
10+
def response
11+
components {
12+
table do
13+
caption text: "table caption 1"
14+
end
15+
}
16+
end
17+
18+
end
19+
20+
visit '/example'
21+
22+
static_output = page.html
23+
24+
expected_static_output = <<~HTML
25+
<caption>table caption 1</caption>
26+
HTML
27+
28+
expect(stripped(static_output)).to include(stripped(expected_static_output))
29+
end
30+
31+
it 'Example 2 - using a block' do
32+
33+
class ExamplePage < Matestack::Ui::Page
34+
35+
def response
36+
components {
37+
table do
38+
caption do
39+
plain "table caption 2"
40+
end
41+
end
42+
}
43+
end
44+
45+
end
46+
47+
visit '/example'
48+
49+
static_output = page.html
50+
51+
expected_static_output = <<~HTML
52+
<caption>table caption 2</caption>
53+
HTML
54+
55+
expect(stripped(static_output)).to include(stripped(expected_static_output))
56+
end
57+
58+
end

0 commit comments

Comments
 (0)