steps

Checklist Step

These steps are used to group together a number of steps for a task. They're often used for grouping together display steps for confident and optimistic persona users.

v1.1.0Requires JS

View raw

<!-- Version: 1.1.0 -->
<div class='body-container body-container--checklist'>
  <!-- Step Header -->
<header class='step-header'><!-- Left Header Button -->
    <button onclick='backButtonClicked()' class='step-header__action left-0  btn--back-step'>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20'><path d='M10.32 19.71l.9-.854c.224-.225.224-.584 0-.764l-6.964-7.007H19.62c.27 0 .539-.225.539-.54V9.288c0-.27-.27-.54-.54-.54H4.257l6.963-6.962c.225-.18.225-.54 0-.764l-.898-.854c-.18-.224-.54-.224-.764 0L.168 9.558a.517.517 0 000 .763l9.39 9.388c.224.225.583.225.763 0z' fill='currentColor'/></svg>
    </button>
    <!-- Header Title -->
    <h2 class='step-header--title'>Checklist</h2>

    <!-- Right Header Button -->
    <button onclick='cancelButtonClicked()' class='step-header__action right-0 '>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z' fill='currentColor'/></svg>
    </button>
</header>
  <article class='step-body mt-auto overflow-y-auto'>
    <!-- Optional subtitle -->
    <p class='list--checklist__subtitle'>Tap on a task for more info. Tap on the circle when you’ve completed that task.</p>
    <!-- <aside class='alert alert--checklist px-3 py-2 flex flex-row items-center relative'>
    <svg class='text-info w-12 h-12 mr-3' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle opacity='.5' cx='14' cy='14' r='14' fill='currentColor'/><circle cx='14' cy='14' r='10' fill='currentColor'/><path d='M14.195 9.25c-1.562 0-2.578.645-3.379 1.797a.445.445 0 00.118.625l.84.644a.464.464 0 00.644-.078c.488-.605.86-.957 1.621-.957.606 0 1.348.371 1.348.957 0 .45-.371.664-.957.996-.703.391-1.621.88-1.621 2.09v.176c0 .273.214.469.468.469h1.426a.463.463 0 00.469-.469v-.098c0-.84 2.441-.879 2.441-3.144 0-1.7-1.777-3.008-3.418-3.008zM14 16.555c-.762 0-1.367.605-1.367 1.347S13.238 19.25 14 19.25a1.35 1.35 0 001.348-1.348A1.35 1.35 0 0014 16.555z' fill='#fff'/></svg>
    <p class='text-sm text-gray-900'>Tap on a task for more info. Tap on the circle when you’ve completed that task.</p>
</aside> -->
    <ol class='list--checklist'>
        <li class='list--checklist__item'>
    <div class='list--checklist__item--container'>
        <span class='mr-1 align-top'>1.</span>
        <div class='popup-trigger' data-popup-trigger=''>
            <p class='list--checklist__item--text'>Testing.</p>
            <span class='list--checklist__item--info'>Tap to view more information</span>
        </div>
        <div class='list--checklist__item--checklist-container'>
            <div class='input--checklist__container'>
                <input type='checkbox' class='input--checklist__input'>
                <svg class='text-success fill-current absolute z-20 transform scale-0 opacity-0 transition-all ease-in duration-150 w-full h-full pointer-events-none' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle cx='13' cy='13' r='13' fill='currentColor'/><path d='M17.895 8.047l-7.192 7.191-2.625-2.652c-.137-.11-.355-.11-.465 0l-.793.793c-.11.11-.11.328 0 .465l3.664 3.636a.315.315 0 00.465 0l8.203-8.203c.11-.109.11-.328 0-.464l-.793-.766c-.109-.137-.328-.137-.465 0z' fill='#fff'/></svg>
                <div class='input--checklist__element'></div>
            </div>
        </div>
    </div>
</li>
        <li class='list--checklist__item'>
    <div class='list--checklist__item--container'>
        <span class='mr-1 align-top'>2.</span>
        <div class='popup-trigger' data-popup-trigger=''>
            <p class='list--checklist__item--text'>Switch to the 5GHz network for better performance on this device.</p>
            <span class='list--checklist__item--info'>Tap to view more information</span>
        </div>
        <div class='list--checklist__item--checklist-container'>
            <div class='input--checklist__container'>
                <input type='checkbox' class='input--checklist__input'>
                <svg class='text-success fill-current absolute z-20 transform scale-0 opacity-0 transition-all ease-in duration-150 w-full h-full pointer-events-none' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle cx='13' cy='13' r='13' fill='currentColor'/><path d='M17.895 8.047l-7.192 7.191-2.625-2.652c-.137-.11-.355-.11-.465 0l-.793.793c-.11.11-.11.328 0 .465l3.664 3.636a.315.315 0 00.465 0l8.203-8.203c.11-.109.11-.328 0-.464l-.793-.766c-.109-.137-.328-.137-.465 0z' fill='#fff'/></svg>
                <div class='input--checklist__element'></div>
            </div>
        </div>
    </div>
</li>
    </ol>

    <!-- Step Footer -->
<div class='step-footer--wrapper'>
    <footer class='step-footer step-footer--vertical'>
    <button onclick='primaryButtonClicked()' class='btn btn--lg btn-full-width btn--primary'>Finished</button>
</footer>
</div>


  </article>
</div>
<!-- Modal Popup -->
<div class='modal popup-modal popup-modal--full' data-popup-modal=''>
    <!-- Step Header -->
