Vebego Component Library
<nav class="mol-footer-utils">
    <ul data-reset-text="Reset cookies">
        <li><a class="atm-link " href="#" title="Privacy statement" aria-label="" target="">Privacy statement</a></li>
        <li><a class="atm-link " href="#" title="Disclaimer" aria-label="" target="">Disclaimer</a></li>
        <li><a class="atm-link " href="#" title="Reset cookies" aria-label="" target="">Reset cookies</a></li>
    </ul>
</nav>
<nav class="mol-footer-utils">
    <ul data-reset-text="Reset cookies">
        {{#each links}}
            <li>{{ render '@link' this merge=true }}</li>
        {{/each}}
    </ul>
</nav>
{
  "links": [
    {
      "href": "#",
      "title": "Privacy statement",
      "text": "Privacy statement"
    },
    {
      "href": "#",
      "title": "Disclaimer",
      "text": "Disclaimer"
    },
    {
      "href": "#",
      "title": "Reset cookies",
      "text": "Reset cookies"
    }
  ]
}
  • Content:
    .mol-footer-utils {
        ul {
            @apply flex flex-wrap;
    
            li {
                @apply whitespace-nowrap;
    
                .atm-link {
                    @apply text-gray hover:text-cta;
                    @apply no-underline hover:underline;
                }
    
                + li {
                    &::before {
                        content: '\\';
                        @apply inline-block mx-2;
                    }
                }
            }
        }
    }
    
  • URL: /components/raw/footer-utils/footer-utils.css
  • Filesystem Path: src\components\03-molecules\footer-utils\footer-utils.css
  • Size: 453 Bytes
  • Content:
    // ============================================================================
    // Footer utils - reset cookies link
    // ============================================================================
    // Appends a "Reset cookies" link to the footer utils list which reopens the
    // Cookiebot banner so the visitor can change or withdraw their permissions.
    
    (function () {
    
        'use strict';
    
        function addResetLink() {
            // There is only ever one footer utils molecule per page.
            var list = document.querySelector('.mol-footer-utils > ul');
    
            if (!list || list.querySelector('#reset-cookies')) {
                return;
            }
    
            var item = document.createElement('li');
            item.id = 'reset-cookies';
    
            var link = document.createElement('a');
            link.className = 'atm-link';
            link.href = '#';
            link.textContent = list.getAttribute('data-reset-text') || 'Reset cookies';
            link.addEventListener('click', function (event) {
                event.preventDefault();
                if (window.Cookiebot) {
                    window.Cookiebot.renew();
                }
            });
    
            item.appendChild(link);
            list.appendChild(item);
        }
    
        // Fires once Cookiebot has loaded, regardless of the consent state.
        window.addEventListener('CookiebotOnLoad', addResetLink);
    
        // Cookiebot loads async and may already be initialized before this runs.
        if (window.Cookiebot) {
            addResetLink();
        }
    })();
    
  • URL: /components/raw/footer-utils/footer-utils.js
  • Filesystem Path: src\components\03-molecules\footer-utils\footer-utils.js
  • Size: 1.5 KB

No notes defined.