Filter List

WIP

HTML
View
Context
Info
Notes


        
        <div class="spacer"></div>
<button id="show-filters" type="button" class="button button--borderless">
    <svg class="icon icon--filter" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
        <use href="/images/filter.svg#filter" />
    </svg>
    <span class="button__label">Filter</span></button>
<div class="filters">
    <button id="hide-filters" type="button" class="button button--borderless button--inverse">
        <span class="button__label">Close</span><svg class="icon icon--close" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/close.svg#close" />
        </svg>
    </button>
    <form action="/">
        <h2 class="h1 screen-reader-text">Filters</h2>
        <div class="accordion accordion--filter-list">
            <div class="accordion__pane">
                <p class="accordion__heading">Topics</p>
                <div class="accordion__content">
                    <button id="deselect-topics" type="button" class="button button--borderless">
                        <span class="button__label">Deselect All<span class="screen-reader-text"> Topics</span></span></button>
                    <ul id="topics" class="input-group input-group__parent topics">
                        <li>
                            <label class="label--checkbox" for="cooperative-essentials"><input id="cooperative-essentials" type="checkbox" name="cooperative-essentials" value="cooperative-essentials" />Cooperative essentials</label>
                            <span class="filter-disclosure-label" hidden>show 5 subtopics for "Cooperative essentials"</span>
                            <span class="supplementary-label" hidden> (and 5 subtopics)</span>
                            <ul class="input-group input-group__descendant">
                                <li><label class="label--checkbox" for="governance"><input id="governance" type="checkbox" name="governance" value="governance" />Governance</label>
                                </li>
                                <li><label class="label--checkbox" for="ownership"><input id="ownership" type="checkbox" name="ownership" value="ownership" />Ownership</label>
                                </li>
                                <li><label class="label--checkbox" for="cooperative-best-practices"><input id="cooperative-best-practices" type="checkbox" name="cooperative-best-practices" value="cooperative-best-practices" />Cooperative best practices</label>
                                </li>
                                <li><label class="label--checkbox" for="diversity-and-inclusion"><input id="diversity-and-inclusion" type="checkbox" name="diversity-and-inclusion" value="diversity-and-inclusion" />Diversity and inclusion</label>
                                </li>
                                <li><label class="label--checkbox" for="bylaws"><input id="bylaws" type="checkbox" name="bylaws" value="bylaws" />Bylaws</label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <label class="label--checkbox" for="business-operations"><input id="business-operations" type="checkbox" name="business-operations" value="business-operations" />Business operations</label>
                            <span class="filter-disclosure-label" hidden>show 6 subtopics for "Business operations"</span>
                            <span class="supplementary-label" hidden> (and 6 subtopics)</span>
                            <ul class="input-group input-group__descendant">
                                <li><label class="label--checkbox" for="human-resources"><input id="human-resources" type="checkbox" name="human-resources" value="human-resources" />Human resources</label>
                                </li>
                                <li><label class="label--checkbox" for="marketing"><input id="marketing" type="checkbox" name="marketing" value="marketing" />Marketing</label>
                                </li>
                                <li><label class="label--checkbox" for="social-media"><input id="social-media" type="checkbox" name="social-media" value="social-media" />Social media</label>
                                </li>
                                <li><label class="label--checkbox" for="incorporation"><input id="incorporation" type="checkbox" name="incorporation" value="incorporation" />Incorporation</label>
                                </li>
                                <li><label class="label--checkbox" for="business-model"><input id="business-model" type="checkbox" name="business-model" value="business-model" />Business model</label>
                                </li>
                                <li><label class="label--checkbox" for="income-benefits-and-compensation"><input id="income-benefits-and-compensation" type="checkbox" name="income-benefits-and-compensation" value="income-benefits-and-compensation" />Income, benefits, and compensation</label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <label class="label--checkbox" for="technology-and-platforms"><input id="technology-and-platforms" type="checkbox" name="technology-and-platforms" value="technology-and-platforms" />Technology &amp; Platforms</label>
                            <span class="filter-disclosure-label" hidden>show 9 subtopics for "Technology &amp; Platforms"</span>
                            <span class="supplementary-label" hidden> (and 9 subtopics)</span>
                            <ul class="input-group input-group__descendant">
                                <li><label class="label--checkbox" for="software-development"><input id="software-development" type="checkbox" name="software-development" value="software-development" />Software development</label>
                                </li>
                                <li><label class="label--checkbox" for="platforms"><input id="platforms" type="checkbox" name="platforms" value="platforms" />Platforms</label>
                                </li>
                                <li><label class="label--checkbox" for="design"><input id="design" type="checkbox" name="design" value="design" />Design</label>
                                </li>
                                <li><label class="label--checkbox" for="free-software"><input id="free-software" type="checkbox" name="free-software" value="free-software" />Free software</label>
                                </li>
                                <li><label class="label--checkbox" for="data"><input id="data" type="checkbox" name="data" value="data" />Data</label>
                                </li>
                                <li><label class="label--checkbox" for="algorithms"><input id="algorithms" type="checkbox" name="algorithms" value="algorithms" />Algorithms</label>
                                </li>
                                <li><label class="label--checkbox" for="automation"><input id="automation" type="checkbox" name="automation" value="automation" />Automation</label>
                                </li>
                                <li><label class="label--checkbox" for="blockchain"><input id="blockchain" type="checkbox" name="blockchain" value="blockchain" />Blockchain</label>
                                </li>
                                <li><label class="label--checkbox" for="search-engines"><input id="search-engines" type="checkbox" name="search-engines" value="search-engines" />Search engines</label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <label class="label--checkbox" for="law-and-policy"><input id="law-and-policy" type="checkbox" name="law-and-policy" value="law-and-policy" />Law &amp; Policy</label>
                            <span class="filter-disclosure-label" hidden>show 4 subtopics for "Law &amp; Policy"</span>
                            <span class="supplementary-label" hidden> (and 4 subtopics)</span>
                            <ul class="input-group input-group__descendant">
                                <li><label class="label--checkbox" for="anti-trust"><input id="anti-trust" type="checkbox" name="anti-trust" value="anti-trust" />Anti-trust</label>
                                </li>
                                <li><label class="label--checkbox" for="labor-law"><input id="labor-law" type="checkbox" name="labor-law" value="labor-law" />Labor law</label>
                                </li>
                                <li><label class="label--checkbox" for="policy"><input id="policy" type="checkbox" name="policy" value="policy" />Policy</label>
                                </li>
                                <li><label class="label--checkbox" for="co-op-law"><input id="co-op-law" type="checkbox" name="co-op-law" value="co-op-law" />Co-op law</label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <label class="label--checkbox" for="fair-labour"><input id="fair-labour" type="checkbox" name="fair-labour" value="fair-labour" />Fair labour</label>
                            <span class="filter-disclosure-label" hidden>show 3 subtopics for "Fair labour"</span>
                            <span class="supplementary-label" hidden> (and 3 subtopics)</span>
                            <ul class="input-group input-group__descendant">
                                <li><label class="label--checkbox" for="unions"><input id="unions" type="checkbox" name="unions" value="unions" />Unions</label>
                                </li>
                                <li><label class="label--checkbox" for="workplace-safety"><input id="workplace-safety" type="checkbox" name="workplace-safety" value="workplace-safety" />Workplace safety</label>
                                </li>
                                <li><label class="label--checkbox" for="social-security"><input id="social-security" type="checkbox" name="social-security" value="social-security" />Social security</label>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <label class="label--checkbox" for="platform-co-op-theory"><input id="platform-co-op-theory" type="checkbox" name="platform-co-op-theory" value="platform-co-op-theory" />Platform co-op theory</label>
                            <span class="filter-disclosure-label" hidden>show 7 subtopics for "Platform co-op theory"</span>
                            <span class="supplementary-label" hidden> (and 7 subtopics)</span>
                            <ul class="input-group input-group__descendant">
                                <li><label class="label--checkbox" for="platform-cooperativism"><input id="platform-cooperativism" type="checkbox" name="platform-cooperativism" value="platform-cooperativism" />Platform cooperativism</label>
                                </li>
                                <li><label class="label--checkbox" for="platform-capitalism"><input id="platform-capitalism" type="checkbox" name="platform-capitalism" value="platform-capitalism" />Platform capitalism</label>
                                </li>
                                <li><label class="label--checkbox" for="gig-economy"><input id="gig-economy" type="checkbox" name="gig-economy" value="gig-economy" />Gig economy</label>
                                </li>
                                <li><label class="label--checkbox" for="sharing-economy"><input id="sharing-economy" type="checkbox" name="sharing-economy" value="sharing-economy" />Sharing economy</label>
                                </li>
                                <li><label class="label--checkbox" for="solidarity-economy"><input id="solidarity-economy" type="checkbox" name="solidarity-economy" value="solidarity-economy" />Solidarity economy</label>
                                </li>
                                <li><label class="label--checkbox" for="information-economy"><input id="information-economy" type="checkbox" name="information-economy" value="information-economy" />Information economy</label>
                                </li>
                                <li><label class="label--checkbox" for="peer-to-peer"><input id="peer-to-peer" type="checkbox" name="peer-to-peer" value="peer-to-peer" />Peer-to-peer</label>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
    </form>
