PDJ Brandbox

product-warranty: Default 

<div class="hero-product__warranty">
    <div class="hero-product__warranty__top">

        <div class="care-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.77 221.25">
                <path fill="#fff" d="M221.77,173.32c0,26.36-21.62,47.93-48.04,47.93H48.04c-26.42,0-48.04-21.57-48.04-47.93V47.93C0,21.57,21.62,0,48.04,0h125.69c26.42,0,48.04,21.57,48.04,47.93v125.4Z" />
                <g>
                    <g>
                        <path fill="#f1b43f" d="M114.59,57.75c-.03-.06-.06-.12-.11-.18l-.79-1.01c-.15-.19-.37-.31-.61-.34-.24-.03-.48,.05-.66,.2l-7.7,6.35c-.29,.23-.69,.27-1.01,.08l-6.52-3.76c-.2-.11-.34-.3-.41-.52l-1.82-6.26c-.1-.34,.01-.7,.29-.93l8.14-6.71c.37-.31,.43-.85,.14-1.23l-1.03-1.33c-.06-.07-.12-.12-.2-.17-3.17-.64-6.38-.25-9.22,.99-3.54,1.6-6.48,4.53-7.98,8.44-1.81,4.71-1.1,9.75,1.39,13.72,.36,.57,.67,1.1,.94,1.6,1.63,1.97,3.77,3.56,6.33,4.54,2.43,.93,4.96,1.2,7.38,.9,.33-.11,.68-.19,1.06-.22,.21-.02,.42-.05,.64-.08,4.75-1.14,8.87-4.51,10.76-9.4,.6-1.55,.92-3.13,1-4.7Z" />
                        <path fill="#f1b43f" d="M95.97,75.87c-1.63-.15-2.19-.11-3.72-.7-1.66-.64-2.17-1.12-3.56-2.22-2.46,6.35-21.09,49.9-21.09,49.9-1.11,2.89,.33,6.14,3.24,7.25,2.9,1.11,6.16-.33,7.27-3.23l17.86-51.01Zm-7.71,6.39l1.74,.66-12.22,31.75-1.74-.67,12.22-31.75Zm-16.41,45.23c-1.45-.55-2.18-2.18-1.62-3.63,.56-1.45,2.18-2.17,3.63-1.61,1.45,.56,2.17,2.18,1.62,3.63-.56,1.45-2.18,2.17-3.63,1.61Z" />
                    </g>
                    <g>
                        <polygon fill="#f1b43f" points="138.59 92.46 123.01 54.84 124.09 49.44 118.18 40.93 115.93 41.79 113.69 42.65 115.01 52.92 119.43 56.21 133.08 94.57 138.59 92.46" />
                        <path fill="#f1b43f" d="M141.78,95.59l-8.97,3.43,8.44,27.7c1.36,3.54,5.34,5.3,8.88,3.94,3.54-1.36,5.31-5.32,3.95-8.86l-12.31-26.22Zm5.87,25.71l-1.95,.75-7.7-20.01,1.95-.75,7.7,20.01Z" />
                    </g>
                </g>
                <g>
                    <path d="M35.49,155.57l6.11,15.82h-2.98l-1.49-4.19h-6.33l-1.49,4.19h-2.87l6.09-15.82h2.95Zm-1.53,2.73l-2.4,6.8h4.84l-2.38-6.8h-.07Z" />
                    <path d="M45.8,155.57v15.82h-2.53v-15.82h2.53Z" />
                    <path d="M59.77,165.72c0,3.01-1.51,5.98-4.95,5.98-1.44,0-3.06-.51-3.84-1.8h-.04v5.72h-2.53v-15.69h2.4v1.55h.04c.73-1.33,2.09-1.86,3.55-1.86,3.6,0,5.38,2.75,5.38,6.09Zm-5.71,3.99c2.29,0,3.18-2.04,3.18-4.03s-.96-4.05-3.2-4.05c-2.35,0-3.2,1.99-3.2,4.05s.98,4.03,3.22,4.03Z" />
                    <path d="M63.99,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
                    <path d="M83.61,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                    <path d="M96.91,155.57v2.39h-5.04v13.43h-2.78v-13.43h-5.02v-2.39h12.84Z" />
                    <path d="M100.71,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
                    <path d="M120.95,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
                    <path d="M126.13,156.5v3.43h2.29v1.88h-2.29v6.25c0,1.2,.29,1.44,1.27,1.44,.47,0,.93-.04,1.02-.09v1.95c-1,.11-1.29,.13-1.64,.13-2.42,0-3.18-.78-3.18-3.08v-6.6h-1.91v-1.88h1.91v-3.43h2.53Z" />
                    <path d="M140.19,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                    <path d="M162.49,160.6h-2.78c-.56-2.1-1.87-3.15-3.95-3.15-3.02,0-4.82,2.5-4.82,6.03s1.78,6.03,4.82,6.03c2.27,0,3.75-1.6,4.04-4.14h2.71c-.29,3.79-2.84,6.4-6.75,6.4-2.24,0-4.06-.8-5.49-2.35-1.4-1.57-2.11-3.57-2.11-5.94,0-4.52,2.82-8.29,7.6-8.29,3.66,0,6.37,2.06,6.73,5.41Z" />
                    <path d="M174.31,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.26,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                    <path d="M183.77,159.69v2.44c-.38-.07-.73-.11-1.09-.11-1.89,0-3.11,1.64-3.11,3.83v5.54h-2.53v-11.46h2.38v2.22h.04c.36-1.46,2.07-2.53,3.35-2.53,.49,0,.58,0,.96,.07Z" />
                    <path d="M195.32,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
                </g>
            </svg>

        </div>

        <div class="care-title">
            <h3>Extended warranty service</h3>
            <div class="care-title__subtitle">
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.4" y="0.4" width="12.2" height="12.2" rx="6.1" stroke="#007DE1" stroke-width="0.8" />
                    <path d="M6.87598 7.90527H5.78711C5.79036 7.60254 5.81641 7.34863 5.86523 7.14355C5.91406 6.93522 5.99544 6.74642 6.10938 6.57715C6.22656 6.40788 6.38118 6.22884 6.57324 6.04004C6.72298 5.89681 6.85807 5.76172 6.97852 5.63477C7.09896 5.50456 7.19499 5.36784 7.2666 5.22461C7.33822 5.07812 7.37402 4.91048 7.37402 4.72168C7.37402 4.5166 7.33984 4.34245 7.27148 4.19922C7.20312 4.05599 7.10221 3.94694 6.96875 3.87207C6.83854 3.7972 6.67578 3.75977 6.48047 3.75977C6.31771 3.75977 6.16471 3.79232 6.02148 3.85742C5.87826 3.91927 5.7627 4.01693 5.6748 4.15039C5.58691 4.2806 5.53971 4.45312 5.5332 4.66797H4.35645C4.36296 4.25781 4.46061 3.91276 4.64941 3.63281C4.83822 3.35286 5.09212 3.1429 5.41113 3.00293C5.73014 2.86296 6.08659 2.79297 6.48047 2.79297C6.91667 2.79297 7.28939 2.86784 7.59863 3.01758C7.90788 3.16406 8.14388 3.37891 8.30664 3.66211C8.47266 3.94206 8.55566 4.2806 8.55566 4.67773C8.55566 4.96419 8.4987 5.22461 8.38477 5.45898C8.27083 5.6901 8.12272 5.90658 7.94043 6.1084C7.75814 6.30697 7.5612 6.50553 7.34961 6.7041C7.16732 6.87012 7.04362 7.05078 6.97852 7.24609C6.91341 7.43815 6.87923 7.65788 6.87598 7.90527ZM5.68945 9.42871C5.68945 9.25293 5.74967 9.10482 5.87012 8.98438C5.99056 8.86068 6.15495 8.79883 6.36328 8.79883C6.57161 8.79883 6.736 8.86068 6.85645 8.98438C6.97689 9.10482 7.03711 9.25293 7.03711 9.42871C7.03711 9.60449 6.97689 9.75423 6.85645 9.87793C6.736 9.99837 6.57161 10.0586 6.36328 10.0586C6.15495 10.0586 5.99056 9.99837 5.87012 9.87793C5.74967 9.75423 5.68945 9.60449 5.68945 9.42871Z" fill="#007DE1" />
                </svg>
                <a class="overlay-modal__trigger" href="#" data-modal="warranty-info">Learn more</a>
            </div>

        </div>

    </div>

    <div class="hero-product__warranty__bottom">
        <div class="radio-item">
            <input class="custom-radio custom-radio--warranty" name="care" id="care-no" type="radio" value="care-no" checked>
            <label for="care-no">Without extended warranty</label>
        </div>

        <div class="radio-item">
            <input class="custom-radio custom-radio--warranty" name="care" id="care-plus" type="radio" value="care-plus" data-title="AlphaTheta Care Plus">
            <label for="care-plus">AlphaTheta Care Plus (+ €20)</label>
        </div>

        <div class="radio-item">
            <input class="custom-radio custom-radio--warranty" name="care" id="care-pro" type="radio" value="care-pro" data-title="AlphaTheta Care Pro">
            <label for="care-pro">AlphaTheta Care Pro (+ €25)</label>
        </div>

    </div>
