Stepper

stablev1.0.0

Steppers are number inputs that allow the user to choose a value with ease.

Overview

At its most fundamental form, a stepper is composed by 2 components, 2 buttons - and + and an input type="number". You can specify minimal and a maximal values.

This component can be extended with a visual addon showing interactive icons giving the user a visual feedback of his choice. Check the addon section for further information.

Usage

Dependencies

To get the stepper component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import "design-system/src/scss/01-atoms/btn.scss";
@import "design-system/src/scss/02-molecules/stepper.scss";

include /node_modules/design-system/src/pug/02-molecules/stepper

import Stepper from 'design-system/src/js/02-molecules/stepper';

Basic code

A stepper is composed by 2 components, 2 buttons - and + and an input type="number" and it must be initialized with JS.

<div class="stepper">
  <div class="stepper__buttons">
    <button class="stepper__remove stepper__button" type="button" aria-label="Remove 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-minus"></use>
      </svg>
    </button>
    <input class="stepper__input" type="number" pattern="[0-9]*" value="3" data-qty="5" max="5" min="0" />
    <button class="stepper__add stepper__button" type="button" aria-label="Add 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-plus"></use>
      </svg>
    </button>
  </div>
</div>

+stepper('5', '0', '3', '')

Stepper();

Pug mixin

We created a pug mixin to implement the stepper with ease, find the parameters below:

+stepper(max, min, value, addon)

#	Name	Type	Default	Required	Description
1	`max`	`integer`	`infinite`	No	Set a maximum value for the stepper.
2	`min`	`integer`	`infinite`	No	Set a minimum value for the stepper.
3	`value`	`integer`	0	No	Specify the default value for the stepper.
4	`addon`	`String`	none	No	Choose between `left` or `right` to render the component's addon to either side of it. Specifying nothing will create the stepper without the addon.

HTML attributes

Get more control over the input's value by specifying one of the following attribute:

max
min
value
data-alone
pattern

Max

Add a max attribute to the input to control the maximum value allowed by the stepper.

Max value set to 10

HTML
Pug

<input class="stepper__input" type="number" pattern="[0-9]*" data-alone="true" max="10" value="10">

+stepper('10', '', '10', '')

Min

Add a min attribute to the input to control the minimum value allowed by the stepper.

Min value set to 3

HTML
Pug

<input class="stepper__input" type="number" pattern="[0-9]*" data-alone="true" min="3" value="3">

+stepper('', '3', '3', '')

Value

Add a value attribute to the input to control the default value for the stepper.

Min value set to 3

HTML
Pug

<input class="stepper__input" type="number" pattern="[0-9]*" data-alone="true" value="8">

+stepper('', '', '8', '')

Data-alone

Add a data-alone attribute to the input to use the component without the addon. When using Pug, not defining an addon automatically sets this attribute for you. Remember not to add it when you use the addon.

Stepper without addon

HTML
Pug

<input class="stepper__input" type="number" pattern="[0-9]*" data-alone="true" value="3">

+stepper('', '', '3', '')

Pattern

Add a pattern attribute to the input to use force the numeric-only keyboard on mobile devices. Pug automatically adds this attribute for you.

Stepper without addon

HTML
Pug

<input class="stepper__input" type="number" pattern="[0-9]*" data-alone="true" value="3">

+stepper('', '', '3', '')

Addon

In certain forms, we can add a specific addon to our stepper in order to display people icons.

How many of your friends drink beer?

How many of your friends drink IPA?

Depending on where we want to display this addon, we must do:

Left: If we want to display our addon on the left side of the input, we need to add the code inside the stepper component, just before the stepper__buttons element.
In case we are using Pug, it is enough to declare left to the mixin.
Right: If we want to display our addon on the right side of the input, we need to add the code inside the stepper component, immediately after the stepper__buttons element.
In case we are using Pug, it is enough to declare right to the mixin.

HTML
Pug

<!-- Left side example -->
<div class="stepper">

  <div class="stepper__icon-trigger" aria-hidden="aria-hidden">
    <div class="stepper__icon stepper__active" tabindex="-1" value="1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon stepper__active" tabindex="-1" value="2">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon stepper__active" tabindex="-1" value="3">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon" tabindex="-1" value="4">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon" tabindex="-1" value="5">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon stepper__plus" tabindex="-1" value="6">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-plus"></use>
      </svg>
    </div>
  </div>

  <div class="stepper__buttons">
    <button class="stepper__remove stepper__button" type="button" aria-label="Remove 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-minus"></use>
      </svg>
    </button>
    <input class="stepper__input" type="number" pattern="[0-9]*" max="8" min="0" value="3">
    <button class="stepper__add stepper__button" type="button" aria-label="Add 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-plus"></use>
      </svg>
    </button>
  </div>

</div>

<!-- Right side example -->
<div class="stepper">

  <div class="stepper__buttons">
    <button class="stepper__remove stepper__button" type="button" aria-label="Remove 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-minus"></use>
      </svg>
    </button>
    <input class="stepper__input" type="number" pattern="[0-9]*" max="8" min="0" value="3">
    <button class="stepper__add stepper__button" type="button" aria-label="Add 1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-plus"></use>
      </svg>
    </button>
  </div>

  <div class="stepper__icon-trigger" aria-hidden="aria-hidden">
    <div class="stepper__icon stepper__active" tabindex="-1" value="1">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon stepper__active" tabindex="-1" value="2">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon stepper__active" tabindex="-1" value="3">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon" tabindex="-1" value="4">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon" tabindex="-1" value="5">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-person-stepper-only"></use>
      </svg>
    </div>
    <div class="stepper__icon stepper__plus" tabindex="-1" value="6">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-plus"></use>
      </svg>
    </div>
  </div>

</div>

// Left side example
+stepper('8', '0', '3', 'left')

// Right side example
+stepper('8', '0', '3', 'right')