@visual-framework/vf-banner-elixir

    1.0.0-alpha.1 • Public • Published

    ELIXIR Banner

    npm version

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

    Install

    npm i @visual-framework/vf-banner-elixir

    DownloadsWeekly Downloads

    0

    Version

    1.0.0-alpha.1

    License

    Apache 2.0

    Unpacked Size

    29.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • khawkins98