</div>

<section class="overlay-modal" data-modal="warranty-info">
    <div class="overlay-modal__overlay">
        <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

        <div class="overlay-modal__inner">
            <span class="overlay-modal__close overlay-modal__trigger--close"><span class="icon-cross">
                    <span class="icon-cross__inner"></span>
                </span></span>

            <div class="overlay-modal__content">
                <h3 class="heading heading--4">
                    <span data-step="1">What is the extended warranty?</span>
                </h3>

                <div class="overlay-modal__description">
                    <div class="form-container__info">
                        <br>
                        <h3 class="form-container__info--title">AlphaTheta Care Plus:</h3>
                        <p class="form-container__info--text">
                            Free repair for a total of 3 years (1-year manufacturer warranty +2 years extended warranty)
                            for natural failure in the use case of following the manual, such as the exhaustion of
                            buttons and faders.
                        </p>
                        <br>
                        <h3 class="form-container__info--title">AlphaTheta Care Pro:</h3>
                        <p class="form-container__info--text">
                            In addition to the natural failure, Pro covers a 3-year warranty for accidental damage such
                            as dropping liquid spills and dropping the equipment, and it also has a free loaner units
                            service to minimize the damage of running the venue business.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="overlay-modal" data-modal="atc-care">
    <div class="overlay-modal__overlay">
        <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

        <div class="overlay-modal__inner">
            <span class="overlay-modal__close overlay-modal__trigger--close"></span>

            <div class="overlay-modal__content">
                <h3 class="heading heading--4">
                    <span class="form-title"></span>
                </h3>
                <br>

                <form id="form-atccare" class="form-container" novalidate>
                    <div class="client">
                        <div class="client__type">
                            <div class="customer-field">
                                <input class="custom-radio" name="care" id="private" type="radio" value="private" checked>
                                <label for="private">Private client</label>
                            </div>
                        </div>
                        <div class="client__type">
                            <div class="customer-field">
                                <input class="custom-radio" name="care" id="business" type="radio" value="business">
                                <label for="business">Business client</label>
                            </div>
                        </div>
                    </div>

                    <div class="overlay-modal__form">
                        <div class="input-field">
                            <div class="input-field__inner">
                                <input class="input-field__info" type="text" name="firstname" value="" required>
                                <span class="input-field__placeholder">Name</span>
                            </div>
                        </div>
                        <br>
                        <div class="input-field">
                            <div class="input-field__inner">
                                <input class="input-field__info" type="text" name="surname" value="" required>
                                <span class="input-field__placeholder">Surname</span>
                            </div>
                        </div>
                        <br>

                        <div class="business-field hidden">
                            <div class="input-field">
                                <div class="input-field__inner">
                                    <input class="input-field__info" type="text" name="company" value="" required disabled>
                                    <span class="input-field__placeholder">Company name</span>
                                </div>
                            </div>
                            <br>
                            <div class="input-field">
                                <div class="input-field__inner">
                                    <input class="input-field__info" type="text" name="vat" value="" required disabled>
                                    <span class="input-field__placeholder">VAT number</span>
                                </div>
                            </div>
                            <br>
                        </div>

                        <div class="input-field">
                            <div class="input-field__inner">
                                <input class="input-field__info" type="text" name="email" value="" required>
                                <span class="input-field__placeholder">E-mail address</span>
                            </div>
                        </div>
                        <br>
                        <div class="input-field">
                            <div class="input-field__inner">
                                <input class="input-field__info" type="text" name="confirm-email" value="" required>
                                <span class="input-field__placeholder">Confirm e-mail address</span>
                            </div>
                        </div>

                        <div class="overlay-modal__note">
                            <div class="checkbox">
                                <label class="checkbox__inner">
                                    <input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
                                    <span class="checkbox__spoof">
                                        <span class="checkbox__icon">
                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                            </svg>

                                        </span>
                                    </span>
                                    <span class="checkbox__label">
                                        <label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
                                    </span>
                                </label>
                            </div>
                        </div>

                        <div id="error-atccare" class="hidden">
                            This is an error
                        </div>

                        <div class="overlay-modal__action">
                            <button type="submit" href="#" class="action action--normal action--on-light">
                                <span class="action__label">Buy now</span>
                                <span class="action__bg"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
 
