Skip to content

Commit 712cb8c

Browse files
hakubohakubo
committed
convert es-ulist to Angle Bracket
1 parent b652efd commit 712cb8c

File tree

7 files changed

+104
-48
lines changed

7 files changed

+104
-48
lines changed

‎addon/components/es-ulist-elements.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Component from '@ember/component';
2+
import layout from '../templates/components/es-ulist-elements';
3+
4+
export default Component.extend({
5+
layout,
6+
tagName: '',
7+
});

‎addon/components/es-ulist.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,14 @@ export default Component.extend({
88
classNames: ['es-ulist'],
99
classNameBindings: ['hasBorder:bordered'],
1010

11-
1211
listId: computed(function() {
13-
return ('list-' + this.get('elementId'));
12+
return ('list-' + this.elementId);
1413
}),
1514

16-
//accessibility support
17-
ariaLabelledby: null, //for the ul element
18-
ariaLabel: null,
19-
listItems: null,
20-
listTitle: null,
21-
2215
hasImage: false,
2316
hasLink: false,
2417
hasBorder: false,
2518

2619
isUnorderedList: true, //add flexibility to use ordered or unordered list.
2720
isTitleVisible: true, //add the flexibility to visually hide the title for the list. It should still be there for ADA.
28-
29-
3021
});

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{{#each @listItems as |item|}}
2+
<li class="list-item">
3+
{{#if @hasLink}}
4+
<a href={{item.link}} class="list-item-link">
5+
{{#if @hasImage}}
6+
<img src={{item.image}} class="list-item-image" alt={{item.alt}}>
7+
{{/if}}
8+
{{item.text}}
9+
</a>
10+
{{else}}
11+
{{#if @hasImage}}
12+
<img src={{item.image}} class="list-item-image" alt={{item.alt}}>
13+
{{/if}}
14+
{{item.text}}
15+
{{/if}}
16+
</li>
17+
{{/each}}

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

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
1-
<div class="list-title {{if isTitleVisible sr-only}}" id={{listId}}>{{listTitle}}</div>
1+
<div class="list-title {{if isTitleVisible sr-only}}" id={{listId}}>{{@listTitle}}</div>
22

33
{{#if isUnorderedList}}
44
<ul aria-labelledby={{listId}} class="list list-default">
5-
{{#each listItems as |item|}}
6-
<li class="list-item">
7-
{{#if hasLink}}
8-
<a href={{item.link}} class="list-item-link">
9-
{{#if hasImage}}
10-
<img src={{item.image}} class="list-item-image" alt={{item.alt}}>
11-
{{/if}}
12-
{{item.text}}
13-
</a>
14-
{{else}}
15-
{{#if hasImage}}
16-
<img src={{item.image}} class="list-item-image" alt={{item.alt}}>
17-
{{/if}}
18-
{{item.text}}
19-
{{/if}}
20-
</li>
21-
{{/each}}
5+
<EsUlistElements
6+
@listItems={{@listItems}}
7+
@hasLink={{@hasLink}}
8+
@hasImage={{@hasImage}}
9+
/>
2210
</ul>
2311
{{else}}
24-
12+
<ol aria-labelledby={{listId}} class="list list-default">
13+
<EsUlistElements
14+
@listItems={{@listItems}}
15+
@hasLink={{@hasLink}}
16+
@hasImage={{@hasImage}}
17+
/>
18+
</ol>
2519
{{/if}}

‎app/components/es-ulist-elements.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from 'ember-styleguide/components/es-ulist-elements';

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ The list component is an unstyled, unordered list. A title must be defined, but
88

99
{{#docs-demo as |demo|}}
1010
{{#demo.example name='es-ulist.hbs'}}
11-
{{es-ulist listTitle="Zoey by City" listItems=listItems}}
11+
<EsUlist @listTitle="Zoey by City" @listItems={{listItems}} />
1212
{{/demo.example}}
1313
{{demo.snippet 'es-ulist.hbs'}}
1414
{{/docs-demo}}
@@ -17,7 +17,7 @@ The list component is an unstyled, unordered list. A title must be defined, but
1717

1818
{{#docs-demo as |demo|}}
1919
{{#demo.example name='es-ulist-imagelist.hbs'}}
20-
{{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true}}
20+
<EsUlist @listTitle="Zoey by City" @listItems={{listItems}} @hasImage={{true}} />
2121
{{/demo.example}}
2222
{{demo.snippet 'es-ulist-imagelist.hbs'}}
2323
{{/docs-demo}}
@@ -26,19 +26,24 @@ The list component is an unstyled, unordered list. A title must be defined, but
2626

2727
{{#docs-demo as |demo|}}
2828
{{#demo.example name='es-ulist-linklist.hbs'}}
29-
{{es-ulist listTitle="Zoey by City" listItems=listItems hasImage=true hasLink=true}}
29+
<EsUlist
30+
@listTitle="Zoey by City"
31+
@listItems={{listItems}}
32+
@hasImage={{true}}
33+
@hasLink={{true}}
34+
/>
3035
{{/demo.example}}
3136
{{demo.snippet 'es-ulist-linklist.hbs'}}
3237
{{/docs-demo}}
3338

3439
## Other use cases
3540

36-
- to add a border: 'hasBorder=true'
37-
- to use an ordered list: 'isUnorderedList=false',
38-
- to visually hide the list title (it still must exist for A11y): 'isTitleVisible=false'
41+
- to add a border: '@hasBorder={{true}}'
42+
- to use an ordered list: '@isUnorderedList={{false}}',
43+
- to visually hide the list title (it still must exist for A11y): '@isTitleVisible={{false}}'
3944

4045
<aside role="note">
4146

4247
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).
4348

44-
</aside>
49+
</aside>

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

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,75 @@
11
import { render } from '@ember/test-helpers';
2-
import { module, skip, test } from 'qunit';
2+
import { module, test } from 'qunit';
33
import { setupRenderingTest } from 'ember-qunit';
44
import hbs from 'htmlbars-inline-precompile';
55

6-
module('Integration | Component | es ulist', function(hooks){
6+
function generateList(number) {
7+
return new Array(number).fill({
8+
text: 'Hakubo was here',
9+
link: 'emberjs.com',
10+
image: 'https://emberjs.com/images/tomsters/atlanta-zoey-38822a67.png',
11+
});
12+
}
13+
14+
module('Integration | Component | es ulist', function(hooks) {
715
setupRenderingTest(hooks);
816

917
test('it renders', async function(assert) {
18+
await render(hbs`<EsUlist @listTitle="Zoey by City"/>`);
1019

11-
// Set any properties with this.set('myProperty', 'value');
12-
// Handle any actions with this.on('myAction', function(val) { ... });
13-
14-
await render(hbs`{{es-ulist}}`);
15-
16-
assert.dom('*').hasText('');
20+
assert.dom('.list-title').hasText('Zoey by City');
21+
assert.dom('.list').exists();
1722
});
1823

19-
skip('the list is populated', function(){
24+
test('the list is populated', async function(assert) {
25+
this.set('listItems', generateList(2));
2026

27+
await render(hbs`
28+
<EsUlist
29+
@listItems={{listItems}}
30+
/>
31+
`);
32+
33+
assert.dom('.list-item').exists({ count: 2 });
34+
assert.dom('.list-item:first-child').hasText('Hakubo was here');
2135
});
2236

23-
skip('a list with images renders the images correctly', function(){
37+
test('a list with images renders the images correctly', async function(assert) {
38+
this.set('listItems', generateList(1));
39+
40+
await render(hbs`
41+
<EsUlist
42+
@listItems={{listItems}}
43+
@hasImage={{true}}
44+
/>
45+
`);
2446

47+
assert
48+
.dom('.list-item-image')
49+
.hasAttribute(
50+
'src',
51+
'https://emberjs.com/images/tomsters/atlanta-zoey-38822a67.png',
52+
);
2553
});
2654

27-
skip('the id value of the list title matches the value in the aria-describedby property on the list element', function(){
55+
test('the id value of the list title matches the value in the aria-describedby property on the list element', async function(assert) {
56+
await render(hbs`<EsUlist @elementId="test" />`);
2857

58+
assert.dom('.list').hasAttribute('aria-labelledby', 'list-test')
59+
assert.dom('.list-title').hasAttribute('id', 'list-test');
2960
});
3061

31-
skip('when hasLink is set to true, a link element renders', function(){
62+
test('when @hasLink is set to true, a link element renders', async function(assert) {
63+
this.set('listItems', generateList(1));
64+
65+
await render(hbs`
66+
<EsUlist
67+
@listTitle="Zoey by City"
68+
@listItems={{listItems}}
69+
@hasLink={{true}}
70+
/>
71+
`);
3272

73+
assert.dom('.list-item-link').hasAttribute('href', 'emberjs.com');
3374
});
3475
});

0 commit comments

Comments
 (0)