Content presentation - Timeline

Use the timeline component to show an ordered record of what has happened.

Installation

You will need to install the following code server side to intialise the date filter used in the timeline component.

// Add filters from HS2 Frontend
let mojFilters = require('./node_modules/@ministryofjustice/frontend/filters/all')();
mojFilters = Object.assign(mojFilters);
Object.keys(mojFilters).forEach(function (filterName) {
nunjucksAppEnv.addFilter(filterName, mojFilters[filterName])
});
Open this default timeline example in new window
Copy default timeline code 
<div class="hs2-timeline">
  <div class="hs2-timeline__item">

    <div class="hs2-timeline__header">
      <h2 class="hs2-timeline__title">Application requires confirmation</h2>

      <p class="hs2-timeline__byline">by Joe Bloggs</p>

    </div>

    <p class="hs2-timeline__date">
      <time datetime="2019-06-14T14:01:00.000Z">14 June 2019 at 2:01pm</time>
    </p>

    <div class="hs2-timeline__description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis risus. Curabitur nec ante vitae felis ullamcorper tincidunt.</p>
      <a class="hs2-button" href="#">Continue</a>
    </div>

  </div>

  <div class="hs2-timeline__item">

    <div class="hs2-timeline__header">
      <h2 class="hs2-timeline__title">Application review in progress</h2>

      <p class="hs2-timeline__byline">by Caseworker 1</p>

    </div>

    <p class="hs2-timeline__date">
      <time datetime="2019-06-07T12:32:00.000Z">7 June 2019 at 12:32pm</time>
    </p>

    <div class="hs2-timeline__description">Your application is being reviewed by one of our case workers.</div>

  </div>

  <div class="hs2-timeline__item">

    <div class="hs2-timeline__header">
      <h2 class="hs2-timeline__title">Application received</h2>

      <p class="hs2-timeline__byline">by Caseworker 1</p>

    </div>

    <p class="hs2-timeline__date">
      <time datetime="2019-06-06T09:12:00.000Z">6 June 2019 at 9:12am</time>
    </p>

    <div class="hs2-timeline__description">Your application has been received – reference MOJ-1234-5678</div>

  </div>

  <div class="hs2-timeline__item">

    <div class="hs2-timeline__header">
      <h2 class="hs2-timeline__title">Application submitted</h2>

      <p class="hs2-timeline__byline">by Joe Bloggs</p>

    </div>

    <p class="hs2-timeline__date">
      <time datetime="2019-05-28T10:45:00.000Z">28 May 2019 at 10:45am</time>
    </p>

    <div class="hs2-timeline__description">
      <details class="govuk-details govuk-!-margin-bottom-0">
        <summary class="hs2-details__summary">
          <span class="hs2-details__summary-text">
            Application details
          </span>
        </summary>
        <div class="hs2-details__text">
          Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. <a href="#">Etiam nec interdum velit.</a> Suspendisse molestie lectus in eros ornare
        </div>
      </details>
    </div>

  </div>

  <div class="hs2-timeline__item">

    <div class="hs2-timeline__header">
      <h2 class="hs2-timeline__title">Documents uploaded</h2>

      <p class="hs2-timeline__byline">by Joe Bloggs</p>

    </div>

    <p class="hs2-timeline__date">
      <time datetime="2019-05-28T10:15:00.000Z">28 May 2019 at 10:15am</time>
    </p>

    <div class="hs2-timeline__description">
      <ul class="hs2-list">
        <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
            <path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z" />
          </svg>
          <a href="#">
            Document 1
          </a>
        </li>
        <li class="moj-timeline__document-item">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
            <path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z" />
          </svg>
          <a href="#">
            Document 2
          </a>
        </li>
      </ul>
    </div>

  </div>

  <div class="hs2-timeline__item">

    <div class="hs2-timeline__header">
      <h2 class="hs2-timeline__title">Application started</h2>

      <p class="hs2-timeline__byline">by Joe Bloggs</p>

    </div>

    <p class="hs2-timeline__date">
      <time datetime="2019-05-21T13:15:00.000Z">21 May 2019 at 1:15pm</time>
    </p>

    <div class="hs2-timeline__description">
      <ul class="hs2-list--bullet">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </div>

  </div>