{{!-- Extended warranty --}}
<div class="hero-product__warranty">
  <div class="hero-product__warranty__top">

    <div class="care-icon">
      {{render '@care-icon' }}
    </div>

    <div class="care-title">
      <h3>Extended warranty service</h3>
      {{render '@care-info' }}
    </div>

  </div>

  <div class="hero-product__warranty__bottom">
    {{render '@radio-form' }}
  </div>
</div>

{{!-- Learn more --}}
<section class="overlay-modal" data-modal="warranty-info">
  <div class="overlay-modal__overlay">
    <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

    <div class="overlay-modal__inner">
      <span class="overlay-modal__close overlay-modal__trigger--close"><span class="icon-cross">
          <span class="icon-cross__inner"></span>
        </span></span>

      <div class="overlay-modal__content">
        <h3 class="heading heading--4">
          <span data-step="1">What is the extended warranty?</span>
        </h3>

        <div class="overlay-modal__description">
          <div class="form-container__info">
            <br>
            <h3 class="form-container__info--title">AlphaTheta Care Plus:</h3>
            <p class="form-container__info--text">
              Free repair for a total of 3 years (1-year manufacturer warranty +2 years extended warranty)
              for natural failure in the use case of following the manual, such as the exhaustion of
              buttons and faders.
            </p>
            <br>
            <h3 class="form-container__info--title">AlphaTheta Care Pro:</h3>
            <p class="form-container__info--text">
              In addition to the natural failure, Pro covers a 3-year warranty for accidental damage such
              as dropping liquid spills and dropping the equipment, and it also has a free loaner units
              service to minimize the damage of running the venue business.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{!-- Radio buttons --}}
