diff --git a/addon/components/es-ulist-elements.js b/addon/components/es-ulist-elements.js new file mode 100644 index 00000000..b4ef74e1 --- /dev/null +++ b/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: '', +}); diff --git a/addon/components/es-ulist.js b/addon/components/es-ulist.js index c49888d2..e6ec570d 100644 --- a/addon/components/es-ulist.js +++ b/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. - - }); diff --git a/addon/templates/components/es-ulist-elements.hbs b/addon/templates/components/es-ulist-elements.hbs new file mode 100644 index 00000000..a8fe0c0a --- /dev/null +++ b/addon/templates/components/es-ulist-elements.hbs @@ -0,0 +1,17 @@ +{{#each @listItems as |item|}} +
  • + {{#if @hasLink}} + + {{#if @hasImage}} + {{item.alt}} + {{/if}} + {{item.text}} + + {{else}} + {{#if @hasImage}} + {{item.alt}} + {{/if}} + {{item.text}} + {{/if}} +
    • +{{/each}} diff --git a/addon/templates/components/es-ulist.hbs b/addon/templates/components/es-ulist.hbs index 6d0979e6..ad345028 100644 --- a/addon/templates/components/es-ulist.hbs +++ b/addon/templates/components/es-ulist.hbs @@ -1,25 +1,19 @@ -
    {{listTitle}}
    +
    {{@listTitle}}
    {{#if isUnorderedList}} {{else}} - +
      + +
    {{/if}} diff --git a/app/components/es-ulist-elements.js b/app/components/es-ulist-elements.js new file mode 100644 index 00000000..f83603c1 --- /dev/null +++ b/app/components/es-ulist-elements.js @@ -0,0 +1 @@ +export { default } from 'ember-styleguide/components/es-ulist-elements'; diff --git a/tests/dummy/app/templates/docs/components/es-ulist.md b/tests/dummy/app/templates/docs/components/es-ulist.md index 3834ec41..6397da3c 100644 --- a/tests/dummy/app/templates/docs/components/es-ulist.md +++ b/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}} + {{/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}} + {{/demo.example}} {{demo.snippet 'es-ulist-imagelist.hbs'}} {{/docs-demo}} @@ -26,15 +26,20 @@ 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}} + {{/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}}' {{docs-note}} diff --git a/tests/integration/components/es-ulist-test.js b/tests/integration/components/es-ulist-test.js index b8191e5e..1b172142 100644 --- a/tests/integration/components/es-ulist-test.js +++ b/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``); - // 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` + + `); + + 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` + + `); + 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``); + 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` + + `); + assert.dom('.list-item-link').hasAttribute('href', 'emberjs.com'); }); });