University of Florida College of the Arts Pattern Library

Taxonomy Filter: Only Global Taxonomy Filter Visible 

<form class="taxonomy-filter" data-taxonomy-filter method="get">
    <div class="taxonomy-filter__container">
        <div class="taxonomy-filter__global-taxonomy">
            <label class="taxonomy-filter__select-label" for="global-taxonomy-select">Filter by unit</label>
            <select class="taxonomy-filter__select" name="global-taxonomy" id="global-taxonomy-select">
                <option class="taxonomy-filter__select-option" value="all">All
                </option>
                <option class="taxonomy-filter__select-option" value="1">Category 1</option>
                <option class="taxonomy-filter__select-option" value="2">Category 2</option>
                <option class="taxonomy-filter__select-option" value="3">Category 3</option>
                <option class="taxonomy-filter__select-option" value="4">Category 4</option>
            </select>
        </div>
        <div class="taxonomy-filter__buttons">

            <button type="submit" class="standard-button standard-button--light
            standard-button---width standard-button--primary
             standard-button--sm">
                <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Apply filter</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                    <rect width="24" height="24" fill="#D9D9D9" />
                                </mask>
                                <g mask="url(#mask0_5509_8875)">
                                    <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
                                </g>
                            </svg></span></span></div>
            </button>

            <a href="" class="standard-button standard-button--light
            standard-button---width standard-button--reset">
                <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Clear filter</span></span></div>
            </a>
        </div>
    </div>
</form>
 
{{ enqueue_script('taxonomy-filter') }}

<form class="taxonomy-filter" data-taxonomy-filter method="get">
    {% if includeSearch | default(false) %}
        <div class="taxonomy-filter__search-container">
            <label class="taxonomy-filter__input-label" for="search-input">Search for keywords</label>
            <input class="taxonomy-filter__input" placeholder="Enter search term" type="text" id="search-input"
                   value="{{ search.term }}" name="search"/>
            <button class="taxonomy-filter__clear-button" type="button" role="button"
                    onclick="document.getElementById('search-input').value = '';document.getElementById('search-input').focus();">
                <span class="taxonomy-filter__clear-button-text">
                    Clear input field
                </span>
                <span class="taxonomy-filter__clear-button-icon">
                    {% include 'bits/icons/clear-x.twig' %}
                </span>
            </button>
            <input class="taxonomy-filter__submit" type="submit" id="search-submit" value="Search"/>
            <div class="taxonomy-filter__submit-icon">
                {% include 'bits/icons/search.twig' %}
            </div>
        </div>
    {% endif %}
    {% if includeDateFilter | default(false) %}
        {% include 'partials/date-filter/date-filter.twig' %}
    {% endif %}
    <div class="taxonomy-filter__container">
        {% if fields.filterByGlobalTaxonomy == false %}
            <div class="taxonomy-filter__global-taxonomy">
                <label class="taxonomy-filter__select-label" for="global-taxonomy-select">Filter by unit</label>
                <select class="taxonomy-filter__select" name="global-taxonomy" id="global-taxonomy-select">
                    <option class="taxonomy-filter__select-option"
                            value="all">All
                    </option>
                    {% for option in fields.globalOptions %}
                        <option class="taxonomy-filter__select-option"
                                value="{{ option.value }}"{{ fields.taxonomies.globalTaxonomy == option.value ? " selected" }}>{{ option.label }}</option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}
        {% if includeLocalTaxonomyFilter | default(false) %}
            <div class="taxonomy-filter__local-taxonomy">
                <label class="taxonomy-filter__select-label" for="local-taxonomy-select">Filter by type</label>
                <select class="taxonomy-filter__select" name="local-taxonomy" id="local-taxonomy-select">
                    <option class="taxonomy-filter__select-option"
                            value="all">All
                    </option>
                    {% for option in fields.localOptions %}
                        <option class="taxonomy-filter__select-option"
                                value="{{ option.value }}"{{ fields.taxonomies.localTaxonomy == option.value ? " selected" }}>{{ option.label }}</option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}
        {% if includeLocalTaxonomyFilter or fields.filterByGlobalTaxonomy == false %}
            <div class="taxonomy-filter__buttons">
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        type: 'primary',
                        isButton: true,
                        buttonType: 'submit',
                        isDisabled: ((request.get | length) > 0),
                        text: 'Apply filter',
                        size: 'sm',
                    },
                    background: 'light'
                } %}
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        type: 'reset',
                        isButton: false,
                        buttonType: 'reset',
                        text: 'Clear filter',
                        url: cancelUrl,
                    },
                    background: 'light'
                } %}
            </div>
        {% endif %}
    </div>
</form>
 
