Search Bar

Component preview

<!-- Default -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar" class="control-label">
            Search bar - Default
        </label>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar" placeholder="Bv. boomkap" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

    </div>
</div>

<!-- Search Bar Infobutton -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-infobutton" class="control-label">
            Search bar - Default
        </label>

        <button type="button" class="btn dso-info-button" aria-expanded="false">
            <span class="sr-only">Toelichting bij zoekveld</span>
        </button>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar-infobutton" placeholder="Bv. boomkap" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

    </div>
</div>

<!-- Search Bar Infobutton Expanded -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-infobutton-expanded" class="control-label">
            Search bar - Default
        </label>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">Toelichting bij zoekveld</span>
        </button>

        <div class="dso-info">

            <button type="button">
                <span class="sr-only">Sluiten</span>
            </button>

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Activiteit"</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar-infobutton-expanded" placeholder="Bv. boomkap" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

    </div>
</div>

<!-- Search Bar Static Info -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-static-info" class="control-label">
            Search bar - Default
        </label>

        <div class="dso-info" id="infoTextId_search-bar-static-info">

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Activiteit"</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" aria-describedby="infoTextId_search-bar-static-info" id="search-bar-static-info" placeholder="Bv. boomkap" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

    </div>
</div>

<!-- Search Bar Error -->
<div class="form-group dso-filter dso-invalid">
    <div class="dso-label-container">
        <label for="search-bar-error" class="control-label">
            Search bar - Invalid
        </label>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" aria-describedby="errorTextId_search-bar-error" id="search-bar-error" placeholder="Bv. boomkap" aria-invalid="true" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

        <p class="dso-message" id="errorTextId_search-bar-error">Vul dit veld in.</p>

    </div>
</div>

<!-- Search Bar Help -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-help" class="control-label">
            Search bar - Default
        </label>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" aria-describedby="helpTextId_search-bar-help" id="search-bar-help" placeholder="Bv. boomkap" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

        <p class="dso-help-block" id="helpTextId_search-bar-help">Type en selecteer de activiteit</p>

    </div>
</div>

<!-- Search Bar Allmessages -->
<div class="form-group dso-filter dso-invalid">
    <div class="dso-label-container">
        <label for="search-bar-allmessages" class="control-label">
            Search bar - Alle meldingen
        </label>

        <div class="dso-info" id="infoTextId_search-bar-allmessages">

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Activiteit"</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" aria-describedby="errorTextId_search-bar-allmessages helpTextId_search-bar-allmessages infoTextId_search-bar-allmessages" id="search-bar-error" placeholder="Bv. boomkap" aria-invalid="true" />

                <button type="button">
                    Zoekopdracht legen
                </button>

            </div>
            <button type="button" class="dso-secondary sr-only">
                Button

            </button>
        </div>

        <p class="dso-message" id="errorTextId_search-bar-allmessages">Vul dit veld in.</p>

        <p class="dso-help-block" id="helpTextId_search-bar-allmessages">Type en selecteer de activiteit</p>

    </div>
</div>

{% set localId = generateLocalId(prefix, id) %}

{% set errorTextId = 'errorTextId_' + localId %}
{% set helpTextId = 'helpTextId_' + localId %}
{% set infoTextId = 'infoTextId_' + localId %}

{% if errorText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + errorTextId %}
{% endif %}
{% if helpText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + helpTextId %}
{% endif %}
{% if infoText and static %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

<div {{ className('form-group dso-filter', [type, 'dso-input-' + type], [inputIcon, 'has-feedback'], [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
    {% if infoText and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static, id: infoTextId} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    {% render '@search-bar', merge(searchBar, {
      id: generateLocalId(prefix, searchBar.id),
      ariaDescribedBy: ariaDescribedBy,
      state: state
    }) %}
    {% if inputIcon %}
      <span class="form-control-feedback" aria-hidden="true"><dso-icon icon="{{ inputIcon }}"></dso-icon></span>
    {% endif %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText, id: errorTextId} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: helpTextId} %}
    {% endif %}
  </div>
</div>

/* Default */
__title: default
id: search-bar
label: Search bar - Default
searchBar:
  id: search-bar
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap

/* Search Bar Infobutton */
__title: Toelichting ingeklapt
id: search-bar-infobutton
label: Search bar - Default
searchBar:
  id: search-bar-infobutton
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - Toelichting ingeklapt
infoOpen: false
infoButtonLabel: Toelichting bij zoekveld
infoText: |
  Closed

/* Search Bar Infobutton Expanded */
__title: Toelichting uitgeklapt
id: search-bar-infobutton-expanded
label: Search bar - Default
searchBar:
  id: search-bar-infobutton-expanded
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - Toelichting uitgeklapt door infobutton
infoOpen: true
infoButtonLabel: Toelichting bij zoekveld
infoText: |
  <h4>Toelichting bij vraag: "Activiteit"</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>

/* Search Bar Static Info */
__title: Vaste toelichting
id: search-bar-static-info
label: Search bar - Default
searchBar:
  id: search-bar-static-info
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
infoOpen: true
infoText: |
  <h4>Toelichting bij vraag: "Activiteit"</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>
static: true

/* Search Bar Error */
__title: Foutmelding
id: search-bar-error
label: Search bar - Invalid
searchBar:
  id: search-bar-error
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - >-
    Indien een input ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-input</code>.
state: invalid
errorText: Vul dit veld in.

/* Search Bar Help */
__title: Help tekst
id: search-bar-help
label: Search bar - Default
searchBar:
  id: search-bar-help
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - >-
    Indien een input ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-input</code>.
helpText: Type en selecteer de activiteit

/* Search Bar Allmessages */
__title: Alle meldingen
id: search-bar-allmessages
label: Search bar - Alle meldingen
searchBar:
  id: search-bar-error
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation: >-
  Naar de meldingen wordt verwezen met een <code>aria-describedby</code>
  attribuut vanuit de <code>input</code>.
state: invalid
errorText: Vul dit veld in.
helpText: Type en selecteer de activiteit
infoOpen: true
static: true
infoButtonLabel: Toelichting bij zoekveld
infoText: |
  <h4>Toelichting bij vraag: "Activiteit"</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>