</div>
Close default timeline code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default timeline
Name Type Required Description
Name classes Type string Required false Description Classes to add to the timeline's container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the timeline's container.
Name items Type array Required true Description
Name items[].label Type object Required true Description
Name label{}.text Type string Required true Description If html is set, this is not required. Text to use within the item label. If html is provided, the text argument will be ignored.
Name label{}.html Type string Required true Description If text is set, this is not required. HTML to use within the item label. If html is provided, the text argument will be ignored.
Name items[].datetime Type object Required false Description
Name datetime{}.timestamp Type string Required true Description A valid datetime string to be formatted. For example: 1970-01-01T11:59:59.000Z
Name datetime{}.type Type string Required true Description If format is set, this is not required. The standard date format to use within the item. If type is provided, the format argument will be ignored. Values include: datetime, shortdatetime, date, shortdate and time
Name datetime{}.format Type string Required true Description If type is set, this is not required. The user-defined date format to use within the item. If type is provided, the format argument will be ignored. See the Moment.js document on display formats.
Name items[].byline Type object Required false Description
Name byline{}.text Type string Required true Description If html is set, this is not required. Text to use within the item byline. If html is provided, the text argument will be ignored.
Name byline{}.html Type string Required true Description If text is set, this is not required. HTML to use within the item byline. If html is provided, the text argument will be ignored.
Copy default timeline code 
{% from 'timeline/macro.njk' import timeline %}

{%- set confirmationHtml %}
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis risus. Curabitur nec ante vitae felis ullamcorper tincidunt.</p>
  <a class="hs2-button" href="#">Continue</a>
{% endset -%}

{%- set detailsHtml %}
<details class="govuk-details govuk-!-margin-bottom-0">
  <summary class="hs2-details__summary">
    <span class="hs2-details__summary-text">
      Application details
    </span>
  </summary>
  <div class="hs2-details__text">
    Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. <a href="#">Etiam nec interdum velit.</a> Suspendisse molestie lectus in eros ornare
  </div>
</details>
{% endset -%}

{%- set listHtml %}
  <ul class="hs2-list--bullet">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
{% endset -%}

{%- set documentsHtml %}
  <ul class="hs2-list">
    <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
          <path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z" />
        </svg>
      <a href="#">
       Document 1
      </a>
    </li>
    <li class="moj-timeline__document-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
          <path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/>
        </svg>
        <a href="#">
      Document 2
      </a>
    </li>
  </ul>
{% endset -%}

{{ timeline({
  "items": [
    {
      "label": {
        "text": "Application requires confirmation"
      },
      "html": confirmationHtml,
      "datetime": {
        "timestamp": "2019-06-14T14:01:00.000Z",
        "type": "datetime"
      },
      "byline": {
        "text": "Joe Bloggs"
      }
    },
    {
      "label": {
        "text":  "Application review in progress"
      },
      "text": "Your application is being reviewed by one of our case workers.",
      "datetime": {
        "timestamp": "2019-06-07T12:32:00.000Z",
        "type": "datetime"
      },
      "byline": {
        "text": "Caseworker 1"
      }
    },
    {
      "label": {
        "text":  "Application received"
      },
      "text": "Your application has been received – reference MOJ-1234-5678",
      "datetime": {
        "timestamp": "2019-06-06T09:12:00.000Z",
        "type": "datetime"
      },
      "byline": {
        "text": "Caseworker 1"
      }
    },
    {
      "label": {
        "text":  "Application submitted"
      },
      "html": detailsHtml,
      "datetime": {
        "timestamp": "2019-05-28T10:45:00.000Z",
        "type": "datetime"
      },
      "byline": {
        "text": "Joe Bloggs"
      }
    },
    {
      "label": {
        "text":  "Documents uploaded"
      },
      "html": documentsHtml,
      "datetime": {
        "timestamp": "2019-05-28T10:15:00.000Z",
        "type": "datetime"
      },
      "byline": {
        "text": "Joe Bloggs"
      }
    },
    {
      "label": {
        "text":  "Application started"
      },
      "html": listHtml,
      "datetime": {
        "timestamp": "2019-05-21T13:15:00.000Z",
        "type": "datetime"
      },
      "byline": {
        "text": "Joe Bloggs"
      }
    }
  ]
}) }}
Close default timeline code

When to use

Use the timeline component to show a linear record of what's happened.