{
  "includeSearch": false,
  "includeLocalTaxonomyFilter": false,
  "fields": {
    "filterByGlobalTaxonomy": false,
    "globalOptions": [
      {
        "label": "Category 1",
        "value": "1"
      },
      {
        "label": "Category 2",
        "value": "2"
      },
      {
        "label": "Category 3",
        "value": "3"
      },
      {
        "label": "Category 4",
        "value": "4",
        "selected": true
      }
    ],
    "localOptions": [
      {
        "label": "Thing 1",
        "value": "1"
      },
      {
        "label": "Thing 2",
        "value": "2",
        "selected": true
      },
      {
        "label": "Thing 3",
        "value": "3"
      },
      {
        "label": "Thing 4",
        "value": "4"
      }
    ],
    "submitButtonText": "View",
    "cancelButtonText": "Clear"
  }
}
  • Content: 
    smallestBreakpoint = 400px
mediumBreakpoint = 700px

.taxonomy-filter
    --backgroundImage url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8001 0.40006C12.1314 0.841888 12.0419 1.46869 11.6001 1.80006L6.00006 6.00006L0.400058 1.80006C-0.0417693 1.46869 -0.131312 0.841887 0.200059 0.400059C0.53143 -0.0417685 1.15823 -0.131312 1.60006 0.200059L6.00006 3.50006L10.4001 0.200059C10.8419 -0.131312 11.4687 -0.041768 11.8001 0.40006Z' fill='%23162F93'/%3E%3C/svg%3E")
    --textColor grey500
    --iconFillColor blue500
    --iconFillColorActive blue500
    --borderColorActive blue500
    --backgroundColorActive transparent
    --textColorActive black

    display flex
    flex-direction column
    flex-wrap wrap
    fluid(gap, 16px, 25px)

    &__container
        align-items center
        display flex
        flex-wrap wrap
        width 100%

        +below(mediumBreakpoint)
            display block

    &__input-label
        @extends $invisible

    &__input
        @extends $bodyLarge
        background-color white
        border 2px solid charcoalLighter
        border-radius 100px 0 0 100px
        color charcoalLight
        padding 16px
        transition border-color .3s ease

        +below(breakpoint)
            padding 10px 16px 10px 16px
            primaryLink()


        &::placeholder
            color grey
            font-weight normal

        &:focus
            border-color var(--borderColorActive)
            outline none
            & ~ ^[0]__submit
                border-color var(--borderColorActive)

    &__submit-icon
        display flex
        grid-area submit
        margin-left auto
        margin-right 24px
        pointer-events none

        & .search-icon
            & .search-icon__shape
                fill var(--iconFillColor)

        & path
            transition all .3s ease

        +below(breakpoint)
            margin 0 18px 0 14px

    &__submit
        @extends $linkBodyLarge
        background-color smoke
        border 2px solid charcoalLighter
        border-left none
        border-radius 0 100px 100px 0
        color charcoalLight
        cursor pointer
        grid-area submit
        height 100%
        padding 16px
        transition all .3s ease

        +below(mediumBreakpoint)
            color transparent
            padding 0

        &:focus
        &:hover
            fill var(--iconFillColorActive)
            background-color var(--backgroundColorActive)
            color var(--textColorActive)
            border-color var(--borderColorActive)

        &:focus
        &:hover + .search-form__submit-icon path
            fill var(--iconFillColorActive)
            background-color var(--backgroundColorActive)
            color var(--textColorActive)
            border var(--borderColorActive)

    &__clear-button
        cursor pointer
        grid-area input
        margin-left auto
        margin-right 16px

        & .clear-icon
            & .clear-icon__shape
                fill var(--iconFillColor)

        +below(breakpoint)
            display none

    &__clear-button-text
        @extends $invisible

    &__clear-button-icon
        display flex

    &__global-taxonomy
    &__local-taxonomy
        margin-bottom 16px

        +above(mediumBreakpoint)
            margin-bottom 8px
            margin-right 18px
            width 45%

    &__buttons
        display flex
        flex-direction column
        gap 16px
        margin-bottom 8px

        +above(mediumBreakpoint)
            flex-direction row
            margin-top 19px

    &__select-label
        @extends $label
        color var(--textColor)
        display block
        padding 0 10px 4px

    &__select
        @extends $bodySmall
        appearance none
        box-sizing border-box
        background-color white
        background-image var(--backgroundImage)
        background-repeat no-repeat
        background-position right 9px center
        border 2px solid grey
        border-radius 0
        color greyDarkest
        padding 10px 32px 10px 16px
        width 100%

    &__select-option
        @extends $bodySmall
        color greyDarkest
  • URL: /components/raw/taxonomy-filter/taxonomy-filter.styl
  • Filesystem Path: patterns/partials/taxonomy-filter/taxonomy-filter.styl
  • Size: 4.3 KB

No notes defined.