Counter

Overview

This component pretends to recreate an analogic counter like an old alarm clock, or score display. To be used when we want to show a number that represents a leading information.

Small counter

Medium counter

Large counter

Usage

Dependencies

To get the counter 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/02-molecules/counter';

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

Basic code

The counter component is composed of :

• A div parent element with the counter class.
• A variable number of div child elements with the counter__item class, each one containing one of the numbers.

Note the attributes here:

• aria-label must be defined to explain the number on our counter component (see Aria-label below).
• role="status" is set by default and is not customisable, it means this component is supposed to change quite often (see Role below).
• aria-hidden="true" is set by default and is not customisable, it prevents the browser from reading the number twice (see Aria-hidden below).

<div class="counter counter--primary counter--xl" aria-label="Label" role="status">
  <div class="counter__item" aria-hidden="true">2</div>
  <div class="counter__item" aria-hidden="true">3</div>
  <div class="counter__item" aria-hidden="true">5</div>
  <div class="counter__item" aria-hidden="true">7</div>
</div>

+counter([2, 3, 5, 7], "primary", "xl")

Pug mixin

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

+counter(number, color, size, ariaLabel)

Modifiers

Add the following modifier to change the appearance of counter.

• Color
• Size

Color

Color modifier simply sets the color of the shapes behind the numbers.

Primary

Secondary

<!--Primary-->
<div class="counter counter--primary counter--md" aria-label="Label" role="status">

<!--Secondary-->
<div class="counter counter--secondary counter--md" aria-label="Label" role="status">

//- Primary
+counter('','primary')
//- Secondary
+counter('','secondary')

Size

Size modifier allows us to choose between 5 different sizes : xs, sm, md, lg and xl.

xs

sm

md

lg

xl

<!--Extra-small-->
<div class="counter counter--secondary counter--xs" aria-label="Label" role="status">

<!--Small-->
<div class="counter counter--secondary counter--sm" aria-label="Label" role="status">

<!--Medium-->
<div class="counter counter--secondary counter--md" aria-label="Label" role="status">

<!--Large-->
<div class="counter counter--secondary counter--lg" aria-label="Label" role="status">

<!--Extra-large-->
<div class="counter counter--secondary counter--xl" aria-label="Label" role="status">

//- Extra-small
+counter('','','xs')
//- Small
+counter('','','sm')
//- Medium
+counter('','','md')
//- Large
+counter('','','lg')
//- Extra-large
+counter('','','xl')

HTML attributes

Attributes for the counter are focused on accessibility.

• aria-label
• role
• aria-hidden

Aria-label

The aria-label attribute is used to define a string that labels the current element.

<div class="counter counter--secondary counter--xs aria-label="Current number of subscribers" role="status">

+counter('','','', 'Current number of subscribers')

Role

The role attribute is set by default to role="status" and is not customisable.

Aria-hidden

The aria-hidden attribute affects the counter items. It is set by default to true and is not customisable. The result is that these elements will be ignored by assistive technologies.