<section class="overlay-modal" data-modal="atc-care">
  <div class="overlay-modal__overlay">
    <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

    <div class="overlay-modal__inner">
      <span class="overlay-modal__close overlay-modal__trigger--close">{{ @icon-cross }}</span>

      <div class="overlay-modal__content">
        <h3 class="heading heading--4">
          <span class="form-title"></span>
        </h3>
        <br>

        <form id="form-atccare" class="form-container" novalidate>
          <div class="client">
            <div class="client__type">
              <div class="customer-field">
                <input class="custom-radio" name="care" id="private" type="radio" value="private" checked>
                <label for="private">Private client</label>
              </div>
            </div>
            <div class="client__type">
              <div class="customer-field">
                <input class="custom-radio" name="care" id="business" type="radio" value="business">
                <label for="business">Business client</label>
              </div>
            </div>
          </div>

          <div class="overlay-modal__form">
            <div class="input-field">
              <div class="input-field__inner">
                <input class="input-field__info" type="text" name="firstname" value="" required>
                <span class="input-field__placeholder">Name</span>
              </div>
            </div>
            <br>
            <div class="input-field">
              <div class="input-field__inner">
                <input class="input-field__info" type="text" name="surname" value="" required>
                <span class="input-field__placeholder">Surname</span>
              </div>
            </div>
            <br>

            <div class="business-field hidden">
              <div class="input-field">
                <div class="input-field__inner">
                  <input class="input-field__info" type="text" name="company" value="" required disabled>
                  <span class="input-field__placeholder">Company name</span>
                </div>
              </div>
              <br>
              <div class="input-field">
                <div class="input-field__inner">
                  <input class="input-field__info" type="text" name="vat" value="" required disabled>
                  <span class="input-field__placeholder">VAT number</span>
                </div>
              </div>
              <br>
            </div>

            <div class="input-field">
              <div class="input-field__inner">
                <input class="input-field__info" type="text" name="email" value="" required>
                <span class="input-field__placeholder">E-mail address</span>
              </div>
            </div>
            <br>
            <div class="input-field">
              <div class="input-field__inner">
                <input class="input-field__info" type="text" name="confirm-email" value="" required>
                <span class="input-field__placeholder">Confirm e-mail address</span>
              </div>
            </div>

            <div class="overlay-modal__note">
              <div class="checkbox">
                <label class="checkbox__inner">
                  <input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
                  <span class="checkbox__spoof">
                    <span class="checkbox__icon">
                      {{render '@icon-check' }}
                    </span>
                  </span>
                  <span class="checkbox__label">
                    <label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
                  </span>
                </label>
              </div>
            </div>

            <div id="error-atccare" class="hidden">
              This is an error
            </div>

            <div class="overlay-modal__action">
              <button type="submit" href="#" class="action action--normal action--on-light">
                <span class="action__label">Buy now</span>
                <span class="action__bg"></span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
 
