Skip to content

Commit 9721614

Browse files
pascalwengerterpascalwengerter
authored
Merge pull request #307 from marcoroth/optgroup_tag
add optgroup matestack core component
2 parents 5f05bcc + 6b740b0 commit 9721614

File tree

9 files changed

+295
-0
lines changed

9 files changed

+295
-0
lines changed

‎app/concepts/matestack/ui/core/optgroup/optgroup.haml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
%optgroup{@tag_attributes}
2+
- if block_given?
3+
= yield

‎app/concepts/matestack/ui/core/optgroup/optgroup.rb

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module Matestack::Ui::Core::Optgroup
2+
class Optgroup < Matestack::Ui::Core::Component::Static
3+
def setup
4+
@tag_attributes.merge!(
5+
disabled: options[:disabled] ||= nil,
6+
label: options[:label]
7+
)
8+
end
9+
end
10+
end

‎app/concepts/matestack/ui/core/option/option.haml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
%option{@tag_attributes}
2+
- if options[:text].blank? && block_given?
3+
= yield
4+
- else
5+
= options[:text]

‎app/concepts/matestack/ui/core/option/option.rb

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module Matestack::Ui::Core::Option
2+
class Option < Matestack::Ui::Core::Component::Static
3+
def setup
4+
@tag_attributes.merge!(
5+
disabled: options[:disabled] ||= nil,
6+
selected: options[:selected] ||= nil,
7+
label: options[:label],
8+
value: options[:value]
9+
)
10+
end
11+
end
12+
end

‎docs/components/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ You can build your [own components](/docs/extend/README.md) as well, both static
5050
- [nav](/docs/components/nav.md)
5151
- [noscript](/docs/components/noscript.md)
5252
- [object](/docs/components/object.md)
53+
- [optgroup](/docs/components/optgroup.md)
54+
- [option](/docs/components/option.md)
5355
- [output](/docs/components/output.md)
5456
- [paragraph](/docs/components/paragraph.md)
5557
- [param](/docs/components/param.md)

‎docs/components/optgroup.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# matestack core component: Optgroup
2+
3+
Show [specs](/spec/usage/components/optgroup_spec.rb)
4+
5+
The HTML `<optgroup>` tag implemented in ruby.
6+
7+
## Parameters
8+
9+
This component can take 4 optional configuration params and yield the passed content.
10+
11+
#### # id (optional)
12+
Expects a string with all ids the `<optgroup>` should have.
13+
14+
#### # class (optional)
15+
Expects a string with all classes the `<optgroup>` should have.
16+
17+
#### # disabled (optional)
18+
Specifies that the `<optgroup>` should be disabled.
19+
20+
#### # label (optional)
21+
Specifies a label for the `<optgroup>`.
22+
23+
## Example: Yield a given block
24+
25+
```ruby
26+
optgroup label: 'Swedish Cars' do
27+
option text: 'Volvo', value: 'volvo'
28+
option text: 'Saab', value: 'saab'
29+
end
30+
```
31+
32+
returns
33+
34+
```html
35+
<optgroup label="Swedish Cars">
36+
<option value="volvo">Volvo</option>
37+
<option value="saab">Saab</option>
38+
</optgroup>
39+
```

