Camel2.0 — Dokumentacja komponentów UI

<!-- Modal: statyczny podgląd (bez backdrop) -->
<div style="position:relative; background:#f5f5f1; padding:20px; border-radius:8px; max-width:500px;">
  <div class="modal" style="position:relative; transform:none; opacity:1; max-width:100%; border-radius:8px;">
    <button class="modal__close" aria-label="Zamknij"></button>
    <div class="modal__body" style="order:1;">
      <h2 class="modal__title">Czy na pewno chcesz odebrać ten voucher?</h2>
      <div class="modal__separator"></div>
      <p class="modal__text">Z Twojego konta zostanie pobrane:</p>
      <p class="modal__value">500 punktów</p>
      <div class="modal__actions">
        <button class="btn btn-primary">Odbierz</button>
        <button class="btn btn-secondary-positive">Anuluj</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Czy na pewno chcesz odebrać ten voucher?', text: 'Z Twojego konta zostanie pobrane:', value: '500 punktów', confirmLabel: 'Odbierz', cancelLabel: 'Anuluj', onConfirm: function() { Toast.show({ title: 'Sukces!', text: 'Voucher odebrany.' }); } })">
  Otwórz Modal (pełny)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Gratulacje!', text: 'Twój voucher został aktywowany.', confirmLabel: 'OK' })">
  Otwórz Modal (1 button)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ title: 'Czy na pewno?', text: 'Tej operacji nie można cofnąć.', confirmLabel: 'Potwierdź', cancelLabel: 'Anuluj' })">
  Otwórz Modal (bez grafiki)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ variant: 'points', image: '../assets/images/own-it-card-big.jpg', pointsNumber: '235', pointsLabel: 'Punktów', text: 'Jan, kod został wprowadzony poprawnie!', value: '+ 15 PUNKTÓW', confirmLabel: 'Zamknij' })">
  Kod poprawny
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ variant: 'points', image: '../assets/images/own-it-card-big.jpg', pointsNumber: '235', pointsLabel: 'Punktów', text: '&lt;strong&gt;Brawo!&lt;/strong&gt;<br/> Dodatkowe punkty wpadły na Twoje konto!', value: '+ 10 PUNKTÓW', confirmLabel: 'Zamknij' })">
  Brawo (dodatkowe)
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ variant: 'points', image: '../assets/images/own-it-card-big.jpg', pointsNumber: '335', pointsLabel: 'Punktów', text: '&lt;strong&gt;Gratulacje!&lt;/strong&gt;<br/><br/> Twój znajomy pomyślnie zarejestrował się z&amp;nbsp;linku polecającego, otrzymujesz punkty lojalnościowe:', value: '+ 100 PUNKTÓW', confirmLabel: 'Wyślij kolejne zaproszenie', cancelLabel: 'Zamknij' })">
  Zaproszenie
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Gratulacje, voucher jest Twój!', text: 'Nagroda została wysłana na Twoją skrzynkę e-mail.', confirmLabel: 'Zobacz voucher' })">
  Gratulacje
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Wykorzystałeś swój limit miesięczny', text: 'Pamiętaj, że możesz wymienić punkty na &lt;strong&gt;1 voucher w&nbsp;ciągu miesiąca&lt;/strong&gt;.', confirmLabel: 'Zamknij' })">
  Limit miesięczny
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Wykorzystałeś swój limit roczny', text: 'Pamiętaj, że możesz odebrać do &lt;strong&gt;6 voucherów w&nbsp;ciągu roku&lt;/strong&gt;.', confirmLabel: 'Zamknij' })">
  Limit roczny
</button>

<button class="btn btn-primary"
  onclick="Modal.show({ image: '../assets/images/vouchers/voucher-decathlon.jpg', title: 'Nie masz wystarczającej ilości punktów', text: 'Rejestruj kody z&nbsp;paczek i&nbsp;zdobądź punkty, aby odebrać ten voucher.', confirmLabel: 'Dodaj nowy kod', cancelLabel: 'Anuluj' })">
  Brak punktów
</button>