Ga naar hoofdinhoud

DSO Toolkit v95.0.0 ⌚

· 3 minuten leestijd
Xiangju Zou
Xiangju Zou
DSO Toolkit Maintainer

Deze release bevat een BREAKING change voor het volgende component:

  • Banner

In deze release is het volgende component deprecated:

  • Banner (HTML/CSS implementatie)

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"></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>

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

Migratiepad​

Gebruik de Core implementatie van Banner.

❌
<section role="alert" class="dso-banner alert-success dso-icon">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <h2>Gelukt!</h2>
      <p>U bent succesvol ingelogd.</p>
    </div>
    <dso-icon-button variant="tertiary" icon="cross" label="Sluiten"></dso-icon-button>
  </div>
</section>

✅
<dso-banner status="success" icon="">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <h2>Gelukt!</h2>
      <p>U bent succesvol ingelogd.</p>
    </div>
    <dso-icon-button icon="cross" variant="tertiary" label="Sluiten"></dso-icon>
  </div>
</dso-banner>