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="btn btn-default 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="btn btn-default 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="btn btn-default sr-only">
                Button

            </button>
        </div>

    </div>

    <div class="dso-info">

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

        <div class="dso-rich-content">
            <h4>Toelichting bij vraag: "Activiteit" [DEPRECATED]</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>

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

        <div class="dso-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" id="search-bar-infobutton-static" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button

            </button>
        </div>

    </div>

    <div class="dso-info">

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

        <div class="dso-rich-content">

        </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" id="search-bar-error" placeholder="Bv. boomkap" aria-invalid="true" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button

            </button>
        </div>

        <p class="dso-message">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" id="search-bar-help" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button

            </button>
        </div>

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

    </div>

</div>

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

<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} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    {% render '@search-bar', merge(searchBar, {id: generateLocalId(prefix, searchBar.id), 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} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: localId} %}
    {% endif %}
  </div>
  {% if infoOpen %}
    {% render '@info', {infoText: infoTextDeprecated} %}
  {% endif %}
</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: Infobutton 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: Infobutton 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
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>
infoTextDeprecated: |
  <h4>Toelichting bij vraag: "Activiteit" [DEPRECATED]</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 Infobutton Static */
__title: Vaste toelichting
id: search-bar-infobutton-static
label: Search bar - Default
searchBar:
  id: search-bar-infobutton-static
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - Vaste toelichting
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