<div class="o-filter-bar o-container c-experience-filters">
<h2 class="u-sr-only">Experience Filters</h2>
<form id="js-filter-form" class="o-row o-filter-bar__form js-filter-form" data-baseurl="https://bc-ans.netlify.app/components/detail/events-view.html">
<div class="c-experience-filters__filter c-experience-filters__filter--datepicker o-col o-col-xs-6 o-col-sm-md-2">
<div class="o-datepicker-filter" data-param-name="start">
<button class="o-datepicker-filter__toggle js-mini-cal-toggle" type="button">
<span class="u-sr-only">Select </span>Start Date
<span class="o-datepicker-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</button>
<div id="mini-cal-start-date" class="o-datepicker-filter__mini-cal mini-cal" data-date-name="start" data-label="Start" data-pair-to="mini-cal-end-date"></div>
</div>
</div>
<div class="c-experience-filters__filter c-experience-filters__filter--datepicker o-col o-col-xs-6 o-col-sm-md-2">
<div class="o-datepicker-filter" data-param-name="end">
<button class="o-datepicker-filter__toggle js-mini-cal-toggle" type="button">
<span class="u-sr-only">Select </span>End Date
<span class="o-datepicker-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</button>
<div id="mini-cal-end-date" class="o-datepicker-filter__mini-cal mini-cal" data-date-name="end" data-label="End" data-pair-to="mini-cal-start-date"></div>
</div>
</div>
<div class="c-experience-filters__filter c-experience-filters__filter--audience o-col o-col-sm-md-4 o-col-lg-3">
<div class="o-listbox-filter js-listbox-parent" data-param-name="audience">
<button class="o-listbox-filter__trigger js-listbox-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
Audience
<span class="o-listbox-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</button>
<ul role="listbox" class="o-listbox-filter__listbox js-listbox" tabindex="0" aria-label="Audience list">
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-1238" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Members" value="members">
<label class="o-listbox-filter__label" for="listbox-item-1238">Members</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-2077" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Adults" value="adults">
<label class="o-listbox-filter__label" for="listbox-item-2077">Adults</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4840" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Children" value="children">
<label class="o-listbox-filter__label" for="listbox-item-4840">Children</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4213" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Type 1" value="type1">
<label class="o-listbox-filter__label" for="listbox-item-4213">Type 1</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4636" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Type 2" value="type2">
<label class="o-listbox-filter__label" for="listbox-item-4636">Type 2</label>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="o-applied-filters o-container is-empty">
<h2 id="applied-filter-results-title" class="u-sr-only">Applied Filters</h2>
<div class="o-applied-filters__wrapper">
<div id="applied-filter-results" class="o-applied-filters__inner">
</div>
<button class="js-remove-all-filters o-applied-filters__remove-all">
<span class="u-hover-drawline--thin">Remove All Filters</span>
</button>
</div>
</div>
{% embed "04-objects/filters/filter-bar" with {
classes: 'c-experience-filters',
title: 'Experience Filters',
formBaseURL: 'https://bc-ans.netlify.app/components/detail/events-view.html',
} %}
{% block formContent %}
<div class="c-experience-filters__filter c-experience-filters__filter--datepicker o-col o-col-xs-6 o-col-sm-md-2">
{% include "04-objects/filters/datepicker-filter" with {
title: 'Start Date',
paramName: 'start',
labelName: 'Start',
calID: 'mini-cal-start-date',
calPairTo: 'mini-cal-end-date'
} only %}
</div>
<div class="c-experience-filters__filter c-experience-filters__filter--datepicker o-col o-col-xs-6 o-col-sm-md-2">
{% include "04-objects/filters/datepicker-filter" with {
title: 'End Date',
paramName: 'end',
labelName: 'End',
calID: 'mini-cal-end-date',
calPairTo: 'mini-cal-start-date'
} only %}
</div>
<div class="c-experience-filters__filter c-experience-filters__filter--audience o-col o-col-sm-md-4 o-col-lg-3">
{% include "04-objects/filters/listbox-filter" with {
title: 'Audience',
items: audiences,
paramName: 'audience'
} only %}
</div>
{% if experienceTypes %}
<div class="c-experience-filters__filter c-experience-filters__filter--type o-col o-col-sm-md-4 o-col-lg-3">
{% include "04-objects/filters/listbox-filter" with {
title: 'Experience Types',
items: experienceTypes,
paramName: 'experience-type'
} only %}
</div>
{% endif %}
{# TEMP #}
{# <div class="c-experience-filters__filter c-experience-filters__filter--type o-col o-col-sm-4 o-col-lg-3">
{% include "04-objects/filters/select-filter" with {
title: 'Experience Types',
items: [
{
title: 'Option A',
value: 'optionA'
},
{
title: 'Option B',
value: 'optionB'
},
{
title: 'Option C',
value: 'optionC'
},
{
title: 'Option D',
value: 'optionD'
},
{
title: 'Option E',
value: 'optionE'
},
{
title: 'Option F',
value: 'optionF'
}
],
paramName: 'experience-type'
} only %}
</div> #}
{% endblock %}
{% endembed %}
{
"pageColorTheme": "teal",
"audiences": [
{
"title": "Members",
"value": "members"
},
{
"title": "Adults",
"value": "adults"
},
{
"title": "Children",
"value": "children"
},
{
"title": "Type 1",
"value": "type1"
},
{
"title": "Type 2",
"value": "type2"
}
]
}
.c-experience-filters {
margin-top: 2.4rem;
}
.c-experience-filters__filter--audience,
.c-experience-filters__filter--type {
margin-top: 1.6rem;
@include break($sm-md) {
margin-top: 0;
}
}
.c-experience-filters__filter--datepicker + .c-experience-filters__filter--datepicker {
margin-top: 1.6rem;
@include break($xs) {
margin-top: 0;
}
}
No notes defined.