Readme: o-stepped-progress

<!--
Base class and attribute hook for JavaScript
-->
<div class="o-stepped-progress" data-o-component="o-stepped-progress">

    <!--
    The steps live in an ordered list, which ensures that assistive
    technology can read this appropriately. Also if CSS does not load
    then a sensible fallback is in place
    -->
    <ol class="o-stepped-progress__steps">

        <!--
        Each step lives inside a list item. This item does not need any
        classes applied. The following modifiers are available to indicate
        the status of a step (each prefixed with o-stepped-progress):
          - complete: a step that has been completed by the user
          - current: the step the user is currently on
          - error: a step that something went wrong with
        -->
        <li>

            <!--
            The step itself is either an anchor or span element. We encourage
            using an anchor for completed and current steps, as this offers a
            better experience for screen readers - all of the text inside is
            read as one block rather than each span separately.
            -->
            <a href="/step-1" class="o-stepped-progress__step o-stepped-progress__step--complete">
                <span class="o-stepped-progress__label">

                    <!--
                    The o-stepped-progress__status element is required to make
                    the step label accessible for assistive technology, older
                    browsers, and when CSS fails to load. This element is
                    visually hidden otherwise
                    -->
                    Example Completed Step <span class="o-stepped-progress__status">(completed)</span>
                </span>
            </a>
        </li>

        <!--
        An example of the current step. Here using an anchor element
        and including accessible text in the label
        -->
        <li>
            <a href="/step-2" class="o-stepped-progress__step o-stepped-progress__step--current">
                <span class="o-stepped-progress__label">
                    Example Current Step <span class="o-stepped-progress__status">(current step)</span>
                </span>
            </a>
        </li>

        <!--
        An example of a future step (with no modifier classes). Here
        we're using a span element as we don't want a user to jump
        ahead before completing the current step. Future steps do
        not require a status element
        -->
        <li>
            <span class="o-stepped-progress__step">
                <span class="o-stepped-progress__label">
                    Example Future Step
                </span>
            </span>
        </li>

    </ol>
</div>

import SteppedProgress from '@financial-times/o-stepped-progress';
const steppedProgressElement = document.getElementById('my-stepped-progress');
const mySteppedProgress = new SteppedProgress(steppedProgressElement);

import SteppedProgress from '@financial-times/o-stepped-progress';
SteppedProgress.init();

document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));

@import '@financial-times/o-stepped-progress/main';
@include oSteppedProgress();

@include oSteppedProgress();

.o-stepped-progress {
    /* styles */
}
.o-stepped-progress--heavy {
    /* styles */
}
/* etc. */

@include oSteppedProgress($opts: (
    'themes': (
        'heavy'
    )
));