Librarian Components

There are small components that can be shared between projects to maintain a common design and style.

The components consist in a Handlebar Partial that can be integrated in a project and a styling for the respective component.

All the code is shared as a NPM package

The project also contains the SCSS for the Librarian project, which can be imported into the project.

For integration with a current project

Install the NPM repository on any project using:

npm install @springernature/monetise-shared-components

or to update the package

npm install @springernature/monetise-shared-components@VERSION-NUMBER

Import the Handlebar partials folder as follows (or similar):

partialsDir: [
path.join(__dirname, 'node_modules/@springernature/monetise-shared-components/frontend-partials'),
]

For integration of the Style with a current project

• Import the core theme into your core styles

@import "@springernature/monetise-shared-components/frontend-style/snapcss-core";

• Import the advanced theme into your advanced styles

@import "@springernature/monetise-shared-components/frontend-style/snapcss-advanced";

NOTE:

Specific components such as header, navigation or footer don't need separate imports. These are already included in the main imports. We recommend that you implement CSS cleansing to avoid having unused code.

To develop new components.

• The main partials are located on the frontend-partials folder.
• Within this folder, a folder named after the component is created with the following information
  • README.md for the respective component.
  • data folder containing example.json and schema.json of the data the component needs to work.
  • scss folder with the style for the respective folder.
  • COMPONENT.test.js file with some basic testing for the component.
  • index.scss referencing the scss folder.
• The components need to pass all possible data from the projects. It's responsability of the projectst that use it to provide this information to the component.

To publish the project you need a .npmrc file with the correct token for the @springernature registry.

To publish the project just run from the frontend-shared:

npm publish

The package should be published each time a change is made to the components, or when the styling affecting those components is changed. In order to update the package, a new version must be added to the package.json file, and an explanation must be added to the HISTORY.md file.

To add an external page to the Librarian Project

As an example to understand the concept, you have the E-Book Shop, which is implemented as a separate project, but integrated in such a way that it looks like part of the Librarian Portal. There are several elements to achieve this:

• The new project needs to have the look and feel of the Librarian Portal. To achieve this, the [Monetize Shared Components] (https://www.npmjs.com/package/@springernature/monetise-shared-components) shares a stylesheet code, plus the header, footer and navigation elements as components.
• The new project needs to pass some data to the different components to make the site work as intended. The most important of these is the Active BpId or BpId currently in use. More information about this can be found in each component used.
• A link to the new project needs to be added to the navigation component by the ICE team.

Components

Navigation

{{> navigation-links
  navigation=<ADD_NAVIGATION_ITEMS_HERE>
  activePageSlug=<ADD_SLUG_OF_CURRENT_PAGE_HERE>
}}

The navigation partial expects a list of navigation items to be passed in. The expected format looks like this:

{
  categories: [
    {
      title: 'Content & tools',
      entries: [
        {
          title: 'Single eBooks',
          slug: 'single-ebooks',
          href: 'https://single-ebooks.springernature.com/'
        }
      ]
    }
  ]
}

The current navigation items can be fetched from this endpoint: https://librarian.springernature.com/api/v1/navigation (for logged in users pass the current bpId as a request parameter activeBpId to the fetch request)

The activePageSlug parameter should hold the slug of the page you're currently on, eg single-ebooks.