List component issues

[blackmonday]

IdAM are currently building pages that use the list component and a few issues have been found. However, this component has been removed from the PDK making it difficult to feedback on. The design pattern for the list component can be found in the CJS CPP Design Patterns Sketch file:

https://triadmoj.atlassian.net/wiki/display/CUE/CJS+CPP+content+and+design+patterns

This list component was visually correct prior to IdAM migrating to the PDK, however, there are some subtle differences that need to be address:

• The horizontal rules the separate the line items should be #BFC1C3 / $border-colour
• This component needs the ability to remove the underline from linking text
• Column sorting headers should be blue and underlined (This is functionality that has been created by IdAM dev and need to be integrated into the component)

[scoch]

We have implemented functionality around sorting so far and will be doing some around filtering shortly too, but these may want to be common components of the search directive/widget as they come hand in hand with search results.

some code snippets: glyphicon changing and column title clicking for changing order

                    <th scope="col">
                        <a id="name-link" class="pointer" data-ng-click="searchUserVm.sortBy()">
                            Name
                            <i class="fa" aria-hidden="true"
                               data-ng-class="{'fa-sort-asc': !searchUserVm.reverse,
                                               'fa-sort-desc': searchUserVm.reverse}"></i>
                        </a>
                    </th>

coupled with controller logic:

        searchUserVm.sortBy = function () {
            searchUserVm.reverse = !searchUserVm.reverse;
        };

[K-T-O]

<i class="fa" aria-hidden="true" data-ng-class="{'fa-sort-asc': !searchUserVm.reverse, 'fa-sort-desc': searchUserVm.reverse}"></i> That should probably be span instead of "i" as "i" definition is:

Definition and Usage. The tag defines a part of text in an alternate voice or mood. The content of the tag is usually displayed in italic. The tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.