</div>
</div>


        {% if not standAlone %}
<div class="spacer"></div>
{% render '@button--borderless', {standAlone: true, id: 'show-filters'}, true %}
<div class="filters">
	{% render '@button--borderless-inverse', {standAlone: true, id: 'hide-filters', label: 'Close', iconPosition: 'end', icon: 'close'}, true %}
	<form action="/">
	<h2 class="h1 screen-reader-text">Filters</h2>
	<div class="accordion accordion--filter-list">
{% endif %}
		<div class="accordion__pane">
			<p class="accordion__heading">{{ label }}</p>
			<div class="accordion__content">
				{% render '@button--borderless', {label: 'Deselect All<span class="screen-reader-text"> '+label+'</span>', id: 'deselect-'+ label | slugify, icon: false, standAlone: true, buttons:[{name: 'default' }]}, true %}
				<ul id="{{ label | slugify }}" class="input-group input-group__parent {{ label | slugify }}">
					{% for term in terms %}
					<li>
						{% if term.children %}
							{% set count = term.children.length %}
							{% render '@checkbox', {label: term.label, value: term.label | slugify, name: term.label | slugify, standAlone: false, inverse: true}, true %}
							<span class="filter-disclosure-label" hidden>show {{ count }} subtopics for "{{ term.label }}"</span>
							<span class="supplementary-label" hidden> (and {{ count }} subtopics)</span>
							<ul class="input-group input-group__descendant">
								{% for child in term.children %}
								<li>{% render '@checkbox', {label: child, value: child | slugify, name: child | slugify, standAlone: false, inverse: true}, true %}</li>
								{% endfor %}
							</ul>
						{% else %}
							<input type="checkbox" name="{{ label | slugify }}[]" id="{{ label | slugify }}-{{ term.label | slugify }}" value="{{ term.label | slugify }}"><label for="{{ label | slugify }}-{{ term.label | slugify }}">{{ term.label }}</label>
						{% endif %}
					</li>
					{% endfor %}
				</ul>
			</div>
		</div>
{% if not standAlone %}
		</form>
	</div>
