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",

0 commit comments

Comments
 (0)