FAA Pattern Library - Department of Urban and Regional Planning

Recurring Event List: On Dark 

<div class="recurring-event-list recurring-event-list--durp">
    <div class="recurring-event-list__label">
        <span class="recurring-event-list__label-icon"><svg class="recurring-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
    <path class="recurring-icon__shape" fill-rule="evenodd" clip-rule="evenodd" d="M2 3.9994V0H0V8L7 8V6L3.06996 6C4.45368 3.60799 7.03998 2 10 2C14.4183 2 18 5.58172 18 10H20C20 4.47715 15.5228 0 10 0C6.72775 0 3.82396 1.57138 2 3.9994ZM2 10C2 14.4183 5.58172 18 10 18C12.96 18 15.5463 16.392 16.93 14H13V12H20V20H18V16.0006C16.176 18.4286 13.2723 20 10 20C4.47715 20 0 15.5228 0 10H2Z" fill="#FF552E"/>
</svg>
</span>
        <span class="recurring-event-list__label-text">Recurring event</span>
    </div>
    <div class="recurring-event-list__date-options">
        <div class="recurring-event-list__sub-label">DATES AND TIMES</div>
        <fieldset>
            <legend class="recurring-event-list__legend">View recurring events</legend>
            <input class="recurring-event-list__toggle-option" data-toggle-upcoming role="radio" type="radio" aria-labelledby="upcoming_events" value="upcoming" name="recurring_events" id="upcoming-toggle" checked>
            <label for="upcoming-toggle" class="recurring-event-list__toggle-label" id="upcoming_events">Upcoming</label>
            <input class="recurring-event-list__toggle-option" data-toggle-past role="radio" type="radio" aria-labelledby="past_events" value="past" name="recurring_events" id="past-toggle">
            <label for="past-toggle" class="recurring-event-list__toggle-label" id="past_events">Past</label>
        </fieldset>
    </div>
    <div class="recurring-event-list__events">
        <ul class="recurring-event-list__event-list">

            <li class="recurring-event-list__event" data-upcoming-event>

            </li>
            <li class="recurring-event-list__event" data-upcoming-event>

            </li>
            <li class="recurring-event-list__event recurring-event-list__event--hidden" data-past-event>

            </li>
        </ul>
        <button class="recurring-event-list__show-button" data-expanded="false" data-show-button-toggle>
            <span class="recurring-event-list__show-button-text" data-show-button-text>Show all</span>
            <span class="recurring-event-list__show-button-icon">
                    <svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
    <path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
                </span>
        </button>
    </div>
</div>
 
{% if is_wordpress %}
    {{ enqueue_script('recurring-events-toggle') }}
{%  endif  %}

<div class="recurring-event-list recurring-event-list--{{ siteUnit }}">
    <div class="recurring-event-list__label">
        <span class="recurring-event-list__label-icon">{% include 'bits/icons/recurring.twig' %}</span>
        <span class="recurring-event-list__label-text">Recurring event</span>
    </div>
    <div class="recurring-event-list__date-options">
        <div class="recurring-event-list__sub-label">{{ 'Dates and times' | upper }}</div>
        <fieldset>
            <legend class="recurring-event-list__legend">View recurring events</legend>
                <input class="recurring-event-list__toggle-option" data-toggle-upcoming
                       role="radio" type="radio" aria-labelledby="upcoming_events" value="upcoming"
                       name="recurring_events" id="upcoming-toggle" checked>
                <label for="upcoming-toggle" class="recurring-event-list__toggle-label" id="upcoming_events">Upcoming</label>
                <input class="recurring-event-list__toggle-option" data-toggle-past
                       role="radio" type="radio" aria-labelledby="past_events" value="past"
                       name="recurring_events" id="past-toggle">
                <label for="past-toggle" class="recurring-event-list__toggle-label" id="past_events">Past</label>
        </fieldset>
    </div>
    <div class="recurring-event-list__events">
        <ul class="recurring-event-list__event-list">

            {% if event.upcomingRecurringEvents | default %}
                {% for item in event.upcomingRecurringEvents %}
                    <li class="recurring-event-list__event"
                       data-upcoming-event>
                        {{ item.detailDate }}
                    </li>
                {% endfor %}
            {% endif %}
            {% if event.pastRecurringEvents | default %}
                {% for item in event.pastRecurringEvents %}
                    <li class="recurring-event-list__event recurring-event-list__event--hidden"
                        data-past-event>
                        {{ item.detailDate }}
                    </li>
                {% endfor %}
            {% endif %}
        </ul>
        <button class="recurring-event-list__show-button" data-expanded="false" data-show-button-toggle>
            <span class="recurring-event-list__show-button-text" data-show-button-text>Show all</span>
            <span class="recurring-event-list__show-button-icon">
                    {% include 'bits/icons/down-toggle.twig' %}
                </span>
        </button>
    </div>
