Bookmark element

Indicates if an item has been bookmarked to a list of favourites or similar. Use vf-button instead of this component for the main call to action on a page.

github location npm version

Usage

This component shows if a piece of content has been selected by a user as a favourite using a text label and icon.

No JavaScript functionality is provided and it is expected that the state handling will be done on a case-by-case basis on the project application.

Use vf-button instead of this component for the main call to action on a page.

Active state

The active state of the icon is managed by adding the class vf-bookmark--active. This class should be added by your framework or sever-side code.

Options

The component can be configured with a number of options.

  • bookmark_href: defaults to JavaScript:Void(0);
    • Any url that may be required.
  • label_inactive: defaults to Bookmark
  • label_active: defaults to Bookmarked
  • is_active: defaults to true
    • true or false
    • sets vf-bookmark--active CSS class
    • determines the appropriate label_inactive or label_active
  • modifier: defaults to inline
    • inline or button or small
  • icon: defaults to heart

Accessibility

This component targets WCAG 2.1 AA accessibility.

Note that the SVG icons use aria-hidden="true" as to be ignored by screen readers.

Pages that use this component

The EMBL-EBI Training site includes pages that use the inline variant to mark a training course as favourite and a customised version of the button variant to mark a page as complete.

Variants

Button variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"bookmark_href" : "JavaScript:Void(0);",
"label_inactive" : "Add as bookmark",
"label_active" : "Bookmarked",
"is_active" : false,
"modifier" : "button",
"icon" : "heart",
 }
%}
{% include "../path_to/vf-bookmark/vf-bookmark.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-bookmark', {
  "component-type" : "element",
  "bookmark_href" : "JavaScript:Void(0);",
  "label_inactive" : "Add as bookmark",
  "label_active" : "Bookmarked",
  "is_active" : false,
  "modifier" : "button",
  "icon" : "heart",}
%}
HTML 
<button onclick="location.href='JavaScript:Void(0);';" class="vf-bookmark
 vf-bookmark--button
|
vf-button vf-button--secondary">
  <span class="vf-bookmark--icon vf-bookmark--icon-heart"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" height="140" width="140">
      <g transform="matrix(10,0,0,10,0,0)">
        <path d="M7,12.45l-5.52-5c-3-3,1.41-8.76,5.52-4.1,4.11-4.66,8.5,1.12,5.52,4.1Z"></path>
      </g>
    </svg></span>Add as bookmark</button>

Button active (example) variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"bookmark_href" : "JavaScript:Void(0);",
"label_inactive" : "Add as bookmark",
"label_active" : "Bookmarked",
"is_active" : true,
"modifier" : "button",
"icon" : "heart",
 }
%}
{% include "../path_to/vf-bookmark/vf-bookmark.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-bookmark', {
  "component-type" : "element",
  "bookmark_href" : "JavaScript:Void(0);",
  "label_inactive" : "Add as bookmark",
  "label_active" : "Bookmarked",
  "is_active" : true,
  "modifier" : "button",
  "icon" : "heart",}
%}
HTML 
<button onclick="location.href='JavaScript:Void(0);';" class="vf-bookmark
vf-bookmark--active vf-bookmark--button
|
vf-button vf-button--secondary">
  <span class="vf-bookmark--icon vf-bookmark--icon-heart"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" height="140" width="140">
      <g transform="matrix(10,0,0,10,0,0)">
        <path d="M7,12.45l-5.52-5c-3-3,1.41-8.76,5.52-4.1,4.11-4.66,8.5,1.12,5.52,4.1Z"></path>
      </g>
    </svg></span>Bookmarked</button>

Button Small variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"bookmark_href" : "JavaScript:Void(0);",
"label_inactive" : "Add as bookmark",
"label_active" : "Bookmarked",
"is_active" : false,
"modifier" : "small",
"icon" : "heart",
 }
%}
{% include "../path_to/vf-bookmark/vf-bookmark.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-bookmark', {
  "component-type" : "element",
  "bookmark_href" : "JavaScript:Void(0);",
  "label_inactive" : "Add as bookmark",
  "label_active" : "Bookmarked",
  "is_active" : false,
  "modifier" : "small",
  "icon" : "heart",}
%}
HTML 
<button onclick="location.href='JavaScript:Void(0);';" class="vf-bookmark
 vf-bookmark--small
|
vf-button vf-button--secondary vf-button--sm">
  <span class="vf-bookmark--icon vf-bookmark--icon-heart"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" height="140" width="140">
      <g transform="matrix(10,0,0,10,0,0)">
        <path d="M7,12.45l-5.52-5c-3-3,1.41-8.76,5.52-4.1,4.11-4.66,8.5,1.12,5.52,4.1Z"></path>
      </g>
    </svg></span>Add as bookmark</button>