</div>
{% endif %}


        
            
            {
  "label": "Topics",
  "terms": [
    {
      "label": "Cooperative essentials",
      "children": [
        "Governance",
        "Ownership",
        "Cooperative best practices",
        "Diversity and inclusion",
        "Bylaws"
      ]
    },
    {
      "label": "Business operations",
      "children": [
        "Human resources",
        "Marketing",
        "Social media",
        "Incorporation",
        "Business model",
        "Income, benefits, and compensation"
      ]
    },
    {
      "label": "Technology & Platforms",
      "children": [
        "Software development",
        "Platforms",
        "Design",
        "Free software",
        "Data",
        "Algorithms",
        "Automation",
        "Blockchain",
        "Search engines"
      ]
    },
    {
      "label": "Law & Policy",
      "children": [
        "Anti-trust",
        "Labor law",
        "Policy",
        "Co-op law"
      ]
    },
    {
      "label": "Fair labour",
      "children": [
        "Unions",
        "Workplace safety",
        "Social security"
      ]
    },
    {
      "label": "Platform co-op theory",
      "children": [
        "Platform cooperativism",
        "Platform capitalism",
        "Gig economy",
        "Sharing economy",
        "Solidarity economy",
        "Information economy",
        "Peer-to-peer"
      ]
    }
  ],
  "standAlone": false
}

Handle: @filter-list
Preview:
- With layout
- Component only
Filesystem Path: src/components/20-molecules/71-filter-list/filter-list.njk
References (3): @button--borderless, @button--borderless-inverse, @checkbox
Referenced by (4): @archive, @archive--unfiltered, @search-results, @search-results--unfiltered

There are no notes for this item.

Filter List

Typography

Paragraph

Quote

List

Divider

Link

Call To Action

Button

Form Elements

Text Input

Textareas

Selects

Checkboxes

Custom Checkboxes

Radio Buttons

Submit Button

Image

Menu Button

Menu

Card

Accordion

Link List

Dialog

Notification

Radio Group

Responsive Blocks

Tabs

Archive

Term List

Search Results