convert es-ulist to Angle Bracket

Author: hakubo

addon/components/es-ulist-elements.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../templates/components/es-ulist-elements';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addon/components/es-ulist.js

@@ -8,23 +8,14 @@ export default Component.extend({
   classNames: ['es-ulist'],
   classNameBindings: ['hasBorder:bordered'],
 
-  
   listId: computed(function() {
-    return ('list-' + this.get('elementId'));
+    return ('list-' + this.elementId);
   }),
 
-  //accessibility support
-  ariaLabelledby: null, //for the ul element
-  ariaLabel: null,
-  listItems: null,
-  listTitle: null,
-  
   hasImage: false,
   hasLink: false,
   hasBorder: false,
 
   isUnorderedList: true, //add flexibility to use ordered or unordered list.
   isTitleVisible: true, //add the flexibility to visually hide the title for the list. It should still be there for ADA.
-
-
 });

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

@@ -0,0 +1,17 @@
+{{#each @listItems as |item|}}
+  <li class="list-item">
+    {{#if @hasLink}}
+      <a href={{item.link}} class="list-item-link">
+        {{#if @hasImage}}
+          <img src={{item.image}} class="list-item-image" alt={{item.alt}}>
+        {{/if}}
+        {{item.text}}
+      </a>
+    {{else}}
+      {{#if @hasImage}}
+        <img src={{item.image}} class="list-item-image" alt={{item.alt}}>
+      {{/if}}
+      {{item.text}}
+    {{/if}}
+  </li>
+{{/each}}

addon/templates/components/es-ulist.hbs

@@ -1,25 +1,19 @@
-<div class="list-title {{if isTitleVisible sr-only}}" id={{listId}}>{{listTitle}}</div>
+<div class="list-title {{if isTitleVisible sr-only}}" id={{listId}}>{{@listTitle}}</div>
 
 {{#if isUnorderedList}}
   <ul aria-labelledby={{listId}} class="list list-default">
-    {{#each listItems as |item|}}
-      <li class="list-item">
-        {{#if hasLink}}
-          <a href={{item.link}} class="list-item-link">
-            {{#if hasImage}}
-              <img src={{item.image}} class="list-item-image" alt={{item.alt}}>
-            {{/if}}
-            {{item.text}}
-          </a>
-        {{else}}
-          {{#if hasImage}}
-            <img src={{item.image}} class="list-item-image" alt={{item.alt}}>
-          {{/if}}
-          {{item.text}}
-        {{/if}}
-      </li>
-    {{/each}}
+    <EsUlistElements
+      @listItems={{@listItems}}
+      @hasLink={{@hasLink}}
+      @hasImage={{@hasImage}}
+    />
   </ul>
 {{else}}
-
+  <ol aria-labelledby={{listId}} class="list list-default">
+    <EsUlistElements
+      @listItems={{@listItems}}
+      @hasLink={{@hasLink}}
+      @hasImage={{@hasImage}}
+    />
+  </ol>
 {{/if}}

app/components/es-ulist-elements.js

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

tests/dummy/app/templates/docs/components/es-ulist.md

@@ -8,7 +8,7 @@ The list component is an unstyled, unordered list. A title must be defined, but
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='es-ulist.hbs'}}
-    {{es-ulist listTitle="Zoey by City" listItems=listItems}}
+    <EsUlist @listTitle="Zoey by City" @listItems={{listItems}} />
   {{/demo.example}}
   {{demo.snippet 'es-ulist.hbs'}}
 {{/docs-demo}}
@@ -17,7 +17,7 @@ The list component is an unstyled, unordered list. A title must be defined, but
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='es-ulist-imagelist.hbs'}}
-    {{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true}}
+    <EsUlist @listTitle="Zoey by City" @listItems={{listItems}} @hasImage={{true}} />
   {{/demo.example}}
   {{demo.snippet 'es-ulist-imagelist.hbs'}}
 {{/docs-demo}}
@@ -26,19 +26,24 @@ The list component is an unstyled, unordered list. A title must be defined, but
 
 {{#docs-demo as |demo|}}
   {{#demo.example name='es-ulist-linklist.hbs'}}
-    {{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true hasLink=true}}
+    <EsUlist
+      @listTitle="Zoey by City"
+      @listItems={{listItems}}
+      @hasImage={{true}}
+      @hasLink={{true}}
+    />
   {{/demo.example}}
   {{demo.snippet 'es-ulist-linklist.hbs'}}
 {{/docs-demo}}
 
 ## Other use cases
 
-- to add a border: 'hasBorder=true'
-- to use an ordered list: 'isUnorderedList=false',
-- to visually hide the list title (it still must exist for A11y): 'isTitleVisible=false' 
+- to add a border: '@hasBorder={{true}}'
+- to use an ordered list: '@isUnorderedList={{false}}',
+- to visually hide the list title (it still must exist for A11y): '@isTitleVisible={{false}}'
 
 <aside role="note">
 
 Have ideas for this component? Submit an issue or a PR at [https://github.com/ember-learn/ember-styleguide](https://github.com/ember-learn/ember-styleguide).
 
-</aside>
+</aside>

tests/integration/components/es-ulist-test.js

@@ -1,34 +1,75 @@
 import { render } from '@ember/test-helpers';
-import { module, skip, test } from 'qunit';
+import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | es ulist', function(hooks){
+function generateList(number) {
+  return new Array(number).fill({
+    text: 'Hakubo was here',
+    link: 'emberjs.com',
+    image: 'https://emberjs.com/images/tomsters/atlanta-zoey-38822a67.png',
+  });
+}
+
+module('Integration | Component | es ulist', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
+    await render(hbs`<EsUlist @listTitle="Zoey by City"/>`);
 
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.on('myAction', function(val) { ... });
-
-    await render(hbs`{{es-ulist}}`);
-
-    assert.dom('*').hasText('');
+    assert.dom('.list-title').hasText('Zoey by City');
+    assert.dom('.list').exists();
   });
 
-  skip('the list is populated', function(){
+  test('the list is populated', async function(assert) {
+    this.set('listItems', generateList(2));
 
+    await render(hbs`
+      <EsUlist
+        @listItems={{listItems}}
+      />
+    `);
+
+    assert.dom('.list-item').exists({ count: 2 });
+    assert.dom('.list-item:first-child').hasText('Hakubo was here');
   });
 
-  skip('a list with images renders the images correctly', function(){
+  test('a list with images renders the images correctly', async function(assert) {
+    this.set('listItems', generateList(1));
+
+    await render(hbs`
+      <EsUlist
+        @listItems={{listItems}}
+        @hasImage={{true}}
+      />
+    `);
 
+    assert
+      .dom('.list-item-image')
+      .hasAttribute(
+        'src',
+        'https://emberjs.com/images/tomsters/atlanta-zoey-38822a67.png',
+      );
   });
 
-  skip('the id value of the list title matches the value in the aria-describedby property on the list element', function(){
+  test('the id value of the list title matches the value in the aria-describedby property on the list element', async function(assert) {
+    await render(hbs`<EsUlist @elementId="test" />`);
 
+    assert.dom('.list').hasAttribute('aria-labelledby', 'list-test')
+    assert.dom('.list-title').hasAttribute('id', 'list-test');
   });
 
-  skip('when hasLink is set to true, a link element renders', function(){
+  test('when @hasLink is set to true, a link element renders', async function(assert) {
+    this.set('listItems', generateList(1));
+
+    await render(hbs`
+      <EsUlist
+        @listTitle="Zoey by City"
+        @listItems={{listItems}}
+        @hasLink={{true}}
+      />
+    `);
 
+    assert.dom('.list-item-link').hasAttribute('href', 'emberjs.com');
   });
 });