Pattern Library by Cloudy knot

Stepper 

<main class="main-wrapper">
    <div class="stepper-indicater">
        <button class="indicater js-step" aria-current="step" aria-controls="step1"></button>
        <div class="connect"></div>
        <button class="indicater js-step" aria-controls="step2"></button>
        <div class="connect"></div>
        <button class="indicater js-step" aria-controls="step3"></button>
    </div>
    <div class="stepper-contents-container">
        <div id="step1" class="stepper-contents" aria-hidden="false">
            <h2 class="label heading2">Step1</h2>
            <div class="control">
                <button class="control-back js-stepper-back" aria-hidden="true">BACK</button>
                <button class="control-next js-stepper-next">NEXT</button>
            </div>
        </div>
        <div id="step2" class="stepper-contents" aria-hidden="true">
            <h2 class="label heading2">Step2</h2>
            <div class="control">
                <button class="control-back js-stepper-back">BACK</button>
                <button class="control-next js-stepper-next">NEXT</button>
            </div>
        </div>
        <div id="step3" class="stepper-contents" aria-hidden="true">
            <h2 class="label heading2">Step3</h2>
            <div class="control">
                <button class="control-back js-stepper-back">BACK</button>
                <button class="control-next js-stepper-next" aria-hidden="true">NEXT</button>
            </div>
        </div>
    </div>
</main>
 
<main class="main-wrapper">
  <div class="stepper-indicater">
    <button class="indicater js-step" aria-current="step" aria-controls="step1"></button>
    <div class="connect"></div>
    <button class="indicater js-step" aria-controls="step2"></button>
    <div class="connect"></div>
    <button class="indicater js-step" aria-controls="step3"></button>
  </div>
  <div class="stepper-contents-container">
    <div id="step1" class="stepper-contents" aria-hidden="false">
      <h2 class="label heading2">Step1</h2>
      <div class="control">
        <button class="control-back js-stepper-back" aria-hidden="true">BACK</button>
        <button class="control-next js-stepper-next">NEXT</button>
      </div>
    </div>
    <div id="step2" class="stepper-contents" aria-hidden="true">
      <h2 class="label heading2">Step2</h2>
      <div class="control">
        <button class="control-back js-stepper-back">BACK</button>
        <button class="control-next js-stepper-next">NEXT</button>
      </div>
    </div>
    <div id="step3" class="stepper-contents" aria-hidden="true">
      <h2 class="label heading2">Step3</h2>
      <div class="control">
        <button class="control-back js-stepper-back">BACK</button>
        <button class="control-next js-stepper-next" aria-hidden="true">NEXT</button>
      </div>
    </div>
  </div>
</main>
 
/* No context defined. */
  • Content: 
    /* /js/modules/Stepper.js */

/**
* Stepper UI class
*/
export class Stepper {
  constructor(next, back) {
    this.indicaters = document.querySelectorAll('.js-step');
    this.next = document.querySelectorAll(next);
    this.back = document.querySelectorAll(back);
    this.label = document.querySelector('.stepper-contents .label');

    this.container = document.querySelectorAll('.stepper-contents');
    this.containerArray = [].slice.call(this.container);

    this.stepNext();
    this.stepBack();
    this.stepPhase();
  }

  stepNext() {
    for (let i = 0; i < this.next.length; i++) {
      this.next[i].addEventListener('click', e => {
        e.preventDefault();
        this.container[i].setAttribute('aria-hidden', 'true');
        this.container[i + 1].setAttribute('aria-hidden', 'false');
        this.indicaters[i].removeAttribute('aria-current');
        this.indicaters[i + 1].setAttribute('aria-current', 'step');
      }, { passive: false });
    }
  }

  stepBack() {
    for (let i = 0; i < this.back.length; i++) {
      this.back[i].addEventListener('click', e => {
        e.preventDefault();
        this.container[i].setAttribute('aria-hidden', 'true');
        this.container[i - 1].setAttribute('aria-hidden', 'false');
        this.indicaters[i].removeAttribute('aria-current');
        this.indicaters[i - 1].setAttribute('aria-current', 'step');
      }, { passive: false });
    }
  }

  stepPhase() {
    for (let i = 0; i < this.indicaters.length; i++) {
      this.indicaters[i].addEventListener('click', e => {
        e.preventDefault();

        for (let i = 0; i < this.indicaters.length; i++) {
          if (this.indicaters[i].getAttribute('aria-current') === 'step') {
            this.indicaters[i].removeAttribute('aria-current', 'step');
          }
        }

        this.indicaters[i].setAttribute('aria-current', 'step');

        let pairedId = document.getElementById(this.indicaters[i].getAttribute('aria-controls'));

        for (let i = 0; i < this.container.length; i++) {
          if (this.container[i].hasAttribute('aria-hidden', 'false')) {
            this.container[i].setAttribute('aria-hidden', 'true');
          }
        }
        pairedId.setAttribute('aria-hidden', 'false');

        pairedId.setAttribute('tabindex', '0');
        pairedId.focus();
      }, { passive: false });
    }
  }
}
  • URL: /components/raw/stepper/index.js
  • Filesystem Path: src/components/2-dynamic-ui/stepper/index.js
  • Size: 2.4 KB
  • Content: 
    .stepper-indicater {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
}
.stepper-indicater .indicater {
  display: flex;
  counter-increment: step-counter;
  min-width: 44px;
  height: 44px;
  border: solid 2px hsl(229deg, 73%, 19%);
  background-color: var(--white);
  border-radius: 50%;
  color: hsl(229deg, 73%, 19%);
}
.stepper-indicater .indicater::before {
  content: counter(step-counter);
  margin: auto;
}
.stepper-indicater .indicater[aria-current=step] {
  background-color: hsl(229deg, 73%, 19%);
  font-weight: 600;
  font-size: var(--18px-rem);
  color: var(--white);
}
.stepper-indicater .connect {
  display: flex;
  height: 5px;
  background-color: var(--contrast-limit-gray);
  border-radius: 3px;
}
@media print, screen and (min-width:64.0625em) {
  .stepper-indicater .connect {
    width: 15%;
    margin: auto 1.5%;
  }
}
@media screen and (max-width:64em) {
  .stepper-indicater .connect {
    width: 10%;
    margin: auto 2%;
  }
}

.stepper-contents-container {
  display: flex;
  width: 100%;
}

.stepper-contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin: 1.5rem auto auto;
  text-align: center;
}
.stepper-contents[aria-hidden=false] {
  visibility: visible;
}
.stepper-contents[aria-hidden=true] {
  display: none;
}
.stepper-contents .control {
  display: flex;
  justify-content: space-evenly;
}
.stepper-contents .control button {
  display: block;
  position: relative;
  width: 4.1rem;
  height: 3rem;
  -webkit-padding-start: 0.1rem;
  padding-inline-start: 0.1rem;
  border: 2px solid var(--black);
  text-align: center;
  text-decoration: none;
}
.stepper-contents .control button[aria-hidden=false] {
  visibility: visible;
}
.stepper-contents .control button[aria-hidden=true] {
  visibility: hidden;
  display: inline-block;
}
.stepper-contents .control button::before {
  content: "";
}
.stepper-contents .control button.control-back::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -0.1em;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--black);
  border-right: 1.5px solid var(--black);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.stepper-contents .control button.control-next::after {
  content: "";
  display: inline-block;
  position: relative;
  top: -0.1em;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--black);
  border-right: 1.5px solid var(--black);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
  • URL: /components/raw/stepper/style.css
  • Filesystem Path: src/components/2-dynamic-ui/stepper/style.css
  • Size: 2.5 KB

No notes defined.