/* No context defined. */
  • Content: 
    // New styling 
.hero-product__warranty {
    max-width: var(--section--2);
    background-color: var(--color--neutrals-1);
    border-radius: var(--gap);
    padding: var(--gap--4);
    margin: var(--gap--8) 0;
  
    &__top {
      display: flex;
  
      .care-title {
        line-height: var(--gap--6);

        &__subtitle {
          display: flex;
          align-items: center;
  
          svg {
            flex: 0 auto !important;
            width: 20px;
            height: 20px;
            padding-right: var(--gap--1);
          }
  
          a {
            color: var(--color--action);
            text-decoration: none;
  
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  
    &__bottom {
      margin-top: var(--gap--4);
    }
}

// Radio buttons
.custom-radio {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color--neutrals-0);
    border: 3px solid var(--color--neutrals-2);
    transition: 400ms;
  
    &:checked {
        background-color: var(--color--action);
    }
}

.customer-field {
    display: flex;
    align-items: center;
    background-color: var(--color--neutrals-1);
    border-radius: var(--gap--1);
    padding: var(--gap--2) var(--gap--1);

    input[type="radio"] {
        width: 20px;
        height: 20px;
        margin: 0 var(--gap--2);
        border-radius: 50% !important;
        cursor: pointer;
    }

    label {
      cursor: pointer !important;
    }
}

.form-container {
    background-color: var(--color--neutrals-0);
}

.client {
    margin: var(--gap--2) 0;

    &__type {
        display: flex;
        flex-direction: column;

        span {
            color: var(--color--neutrals-4);
            padding: var(--gap--2) 0;
        }

        &:first-of-type {
            margin-bottom: var(--gap--6);
        }
    }

    @media (min-width: 500px) {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: var(--gap--5);
    }
}
  
.checkbox {
    &__label {
        color: var(--color--neutrals-4);

        a {
            color: var(--color--action);
            text-decoration: none;
        }
    }
}

.legal {
  color: var(--color--neutrals-4);
  margin: 0 0 var(--gap--6) 0 !important;

  a {
    color: var(--color--action);
    text-decoration: none;
  }
}

// Error
.input-field__info {
  &.has-error {
    border: 1px solid var(--color--negative) !important;
  }
}
  • URL: /components/raw/product-warranty/_product-warranty.scss
  • Filesystem Path: ../src/03_molecules/product-warranty/_product-warranty.scss
  • Size: 2.5 KB
  • Content: 
    const CARE = (function(window, undefined) {

  const SETTINGS = {
    debug: false,
    modal: 'atc-care',
  };

  const SELECTORS = {
    customerType: '.customer-field',
    businessField: '.business-field',
    form: '#form-atccare',
    item: '.input-field__info',
    formTitle: '.form-title',
    triggerTitle: '.custom-radio--warranty',
    error: '#error-atccare',
    action: '.hero-product__actions .action--modal',
  };

  const CLASSES = {
    error: 'has-error',
    hidden: 'hidden',
  }

  function onChange() {
    const formTitle = document.querySelector(SELECTORS.formTitle);
    const warrantyName = this.dataset.title;

    formTitle.innerHTML = warrantyName;

    const action = document.querySelector(SELECTORS.action);
    if (action) {
      if (warrantyName) {
        action.dataset.modal = SETTINGS.modal;
      } else {
        delete action.dataset.modal;
      }
    }
  }

  function clientTypeToggle(e) {
    const businessField = document.querySelector(SELECTORS.businessField);
    const wrapper = e.currentTarget;
    const input = wrapper.querySelector('input');
    const clientType = input.getAttribute("value");

    input.click();

    businessField.classList.toggle(CLASSES.hidden);
    const elements = businessField.querySelectorAll('input');

    if (clientType === "business") {
      businessField.classList.remove(CLASSES.hidden);
      [...elements].forEach(e => e.removeAttribute('disabled'));
    } else {
      businessField.classList.add(CLASSES.hidden);
      [...elements].forEach(e => e.setAttribute('disabled', true));
    }
  }

  function init() {
    if (SETTINGS.debug) { console.log('CARE.init'); }

    const form = document.querySelector(SELECTORS.form);
    if (form) {
      form.addEventListener('submit', onSubmit);
    }

    const error = document.querySelector(SELECTORS.error);
    if (error) {
      error.classList.add(CLASSES.hidden);
    }

    const triggerTitle = document.querySelectorAll(SELECTORS.triggerTitle);
    const customerType = document.querySelectorAll(SELECTORS.customerType);

    [...triggerTitle].forEach((trigger) => {
      trigger.addEventListener('click', onChange)
    });

    [...customerType].forEach((type) => {
      type.addEventListener('click', clientTypeToggle)
    });

  };

  function onSubmit(e) {
    if (!validate(e)) {
      e.preventDefault();
    }
  }

  function validate(e) {
    let errors = false;

    const form = e.target;

    [...form.elements].forEach(element => {
      if (!element.checkValidity()) {
        errors = true;
        setElementError(element);
      } else {
        removeElementError(element);
      }
    })

    if (errors) {
      e.preventDefault();
    }

    return !errors;
  }

  function setElementError(element) {
    const item = element.closest(SELECTORS.item);

    if (item) {
      item.classList.add(CLASSES.error);
    }
  }

  function removeElementError(element) {
    const item = element.closest(SELECTORS.item);

    if (item) {
      item.classList.remove(CLASSES.error);
    }
  }

  document.addEventListener('DOMContentLoaded', init);

}(window));
  • URL: /components/raw/product-warranty/product-warranty.js
  • Filesystem Path: ../src/03_molecules/product-warranty/product-warranty.js
  • Size: 3.1 KB

No notes defined.