Skip to content

Commit fad2ecf

Browse files
moeldersmoelders
authored
Merge pull request #12 from adidas/bugfix/tiles-and-tags
Tiles and tags
2 parents 4336d2e + e308cd7 commit fad2ecf

29 files changed

+1059
-536
lines changed

‎.babelrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"presets": ["env"],
2+
"presets": [ "env" ],
33
"env": {
44
"test": {
5-
"plugins": ["istanbul"]
5+
"plugins": [ "istanbul" ]
66
}
77
}
88
}

‎CHANGELOG.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1+
# 1.5.0
2+
3+
- Updated tags component.
4+
- Updated tiles component.
5+
- Updated example with tags and tiles.
6+
- Fixed minor issues in components.
7+
8+
### [ tags ]
9+
10+
- Added `.tag-list--horizontal`/`.tag-list--vertical` modifiers.
11+
- Fixed tag style.
12+
- Removed `.tags` class in favor of `.tag-list`.
13+
14+
### [ tiles ]
15+
16+
- Updated tile height and footer height values.
17+
- Updated `.tile__main--flag` adding customization for YARN icons.
18+
- Removed `.tile__footer` ellipsis and its hover behavior.
19+
- Removed `.tile__main--app` class.
20+
- Removed `.tile__footer__status` class and all its subclasses.
21+
- Removed `.link` class customization inside `.tile__footer__text`.
22+
23+
### [ example ]
24+
25+
- Added tags component example.
26+
- Added tiles component example.
27+
128
# 1.4.0
229

330
- Fixed forms and controls.

‎example/components/sidebar/default.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export default {
6666
const parentRoute = routes.find(({ name }) => name === parentName);
6767
6868
if (parentRoute) {
69-
parentRoute.children = parentRoute.children || [];
70-
parentRoute.children.push(route);
69+
parentRoute.children = [].concat(parentRoute.children || [], route)
70+
.sort(({ name1 }, { name2 }) => name1 - name2);
7171
} else {
7272
routes.push(route);
7373
}

‎example/components/tag/default.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<span class="tag" :class="{ 'tag--selected': selected }">
3+
<span class="tag__label">{{ label }}</span>
4+
<button class="tag__icon tag__icon--remove yarn-icon yarn-icon--close"
5+
v-if="removable">
6+
</button>
7+
</span>
8+
</template>
9+
10+
<script>
11+
export default {
12+
props: [ 'label', 'removable', 'selected' ]
13+
};
14+
</script>

‎example/components/tile/default.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="tile">
3+
<div class="tile__main" :style="{ backgroundImage: `url(${ image })` }">
4+
<div class="tile__main--type" v-if="type">
5+
{{ type }}
6+
</div>
7+
<div class="tile__main--flag" v-if="flag">
8+
<span :class="`yarn-icon yarn-icon--${ flag }`"></span>
9+
</div>
10+
</div>
11+
<div class="tile__footer">
12+
<div class="tile__footer__group">{{ title }}</div>
13+
<div class="tile__footer__subheader">
14+
<slot></slot>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
props: {
23+
title: '',
24+
image: '',
25+
type: '',
26+
flag: ''
27+
}
28+
};
29+
</script>

