SDC Pattern Library

Currency

Rationale

Currencies are localized for ‘en_GB’.

Variants

Adding currencies is done in the currency.config.js by adding variants.

Collated

All currencies are collated onto one page.

Context

Currencies consist of two context items; label and currency.

Label

Label is the full name of the currency and 3 letter code in brackets and must be human readable.

Unit

Currency is the localized symbol for each unit.

Scope

Global

Dependencies

  • /components/02-form-elements/input/_input.scss
  • /components/02-form-elements/input-type/_input-type.scss
  • assets/sass/partials/vars/_forms.sccs
<!-- Pounds -->
<div class="input-type input-type--currency">
    <abbr title="Pounds (GBP)" class="input-type__type" id="answer-type">£</abbr>
    <input class="input input--text input-type__input" name="answer" id="answer" value="" data-qa="input-text">
</div>


<!-- Euros -->
<div class="input-type input-type--currency">
    <abbr title="Euros (EUR)" class="input-type__type" id="answer-type">€</abbr>
    <input class="input input--text input-type__input" name="answer" id="answer" value="" data-qa="input-text">
</div>


<!-- Dollars Us -->
<div class="input-type input-type--currency">
    <abbr title="US Dollars (USD)" class="input-type__type" id="answer-type">US$</abbr>
    <input class="input input--text input-type__input" name="answer" id="answer" value="" data-qa="input-text">
</div>


<!-- Yen Japanese -->
<div class="input-type input-type--currency">
    <abbr title="Japanese Yen (JPY)" class="input-type__type" id="answer-type">JP¥</abbr>
    <input class="input input--text input-type__input" name="answer" id="answer" value="" data-qa="input-text">
</div>


/* Pounds */
{
  "label": "Pounds (GBP)",
  "currency": "£"
}


/* Euros */
{
  "label": "Euros (EUR)",
  "currency": "€"
}


/* Dollars Us */
{
  "label": "US Dollars (USD)",
  "currency": "US$"
}


/* Yen Japanese */
{
  "label": "Japanese Yen (JPY)",
  "currency": "JP¥"
}