1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. References

Team Name: CodeX

Developer Name: Ivan Zhostov

Designer Name

• Peer Developer Name | Date:
• Design Manager Name | Date:

• Radoslav Mirchev | Date:
• Damyan Petev | Date:

The <igc-list> should represent vertical container for contextual similar items. List is a building block of any complex UI used in almost every mobile application.

<igc-list>
    <igc-list-header>Header</igc-list-header>
    <igc-list-item>
       <igc-icon slot="start" name="face"></igc-icon>
       <span slot="title">Title</span>
       <span slot="subtitle">Sub title</span>
       <igc-icon slot="end" name="more_horiz"></igc-icon>
    </igc-list-item>
    <igc-list-item>
       <igc-icon slot="start" name="face"></igc-icon>
       <span slot="title">Title</span>
       <span slot="subtitle">Sub title</span>
       <igc-icon slot="end" name="more_horiz"></igc-icon>
    </igc-list-item>
</igc-list>

Provides means for the developers to implement a simple common case, yet customizable list with minimal efforts. The list item component should be a container for text or some HTML content. A group of items into the list can be separated and labeled by header.

1. The developer can add a list component to the application.
2. The developer can define list items as headers, so they label other items below them.
3. The end-users can view a list.
4. The end-users can vertically scroll the list items.

Developer stories:

• Story 1: As a developer, I want to add a list, so that I can create rows of similar list-items.
• Story 2: As a developer, I want to have a vertically scrollable list, so that I can add as many list-items as I need.
• Story 3: As a developer, I want to be able provide data items to the list.

<igc-list>
    ${users.map((user) => {
          return html`
               <igc-list-item>
                    <h2 slot="title">${user.name}</h2>
                    <span slot="subtitle">${user.position}</span>
               </igc-list-item>
          `;
     })}
</igc-list>

• Story 4: As a developer, I want to be able display group headers by adding a special header item into the list.

<igc-list>
    <igc-list-header>
        <h1>Mildly Sweet</h1>
    </igc-list-header>
    <igc-list-item>
        <h3 slot="title">Red Delicious</h3>
     </igc-list-item>
     <igc-list-item>
        <h3 slot="title">Ambrosia</h3>
     </igc-list-item>

     <igc-list-header>
        <h1>Sweet</h1>
     </igc-list-header>
     <igc-list-item>
        <h3 slot="title">Golden Delicious</h3>
     </igc-list-item>
     <igc-list-item>
        <h3 slot="title">Cosmic Crisp</h3>
     </igc-list-item>
</igc-list>

• Story 5: As a developer, I want to be able to provide a custom template when the list is empty.

<igc-list>
   <p>My custom empty list template</p>
</igc-list>

• Story 6: As a developer, I want to be able to implement custom logic and behavior to be executed when clicking a list item.
• Story 7: As a developer, I want to be able to set an active item..
• Story 8: As a developer, I want to be able to focus list items.
• Story 9: As a developer, I want to be able to specify a display density for the layout of the list and its items.

A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for list-items.

3.1. API

Automation

• Test defining a list:
  • with content items only;
  • with items and header;
  • with multiple headers.
• Verify list item slots are rendered successfully.
• Verify the elements defined in the slots are displayed.
• Verify custom empty template would be shown.
• Verify items' roles are properly set.

ARIA Support

• Roles:
  • List will need list role
  • List item will need separator role when it is a header and listitem role when it is not.

• https://material.io/components/lists
• https://www.infragistics.com/products/ignite-ui-angular/angular/components/list