Skip to content

Latest commit

 

History

History
222 lines (166 loc) · 4.5 KB

TIMELINE.md

File metadata and controls

222 lines (166 loc) · 4.5 KB
Raw

The Timeline

./src/js/components/timeline/

Purpose

The set of components that work together to display a timeline structure.

Important Items

  • timeline.jsx
  • timeline-label.jsx
  • /timeline-item/timeline-item.jsx

Timeline - timeline.jsx

Purpose

The father component that holds the rest of them via children or a timelineInfo prop

Props

timelineInfo

  • Required - false

  • Data Type - ARRAY

  • Functionality - An array of a lot of data for the timeline component to render out inside of it.

  • Expected Data -

      const timelineData = [
    {
      startDate: '1 January 2017',
      endDate: '9 January 2017',
      items: [
        {
          icon: 'fa fa-coment',
          iconTheme: 'bg-blue',
          time: '14:20',
          header: {
            url: '#',
            onClick: () => { /* Alternative for clicking the url link */ },
            title: 'Jennifer',
            content: 'commented your post.'
          },
          body: {
            content: 'This is some comment text, yo...',
          },
          footer: {
            content: '',
            markup: <a className="btn btn-warning btn-flat btn-xs">View comment</a>
          }
        }
      ]
    }
  ];

  • Default - []

Takes Children

  • Expected Type - TimelineItem and TimelineLabel components,
  • Displays Inside - 'ul.timeline'

Example

import Timeline from './src/js/components/timeline/timeline.jsx';

<Timeline timelineInfo={timelineData}/>

TimelineLabel - timeline-label.jsx

Purpose

Displays a timestamp for the start or end of a timeline section.

Props

theme

  • Required - false
  • Data Type - STRING
  • Functionality - The label's color theme
  • Default - 'bg-yellow'

content

  • Required - false
  • Data Type - STRING
  • Functionality - Displays text content you'd like to show, and in this case, times.
  • Default - 'Default content'

TimelineItem - /timeline-item/timeline-item.jsx

Purpose

Contains the meat of the timeline content. It takes the liberty of generating the header, body, and footer from organized data objects.

Props

icon

  • Required - false
  • Data Type - STRING
  • Functionality - A FontAwesome icon class.
  • Default - 'fa fa-coffee'

iconTheme

  • Required - false
  • Data Type - STRING
  • Functionality - A bg color class
  • Default - 'bg-blue

time

  • Required - false
  • Data Type - STRING
  • Functionality - A written out string to display a time of item.
  • Default - ''

header

  • Required - false

  • Data Type - OBJECT

  • Functionality - Content for the timeline body's header.

  • Expected Data -

      {
    url: '#',
    onClick: () => { /* Alternative for clicking the url link */ },
    title: 'Title of timeline item',
    content: "Text content",
    markup: <p>If there is any.</p>
  }

body

  • Required - false

  • Data Type - OBJECT

  • Functionality - Content for the timeline item's body

  • Expected Data -

      {
    content: "Text body content",
    markup: <p>If there is any.</p>
  }

footer

  • Required - false

  • Data Type - OBJECT

  • Functionality - Content for the timeline body's footer

  • Expected Data -

      {
    content: "Text content for footer",
    markup: <p>If there is any.</p>
  }

Example

import Timeline from './src/js/components/timeline/timeline.jsx';
import TimelineLabel from './src/js/components/timeline/timeline-label.jsx';
import TimelineItem from './src/js/components/timeline/timeline-item.jsx';

<Timeline>
  <TimelineLabel
    theme="bg-red"
    content="9 January 2017"
  />
  <TimelineItem
    icon="fa fa-comment"
    iconTheme="bg-red"
    time="14:41"
    header={{
      url: '#',
      title: 'Post 001',
      markup: <p>Look! Markup!</p>
    }}
    body={{
      content: "Text body content 001",
    }}
    footer={{
      markup: <p className="text-right">Righty</p>
    }}
  />
  <TimelineItem
    icon="fa fa-email"
    iconTheme="bg-blue"
    time="04:20"
    header={{
      url: '#',
      title: 'Post 002',
      content: "Text in the header? Preposterous!!",
    }}
    body={{
      content: "Text body content 002",
    }}
    footer={
      markup: <p className="text-center">Centered</p>}
  />
  <TimelineLabel
    theme="bg-blue"
    content="1 January 2017"
  />
<Timeline>