Merge pull request #12 from adidas/bugfix/tiles-and-tags

Tiles and tags
adidas · Nov 29, 2018 · fad2ecf · fad2ecf
2 parents 4336d2e + e308cd7
commit fad2ecf
Show file tree

Hide file tree

Showing 29 changed files with 1,059 additions and 536 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,8 +1,8 @@
 {
-  "presets": ["env"],
+  "presets": [ "env" ],
   "env": {
     "test": {
-      "plugins": ["istanbul"]
+      "plugins": [ "istanbul" ]
     }
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,30 @@
+# 1.5.0
+
+- Updated tags component.
+- Updated tiles component.
+- Updated example with tags and tiles.
+- Fixed minor issues in components.
+
+### [ tags ]
+
+- Added `.tag-list--horizontal`/`.tag-list--vertical` modifiers.
+- Fixed tag style.
+- Removed `.tags` class in favor of `.tag-list`.
+
+### [ tiles ]
+
+- Updated tile height and footer height values.
+- Updated `.tile__main--flag` adding customization for YARN icons.
+- Removed `.tile__footer` ellipsis and its hover behavior.
+- Removed `.tile__main--app` class.
+- Removed `.tile__footer__status` class and all its subclasses.
+- Removed `.link` class customization inside `.tile__footer__text`.
+
+### [ example ]
+
+- Added tags component example.
+- Added tiles component example.
+
 # 1.4.0
 
 - Fixed forms and controls.

diff --git a/example/components/sidebar/default.vue b/example/components/sidebar/default.vue
@@ -66,8 +66,8 @@ export default {
         const parentRoute = routes.find(({ name }) => name === parentName);
 
         if (parentRoute) {
-          parentRoute.children = parentRoute.children || [];
-          parentRoute.children.push(route);
+          parentRoute.children = [].concat(parentRoute.children || [], route)
+            .sort(({ name1 }, { name2 }) => name1 - name2);
         } else {
           routes.push(route);
         }

diff --git a/example/components/tag/default.vue b/example/components/tag/default.vue
@@ -0,0 +1,14 @@
+<template>
+  <span class="tag" :class="{ 'tag--selected': selected }">
+    <span class="tag__label">{{ label }}</span>
+    <button class="tag__icon tag__icon--remove yarn-icon yarn-icon--close"
+        v-if="removable">
+    </button>
+  </span>
+</template>
+
+<script>
+export default {
+  props: [ 'label', 'removable', 'selected' ]
+};
+</script>
diff --git a/example/components/tile/default.vue b/example/components/tile/default.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="tile">
+    <div class="tile__main" :style="{ backgroundImage: `url(${ image })` }">
+      <div class="tile__main--type" v-if="type">
+        {{ type }}
+      </div>
+      <div class="tile__main--flag" v-if="flag">
+        <span :class="`yarn-icon yarn-icon--${ flag }`"></span>
+      </div>
+    </div>
+    <div class="tile__footer">
+      <div class="tile__footer__group">{{ title }}</div>
+      <div class="tile__footer__subheader">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: '',
+    image: '',
+    type: '',
+    flag: ''
+  }
+};
+</script>
diff --git a/example/locales/en.json b/example/locales/en.json
@@ -226,6 +226,16 @@
       "label": "Free text area",
       "label-disabled": "Free text area (disabled)"
     },
+    "components-tags": {
+      "name": "Tags",
+      "horizontal": "Horizontal tag list",
+      "vertical": "Vertical tag list",
+      "selected": "Selected tags",
+      "removable": "Removable tags"
+    },
+    "components-tiles": {
+      "name": "Tiles"
+    },
     "plugins": {
       "name": "Plugins",
       "description": "CSS extensions for @:meta.yarn"

diff --git a/example/pages/components/buttons.vue b/example/pages/components/buttons.vue
@@ -8,9 +8,9 @@
       <div class="col-xs-12 col-sm-10 col-sm-offset-1">
         <section class="section">
           <div class="row">
-            <h3 class="col-xs-12">
+            <h4 class="col-xs-12">
               {{ $t('views.components-buttons.main-buttons') }}
-            </h3>
+            </h4>
             <div class="col-xs-12 col-sm-6">
               <button-group name="primary" classes="btn-primary"/>
             </div>
@@ -27,9 +27,9 @@
         </section>
         <section class="section">
           <div class="row">
-            <h3 class="col-xs-12">
+            <h4 class="col-xs-12">
               {{ $t('views.components-buttons.colored-buttons') }}
-            </h3>
+            </h4>
             <div class="col-xs-12 col-sm-6">
               <button-group name="blue"/>
               <button-group name="red"/>
@@ -49,9 +49,9 @@
         </section>
         <section class="section">
           <div class="row">
-            <h3 class="col-xs-12">
+            <h4 class="col-xs-12">
               {{ $t('views.components-buttons.sections.icons.name') }}
-            </h3>
+            </h4>
             <div class="col-xs-6 col-sm-3">
               <p>{{ $t('views.components-buttons.sections.icons.primary') }}</p>
               <button class="btn btn-primary">
@@ -81,9 +81,9 @@
         </section>
         <section class="section">
           <div class="row">
-            <h3 class="col-xs-12">
+            <h4 class="col-xs-12">
               {{ $t('views.components-buttons.sections.group.horizontal.name') }}
-            </h3>
+            </h4>
             <div class="col-xs-12">
               <p>{{ $tc('views.components-buttons.count-button-example', 1, { count: 1 }) }}</p>
               <div class="btn-group">
@@ -109,9 +109,9 @@
         </section>
         <section class="section">
           <div class="row">
-            <h3 class="col-xs-12">
+            <h4 class="col-xs-12">
               {{ $t('views.components-buttons.sections.group.vertical.name') }}
-            </h3>
+            </h4>
             <div class="col-xs-12">
               <p>{{ $tc('views.components-buttons.count-button-example', 1, { count: 1 }) }}</p>
               <div class="btn-group-vertical">
@@ -137,9 +137,9 @@
         </section>
         <section class="section">
           <div class="row">
-            <h3 class="col-xs-12">
+            <h4 class="col-xs-12">
               {{ $t('views.components-buttons.sections.mobile') }}
-            </h3>
+            </h4>
             <div class="col-xs-12">
               <p>{{ $tc('views.components-buttons.count-button-example', 1, { count: 1 }) }}</p>
               <div class="btn-group">

diff --git a/example/pages/components/tags.meta.json b/example/pages/components/tags.meta.json
@@ -0,0 +1,4 @@
+{
+  "showInSidebar": true,
+  "displayName": "views.components-tags.name"
+}
diff --git a/example/pages/components/tags.vue b/example/pages/components/tags.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <page-title>
+      <p>{{ $t('views.components.name') }}</p>
+      <h2>{{ $t('views.components-tags.name') }}</h2>
+    </page-title>
+    <div class="row">
+      <div class="col-xs-12 col-sm-10 col-sm-offset-1">
+        <section class="section">
+          <h5>{{ $t('views.components-tags.horizontal') }}</h5>
+          <span class="tag-list tag-list--horizontal">
+            <tag v-for="tag in tags"
+                :key="tag"
+                :label="tag"/>
+          </span>
+        </section>
+        <section class="section">
+          <h5>{{ $t('views.components-tags.vertical') }}</h5>
+          <span class="tag-list tag-list--vertical">
+            <tag v-for="tag in tags"
+                :key="tag"
+                :label="tag"/>
+          </span>
+        </section>
+        <section class="section">
+          <h5>{{ $t('views.components-tags.selected') }}</h5>
+          <span class="tag-list tag-list--horizontal">
+            <tag v-for="tag in tags"
+                :key="tag"
+                :label="tag"
+                :selected="true"/>
+          </span>
+        </section>
+        <section class="section">
+          <h5>{{ $t('views.components-tags.removable') }}</h5>
+          <span class="tag-list tag-list--horizontal">
+            <tag v-for="tag in tags"
+                :key="tag"
+                :label="tag"
+                :removable="true"/>
+          </span>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tag from '~/components/tag/default';
+
+export default {
+  data() {
+    return {
+      tags: [ 'size: 8-', 'color: scarlet', 'sport: running', 'technology: boost' ]
+    };
+  },
+  components: {
+    Tag
+  }
+};
+</script>
diff --git a/example/pages/components/tiles.meta.json b/example/pages/components/tiles.meta.json
@@ -0,0 +1,4 @@
+{
+  "showInSidebar": true,
+  "displayName": "views.components-tiles.name"
+}
diff --git a/example/pages/components/tiles.vue b/example/pages/components/tiles.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="container">
+    <page-title>
+      <p>{{ $t('views.components.name') }}</p>
+      <h2>{{ $t('views.components-tiles.name') }}</h2>
+    </page-title>
+    <section class="section">
+      <div class="row">
+        <div class="col-xs-6 col-sm-4 col-lg-3"
+            v-for="shoe in shoes"
+            :key="shoe.title">
+          <tile :title="shoe.title"
+              :image="shoe.image"
+              :type="shoe.type"
+              :flag="shoe.flag">
+            <div class="tile__footer__subheader__text">
+              {{ shoe.description }}
+            </div>
+          </tile>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Tile from '~/components/tile/default';
+
+export default {
+  data() {
+    return {
+      shoes: [
+        {
+          title: 'ultraboost st parley',
+          description: 'HIGH-PERFORMANCE STABILITY RUNNING SHOES MADE WITH RECYCLED MATERIALS.',
+          image: 'https://assets.adidas.com/images/w_320,h_320,f_auto,q_80,fl_lossy/3bc4558765284abda0bea8bf0108873e_9366/Zapatilla_Ultraboost_ST_Parley_Azul_AC8207_01_standard.jpg',
+          type: 'running',
+          flag: 'footwear'
+        }, {
+          title: 'Gazelle',
+          description: 'A ONE-TO-ONE REISSUE OF THE \'91 GAZELLES.',
+          image: 'https://assets.adidas.com/images/w_320,h_320,f_auto,q_80,fl_lossy/7e9680514ef94bdeb1a0a92600cbb241_9366/Zapatilla_Gazelle_Azul_B41654_01_standard.jpg',
+          type: 'originals',
+          flag: 'footwear'
+        }, {
+          title: 'SST Track Jacket',
+          description: 'A TRACK JACKET INSPIRED BY HERITAGE SPORT STYLE.',
+          image: 'https://assets.adidas.com/images/w_320,h_320,f_auto,q_80,fl_lossy/9388b0fc4be241679864a8c000c092d2_9366/SST_Track_Jacket_Green_DH3166_21_model.jpg',
+          type: 'originals',
+          flag: 'apparel'
+        }, {
+          title: 'Trefoil backpack',
+          description: 'A BACKPACK WITH CLASSIC TREFOIL STYLE.',
+          image: 'https://assets.adidas.com/images/w_320,h_320,f_auto,q_80,fl_lossy/192a53d878c7465fa770a88100fc5730_9366/Trefoil_Backpack_Black_DJ2170_01_standard.jpg',
+          type: 'hardware'
+        }, {
+          title: 'ID Climaheat Beanie',
+          description: 'A SOFT KNIT HAT WITH BUILT-IN INSULATION.',
+          image: 'https://assets.adidas.com/images/w_320,h_320,f_auto,q_80,fl_lossy/a27eaf6bf6104a09a199a88f00cdbbfc_9366/ID_Climaheat_Beanie_Orange_DJ1214_01_standard.jpg',
+          type: 'hardware'
+        }, {
+          title: 'All Blacks Ball',
+          description: 'A HARD-WEARING RUGBY BALL WITH THE MARK OF CHAMPIONS.',
+          image: 'https://assets.adidas.com/images/w_2000,h_2000,f_auto,q_90,fl_lossy/527dcdf8581143098c07a8870123f599_9366/All_Blacks_Ball_Grey_CW9596_01_standard.jpg',
+          type: 'hardware',
+          flag: 'synthetic'
+        }
+      ]
+    };
+  },
+  components: {
+    Tile
+  }
+};
+</script>