Skip to content

Commit 0dd8e02

Browse files
pascalwengerterpascalwengerter
committed
Merge branch 'develop' into document_link_param_option
2 parents e54f05e + 002ca67 commit 0dd8e02

File tree

14 files changed

+1770
-876
lines changed

14 files changed

+1770
-876
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
%area{@tag_attributes}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module Matestack::Ui::Core::Area
2+
class Area < Matestack::Ui::Core::Component::Static
3+
def setup
4+
@tag_attributes.merge!({
5+
alt: options[:alt],
6+
coords: options[:coords].join(','),
7+
download: options[:download],
8+
href: options[:href],
9+
hreflang: options[:hreflang],
10+
media: options[:media],
11+
rel: options[:rel],
12+
shape: options[:shape],
13+
target: options[:target],
14+
type: options[:type]
15+
})
16+
end
17+
end
18+
end

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ def setup
66
src: ActionController::Base.helpers.asset_path(options[:path]),
77
height: options[:height],
88
width: options[:width],
9+
usemap: options[:usemap],
910
alt: options[:alt]
1011
})
1112
end

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

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

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

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

‎builder/yarn.lock

Lines changed: 1566 additions & 853 deletions
Large diffs are not rendered by default.

‎docs/components/area.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# matestack core component: Area
2+
3+
Tested within the [map specs](/spec/usage/components/map_spec.rb).
4+
5+
The HTML `<area>` tag implemented in Ruby.
6+
7+
## Parameters
8+
This component takes up to 10 optional configuration params. It is meant to be used within the `<map>` component.
9+
10+
#### # alt (optional)
11+
Expects a string that specifies an alternate text for the `<area>`. Required if the href attribute is present.
12+
13+
#### # coords (optional)
14+
Expects an array of integers that define the `<area>`'s coordinates. For more details, see the [official documentation](https://www.w3schools.com/tags/att_area_coords.asp).
15+
16+
#### # download (optional)
17+
Expects a string to specify the target that will be downloaded when a user clicks on the hyperlink.
18+
19+
#### # href (optional)
20+
Expects a string to specify the hyperlink target for the area.
21+
22+
#### # hreflang (optional)
23+
Expects a string to specify the language of the target URL.
24+
25+
#### # media (optional)
26+
Expects a string to specify what media/device the target URL is optimized for.
27+
28+
#### # rel (optional)
29+
Expects a string to specify the relationship between the current document and the target URL.
30+
31+
#### # shape (optional)
32+
Expects a string to specify the shape of the area: Default, rect, circle, poly.
33+
34+
#### # target (optional)
35+
Expects a string to specify where to open the target URL.
36+
37+
#### # type (optional)
38+
Expects a string to specify the media type of the target URL.
39+
40+
## Example:
41+
42+
```ruby
43+
img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo", usemap: "#newmap"
44+
45+
map name: 'newmap' do
46+
area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
47+
area shape: 'rect', coords: [0,0,100,100], href: 'second.htm', alt: 'Second'
48+
area shape: 'rect', coords: [0,0,100,100], href: 'third.htm', alt: 'Third'
49+
end
50+
```
51+
52+
returns
53+
54+
```html
55+
<img src="matestack-logo.png" alt="otherlogo" width="500" height="300" usemap="#newmap">
56+
57+
<map name="newmap">
58+
<area shape="rect" coords="0,0,100,100" href="first.htm" alt="First">
59+
<area shape="rect" coords="100,100,200,200" href="second.htm" alt="Second">
60+
<area shape="rect" coords="200,200,300,300" href="third.htm" alt="Third">
61+
</map>
62+
```

‎docs/components/img.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@ The HTML img tag implemented in ruby.
66

77
## Parameters
88

9-
The image takes a mandatory path argument and can take 3 optional configuration params.
9+
The image takes a mandatory path argument and can take 4 optional configuration params.
1010

11-
#### # path
12-
Expects a string with the source to the image. It looks for the image in the assets/images folder and uses the standard Rails asset pipeline.
11+
#### # alt (optional)
12+
Expects a string with the alt text the image should have.
1313

1414
#### # height (optional)
1515
Expects an integer with the height of the image in px.
1616

17+
#### # path
18+
Expects a string with the source to the image. It looks for the image in the assets/images folder and uses the standard Rails asset pipeline.
19+
20+
#### # usemap (optional)
21+
Expects a string to specify the image as a client-side image-map.
22+
1723
#### # width (optional)
1824
Expects an integer with the width of the image in px.
19-
20-
#### # alt (optional)
21-
Expects a string with the alt text the image should have.

