Explainer component

About

This component has been deprecated. Please use the vf-details component. Justification text: This component hasn't been implemented. The basic use case for providing details is supported by vf-details. For highlighting explanations we suggested that the Comms team uses vf-card.

Usage

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. After installing npm, you can install vf-explainer with this command.

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

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

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

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack