<div class="ons-timeline">
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">September to October 2020</h2>
    <ul class="ons-list ons-list--bare">
      <li class="ons-list__item">
        Meet your Community Engagement Manager and set up regular catch up meetings
      </li>
      <li class="ons-list__item">
        Local Authority Toolkit available online
      </li>
    </ul>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">September 2020</h2>
    <p>ONS to provide Councillor Handbook for distribution</p>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">November 2020</h2>
    <p>ONS to provide you with content for magazines and publications</p>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">January to March 2021</h2>
    <p>ONS to provide a range of press releases for external use</p>
  </div>
  <div class="ons-timeline__item">
    <h2 class="ons-timeline__heading">February to April 2021</h2>
    <p>Promote your local Census Support Centres</p>
  </div>
</div>

{% from "components/timeline/_macro.njk" import onsTimeline %}

{{
    onsTimeline({
    "items": [
            {
                "heading": 'September to October 2020',
                "itemsList": [
                    {
                        "text": "Meet your Community Engagement Manager and set up regular catch up meetings"
                    },
                    {
                        "text": "Local Authority Toolkit available online"
                    }
                ]
            },
            {
                "heading": 'September 2020',
                "content": '<p>ONS to provide Councillor Handbook for distribution</p>'
            },
            {
                "heading": 'November 2020',
                "content": '<p>ONS to provide you with content for magazines and publications</p>'
            },
            {
                "heading": 'January to March 2021',
                "content": '<p>ONS to provide a range of press releases for external use</p>'
            },
            {
                "heading": 'February to April 2021',
                "content": '<p>Promote your local Census Support Centres</p>'
            }
        ]
    })
}}

{% macro onsTimeline(params) %}

    {% from "components/lists/_macro.njk" import onsList %}

    <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">

        {% for item in params.items %}
        <div class="ons-timeline__item">
            
            <h2 class="ons-timeline__heading">{{ item.heading }}</h2>
            
            {% if item.itemsList is defined and item.itemsList %}
            
                {{
                    onsList({
                        "variants": 'bare',
                        "itemsList": item.itemsList
                    })
                }}

            {% else %}

                {{ item.content | safe }}

            {% endif %}

        </div>
        {% endfor %}

    </div>

{% endmacro %}

.ons-timeline {
  padding-left: 1.5rem;
  position: relative;

  &::before {
    border-left: 4px solid $color-black;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 10px;
  }
}

.ons-timeline__item {
  margin-bottom: 1.5rem;
  position: relative;

  &::before {
    background-color: $color-black;
    content: '';
    height: 4px;
    left: -1.5rem;
    position: absolute;
    top: 10px;
    width: 12px;
  }

  :last-child {
    margin-bottom: 0;
  }
}

.ons-timeline__heading {
  font-size: 1rem !important;
  margin-bottom: 0.5rem;
}