DSO Toolkit v95.0.0 ⌚

Deze release bevat een BREAKING change voor het volgende component:

• Banner

Banner

Breaking: In beide implementaties (HTML/CSS en Core) van het component Banner schrijven wij nog het gebruik voor van een icon-only Button. Dit gaan we vervangen door een Icon Button (dso-icon-button).

Migratiepad

Core implementatie

❌
<dso-banner status="error" icon="">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <h2>Storingsmelding:</h2>
      <p>
        Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een
        <a href="#" class="download">aanvraag</a>
        of melding indienen.
      </p>
    </div>
    <button type="button" class="dso-tertiary">
      <span class="sr-only">Sluiten</span>
      <dso-icon icon="cross"></dso-icon>
    </button>
  </div>
</dso-banner>

✅
<dso-banner status="error" icon="">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <h2>Storingsmelding:</h2>
      <p>
        Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een
        <a href="#" class="download">aanvraag</a>
        of melding indienen.
      </p>
    </div>
    <dso-icon-button variant="tertiary" icon="cross" label="Sluiten" tooltip-placement="top"></dso-icon-button>
  </div>
</dso-banner>

HTML/CSS implementatie

❌
<section role="alert" class="dso-banner alert-error">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <h2>Storingsmelding:</h2>
      <p>
        Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een
        <a href="#" class="download">aanvraag</a>
        of melding indienen.
      </p>
    </div>
    <button type="button" class="dso-tertiary">
      <span class="sr-only">Sluiten</span>
      <dso-icon icon="cross"></dso-icon>
    </button>
  </div>
</section>

✅
<section role="alert" class="dso-banner alert-error">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <h2>Storingsmelding:</h2>
      <p>
        Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een
        <a href="#" class="download">aanvraag</a>
        of melding indienen.
      </p>
    </div>
    <dso-icon-button variant="tertiary" icon="cross" label="Sluiten"></dso-icon-button>
  </div>
</section>