‎example/locales/en.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,16 @@
226226
"label": "Free text area",
227227
"label-disabled": "Free text area (disabled)"
228228
},
229+
"components-tags": {
230+
"name": "Tags",
231+
"horizontal": "Horizontal tag list",
232+
"vertical": "Vertical tag list",
233+
"selected": "Selected tags",
234+
"removable": "Removable tags"
235+
},
236+
"components-tiles": {
237+
"name": "Tiles"
238+
},
229239
"plugins": {
230240
"name": "Plugins",
231241
"description": "CSS extensions for @:meta.yarn"

‎example/pages/components/buttons.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
99
<section class="section">
1010
<div class="row">
11-
<h3 class="col-xs-12">
11+
<h4 class="col-xs-12">
1212
{{ $t('views.components-buttons.main-buttons') }}
13-
</h3>
13+
</h4>
1414
<div class="col-xs-12 col-sm-6">
1515
<button-group name="primary" classes="btn-primary"/>
1616
</div>
@@ -27,9 +27,9 @@
2727
</section>
2828
<section class="section">
2929
<div class="row">
30-
<h3 class="col-xs-12">
30+
<h4 class="col-xs-12">
3131
{{ $t('views.components-buttons.colored-buttons') }}
32-
</h3>
32+
</h4>
3333
<div class="col-xs-12 col-sm-6">
3434
<button-group name="blue"/>
3535
<button-group name="red"/>
@@ -49,9 +49,9 @@
4949
</section>
5050
<section class="section">
5151
<div class="row">
52-
<h3 class="col-xs-12">
52+
<h4 class="col-xs-12">
5353
{{ $t('views.components-buttons.sections.icons.name') }}
54-
</h3>
54+
</h4>
5555
<div class="col-xs-6 col-sm-3">
5656
<p>{{ $t('views.components-buttons.sections.icons.primary') }}</p>
5757
<button class="btn btn-primary">
@@ -81,9 +81,9 @@
8181
</section>
8282
<section class="section">
8383
<div class="row">
84-
<h3 class="col-xs-12">
84+
<h4 class="col-xs-12">
8585
{{ $t('views.components-buttons.sections.group.horizontal.name') }}
86-
</h3>
86+
</h4>
8787
<div class="col-xs-12">
8888
<p>{{ $tc('views.components-buttons.count-button-example', 1, { count: 1 }) }}</p>
8989
<div class="btn-group">
@@ -109,9 +109,9 @@
109109
</section>
110110
<section class="section">
111111
<div class="row">
112-
<h3 class="col-xs-12">
112+
<h4 class="col-xs-12">
113113
{{ $t('views.components-buttons.sections.group.vertical.name') }}
114-
</h3>
114+
</h4>
115115
<div class="col-xs-12">
116116
<p>{{ $tc('views.components-buttons.count-button-example', 1, { count: 1 }) }}</p>
117117
<div class="btn-group-vertical">
@@ -137,9 +137,9 @@
137137
</section>
138138
<section class="section">
139139
<div class="row">
140-
<h3 class="col-xs-12">
140+
<h4 class="col-xs-12">
141141
{{ $t('views.components-buttons.sections.mobile') }}
142-
</h3>
142+
</h4>
143143
<div class="col-xs-12">
144144
<p>{{ $tc('views.components-buttons.count-button-example', 1, { count: 1 }) }}</p>
145145
<div class="btn-group">

‎example/pages/components/tags.meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"showInSidebar": true,
3+
"displayName": "views.components-tags.name"
4+
}

‎example/pages/components/tags.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="container">
3+
<page-title>
4+
<p>{{ $t('views.components.name') }}</p>
5+
<h2>{{ $t('views.components-tags.name') }}</h2>
6+
</page-title>
7+
<div class="row">
8+
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
9+
<section class="section">
10+
<h5>{{ $t('views.components-tags.horizontal') }}</h5>
11+
<span class="tag-list tag-list--horizontal">
12+
<tag v-for="tag in tags"
13+
:key="tag"
14+
:label="tag"/>
15+
</span>
16+
</section>
17+
<section class="section">
18+
<h5>{{ $t('views.components-tags.vertical') }}</h5>
19+
<span class="tag-list tag-list--vertical">
20+
<tag v-for="tag in tags"
21+
:key="tag"
22+
:label="tag"/>
23+
</span>
24+
</section>
25+
<section class="section">
26+
<h5>{{ $t('views.components-tags.selected') }}</h5>
27+
<span class="tag-list tag-list--horizontal">
28+
<tag v-for="tag in tags"
29+
:key="tag"
30+
:label="tag"
31+
:selected="true"/>
32+
</span>
33+
</section>
34+
<section class="section">
35+
<h5>{{ $t('views.components-tags.removable') }}</h5>
36+
<span class="tag-list tag-list--horizontal">
37+
<tag v-for="tag in tags"
38+
:key="tag"
39+
:label="tag"
40+
:removable="true"/>
41+
</span>
42+
</section>
43+
</div>
44+
</div>
45+
</div>
46+
</template>
47+
48+
<script>
49+
import Tag from '~/components/tag/default';
50+
51+
export default {
52+
data() {
53+
return {
54+
tags: [ 'size: 8-', 'color: scarlet', 'sport: running', 'technology: boost' ]
55+
};
56+
},
57+
components: {
58+
Tag
59+
}
60+
};
61+
</script>

‎example/pages/components/tiles.meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"showInSidebar": true,
3+
"displayName": "views.components-tiles.name"
4+
}

0 commit comments

Comments
 (0)