Button Small active (example) variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"bookmark_href" : "JavaScript:Void(0);",
"label_inactive" : "Add as bookmark",
"label_active" : "Bookmarked",
"is_active" : true,
"modifier" : "small",
"icon" : "heart",
 }
%}
{% include "../path_to/vf-bookmark/vf-bookmark.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-bookmark', {
  "component-type" : "element",
  "bookmark_href" : "JavaScript:Void(0);",
  "label_inactive" : "Add as bookmark",
  "label_active" : "Bookmarked",
  "is_active" : true,
  "modifier" : "small",
  "icon" : "heart",}
%}
HTML 
<button onclick="location.href='JavaScript:Void(0);';" class="vf-bookmark
vf-bookmark--active vf-bookmark--small
|
vf-button vf-button--secondary vf-button--sm">
  <span class="vf-bookmark--icon vf-bookmark--icon-heart"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" height="140" width="140">
      <g transform="matrix(10,0,0,10,0,0)">
        <path d="M7,12.45l-5.52-5c-3-3,1.41-8.76,5.52-4.1,4.11-4.66,8.5,1.12,5.52,4.1Z"></path>
      </g>
    </svg></span>Bookmarked</button>

Inline variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"bookmark_href" : "JavaScript:Void(0);",
"label_inactive" : "Bookmark",
"label_active" : "Bookmarked",
"is_active" : false,
"modifier" : "inline",
"icon" : "heart",
 }
%}
{% include "../path_to/vf-bookmark/vf-bookmark.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-bookmark', {
  "component-type" : "element",
  "bookmark_href" : "JavaScript:Void(0);",
  "label_inactive" : "Bookmark",
  "label_active" : "Bookmarked",
  "is_active" : false,
  "modifier" : "inline",
  "icon" : "heart",}
%}
HTML 
<button onclick="location.href='JavaScript:Void(0);';" class="vf-bookmark
 vf-bookmark--inline
|
vf-button vf-button--link">
  <span class="vf-bookmark--icon vf-bookmark--icon-heart"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" height="140" width="140">
      <g transform="matrix(10,0,0,10,0,0)">
        <path d="M7,12.45l-5.52-5c-3-3,1.41-8.76,5.52-4.1,4.11-4.66,8.5,1.12,5.52,4.1Z"></path>
      </g>
    </svg></span>Bookmark</button>

Inline active (example) variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"bookmark_href" : "JavaScript:Void(0);",
"label_inactive" : "Bookmark",
"label_active" : "Bookmarked",
"is_active" : true,
"modifier" : "inline",
"icon" : "heart",
 }
%}
{% include "../path_to/vf-bookmark/vf-bookmark.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-bookmark', {
  "component-type" : "element",
  "bookmark_href" : "JavaScript:Void(0);",
  "label_inactive" : "Bookmark",
  "label_active" : "Bookmarked",
  "is_active" : true,
  "modifier" : "inline",
  "icon" : "heart",}
%}
HTML 
<button onclick="location.href='JavaScript:Void(0);';" class="vf-bookmark
vf-bookmark--active vf-bookmark--inline
|
vf-button vf-button--link">
  <span class="vf-bookmark--icon vf-bookmark--icon-heart"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" height="140" width="140">
      <g transform="matrix(10,0,0,10,0,0)">
        <path d="M7,12.45l-5.52-5c-3-3,1.41-8.76,5.52-4.1,4.11-4.66,8.5,1.12,5.52,4.1Z"></path>
      </g>
    </svg></span>Bookmarked</button>

Examples

Installation info

This repository is distributed with npm. After installing npm and yarn, you can install vf-bookmark with this command.

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

JS

[If your component uses JS]

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

import { vfComponentName } from 'vf-bookmark/vf-bookmark';
// Or import directly
// import { vfComponentName } from '../components/raw/vf-bookmark/vf-bookmark.js';
vfComponentName(); // if needed, invoke it

Sass/CSS

[If your component uses Sass]

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-bookmark/vf-bookmark.scss";

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

Changelog

Changelog

1.0.3

1.0.2

1.0.1

  • Version bump

1.0.0

  • Version bump

1.0.0-alpha.4

1.0.0-alpha.3

  • Update from a link to a button element

1.0.0-alpha.2

  • Fine tune icon vertical spacing.
  • https://github.com/visual-framework/vf-core/issues/1687

1.0.0-alpha.1

  • Creates an initial version of vf-bookmark.
  • https://github.com/visual-framework/vf-core/discussions/1654

Assets


File system location: components/vf-bookmark

Find an issue on this page? Propose a change or discuss it.