@visual-framework/vf-explainer

    0.0.2 • Public • Published

    vf-explainer Component

    npm version

    Life science websites love a bit of jargon and complicated concepts and "explainers" help for terms like: ORCID, transcript isoform, and lymphoblastoid cell lines.

    This will likely be similar to "tooltips" or "foldable info tabs".

    Conceptual code:

    <span aria-describedby="whatis-orcid">ORCID</span>
     
    <div id="whatis-orcid" class="vf-explainer">
     <dfn class="vf-explainer--dfn">ORCID</dfn> is a unique identifier for researchers to distinguish themselves, and make it easier to find specific work; 
     <a href="https://orcid.org" target="_blank" class="vf-explainer__link">learn more</a>
    </div>

    This is a draft component, it is not yet functional. Background on the implementation, goals and work plan can be found in the issue.

    Install

    This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install vf-explainer with this command.

    $ yarn add --dev @visual-framework/vf-explainer
    

    Usage

    The source files included are written in [Sass]sass You can simply point your sass include-path at your node_modules directory and import it like this.

    @import "@visual-framework/vf-explainer/index.scss";
    

    Make sure you import Sass requirements along with the modules.

    Install

    npm i @visual-framework/vf-explainer

    DownloadsWeekly Downloads

    50

    Version

    0.0.2

    License

    Apache 2.0

    Unpacked Size

    8.44 kB

    Total Files

    12

    Last publish

    Collaborators

    • khawkins98