</div>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "event": {
    "title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
    "permalink": "http://localhost:3000/components/detail/event",
    "fullDate": "February 7, 2020",
    "startTime": "12:30 PM",
    "shortStartMonth": "Feb",
    "startDay": "7",
    "locations": [
      {
        "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
        "buildingNumber": "Room M230 Temple Buell Hall",
        "virtualLocation": "https://zoom.com"
      },
      {
        "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
        "buildingNumber": "225 Temple Buell Hall"
      }
    ],
    "addImage": true,
    "featuredImage": {
      "src": "https://picsum.photos/800/600?random=1",
      "altText": "friendly kitten"
    },
    "recurringEvents": [
      {
        "startDate": "2021-09-16 00:00:00.0",
        "startTime": "1:30 PM",
        "shortStartDayOfWeek": "Wed",
        "fullDate": "September 16, 2021",
        "isMultiDay": false,
        "isAllDay": 0,
        "stringDate": "Wed, September 16, 2021"
      },
      {
        "startDate": "2021-09-25 00:00:00.0",
        "startTime": "9:00 AM",
        "shortStartDayOfWeek": "Fri",
        "fullDate": "September 25, 2021",
        "isMultiDay": false,
        "isAllDay": 0,
        "stringDate": "Fri, September 25, 2021"
      },
      {
        "startDate": "2021-09-01 00:00:00.0",
        "startTime": "10:00 AM",
        "shortStartDayOfWeek": "Tue",
        "fullDate": "September 1, 2020",
        "isMultiDay": false,
        "isAllDay": 0,
        "stringDate": "Tue, September 1, 2020"
      }
    ],
    "upcomingRecurringEvents": [
      {
        "startDate": "2021-09-16 00:00:00.0",
        "startTime": "1:30 PM",
        "shortStartDayOfWeek": "Wed",
        "fullDate": "September 16, 2021",
        "isMultiDay": false,
        "isAllDay": 0,
        "stringDate": "Wed, September 16, 2021"
      },
      {
        "startDate": "2021-09-25 00:00:00.0",
        "startTime": "9:00 AM",
        "shortStartDayOfWeek": "Fri",
        "fullDate": "September 25, 2021",
        "isMultiDay": false,
        "isAllDay": 0,
        "stringDate": "Fri, September 25, 2021"
      }
    ],
    "pastRecurringEvents": [
      {
        "startDate": "2020-09-01 00:00:00.0",
        "startTime": "10:00 AM",
        "shortStartDayOfWeek": "Tue",
        "fullDate": "September 1, 2020",
        "isMultiDay": false,
        "isAllDay": 0,
        "stringDate": "Tue, September 1, 2020"
      }
    ]
  }
}
  • Content: 
    .recurring-event-list
    --iconFillColor illiniOrange
    --labelColor heritageOrangeDarkest
    --radioItemSelectedColor heritageOrangeDarkest
    --underlineColor heritageOrangeDarkest

    &--arch
        --iconFillColor industrialBlue
        --labelColor industrialBlue
        --radioItemSelectedColor industrialBlue
        --underlineColor industrialBlue

    &--art
        --iconFillColor archesBlue
        --labelColor archesBlueDark
        --radioItemSelectedColor archesBlue
        --underlineColor archesBlue

    &--dance
        --iconFillColor archesBlue
        --labelColor archesBlueDark
        --radioItemSelectedColor archesBlue
        --underlineColor archesBlue

    &--durp
        --iconFillColor illiniOrange
        --labelColor heritageOrangeDarkest
        --radioItemSelectedColor heritageOrangeDarkest
        --underlineColor heritageOrangeDarkest

    &--theatre
        --iconFillColor illiniOrange
        --labelColor heritageOrangeDarkest
        --radioItemSelectedColor heritageOrangeDarkest
        --underlineColor heritageOrangeDarkest

    &--music
        --iconFillColor heritageOrange
        --labelColor heritageOrange
        --radioItemSelectedColor illiniOrange
        --underlineColor heritageOrange

    &__label
        margin-bottom 24px

    &__label-icon
        height 20px
        margin-right 12px
        width 20px

        & svg
            & .recurring-icon__shape
                fill var(--iconFillColor)

    &__label-text
        @extends $headline3
        color var(--labelColor)

    &__legend
        display none

    &__date-options
        align-items flex-start
        border-bottom 1px solid cloudDarker
        display flex
        flex-direction column
        margin-bottom 16px
        padding-bottom 16px

        +above(mediumDeviceBreakpoint)
            align-items center
            border-bottom none
            flex-direction row
            padding-bottom 0

    &__sub-label
        @extends $headline4
        margin-bottom 8px
        margin-right 16px

        +above(mediumDeviceBreakpoint)
            margin-bottom 0

    &__toggle-label
        @extends $tertiaryLink
        border-bottom 2px solid var(--underlineColor)
        margin-left -16px

        &:not(:last-child)
            margin-right 16px

        +above(mediumDeviceBreakpoint)
            margin-left 0

    &__toggle-option
        opacity 0
        pointer-events none

        &:checked
            & + .recurring-event-list__toggle-label
                color var(--labelColor)
                font-weight bold

    &__event
        @extends $detail
        display none

        &--hidden
        &--collapsed
            display none

        &--expanded:not(&--hidden)
            display block

    &__show-button
        @extends $secondaryLink
        margin-top 16px

        &[data-expanded="false"]
            & .recurring-event-list__show-button-icon
                & svg
                    transform rotate(0deg)

        &:focus
            outline none

    &__show-button-text
        margin-right 8px

    &__show-button-icon
        svg
            transform rotate(180deg)
            transition all ease-in-out .3s

            & .down-toggle-icon__shape
                fill var(--iconFillColor)

    &--music &__sub-label
    &--music &__show-button-text
        color white
    &--music &__event
    &--music &__toggle-label
        color rgba(255, 255, 255, 0.75)
  • URL: /components/raw/recurring-event-list/recurring-event-list.styl
  • Filesystem Path: components/partials/recurring-event-list/recurring-event-list.styl
  • Size: 3.5 KB

There are no notes for this item.