@visual-framework/vf-banner-elixir

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.

Options

• 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.

Accessibility

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

JS

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

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

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 '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