‎docs/components/map.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# matestack core component: Map
2+
3+
Show [specs](/spec/usage/components/map_spec.rb)
4+
5+
The HTML `<map>` tag implemented in Ruby.
6+
7+
## Parameters
8+
This component has a required `name` attribute and takes 2 optional configuration params. It contains a number of `<area>` elements that define the clickable areas in the image map.
9+
10+
#### # id (optional)
11+
Expects a string with all ids the `<map>` should have.
12+
13+
#### # class (optional)
14+
Expects a string with all classes the `<map>` should have.
15+
16+
#### # name
17+
Specifies the name of a parameter.
18+
19+
## Example:
20+
21+
```ruby
22+
img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo", usemap: "#newmap"
23+
24+
map name: 'newmap' do
25+
area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
26+
area shape: 'rect', coords: [0,0,100,100], href: 'second.htm', alt: 'Second'
27+
area shape: 'rect', coords: [0,0,100,100], href: 'third.htm', alt: 'Third'
28+
end
29+
```
30+
31+
returns
32+
33+
```html
34+
<img src="matestack-logo.png" alt="otherlogo" width="500" height="300" usemap="#newmap">
35+
36+
<map name="newmap">
37+
<area shape="rect" coords="0,0,100,100" href="first.htm" alt="First">
38+
<area shape="rect" coords="100,100,200,200" href="second.htm" alt="Second">
39+
<area shape="rect" coords="200,200,300,300" href="third.htm" alt="Third">
40+
</map>
41+
```

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "matestack-ui-core",
3-
"version": "0.6.0",
3+
"version": "0.7.2.1",
44
"private": true,
55
"dependencies": {
66
"axios": "^0.18.1",

‎spec/usage/components/img_spec.rb

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,17 @@
88
class ExamplePage < Matestack::Ui::Page
99
def response
1010
components {
11+
# simple image
1112
img path: 'matestack-logo.png', width: 500, height: 300, alt: "logo"
13+
# using usemap
14+
img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo", usemap: "#newmap"
1215
}
1316
end
1417
end
1518

1619
visit '/example'
1720

1821
expect(page).to have_xpath("//img[contains(@src,'matestack-logo') and @alt='logo' and @width='500' and @height='300']")
22+
expect(page).to have_xpath("//img[contains(@src,'matestack-logo') and @alt='otherlogo' and @width='500' and @height='300' and @usemap='\#newmap']")
1923
end
2024
end

‎spec/usage/components/map_spec.rb

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
require_relative '../../support/utils'
2+
include Utils
3+
4+
describe 'Map Component', type: :feature, js: true do
5+
6+
it 'Renders an image and a map containing areas on the page' do
7+
8+
class ExamplePage < Matestack::Ui::Page
9+
def response
10+
components {
11+
img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo", usemap: "#newmap"
12+
13+
map name: 'newmap' do
14+
area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
15+
area shape: 'rect', coords: [100,100,200,200], href: 'second.htm', alt: 'Second'
16+
area shape: 'rect', coords: [200,200,300,300], href: 'third.htm', alt: 'Third'
17+
end
18+
}
19+
end
20+
end
21+
22+
visit '/example'
23+
24+
static_output = page.html
25+
26+
expected_static_output = <<~HTML
27+
<map name="newmap">
28+
<area alt="First" coords="0,0,100,100" href="first.htm" shape="rect">
29+
<area alt="Second" coords="100,100,200,200" href="second.htm" shape="rect">
30+
<area alt="Third" coords="200,200,300,300" href="third.htm" shape="rect">
31+
</map>
32+
HTML
33+
34+
expect(stripped(static_output)).to include(stripped(expected_static_output))
35+
expect(page).to have_xpath("//img[contains(@src,'matestack-logo') and @alt='otherlogo' and @width='500' and @height='300' and @usemap='\#newmap']")
36+
end
37+
end

‎spec/usage/components/pre_spec.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ def response
2020
expected_static_output = <<~HTML
2121
<pre>This is preformatted text</pre>
2222
HTML
23-
p stripped(static_output)
23+
2424
expect(stripped(static_output)).to include(stripped(expected_static_output))
2525
end
2626

‎yarn.lock

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,31 +25,31 @@ [email protected]:
2525
debug "=3.1.0"
2626

2727
is-buffer@^2.0.2:
28-
version "2.0.3"
29-
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
30-
integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
28+
version "2.0.4"
29+
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
30+
integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
3131

3232
[email protected]:
3333
version "2.0.0"
3434
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
3535
integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
3636

3737
v-runtime-template@^1.5.2:
38-
version "1.5.2"
39-
resolved "https://registry.yarnpkg.com/v-runtime-template/-/v-runtime-template-1.5.2.tgz#1260a329980ae8a37ffcc6c73bdab5858393b5f8"
40-
integrity sha512-cYXqoMx02V8ffNr6SeL3v30xN6E9gT+EK63kIZS6ikpoSxBRtsZTXSO3TbWsVGb3cKenDNw9PfYHmY3WQxxhLA==
38+
version "1.10.0"
39+
resolved "https://registry.yarnpkg.com/v-runtime-template/-/v-runtime-template-1.10.0.tgz#8ea7066c37cf4be5c701a06ca247e1afda89c4be"
40+
integrity sha512-WLlq9jUepSfUrMEenw3mn7FDXX6hhbl11JjC1OKhwLzifHzVrY5a696TUHDPyj9jke3GGnR7b+2T3od/RL5cww==
4141

4242
vue@^2.5.17:
43-
version "2.5.17"
44-
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
45-
integrity sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ==
43+
version "2.6.10"
44+
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
45+
integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
4646

4747
vuex@^3.0.1:
48-
version "3.0.1"
49-
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
50-
integrity sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==
48+
version "3.1.1"
49+
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"
50+
integrity sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg==
5151

5252
yarn@^1.17.3:
53-
version "1.17.3"
54-
resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.17.3.tgz#60e0b77d079eb78e753bb616f7592b51b6a9adce"
55-
integrity sha512-CgA8o7nRZaQvmeF/WBx2FC7f9W/0X59T2IaLYqgMo6637wfp5mMEsM3YXoJtKUspnpmDJKl/gGFhnqS+sON7hA==
53+
version "1.19.1"
54+
resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.19.1.tgz#14b92410dd1ba5bab87a12b4a3d807f4569bea97"
55+
integrity sha512-gBnfbL9rYY05Gt0cjJhs/siqQXHYlZalTjK3nXn2QO20xbkIFPob+LlH44ML47GcR4VU9/2dYck1BWFM0Javxw==

0 commit comments

Comments
 (0)