Aeroporto di Bologna - Design System

Fold: Default 

<div class="c-fold">
    <div class="c-fold__summary">
        <p class="c-fold__summary-text">Al P2 Car Valet è possibile prenotare servizi aggiuntivi per la tua auto (<strong>lavaggio autovettura</strong> e <strong>pulizia interni</strong>)</p>
        <button class="c-button c-button--as-link js-btn-fold-toggle c-fold__summary-cta" data-show-text="Mostra servizi" data-hide-text="Nascondi servizi" aria-expanded="false" aria-controls="fold-details">Mostra servizi</button>
    </div>

    <div id="fold-details" class="c-fold__details" aria-hidden="true">
        <div class="c-fold__details-items">
            <div class="c-fold__details-item">
                <div class="c-upsell">

                    <div class="c-upsell__type">
                        <p class="c-upsell__name">Lavaggio autovettura</p>
                        <p class="c-upsell__mobile-price">8,00 € - 24,00 €</p>
                    </div>

                    <div class="c-upsell__details">
                        <div class="c-upsell__price">
                            <div class="c-upsell__price-item">
                                <div class="label">Prezzo min.</div>
                                <div class="value">8,00 €</div>
                            </div>
                            <div class="c-upsell__price-item">
                                <div class="label">Prezzo max.</div>
                                <div class="value">24,00 €</div>
                            </div>
                        </div>

                        <div class="c-upsell__toggle-block">
                            <button class="c-button c-upsell__toggle-btn" data-upsell-toggle aria-pressed="false">
                                Prenota servizio
                            </button>
                            <span class="c-rounded-label c-rounded-label--positive c-rounded-label--small js-upsell-booked-label" style="display: none;" aria-live="polite" role="status">
                                Prenotato
                            </span>
                            <button type="button" class="c-button c-button--ghost c-upsell__delete-btn" aria-label="Elimina servizio" data-upsell-delete style="display: none;">
                                <svg class="c-icon--16">
                                    <use xlink:href="#ic-trash"></use>
                                </svg> </button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="c-fold__details-item">
                <div class="c-upsell">

                    <div class="c-upsell__type">
                        <p class="c-upsell__name">Pulitura interni</p>
                        <p class="c-upsell__mobile-price">24,00 €</p>
                    </div>

                    <div class="c-upsell__details">
                        <div class="c-upsell__price">
                            <div class="c-upsell__price-item">
                                <div class="label">Prezzo max.</div>
                                <div class="value">24,00 €</div>
                            </div>
                        </div>

                        <div class="c-upsell__toggle-block">
                            <button class="c-button c-upsell__toggle-btn" data-upsell-toggle aria-pressed="false">
                                Prenota servizio
                            </button>
                            <span class="c-rounded-label c-rounded-label--positive c-rounded-label--small js-upsell-booked-label" style="display: none;" aria-live="polite" role="status">
                                Prenotato
                            </span>
                            <button type="button" class="c-button c-button--ghost c-upsell__delete-btn" aria-label="Elimina servizio" data-upsell-delete style="display: none;">
                                <svg class="c-icon--16">
                                    <use xlink:href="#ic-trash"></use>
                                </svg> </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <p>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</p>
    </div>

</div>
 
<div class="c-fold{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-fold__summary">
    <p class="c-fold__summary-text">{{{ summary-text }}}</p>
    <button 
      class="c-button c-button--as-link js-btn-fold-toggle c-fold__summary-cta" 
      data-show-text="Mostra servizi" 
      data-hide-text="Nascondi servizi"
      aria-expanded="false"
      aria-controls="fold-details"
    >Mostra servizi</button>
  </div>

  <div id="fold-details" class="c-fold__details" aria-hidden="true">
    <div class="c-fold__details-items">
      {{#each upsell-items }}
      <div class="c-fold__details-item">
        {{ render "@upsell" item merge=true  }}
      </div>
      {{/each}}
    </div>
    <p>{{{ footer-text }}}</p>
  </div>

</div>
 
{
  "summary-text": "Al P2 Car Valet è possibile prenotare servizi aggiuntivi per la tua auto (<strong>lavaggio autovettura</strong> e <strong>pulizia interni</strong>)",
  "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.