“Lists” Component

Design: zeplin.

Lists are used in IxDF UI Kit to group related content. Items in a list usually link to a page. Lists are stacked vertically to make scanning them easy.

There 6 categories of lists that we use

• Accordion List
• Conversation List
• Event List
• Generic List
• Ranked List
• To-do List

Accordion List

The accordion list contains a title and a chevron icon. The chevron-down icon is used when the accordion item is closed, and it turns into the chevron-up icon when opened. The accordion item’s content supports rich text and can contain headers, images, buttons, etc. More than one accordion item may be open at the same time. Text on an accordion list item has the regular weight by default—this is because we often bold key words in the list text to facilitate scanning.

Usage

@component('components.lists.accordion')
    @component('components.lists.__accordionItem', ['title' => 'Do I have to be online at an exact time to study?'])
        <p>
        Yes, you can take all the courses you would like. For example, if there are 30 active courses,
        you can enroll in all 30 courses at the same time and move from one to the other as you please.
        </p>
        <button class="button button--primary">Start Learning</button>
    @endcomponent
    @component('components.lists.__accordionItem', ['title' => 'Will I receive a Course Certificate?'])
        <p>Yes, you can take all the courses you would like. For example, if there are 30 active courses</p>
        <button class="button button--primary">Start Learning</button>
    @endcomponent
@endcomponent

Props

• title (required)
  string

  Title of individual accordion item.

Conversation List

A conversation list item contains the following elements:

• Profile photo of the thread creator.
• Conversation title.
• A line of subtitle, containing: the timestamp of either the most recent comment or the date of creation, whichever is more recent; the first name of the thread creator; the conversation category; the number of comments (only shown if there is at least 1 comment in the thread excluding the first post).

<ul class="linkStrip js-linkStrip">
    <li class="linkStrip__item discussion-list__item">
        @include('pages.discussions.__discussionList__item', ['discussion' => $discussion, 'category' => $category])
    </li>
</ul>

Props

• discussion (required)
  App\Modules\Discussion\Models\Discussion

  Discussion model passed as input.

• category
  App\Modules\Discussion\Models\DiscussionCategory

  Discussion category passed as input.

Generic List

@component('components.lists.list')
    @include('components.lists.__genericItem', [
        'title' => 'list item',
        'link' => 'https://google.com',
    ])
    @include('components.lists.__genericItem', [
        'title' => 'Second list item',
    ])
@endcomponent

Props

• title (required)
  string

  Title of individual accordion item.

• link
  string

  Link for list item, if this is passed then the list item is wrapped in link tag and becomes clickable.

Ranked List

List for ranking item including people (with profile pictures), cities.

Simple Ranked List

Ranked List with subtitles

Large Ranked List

@component('components.lists.list')
    @foreach($rankedListSubtitle as $item)
        @include('components.lists.__rankedItem', [
            'title' => $item['title'],
            'rank' => $loop->index + 1,
            'subtitle' => $item['subtitle'],
            'link' => 'https://google.com',
            'img' => 'https://source.unsplash.com/300x300/?girl',
            'hasNoBorder' => $loop->index === 2,
            'numberOfItems' => 200,
        ])
    @endforeach

@include('components.lists.__rankedItemBreak')

@foreach($rankedListSubtitle as $item)
    @include('components.lists.__rankedItem', [
        'title' => $item['title'],
        'rank' => $loop->index + 111,
        'subtitle' => $item['subtitle'],
        'link' => 'https://google.com',
        'img' => 'https://source.unsplash.com/300x300/?girl',
        'numberOfItems' => 200,
    ])
    @endforeach
@endcomponent

Props

• title (required)
  string

  Title of ranked item.

• rank (required)
  int

  Rank for item.

• subtitle
  string

  Subtitle typically for points.

• link
  string

  The actual link for list item, wraps list item in a link tag.

• numberOfItems
  int

  The total number of items used for aligning all list items correctly.

• hasNoBorder
  bool

  Removes the bottom border of list item when true.

TO-DO List

It’s a numbered list where list items can be marked as “done” when conditions are fulfilled. List items that are done are re-ordered to the bottom of the to-do list, and the remaining list items are re-numbered according to their new positions. A to-do list item contains the following elements:

• List item number.
• Title of the list item.
• Additional details in a subtitle.

Usage

@component('components.lists.todo')
    @component('components.lists.__todoItem', [
        'title' => 'Write an engaging description for IxDF Singapore',
        'done' => false,
        'subtitle' => '<a>More Details</a>',
    ])@endcomponent
        @component('components.lists.__todoItem', [
        'title' => 'Write an engaging description for IxDF Singapore.',
        'subtitle' => 'It will help gather clients',
        'done' => false,
    ])@endcomponent
        @component('components.lists.__todoItem', [
        'title' => 'Set up a Facebook group and add it to the group’s information.',
        'done' => true,
    ])@endcomponent
        @component('components.lists.__todoItem', [
        'title' => 'Invite new IxDF Members near Singapore to join IxDF Singapore.',
        'done' => false,
    ])@endcomponent
@endcomponent

Props

• title (required)
  string

  Title of list item.

• title
  string

  Subtitle shown below title, can be passed HTML as string as well.

• done
  bool

  Marks item as done, this will move item to next to the last not-done item and changes subtitle to done.