storm-guide
v1.1.2
Published
GDS-style guide pattern implementation
Downloads
16
Readme
Storm Guide
GDS-style guide pattern implementation
Example
https://stormid.github.io/storm-guide
Usage
HTML
<div class="guide js-guide">
<ol class="guide__navigation">
<li class="guide__item"><a href="#section-1" class="js-guide__link guide__link">Section 1</a></li>
<li class="guide__item"><a href="#section-2" class="js-guide__link guide__link">Section 2</a></li>
<li class="guide__item"><a href="#section-3" class="js-guide__link guide__link">Section 3</a></li>
</ol>
<section id="section-1" class="tab js-guide__section guide__section">
One
</section>
<section id="section-2" class="tab js-guide__section guide__section">
Two
</section>
<section id="section-3" class="tab js-guide__section guide__section">
Three
</section>
<div class="js-guide__incremental guide__incremental">
</div>
JS
npm i -S storm-guide
either using es6 import
import Guide from 'storm-guide';
Guide.init();
aynchronous browser loading (use the .standalone version in the /dist folder)
import Load from 'storm-load';
Load('/content/js/async/storm-guide.standalone.js')
.then(() => {
StormGuide.init();
});
Options
{
linkClassName: '.js-guide__link',
sectionClassName: '.js-guide__section',
incrementalNavHolder: '.js-guide__incremental',
activeClassName: 'active'
}
e.g.
Guide.init({
activeClassName: 'current'
});
Tests
npm run test
Browser support
This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.
This module depends upon Object.assign available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.
Dependencies
None
License
MIT