‎docs/components/option.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# matestack core component: Option
2+
3+
Show [specs](/spec/usage/components/option_spec.rb)
4+
5+
The HTML `<option>` tag implemented in ruby.
6+
7+
## Parameters
8+
9+
This component can take 7 optional configuration params and either yield content or display what gets passed to the `text` configuration param.
10+
11+
#### # id (optional)
12+
Expects a string with all ids the `<option>` should have.
13+
14+
#### # class (optional)
15+
Expects a string with all classes the `<option>` should have.
16+
17+
#### # disabled (optional)
18+
Specifies that the `<option>` should be disabled.
19+
20+
#### # label (optional)
21+
Specifies a shorter label for the `<option>`.
22+
23+
#### # text (optional)
24+
Specifies the text the `<option>` should contain.
25+
26+
#### # selected (optional)
27+
Specifies that the `<option>` should be pre-selected when the page loads.
28+
29+
#### # value (optional)
30+
Specifies the value to be sent to a server.
31+
32+
33+
## Example 1: Render `options[:text]` param
34+
35+
```ruby
36+
option text: 'Option 1'
37+
```
38+
39+
returns
40+
41+
```html
42+
<option>Option 1</option>
43+
```
44+
45+
## Example 2: Render `options[:label]` param
46+
47+
```ruby
48+
option label: 'Option 2'
49+
```
50+
51+
returns
52+
53+
```html
54+
<option label="Option 2"></option>
55+
```
56+
57+
## Example 3: Render with more attributes
58+
59+
```ruby
60+
option disabled: true, label: 'Option 3', selected: true, value: '3'
61+
```
62+
63+
returns
64+
65+
```html
66+
<option disabled="disabled" label="Option 3" selected="selected" value="3"></option>
67+
```
68+
69+
## Example 4: Yield a given block
70+
71+
```ruby
72+
option id: 'foo', class: 'bar' do
73+
plain 'Option 4'
74+
end
75+
```
76+
77+
returns
78+
79+
```html
80+
<option id="foo" class="bar">
81+
Option 4
82+
</option>
83+
```

‎spec/usage/components/optgroup_spec.rb

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
require_relative '../../support/utils'
2+
include Utils
3+
4+
describe 'Optgroup component', type: :feature, js: true do
5+
it 'Renders a optgroup tag on a page' do
6+
class ExamplePage < Matestack::Ui::Page
7+
def response
8+
components {
9+
# Just the tag
10+
optgroup
11+
12+
# The tag with a label
13+
optgroup label: 'Optgroup'
14+
15+
# Optgroup tag without label but sub-components
16+
optgroup do
17+
option text: 'Option A'
18+
option text: 'Option B'
19+
option text: 'Option C'
20+
end
21+
22+
# Simple optgroup
23+
optgroup label: 'Simple Group' do
24+
option text: 'Option D'
25+
option text: 'Option E'
26+
option text: 'Option F'
27+
end
28+
29+
# Enhanced optgroups
30+
optgroup label: 'Enabled Group 1', class: 'enabled' do
31+
option text: 'Option G'
32+
option text: 'Option H'
33+
option text: 'Option I'
34+
end
35+
36+
optgroup label: 'Disabled Group 2', disabled: true, id: 'disabled' do
37+
option text: 'Option J'
38+
option text: 'Option K'
39+
option text: 'Option L'
40+
end
41+
42+
optgroup label: 'Not Disabled Group 3', disabled: false, class: 'group', id: 'not-disabled' do
43+
option text: 'Option M'
44+
option text: 'Option N'
45+
option text: 'Option O'
46+
end
47+
}
48+
end
49+
end
50+
51+
visit '/example'
52+
53+
static_output = page.html
54+
55+
File.write("static.html", static_output)
56+
57+
expected_static_output = <<~HTML
58+
<optgroup></optgroup>
59+
<optgroup label="Optgroup"></optgroup>
60+
<optgroup>
61+
<option>Option A</option>
62+
<option>Option B</option>
63+
<option>Option C</option>
64+
</optgroup>
65+
<optgroup label="Simple Group">
66+
<option>Option D</option>
67+
<option>Option E</option>
68+
<option>Option F</option>
69+
</optgroup>
70+
<optgroup label="Enabled Group 1" class="enabled">
71+
<option>Option G</option>
72+
<option>Option H</option>
73+
<option>Option I</option>
74+
</optgroup>
75+
<optgroup disabled="disabled" id="disabled" label="Disabled Group 2">
76+
<option>Option J</option>
77+
<option>Option K</option>
78+
<option>Option L</option>
79+
</optgroup>
80+
<optgroup id="not-disabled" label="Not Disabled Group 3" class="group">
81+
<option>Option M</option>
82+
<option>Option N</option>
83+
<option>Option O</option>
84+
</optgroup>
85+
HTML
86+
87+
expect(stripped(static_output)).to include(stripped(expected_static_output))
88+
end
89+
end

‎spec/usage/components/option_spec.rb

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

0 commit comments

Comments
 (0)