<header class='step-header'>
    <!-- Right Header Button -->
    <button  class='step-header__action right-0 popup-modal__close'>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z' fill='currentColor'/></svg>
    </button>
</header>
    <article class='step-body overflow-y-auto'>
        <div class='media-container loading'>
    <img src='https://i.imgur.com/4BHACE5.png' />
</div>


        <div class='step-content mt-4'>

    <h1 class='step-title '>Step one</h1>


    <div class='step-description '>
        <p>Step description</p>
    </div>

        </div><!-- Step Footer -->
<div class='step-footer--wrapper'>
    <footer class='step-footer step-footer--vertical'>
    <button  class='btn btn--lg btn-full-width btn--primary popup-modal__close popup-modal__finished'>I've done this</button>
</footer>
</div>
</article>
</div>
<!-- /End Modal Popup -->
<!-- Modal Popup -->
<div class='modal popup-modal popup-modal--full' data-popup-modal=''>
    <!-- Step Header -->
<header class='step-header'>
    <!-- Right Header Button -->
    <button  class='step-header__action right-0 popup-modal__close'>
        <svg class='w-5 h-5' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.67 2.92a1.125 1.125 0 00-1.59-1.59L10 8.41 2.92 1.33a1.125 1.125 0 10-1.59 1.59L8.41 10l-7.08 7.08a1.125 1.125 0 101.59 1.59L10 11.592l7.08 7.08a1.125 1.125 0 001.59-1.591L11.592 10l7.08-7.08z' fill='currentColor'/></svg>
    </button>
</header>
    <article class='step-body overflow-y-auto'>
        <div class='media-container loading'>
    <img src='https://i.imgur.com/4BHACE5.png' />
</div>


        <div class='step-content mt-4'>

    <h1 class='step-title '>Step two</h1>


    <div class='step-description '>
        <p>Step description</p>
    </div>

        </div><!-- Step Footer -->
<div class='step-footer--wrapper'>
    <footer class='step-footer step-footer--vertical'>
    <button  class='btn btn--lg btn-full-width btn--primary popup-modal__close popup-modal__finished'>I've done this</button>
</footer>
</div>
</article>
</div>
<!-- /End Modal Popup -->

//assign checklist vars. Get the required width that progress indicator needs to increase/decrease by finding total number of checklist items
let checklistItems = document.querySelectorAll('.list--checklist__item'),
    checklistProgressBar = document.querySelector('.progress-bar--checklist .progress-indicator'),
    checklistLen = checklistItems.length,
    checklistProgressInterval = 100 / checklistLen / 100,
    width = 0;

//Loop through each checklist item
checklistItems.forEach(function (checklistItem, i) {
    let checklistInput = checklistItem.querySelector('.input--checklist__input'),
        checklistContainer = checklistItem.querySelector('.input--checklist__container'),
        popupTrigger = checklistItem.querySelector('.popup-trigger');

    //Set data attribute and class for interacting with its modal
    checklistItem.classList.add(`list--checklist__item--${i}`);
    popupTrigger.setAttribute("data-popup-trigger", `${i}`);

    //When checkbox checked add finished class to parent and increase/decrease progress bar
    checklistContainer.addEventListener('click', () => {
        if (checklistInput.checked == true) {
            checklistItem.classList.add('finished');
            width += checklistProgressInterval;
        } else {
            checklistItem.classList.remove('finished');
            width -= checklistProgressInterval;
        }
        checklistProgressBar.style.transform = `scaleX(${width})`;
    })
});


// CHECKLIST MODAL
const modalTriggers = document.querySelectorAll('.popup-trigger')
const modalCloseTrigger = document.querySelectorAll('.popup-modal__close')
const modalButton = document.querySelectorAll('.popup-modal__finished')
// const bodyBlackout = document.querySelector('.overlay')
const stepBody = document.querySelector('body')

//Find and loop each button/trigger for a modal
modalTriggers.forEach(function (trigger, i) {

    //Set the data-attribute for modals
    let popupModals = document.querySelectorAll('.popup-modal');

    //Loop each modal and set data attribute to equal that of its trigger
    popupModals.forEach(function (popupModal, i) {
        popupModal.setAttribute("data-popup-modal", `${i}`);
    });

    //When clicked show modal and add class to body
    trigger.addEventListener('click', () => {
        // const { popupTrigger } = trigger.dataset

        const popupModal = document.querySelector(`[data-popup-modal="${i}"]`);
        stepBody.classList.add('modal-active');

        popupModal.classList.add('is--visible');

        modalCloseTrigger.forEach((modalCloseTriggerItem) => {
            modalCloseTriggerItem.addEventListener('click', () => {
                stepBody.classList.remove('modal-active');
                popupModal.classList.remove('is--visible')
            })
        })

        //Add finished class to corresponding checklist item and increase width of progress element
        modalButton.forEach((modalButtonItem, i) => {
            modalButtonItem.addEventListener('click', () => {
                let checklistItem = document.querySelector(`.list--checklist__item--${i}`),
                    checklistInput = checklistItem.querySelector('.input--checklist__input');

                checklistItem.classList.add('finished');

                if (checklistInput.checked == false) {
                    checklistInput.checked = true;
                    width += checklistProgressInterval;
                    checklistProgressBar.style.transform = `scaleX(${width})`;
                }
            })
        })

    })
})

Changelog

Notable changes to this step or component will be documented here.

### v1.1.0 - 15 Jul 2020

Removed HTML <div class='phone-layout phone-layout--iphonex overflow-hidden'> wrapper as no longer required
Removed the checklist alert for now.