DSO Toolkit v82.0.0 🍔

Deze release bevat BREAKING changes voor de volgende componenten:

• Selectable (HTML/CSS implementatie)
• Accordion (HTML/CSS implementatie)

Deze release bevat een deprecation voor het volgende component:

• Modal (HTML/CSS implementatie)

Selectable (HTML/CSS implementatie)

De HTML/CSS implementatie van het component Selectable is in 🍇 Release 78.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad

Gebruik de Core implementatie van Selectable.

❌
<div class="dso-selectable">
  <input type="checkbox" id="1234" value="the-value" aria-invalid="false" />
  <script>
    document.getElementById("1234").indeterminate = false;
  </script>
  <label for="1234">Label</label>
  <div class="dso-info">
    <div class="dso-rich-content" slot="info">
      <p>Rijke inhoud</p>
      <p>Ziet er zo uit</p>
      <ul>
        <li>Lijstjes</li>
      </ul>
      <p>Kan allemaal</p>
    </div>
  </div>
</div>

✅
<dso-selectable type="checkbox" identifier="1234" value="the-value">
  Label
  <div class="dso-rich-content" slot="info">
    <p>Rijke inhoud</p>
    <p>Ziet er zo uit</p>
    <ul>
      <li>Lijstjes</li>
    </ul>
    <p>Kan allemaal</p>
  </div>
</dso-selectable>

Accordion (HTML/CSS implementatie)

De HTML/CSS implementatie van het component Accordion is in 🦕 Release 78.1.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad

Gebruik de Core implementatie van Accordion.

❌
<div class="dso-accordion">
  <div class="dso-accordion-section dso-open">
    <h2 class="dso-section-handle">
      <button type="button" aria-expanded="true">
        Is het verplicht om de Vergunningcheck te doen?

        <div class="dso-section-handle-addons">
          <span class="dso-label dso-label-attention dso-compact"> Attentie </span>
        </div>
      </button>
    </h2>
    <div class="dso-section-body">
      <p>
        Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
        heeft of melding moet doen.
      </p>
      <p>
        Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
        dan meegenomen in de aanvraag of melding.
      </p>
    </div>
  </div>
</div>

✅
<dso-accordion>
  <dso-accordion-section
    heading="h2"
    handle-title="Is het verplicht om de Vergunningcheck te doen?"
    label="Attentie"
    label-status="attention"
    open
  >
    <p>
      Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
      heeft of melding moet doen.
    </p>
    <p>
      Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
      dan meegenomen in de aanvraag of melding.
    </p>
  </dso-accordion-section>
</dso-accordion>

Modal (HTML/CSS implementatie)

De HTML/CSS implementatie van het component Modal is deprecated. In een toekomstige BREAKING release zal de HTML/CSS implementatie verwijderd worden.

Migratiepad

Gebruik de Core implementatie van Modal.

❌
<dialog aria-modal="true" class="dso-modal" role="alertdialog" aria-labelledby="c7934734-e6aa-4d9c-a76c-32dde50fe078">
  <div class="dso-dialog" role="document">
    <div class="dso-header">
      <h2 id="c7934734-e6aa-4d9c-a76c-32dde50fe078">Verwijderen werkzaamheid</h2>
      <button type="button" class="dso-close">
        <span class="sr-only">Sluiten</span>
      </button>
    </div>
    <dso-scrollable>
      <div class="dso-body" tabindex="0">
        <p>
          U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden
          op de vragen worden dan ook verwijderd. Wilt u doorgaan?
        </p>
      </div>
    </dso-scrollable>
    <div class="dso-footer">
      <button type="button" class="dso-tertiary">
        <span>Annuleren</span>
      </button>
      <button type="button" class="dso-secondary">
        <span>Secundaire actie</span>
      </button>
      <button type="button" class="dso-primary">
        <span>Bevestigen</span>
      </button>
    </div>
  </div>
</dialog>

✅
<dso-modal dialog-role="alertdialog" modal-title="Verwijderen werkzaamheid" closable="">
  <div slot="body">
    <p>
      U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden op
      de vragen worden dan ook verwijderd. Wilt u doorgaan?
    </p>
  </div>
  <div slot="footer">
    <button type="button" class="dso-tertiary">
      <span>Annuleren</span>
    </button>
    <button type="button" class="dso-secondary">
      <span>Secundaire actie</span>
    </button>
    <button type="button" class="dso-primary">
      <span>Bevestigen</span>
    </button>
  </div>
</dso-modal>