The React documentation for this component can be read from Storybook (link here)
Totaliser
To show the user's placement to an end financial goal.
Description
The totaliser can display 2 numbers - Start figure and goal figure. The symbols can show dynamic progress by typing into the length overwrite field.
Context:
The Totaliser component is a compound component containing, label, paragraph heading, and progress sub components.
Behaviour:
The Totaliser component inherits the behaviour from its sub components.
States:
NO_STATE: use when no activity has occured..is-started: use when activity is in progress but not complete..is-complete: use when activity is complete.
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-totaliser;Usage
Usage example
Amount sold
£XX,XXX
Amount
£XX,XXX
Amount sold
£XX,XXX
Amount
£XX,XXX
Amount sold
£XX,XXX
Amount
£XX,XXX
Code example
<div class="totaliser">
<div class="totaliser__progress-indicator">
<h6 class="label label--small">Amount sold</h6>
<p class="lead-paragraph lead-paragraph--large">£XX,XXX</p>
</div>
<div class="totaliser__progress-indicator u-text-right">
<h6 class="label label--small">Amount</h6>
<p class="lead-paragraph lead-paragraph--large">£XX,XXX</p>
</div>
<div class="progress totaliser__progress">
<div class="progress__activity" style="width: 0%;"></div>
</div>
</div>
<br/><br/>
<div class="totaliser is-started">
<div class="totaliser__progress-indicator">
<h6 class="label label--small">Amount sold</h6>
<p class="lead-paragraph lead-paragraph--large">£XX,XXX</p>
</div>
<div class="totaliser__progress-indicator u-text-right">
<h6 class="label label--small">Amount</h6>
<p class="lead-paragraph lead-paragraph--large">£XX,XXX</p>
</div>
<div class="progress totaliser__progress">
<div class="progress__activity" style="width: 25%;"></div>
</div>
</div>
<br/><br/>
<div class="totaliser is-complete">
<div class="totaliser__progress-indicator">
<h6 class="label label--small">Amount sold</h6>
<p class="lead-paragraph lead-paragraph--large">£XX,XXX</p>
</div>
<div class="totaliser__progress-indicator u-text-right">
<h6 class="label label--small">Amount</h6>
<p class="lead-paragraph lead-paragraph--large">£XX,XXX</p>
</div>
<div class="progress totaliser__progress">
<div class="progress__activity" style="width: 100%;"></div>
</div>
</div>