Feat/custom icon components

[RedTn]

This a a PR for an issue I submitted for customizable sort components: #478

[alexander-alvarez]

@RedTn sorry for the delay in communication. I had a weird week with holidays, vacation, and other stuff...
Will try to get to it early this week, but on first glance looks good.

[RedTn]

Feel free to let me know if anything needs to be changed/updated

[RedTn]

@alexander-alvarez Checking up on this PR, thanks alexander!

[alexander-alvarez]

A testing request and a comment on the docs. Otherwise looks great.
Sorry for the delay.

[alexander-alvarez]

would you mind adding a test to verify the arguments (sortIcons=sortIcons sortIconProperty=sortIconProperty) get passed to the component declared by iconComponent when we render a table like you do in the demo app:

+  {{t.head
+    onColumnClick=(action 'onColumnClick')
+    iconSortable='unfold_more'
+    iconAscending='keyboard_arrow_up'
+    iconDescending='keyboard_arrow_down'
+    iconComponent='materialize-icon'
+    fixed=true
+  }}

You can steal some ideas from
https://github.com/cibernox/ember-power-select/blob/master/tests/integration/components/power-select/customization-with-components-test.js#L257..L281

[alexander-alvarez]

I would change the order

Custom sorting component name to use instead of the default `<i class="lt-sort-icon"></i>` template. 
See `iconSortable`, `iconAsending`, or `iconDescending` for more info.

Uses the same properties.

It's unclear what you mean by this sure what you mean by this

[alexander-alvarez]

assert.expect(6)
otherwise the test will pass if the component doesn't get rendered

[RedTn]

@alexander-alvarez Will add this soon, thanks alexander I'm learning quite a bit from this PR

[buschtoens]

Minor formatting error with the backticks here.

See `iconSortable`, `iconAsending`, or `iconDescending`.

[buschtoens]

Can't remember, if we talked about that. but this way the iconComponent would only get rendered when there is a sortIconProperty, i.e. when either of sortable or sorted is true.

I don't have strong feelings either way, since I can't come up with a scenario where you would want to render an iconComponent when you don't have any icons to display. Just wanted to have mentioned it. 😄

[RedTn]

I remember I ran into this issue in the demo where the avatar column was displaying the sort component when sortable: 'false'.
Because the iconComponent is being specified in the hbs file on the table, all the columns will utilize the iconComponent, so we need a check if the user doesn't want a column to be sortable.

[buschtoens]

Yup, but some users might argue that they'd want their iconComponent to display a "not sortable" icon and that it's up to the user to handle the "not sortable" state instead of ELT doing that for the user.

For instance:

{{#if sortIconProperty}}
  <i class="lt-sort-icon material-icons" style="height:0px;">{{get sortIcons sortIconProperty}}</i>
{{else}}
  <i class="lt-sort-icon material-icons" style="height:0px; color: red;">not_sortable</i>
{{/if}}

[RedTn]

Understood, I see the use case now. Because you have no strong feelings I guess I'll leave the base.hbs as is for now but feel free to let me know otherwise.

[buschtoens]

Thanks so much @RedTn ❤️