Aeroporto di Bologna - Design System

Fold: Voucher 

<div class="c-fold">
    <div class="c-fold__summary">
        <p class="c-fold__summary-text">Il giorno [data] hai annullato quest’ordine e ottenuto un voucher di pari importo spendibile sul nostro e-commerce</p>
        <a href="#" class="c-fold__summary-cta">Vedi voucher [12345]</a>
    </div>
</div>
 
<div class="c-fold{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-fold__summary">
    <p class="c-fold__summary-text">{{{ summary-text }}}</p>
    <a href="#" class="c-fold__summary-cta">Vedi voucher [12345]</a>
  </div>
</div>
 
{
  "summary-text": "Il giorno [data] hai annullato quest’ordine e ottenuto un voucher di pari importo spendibile sul nostro e-commerce",
  "upsell-items": [
    {
      "item": {
        "name": "Lavaggio autovettura",
        "price-item": [
          {
            "label": "Prezzo min.",
            "value": "8,00 €"
          },
          {
            "label": "Prezzo max.",
            "value": "24,00 €"
          }
        ]
      }
    },
    {
      "item": {
        "name": "Pulitura interni",
        "price-item": [
          {
            "label": "Prezzo max.",
            "value": "24,00 €"
          }
        ]
      }
    }
  ],
  "footer-text": "Il pagamento di questi servizi avverrà solo una volta che ne avrai usufruito. Potrai pagarli presso il Presidio Parcheggi al piano terra del P2, prima del ritiro della tua auto"
}
  • Content: 
    .c-fold {
  background-color: secondary(basic-white, 100);
  padding: remify(16px);
  border-radius: 0 0 remify(20px) remify(20px);
  color: primary(night, 100);
  border: remify(1px) solid primary(night, 20);
  border-top: none;
}

.c-fold__summary {
  display: flex;
  gap: remify(16px);
  flex-direction: column;
  align-items: flex-start;

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

}

.c-fold .js-btn-fold-toggle,
.c-fold .c-fold__summary-cta,
.c-fold .c-button--ghost.c-fold__summary-cta {
  color: currentColor;
  flex-shrink: 0;
  @include font-scale(level-1-5, semibold);
  padding: remify(4px) remify(12px);
  border-radius: remify(8px);
}

.c-fold .c-fold__summary-cta {
  padding: 0;
}

.c-fold__details {
  display: none;
  flex-direction: column;
  gap: remify(16px);
  margin-top: remify(24px);

  @include min-screen(bp(tablet)) {
    gap: remify(32px);
    margin-top: remify(32px);
  }

}

.c-fold__details-items {
  display: flex;
  flex-direction: column;
  gap: remify(16px);
}

.c-fold__summary-text {
  color: primary(night, 100);
  @include font-scale(level-1-5);
}

.c-fold .c-voucher-main-form {
  padding: 0;
}

/*------------------------------------*\
  Modifier: c-fold--result
\*------------------------------------*/
.c-fold--result {

  .c-fold__summary {
    justify-content: initial;
    gap: remify(16px) remify(8px);
  }

  .refund-result {
    display: flex;
    align-items: center;
    gap: remify(4px);
  }

}
  • URL: /components/raw/fold/_fold.scss
  • Filesystem Path: src/views/02-molecules/fold/_fold.scss
  • Size: 1.5 KB
  • Content: 
    document.addEventListener('DOMContentLoaded', () => {
  // Find all fold containers and set them up
  const foldContainers = document.querySelectorAll('.c-fold');

  foldContainers.forEach(container => {
    // Find the essential parts of the component
    const toggleButton = container.querySelector('.js-btn-fold-toggle');
    const detailsSection = container.querySelector('.c-fold__details');
    
    // Find the optional close button
    const closeButton = container.querySelector('.js-btn-close-fold');

    // If there's no toggle button or details section, this isn't a valid fold component
    if (!toggleButton || !detailsSection) {
      return;
    }

    // Get button texts from data attributes
    const showText = toggleButton.dataset.showText;
    const hideText = toggleButton.dataset.hideText;

    // --- STATE MANAGEMENT FUNCTIONS ---

    const openDetails = () => {
      detailsSection.style.display = 'flex';
      toggleButton.textContent = hideText;
      toggleButton.setAttribute('aria-expanded', 'true');
      detailsSection.setAttribute('aria-hidden', 'false');
    };

    const closeDetails = () => {
      detailsSection.style.display = 'none';
      toggleButton.textContent = showText;
      toggleButton.setAttribute('aria-expanded', 'false');
      detailsSection.setAttribute('aria-hidden', 'true');
    };
    
    // --- INITIAL STATE ---
    
    // Start with the details section closed
    closeDetails();

    // --- EVENT LISTENERS ---

    // 1. Toggle Button (Open/Close)
    const toggleFoldHandler = (event) => {
      event.preventDefault();
      const isHidden = detailsSection.style.display === 'none';
      if (isHidden) {
        openDetails();
      } else {
        closeDetails();
      }
    };

    toggleButton.addEventListener('click', toggleFoldHandler);
    toggleButton.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        toggleFoldHandler(event);
      }
    });

    // 2. Optional Close Button (Close Only)
    if (closeButton) {
      const closeFoldHandler = (event) => {
        event.preventDefault();
        closeDetails();
      };

      closeButton.addEventListener('click', closeFoldHandler);
      closeButton.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          closeFoldHandler(event);
        }
      });
    }
  });
});
  • URL: /components/raw/fold/fold.js
  • Filesystem Path: src/views/02-molecules/fold/fold.js
  • Size: 2.4 KB

No notes defined.