ActivityCalendar

{#-
 # Activity over time: a cell per day, seven rows, as many columns as there are weeks. Each day is read through its
 # label, the colour never standing alone; the calendar scrolls by itself and takes the focus to do so.
 #}
{%- props
    ## array The days in order, each a map of `level`, from 0 to 4, and `label`.
    days,
    ## string What screen readers call the calendar.
    label,
    ## int The empty cells before the first day, from 0 to 6, so that it sits on its weekday.
    offset = 0,
    ## string|null The word at the low end of the legend, which needs both ends.
    lessLabel = null,
    ## string|null The word at the high end of the legend, which needs both ends.
    moreLabel = null
-%}
<div{{ attributes.defaults({class: 'hasActivityCalendar'}) }}>
    <ol class="isActivityCalendar" aria-label="{{ label }}" tabindex="0">
        {%- if offset > 0 -%}{%- for blank in 1..min(offset, 6) -%}<li class="isActivityCalendarBlank" aria-hidden="true"></li>{%- endfor -%}{%- endif -%}
        {%- for day in days -%}<li class="isActivityCalendarDay" data-level="{{ max(0, min(4, day.level)) }}" title="{{ day.label }}"><span class="isVisuallyHidden">{{ day.label }}</span></li>{%- endfor -%}
    </ol>
    {%- if lessLabel is not null and moreLabel is not null -%}
        <p class="isActivityLegend"><span>{{ lessLabel }}</span>{%- for level in 0..4 -%}<span class="isActivityCalendarDay" data-level="{{ level }}" aria-hidden="true"></span>{%- endfor -%}<span>{{ moreLabel }}</span></p>
    {%- endif -%}
</div>