Promote Instructor Center "List"

trevordmiller commented 7 years ago

The List component is currently implemented in the Instructor Center: https://github.com/eggheadio/egghead-instructor-center/blob/master/src/components/List/index.js

All it does is accept a list of items, and renders them stacked vertically with A) a light border on the bottom of every item but the last and 2) equal padding around each item. It is often used inside of a Card component directly.

egghead-rails is now using List: https://github.com/eggheadio/egghead-rails/pull/1211/files so it would be good to promote and consumed it in both projects from egghead-ui.

Examples from mocks

List was first designed in the Instructor Center mocks from @vojtaholik:

Examples currently in Instructor Center

Example composition

In the instructor center, the Card component owns the border radius and drop shadow styling, list has none of that itself. So a List is often put inside a Card. You'll notice this List component is very simple. I much prefer these types of simple components that do just one thing, rather than have a bunch of config and formatting options. That way they can be composed together using children. Here is an example of how the egghead-rails LessonList could be created with composition of components like List:

Card would need to be promoted to egghead-ui as well; it only concerns itself with the rounded corners and drop shadow).
List - from this PR would be promoted to egghead-ui; it only concerns itself with borders and padding of items.
LessonList only exists in egghead-rails and composes together Card and List with egghead-rails specific sub-components and logic like this:

import React from 'react'
import {map} from 'lodash'
import {Card, List} from 'egghead-ui'
import PlayCourse from './components/PlayCourse'
import LessonListItem from './components/LessonListItem'

const LessonList = ({lessons, course}) => (
  <Card>
    {course
      ? <PlayCourse />
      : null
    }
    <List items={map(lessons, lesson => (
      <LessonListItem lesson={lesson} />
    ))} />
  </Card>
)

export default LessonList

lesson-list-composition-example

In summary: promote generic, single responsibility components in egghead-ui; then compose these things together with project specific logic and sub-components to create screens.

Here are a couple examples of this in the Instructor Center of how this type of minimal children composition works:

Would be good to update the project README with a link to this PR as a complete example.

vojtaholik commented 7 years ago

Example of List breakdown: https://zpl.io/ZddDih

this is a latest up-to-date design for lists, it has new colors, shadow definitions, comments regarding interactions and such.

Feel free to use it as example, I think it can easily carry a variety of different data.

There's a bridge between this list and list of lessons in IC -> in IC, there's a "responsive" / less wide version present, but overally it should be the same. I'm really just copying those lists in sketch and making them different width etc. If shaka team handles the responsivity right, it should be enough to re-use this component anywhere. ;)

Variations

list of lessons, courses, playlists (egghead.io), can be enhanced with search and sorting/filtering functionality
list of lessons, courses, playlist with actions (IC)
list of tasks (To Do in IC)
Guide in IC
Propose a Topic list in IC

I think that basic structure is the same for all of them, the rows differ though, I propose to use classes like this:

<list><task>
<list><task><actions>
<list><text><button>

but this is obviously your cup of tea. :)

edit: You could also say that list can be part of other card, like this: list

joelhooks commented 7 years ago

This looks ready to go to me.

trevordmiller commented 7 years ago

Sounds great. I'm moving this to the "Ready to implement" column. @tayiorbeii, would mind taking on this story? To be clear, it is just the promotion of the Instructor Center List component to egghead-ui. The examples Vojta posted are ways it will be composed in other components like LessonList in egghead-rails and are not included in this story.

trevordmiller commented 7 years ago

I'm grabbing this since Taylor is busy with the tachyons-egghead simplifying forks.

eggheadio / egghead-ui