ELIXIR Banner


About

This should be placed in the footer of sites that are part of the ELIXIR network.

Usage

This is an early version that is largely a port of the VF 1.3 ELIXIR Banner with some notable changes:

- The data option prefixes have changed to match VF 2 practice data-name is now data-vf-banner-elixir-name, and similarly for the other options.
- The multiple background colour options (green, orange, blue) have been dropped as they were poorly used and often presented colour-contrast accessibility issues.

$3

- data-vf-js-banner-elixir-logo="" (optional)
- this value is optional, the banner will default to use the normal ELIXIR logo. Passing CDR will use the ELIXIR Core Data Resource mark.
- data-vf-js-banner-elixir-name="Your Service Name" (optional)
- " is part of the ELIXIR infrastructure" will be appended
- data-vf-js-banner-elixir-description="text here" (optional)
- set the text in the small line of text to explain your relationship with ELIXIR
- data-vf-js-banner-elixir-link="https://url" (optional)
- by default the banner will point to a page at www.elixir-europe.org. If you would prefer to link to a custom page explaining your relationship with ELIXIR, add the full URL here

The development and future direction of this component can be discussed in issue #1572. While breaking changes are anticipated they are currently not expected.

This component leverages the Sass/CSS of vf-banner, so it should also be installed.

$3

This component targets WCAG 2.1 AA accessibility.

You can also read about the Visual Framework's approach to accessibility.

Install

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-banner-elixir and the supporting vf-banner with this command.

``
$ yarn add --dev @visual-framework/vf-banner-elixir @visual-framework/vf-banner
`

$3

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

`js
import { vfBannerElixir } from 'vf-banner-elixir/vf-banner-elixir';
// Or import directly
// import { vfBannerElixir } from '../components/raw/vf-banner-elixir/vf-banner-elixir.js';
vfBannerElixir(); // if needed, invoke it
`

$3

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

`
@import 'vf-banner/vf-banner.scss';
@import "@visual-framework/vf-banner-elixir/vf-banner-elixir.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