Merge pull request #39 from SanthoshRaju91/feature/es-ulist

Feature/es ulist

Author: MelSumner

addon/components/es-ulist.js

@@ -1,15 +1,17 @@
 import Component from '@ember/component';
 import layout from '../templates/components/es-ulist';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   layout,
   classNames: ['es-ulist'],
 
   //accessibility support
-  ariaDescribedby: null,
-  ariaLabel: null,
+  ariaDescribedby: computed.alias('list.id'),
+  ariaLabel: computed.alias('list.name'),
+  listItems: computed.alias('list.items'),
   ariaRole: 'group',
-  title: null,
+  title: computed.alias('list.name'),
 
   itemUrl: null, //think about this, there has to be something better to name it.
   imageUrl: null,

addon/components/es-ulist/image.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/es-ulist/image';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  layout,
+
+  classNames: ['es-ulist-image'],
+
+  isIconLeft: computed('placement', function() {
+    return (this.get('placement') !== 'right');
+  }),
+
+  height: computed('imgHeight', function() {
+    return this.get('imgHeight') || 50;
+  }),
+
+  width: computed('imgWidth', function() {
+    return this.get('imgWidth') || 50;
+  })
+});

addon/components/es-ulist/link.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/es-ulist/link';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  isBlocked: computed('isNonBlock', function() {
+    return this.get('isNonBlock') || false;
+  })
+});

addon/components/es-ulist/text.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/es-ulist/text';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  isBlocked: computed('isNonBlock', function() {
+    return !this.get('isNonBlock');
+  })
+});

addon/styles/_es-ulist.scss

@@ -6,16 +6,82 @@
   justify-content: center;
   // margin-left: 0;
   padding-left: 0;
-  li {
-    display: inline-block;
-    justify-content: center;
-    a {
-      padding: 5px;
-      display: block;
-      img {
+
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      justify-content: center;
+      list-style: none;
+
+      a {
+        padding: 5px;
         display: block;
-        margin: 0 auto;
+        img {
+          display: block;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+}
+
+.es-ulist-text {
+  color: $orange;
+  padding: 5px 0px;
+}
+
+.link-text {
+  a {
+    color: $orange;
+    padding: 5px 0px;
+    text-decoration: none;
+    
+    &:hover {
+      opacity: .8;
+    }
+  }
+
+  &.inline {
+    a {
+      display: inline;
+    }    
+  }
+}
+
+.es-ulist-image {
+  padding: 5px 0px;
+
+  .image {
+    border-radius: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    object-fit: cover;
+  }
+
+  .es-ulist-text {
+    color: $orange;
+    position: relative;
+    top: -1em;
+  }
+
+  .image-left {
+    .es-ulist-text {
+      padding-left: 5px;
+    }
+
+    .link-text {
+      a {
+        position: relative;
+        top: -1em;
       }
     }
   }
+
+  .image-right {
+    .image {
+      padding-left: 5px;
+    }
+  }
 }

addon/templates/components/es-ulist.hbs

@@ -1 +1,11 @@
-{{yield}}
+<div>
+    {{es-heading headingText=title tagName="h3" class="title"}}
+    
+    <ul aria-describedby="{{ariaDescribedby}}">                
+        {{#each listItems as |item|}}            
+            <li>
+                {{yield item}}
+            </li>
+        {{/each}}
+    </ul>    
+</div>

addon/templates/components/es-ulist/image.hbs

@@ -0,0 +1,19 @@
+{{#if isIconLeft}}
+    <div class="flex image-left">
+        {{#if isIcon}}
+            <i class="icons {{item.src}}"></i>
+        {{else}}
+            <img src="{{item.src}}" alt="Image src" width="{{width}}" height="{{height}}" class="image"/>
+        {{/if}}
+        {{yield item}}
+    </div>
+{{else}}
+    <div class="flex image-right">
+        {{yield item}}
+        {{#if isIcon}}
+            <i class="icons {{item.src}}"></i>
+        {{else}}
+            <img src="{{item.src}}" alt="Image src" width="{{width}}" height="{{height}}" class="image"/>
+        {{/if}}
+    </div>
+{{/if}}

addon/templates/components/es-ulist/link.hbs

@@ -0,0 +1,26 @@
+{{#if isExternal}}
+    {{#if isBlocked}}
+        <div class="link-text">
+            <a href="{{item.route}}" target="__blank">{{item.text}}</a>
+        </div>
+    {{else}}
+        <span class="link-text inline">
+            <a href="{{item.route}}" target="__blank">{{item.text}}</a>
+        </span>
+    {{/if}}
+{{else}}
+    {{#if isBlocked}}
+        <div class="link-text">
+            {{#link-to item.route}} 
+                {{item.text}}
+            {{/link-to}}
+        </div>
+    {{else}}
+        <span class="link-text inline">
+            {{#link-to item.route}}
+                {{item.text}}
+            {{/link-to}}
+        </span>
+    {{/if}}
+    
+{{/if}}

addon/templates/components/es-ulist/text.hbs

@@ -0,0 +1,9 @@
+{{#if isBlocked}}
+    <div class="es-ulist-text">
+        {{item.text}}
+    </div>    
+{{else}}
+    <span class="es-ulist-text">
+        {{item.text}}
+    </span>
+{{/if}}

app/components/es-ulist/image.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-ulist/image';