open-index/open-npm huggingface dataset:
npm package: @springernature/springer-ad
Description: adverts
Author: Springer Nature
Latest version: 4.0.0

# Springer Ad

Catering for ad slots, specifically:
- leaderboard ad slots (970x90, 728x90)
- mpu ad slots (300x250)
- skyscraper ad slots (160x600)

## Usage

#### HTML
```html
<!--leaderboard-->
<div class="c-ad c-ad--LB1">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <div>
<!--ad slot content here-->
        </div>
    </div>
</div>

<!--mpu-->
<div class="c-ad c-ad--MPU1">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <div>
<!--ad slot content here-->
        </div>
    </div>
</div>

<!--skyscraper-->
<div class="c-ad c-ad--SKY1">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <div>
<!--ad slot content here-->
        </div>
    </div>
</div>
```
npm package: @springernature/springer-author-list
Description: Springer branded extension of the global author-list
Author: Springer Nature
Latest version: 0.3.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Author List

Springer branded author list. See [Global Author List](https://github.com/springernature/frontend-global-toolkit/tree/master/packages/global-author-list) for more information.
npm package: @springernature/springer-banner
Description: Springer branding for global-banner
Author: Springernature
Latest version: 3.0.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Banner

Springer branded banner. See [Global Banner](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-banner) for more information.
npm package: @springernature/springer-button
Description: Springer branding for global-buttons
Author: Springer Nature
Latest version: 0.2.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Button

Springer branded button. See [Global Button](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-button) for more information.
npm package: @springernature/springer-card
Description: Springer branded card. See [Global Card](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-card) for more information.
Author: Springer Nature
Latest version: 3.0.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Card

Springer branded card. See [Global Card](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-card) for more information.
npm package: @springernature/springer-copyright
Description: Overlays copyright notice on images
Author: Springer Nature
Latest version: 0.0.1
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Copyright

Overlays copyright notice on images.

## Usage

```html
<ul>
    <li>
        <h4>
            <a href="some url">Some title 1</a>
        </h4>
        <p>Some text 1</p>
        <a href="some url">
            <img src="some url" alt="pic of david bowie">
            <p class="c-copyright">Credit: Zana Clay</p>
        </a>
    </li>
    <li>
        <h4>
            <a href="some url">Some title 2</a>
        </h4>
        <p>Some text 2</p>
        <a href="some url">
            <img src="some url" alt="pic of david blaine">
            <p class="c-copyright">Credit: Zanna Delay</p>
        </a>
    </li>
</ul>
```
npm package: @springernature/springer-header
Description: Publisher level header
Author: Springer Nature
Latest version: 8.0.0

# Springer Header

Publisher level header for Springer products.

## Usage

Import and compile the Sass. You need to ensure you are importing some utility stylesheets.

```scss
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/icons.scss';
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/buttons.scss';
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/flex.scss';
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/spacing.scss';
@import '../node_modules/@springernature/springer-header/scss/10-settings/header';
@import '../node_modules/@springernature/springer-header/scss/50-components/header';
```

Then compile the template located in the `./view` folder whenever the component is needed. See the `./demo/context.json` to see an example of the expected data.

## Variants

### Promoted menu

The promoted menu is the menu on the top left of the header. Each menu item can have an optional icon assigned.

```json
"promotedMenu": [
    {
        "label": "SpringerLink shop",
        "href": "/path/to/1",
        "iconUrl": null
    }
]
```

### Search

To activate search, include a `search` property on the data. 

```json
"search": {
    "action": "/search",
    "inputLabel": "Search this site",
    "inputName": "search",
    "iconUrl": "../../img/search.svg#i-search",
    "springerLinkUrl": "#",
    "springerLinkText": "Search our products and science on SpringerLink"
}
```

The search box is revealed and focused when the search link in the promoted menu is pressed. This link is included automatically. 

#### Enhancement

By default, this click-to-reveal functionality works without JavaScript and using the `:target` CSS pseudo-class. However, it is recommended you enhance with JavaScript and focus the search input (rather than the search form) when the search box is revealed. 

The `./demo/main.js` file consists of a basic script demonstrating how you might go about this enhancement. It makes use of the `c-header__search-form--visible` class to reveal the search form.
npm package: @springernature/springer-hero
Description: A hero component, principally for subject/discipline pages
Author: Springernature
Latest version: 4.0.0

# Springer Hero

Inspired by Nature’s hero component. Includes a less image-heavy mode for subject/discipline pages.

# Usage

Import the Sass:

```scss
@import '../node_modules/@springernature/springer-hero/scss/10-settings/springer-hero';
@import '../node_modules/@springernature/springer-hero/scss/50-components/springer-hero';
```

Then compile the template located in the `./view` folder whenever the component is needed. See `./demo/context.json` for an example of the expected data.

## Variants

Both the image (`imageSrc`) and content (`content`) are optional. The component will not appear “broken” in the absence of either.

Images of any aspect ratio are permitted. Some cropping occurs, in some circumstances, to ensure the image fits the space without becoming distorted. 

There is no restriction to the amount of content. Generally, taller images work better when paired with larger amounts of content, necessitating less image cropping.

### `smallerImage`

By default, the image will take up two thirds of the horizontal space. To create a hero with less visual impact, you can set `smallerImage` to true. In this mode, the image will only take up _one_ third of the horizontal space. The content always fills the remaining space beside the image.

### `color`

You can override the default background color by including a `color` property. Pick a color with sufficient contrast when paired with the text, which will remain white.
npm package: @springernature/springer-lists
Description: Springer lists components
Author: Springer Nature
Latest version: 7.0.1
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer lists components

Components for working with lists.

## Examples

### List Columned
#### HTML
```html
<ul class="c-list-columned">
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
</ul>
```

### List Description
#### HTML
```html
<div class="c-list-description__item">
    <dt class="c-list-description__term">
        <!-- Content -->
    </dt>
    <dd class="c-list-description__details">
        <!-- Content -->
    </dd>
</div>
```

### List Group
#### HTML
```html
<ul class="c-list-group c-list-group--bordered">
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
</ul>
```
npm package: @springernature/springer-meta
Description: Brief information about the content
Author: Springer Nature
Latest version: 2.1.1

# Springer Meta

Brief information about the content.

## Usage

```html
<!-- single item-->
<div class="c-meta">
    <span class="c-meta__item">Article</span>
</div>

<!-- multiple items-->
<div class="c-meta">
    <span class="c-meta__item">Editorial</span>
    <span class="c-meta__item">15 October 2019</span>
</div>

<!-- force uppercase -->
<div class="c-meta">
    <span class="c-meta__item">
        <span class="c-meta__type">Editorial</span>
    </span>
</div>
```
npm package: @springernature/springer-nature-context
Description: Boostrapping for all Springer Nature components and products
Author: Springer Nature
Latest version: 2.0.1
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Nature Context

Set the context for Springer Nature branded products.

- [Global Context](#global-context)
- [Fonts](#fonts)

## Global Context

This package inherits from the [`global-context` package](https://github.com/springernature/frontend-global-toolkit/tree/master/packages/global-context), which details everything that is included with `springer-nature-context`. This README will detail anything that is added for this specific brand.

## Fonts

Web fonts are provided in the top level `fonts` folder, and should be copied to your assets folder as part of your build process. Then add `@font-face` declarations depending on your asset location. A template is provided below:

### Example

```scss
@font-face {
	font-family: 'Daytona';
	font-style: normal;
	font-weight: 300;
	src: url('81a7ca0e-9ecd-494c-b5a8-8a71dee13b8d.woff') format('woff'), url(quote('eaec63df-29cb-4036-b52c-0128885fa6d8.woff2')) format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Daytona';
	src: url('1e47f9c8-006c-47ea-a538-fda418eee2e8.eot?#iefix');
	src: url('1e47f9c8-006c-47ea-a538-fda418eee2e8.eot?#iefix') format('eot'), url('da2d8e8a-4058-41e5-bf2b-8e67a6ec9aa3.woff2') format('woff2'), url('3bf6a125-4948-46d6-b44a-25a39c5e1781.woff') format('woff'), url('34acddf5-e3d9-4456-87b6-e5c58cdd0450.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url('Merriweather-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url('Merriweather-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Merriweather';
	src: url('Merriweather-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}
```

## License

[MIT License][info-license] &copy; 2018, Springer Nature

[info-license]: https://github.com/springernature/frontend-springer-nature-toolkit/blob/master/LICENCE
npm package: @springernature/springer-nature-modal
Description: Springer Nature branded modal pop-up window
Author: Springer Nature
Latest version: 1.0.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Nature Modal

Display a modal (pop-up) window

## Usage

```html
<button data-modal-for="example-modal">Click this button to open the modal</button>
<div data-component-modal id="example-modal" class="c-modal js-hide" tabindex="0">
    <div class="c-modal--content">
        <h4 class="c-modal--title u-mb20">Modal Title</h4>
        <div class="c-modal--body">
            <p>This is the modal! It has a <a data-component-modal-close class="close-modal-link btn-close" href="">link</a> that can also close it.</p>
        </div>
        <button data-component-modal-close class="c-modal--close btn-close link-like">&times;</button>
    </div>
</div>
```

```javascript
import Modal from '@springernature/springer-nature-modal';

const modalElement = document.querySelector('#example-modal'); //For multiple modals, prefer `document.querySelectorAll('[data-component-modal]');` and initilise on each instance
const exampleModal = new Modal(modalElement);

exampleModal.show(); // Programmatically opens the modal.
```


#### Required markup and attributes

| Element Attribute | Element | Description | Required? |
|---|---|---|---|
| `id`     | Modal element  | The modal element must have an id attribute that is unique | Yes |
| `data-modal-for` | Trigger link or button | If there is a modal trigger (eg. button), it must have this attrubute matching the id of the modal it is intending to open avoiding the need to write custom event listeners to open modal. This element should sit outside of the modal's element. | No |
| `data-component-modal-close`  | Close button element | Should be added to an element which closes the modal. Note this element must be nested inside the modal which it intends to close | No |
npm package: @springernature/springer-pagination
Description: A component for the controls of pagination
Author: Springer Nature
Latest version: 5.0.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Springer Pagination

A component for the controls of pagination.

## Example

_**Note**: You need to use the springer icon map for icons_

#### HTML
```html
<nav>
    <ul class="c-pagination">
        <li class="c-pagination__item">
            <span class="c-pagination__link c-pagination__link--disabled">
                <svg class="c-icon u-margin-right-xs c-pagination__icon" aria-hidden="true">
                    <use xlink:href="#icon-springer-arrow-left"></use>
                </svg>
            </span>
        </li>
        <li class="c-pagination__item">
            <span class="c-pagination__link c-pagination__link--active">1</span>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=2" class="c-pagination__link">
                2
            </a>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=3" class="c-pagination__link">
                3
            </a>
        </li>
        <li class="c-pagination__item">
            <span class="c-pagination__link c-pagination__link--disabled c-pagination--ellipsis">…</span>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=22" class="c-pagination__link">
                22
            </a>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=2" rel="next" class="c-pagination__link">
                <svg class="c-icon u-margin-left-xs c-pagination__icon c-pagination__icon--active" aria-hidden="true">
                    <use xlink:href="#icon-springer-arrow-right"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
```
npm package: @springernature/springer-product-header
Description: Springer Product Header
Author: Springer Nature
Latest version: 3.0.0

# Springer Product Header

The title, print cover, imprint logo and themed background colour. The title is an important signifier to recognise relevancy. Cover images are an additional visual aid to help users familiarise.

Use the Product header for all pages that feature a Journal, Book or aggregations of content, such as Book series. The cover image comes from DDS. Colour is taken from the cover image automatically. Both the cover and title should link to the homepage of the title.

The dominant colour image is fetched from spindoctor it is not part of the component.

## Usage

```html
<div class="c-product-header">
    <!-- #not mandatory -->
    <div class="c-product-header__theme" style="background-image: url('https://media.springernature.com/dominant-colour/springer-static/cover/journal/123.jpg')"></div>
    <!-- /not mandatory -->
    <div class="c-product-header__content">
        <div class="c-product-header__main">
            <!-- #not mandatory -->
            <div class="c-product-header__cover">
                <img alt=""
                        srcset="
                        https://media.springernature.com/w92/springer-static/cover/journal/123.jpg 1x,
                        https://media.springernature.com/w138/springer-static/cover/journal/123.jpg 1.5x,
                        https://media.springernature.com/w184/springer-static/cover/journal/123.jpg 2x,
                        https://media.springernature.com/w276/springer-static/cover/journal/123.jpg 3x"
                        src="https://media.springernature.com/w92/springer-static/cover/journal/123.jpg"/>
            </div>
            <!-- /not mandatory -->
            <div class="u-flex-shrink">
                <h1 class="c-product-header__title">
                    <a href="/">{{{journalTitle}}}</a>
                </h1>
                <!-- #not mandatory -->
                    <p class="c-product-header__subtitle">{{{journalSubtitle}}}</p>
                <!-- /not mandatory -->
            </div>
        </div>
        <!-- #not mandatory -->
        <div class="c-product-header__side">
            <img class="c-product-header__imprint" data-test="journal-header-imprint"
                alt="Birkhäuser imprint" height="30" src="https://www.springer.com/oscar-static/images/birkhauser-logo.svg"
                role="img">
        </div>
        <!-- /not mandatory -->
    </div>
</div>
```
npm package: @springernature/springer-publisher-footer
Description: Springer branded site footer
Author: Springer Nature
Latest version: 6.0.0

# Springer Publisher Footer

Springer branded site footer.

## Usage

### Import the Sass

```scss
@import '../node_modules/@springernature/springer-publisher-footer/scss/10-settings/publisher-footer';
@import '../node_modules/@springernature/springer-publisher-footer/scss/50-components/publisher-footer';
```

### Template

The `./view` template file is designed to be consumable by your renderer. See `./demo/context.json` for the expected model / data schema. Note that the template does not include the `<footer>` wrapper. This allows you to combine this footer with the `global-corporate-footer` inside a common `<footer>` landmark/region.

### Cookie management

You can include a cookie management button inside the links array with the following:

```json
{
    "label": "Manage cookies",
    "action": "preferences"
}
```

Note the action property which places the `data-cc-action="preferences"` attribution on the button, needed to trigger the [cookie preferences dialogue documented here](https://cookie-consent.public.springernature.app/docs/getting-started/installation).
npm package: @springernature/springer-user-metadata
Description: Meta data for user such as login status, ip address, business partner associations and chinese icp licence status
Author: Springer Nature
Latest version: 6.0.0

# Springer Publisher Footer

Meta data for user such as login status, ip address, business partner associations and chinese icp licence status

## Example

#### HTML
```html
<div class="c-user-metadata"> 
    <p class="c-user-metadata__item">
        <span data-test="footer-user-login-status">Not logged in</span>
    </p>
    <p class="c-user-metadata__item" data-test="footer-business-partners">
        Springer Affiliates (3000093925)  - Consortium BusinessPartner (555555) 
    </p>
    <p class="c-user-metadata__item" data-test="icp-licence">
        <a class="u-link-inherit" href="http://www.miibeian.gov.cn" lang="zh-Hans">
            沪ICP备15051854号-3
        </a>
    </p>
</div>
```
npm package: @springernature/springer-webfonts
Description: For loading webfonts
Author: Springer Nature
Latest version: 1.0.3

# Springer Webfonts

Load webfonts on your product in a non-blocking asyncronous manner

## Font Face Observer

This package has a third party dependency on [Font Face Observer](https://github.com/bramstein/fontfaceobserver).
This is a peer dependency and must be installed, i.e. `npm i -S fontfaceobserver` then in package.json:

```json
  "peerDependencies": {
    "fontfaceobserver": "^2.1.0"
  }
```

## Custom Events Polyfill

This package requires your product to have polyfilled javascript custom events. For convenience here is a polyfill that you can include in your app:
```javascript
(function () {
    if (typeof window.CustomEvent === "function") { return false; }

    function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
    }

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;
})();
```

## How to use
The component needs to be imported in to your bundle and when it is called you must pass in config that provides the details of the webfonts you need in the following format:

```javascript
// bundle.js

import webfonts from '@springernature/springer-webfont/js';

// example of one font
webfonts([
    {
        name: 'Europa',
        weights: ['100', '400', '700']
    }
]);

// example of multiple fonts
webfonts([
    {
        name: 'Europa',
        weights: ['100', '400', '700']
    },
    {
        name: 'Noto Serif',
        weights: ['400', '700']
    }
]);
```
If the user does not have the font already (we use sessionStorage to manage this) then the fonts are downloaded via Font Face Observer. Once complete the component emits a `webfonts-loaded` event on `document.DocumentElement`. This component does not prescribe any font switching mechanisms - it is up to you to listen for that event and then execute whatever font switching mechanism you desire. Here is an example where we place a class on the document which ensures webfonts are then displayed as per our css:
```javascript
// bundle.js
document.documentElement.addEventListener('webfonts-loaded', () => {
	document.documentElement.classList.add('webfonts-loaded');
});
webfonts([{name: 'Europa',weights: ['100', '400', '700']}]);

// styles.css
font-family: $fallback-font;

html.webfonts-loaded & {
    font-family: $webfont;
}
```

## Error handling
This component contains occurences of `throw new Error()` and therefore assumes your app has a way of handling those errors without blocking execution of your app should an error occur.

## License

[MIT License][info-license] &copy; 2019, Springer Nature

[info-license]: https://github.com/springernature/frontend-springer-toolkit/blob/master/LICENCE
npm package: @springernature/springernature-header
Description: Springer Nature branded header component
Author: Springer Nature
Latest version: 4.0.0

# Springer Nature User Details

Springer nature branded header component, with Springer Nature Editorial logo, optional journal logo.

## Requirements

A class name of `.js` on the document root element will be required to enable enhanced visual styles. The class should be added via a micro (but blocking) script, placed as far up in the <head> of the document as possible.

```javascript
<script>
    // JS Detection Script
    (function(e){var t=e.documentElement,n=e.implementation;t.className='js';})(document)
</script>
```

## Usage

### HTML

The component assumes you have the following data available to your template:

logoutUri
showJournalLogo - boolean to indicate whether or not there is a journal logo
backUrl - the href for the anchor wrapping the header logos (usually to the home page)
submission {
    journalId
    journalName
}

You will need to import the [springernature context](https://github.com/springernature/frontend-toolkits/tree/master/context/brand-context/springernature).

The template assumes you are using handlebars and there is minimal use of built-in helpers - if you are using a different templating language then the tags will need to be modified.

### CSS

Import the core styles into your main stylesheet

```scss
// core
@import '@springernature/brand-context/springernature/scss/core';

@import '@springernature/springernature-header/scss/10-settings/layout';
@import '@springernature/springernature-header/scss/50-components/core';
```

Import the enhanced settings and styles into your main stylesheet

```scss
// enhanced.scss
@import '@springernature/brand-context/springernature/scss/enhanced';

@import '@springernature/springernature-header/scss/10-settings/layout';
@import '@springernature/springernature-header/scss/50-components/enhanced';
```
npm package: @springernature/springernature-modal
Description: Springer Nature branded modal pop-up window
Author: Springer Nature
Latest version: 5.0.0

# Springer Nature Modal

Display a modal (pop-up) window

## Requirements

A class name of `.js` on the document root element will be used to bootstrap visual styles for the modal. The class should be added via a micro (but blocking) script, placed as far up in the <head> of the document as possible.

```javascript
<script>
    // JS Detection Script
    (function(e){var t=e.documentElement,n=e.implementation;t.className='js';})(document)
</script>
```

## Usage

### HTML

```html
<button data-modal-for="example-modal" class="c-modal__trigger">Click this button to open the modal</button>

<div data-component-modal id="example-modal" class="c-modal" tabindex="0">
    <div class="c-modal__content">
        <h4 class="c-modal__title">Modal Title</h4>
        <p>This is the modal! It has a <a data-component-modal-close href="">link</a> that can also close it.</p>
        <button data-component-modal-close class="c-modal__close">close modal</button>
    </div>
</div>
```

### Javascript

```javascript
import Modal from '@springernature/springernature-modal';

const modalElement = document.querySelector('#example-modal'); //For multiple modals, prefer `document.querySelectorAll('[data-component-modal]');` and initilise on each instance
const exampleModal = new Modal(modalElement);

// Programmatically opens the modal
exampleModal.open();

// Programmatically closes the modal
exampleModal.close();
```

### CSS

Import the core styles into your main stylesheet

```scss
// core.scss
@import '@springernature/springernature-modal/scss/50-components/core';
```

Import the enhanced settings and styles into your main stylesheet

```scss
// enhanced.scss
@import '@springernature/springernature-modal/scss/10-settings/springernature';
@import '@springernature/springernature-modal/scss/50-components/enhanced';
```

#### Required markup and attributes

| Element Attribute | Element | Description | Required? |
|---|---|---|---|
| `id`     | Modal element  | The modal element must have an id attribute that is unique | Yes |
| `data-modal-for` | Trigger link or button | If there is a modal trigger (eg. button), it must have this attrubute matching the id of the modal it is intending to open avoiding the need to write custom event listeners to open modal. This element should sit outside of the modal's element. | No |
| `data-component-modal-close`  | Close element | Should be added to an element which closes the modal. Note this element must be nested inside the modal which it intends to close. An optional `c-modal__close` class will style this as a close button. | No |
npm package: @springernature/springernature-user-details
Description: Springer Nature branded logged-in user details component
Author: Springer Nature
Latest version: 6.0.0

# Springer Nature User Details

Display current signed in user; click to expand to reveal more details

## Requirements

A class name of `.js` on the document root element will be required to enable visual styles for the user info drop down. The class should be added via a micro (but blocking) script, placed as far up in the <head> of the document as possible.

```javascript
<script>
    // JS Detection Script
    (function(e){var t=e.documentElement,n=e.implementation;t.className='js';})(document)
</script>
```

## Usage

### HTML

The component assumes you have the following data available to your template:

user-details {
    first_name
    last_name
    email_address
}
logoutUri


### Javascript

```javascript
import userDetails from '@springernature/user-details/js';

userDetails();
```

### CSS

Import the core styles into your main stylesheet

```scss
// core.scss
@import '@springernature/brand-context/springernature/scss/10-settings/colors/default';
@import '@springernature/brand-context/default/scss/30-mixins/focus';
@import '@springernature/springernature-user-details/scss/10-settings/colours';
@import '@springernature/springernature-user-details/scss/10-settings/typography';
@import '@springernature/springernature-user-details/scss/50-components/core';
```

Import the enhanced settings and styles into your main stylesheet

```scss
// enhanced.scss
@import '@springernature/brand-context/default/scss/enhanced';
@import '@springernature/springernature-user-details/scss/10-settings/layout';
@import '@springernature/brand-context/default/scss/30-mixins/arrow';
@import '@springernature/springernature-user-details/scss/50-components/enhanced';
```
npm package: @springernature/util-cli-reporter
Description: Standardised CLI Logging
Author: Alex Kilgour
Latest version: 2.0.0

# CLI Reporter

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![MIT License][badge-license]

Standardised command-line reporter for frontend toolkit modules.

## Install

```
$ npm install @springernature/util-cli-reporter
```

## Usage

```javascript
const reporter = require('@springernature/util-cli-reporter');

// Optionally initialise with a logging level
// Defaults to title (all)
reporter.init('title');

reporter.title('this is a heading');

reporter.info('description');
reporter.info('description', 'this is my message');
reporter.info('description', 'this is my message', 'to you');

reporter.success('description');
reporter.success('description', 'this is my message');
reporter.success('description', 'this is my message', 'to you');

reporter.warning('description');
reporter.warning('description', 'this is my message');
reporter.warning('description', 'this is my message', 'to you');

reporter.fail('description');
reporter.fail('description', 'this is my message');
reporter.fail('description', 'this is my message', 'to you');
```

> NOTE: you can run this demo from [demo/index.js](./demo/index.js)

### Logging levels

By running the `reporter.init()` function you can set the following logging levels

#### `reporter.init('title')`

* Prints all reporting types - `title`, `info`, `success`, `warning`, `fail`

#### `reporter.init('info')`

* Prints the reporting types - `info`, `success`, `warning`, `fail`
* Ignores the reporting types - `title`

#### `reporter.init('success')`

* Prints the reporting types - `success`, `warning`, `fail`
* Ignores the reporting types - `title`, `info`

#### `reporter.init('warning')`

* Prints the reporting types - `warning`, `fail`
* Ignores the reporting types - `title`, `info`, `success`

#### `reporter.init('fail')`

* Prints the reporting types - `fail`
* Ignores the reporting types - `title`, `info`, `success`, `warning`

#### `reporter.init('none')`

* Ignores all reporting types - `title`, `info`, `success`, `warning`, `fail`

### Output

![example output](img/example.png)

## License

[MIT License][info-license] &copy; 2019, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-cli-reporter
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-cli-reporter.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=8-brightgreen.svg
[info-node]: package.json
npm package: @springernature/util-context-installer
Description: Dynamically installs brand-context package to dependencies
Author: ajk
Latest version: 0.3.0

# Context Installer

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![MIT License][badge-license]

This package allows dynamic installation of the `brand-context` NPM package used in the [Elements Design System](https://github.com/springernature/frontend-toolkits).  
It crawls the filesystem for packages (by searching for `package.json` files) and checks if a `brand-context` version is defined. If it finds one, it install it as a dependency _relative to the module where it was found_.

Internally it uses the [`util-package-installer` module](https://github.com/springernature/frontend-toolkit-utilities/tree/main/packages/util-package-installer).

### Options

#### `installPath`

Type: `String`<br/>
Required: `false`<br/>
Default: `__dirname`<br/>
Path to start crawling the filesystem

#### `reporting`

Type: `Boolean`<br/>
Required: `false`<br/>
Default: `true`<br/>
Output reporting to the CLI

#### `contextName`

Type: `String`<br/>
Required: `false`<br/>
Default: `@springernature/brand-context`<br/>
Name of the brand context on NPM

## Examples

### Simple usage (async/await style)

Crawl the filesystem starting from the directory containing the currently executing file.

```
const install = require('@springernature/util-context-installer');

(async () => {
    try {
        await install();
    } catch (error) {
        console.error(error);
    }
})();
```

### With options (async/await style)

Crawl the filesystem starting from the current working directory, suppress CLI output, and specify a custom brand context name.

```
const install = require('@springernature/util-context-installer');

(async () => {
    try {
        await install(process.cwd(), false, '@myusername/brand-context');
    } catch (error) {
        console.error(error);
    }
})();
```

## License

[MIT License][info-license] &copy; 2022, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-context-installer
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-context-installer.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=8-brightgreen.svg
[info-node]: package.json
npm package: @springernature/util-context-warning
Description: CLI messaging for installing Elements context dependencies
Author: Alex Kilgour
Latest version: 0.0.5

# Context Warning

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![MIT License][badge-license]

When installing a package from the Elements Design System, output some messaging to the command-line to warn about installing a valid brand context dependency in your application.

This package only handles formatting of the output message, working out valid dependencies needs to be done elsewhere.

## Command line usage

Use via NPX

```
$ npx @springernature/util-context-warning [options]
```

### Command line options

```
-p, --package  Name of package
-v, --versions  Space separated brand context versions in semver
-c, --context  Name of the brand context package. Default: @springernature/brand-context
```

### Example

```
$ npx @springernature/util-context-warning \
      -p @springernature/global-article@1.0.0 \
	  -v 1.0.0 2.0.0
```

![example output](https://raw.githubusercontent.com/springernature/frontend-toolkit-utilities/master/packages/util-context-warning/img/cli-standard.png)

#### Custom brand context name

```
$ npx @springernature/util-context-warning \
      -p @springernature/global-article@1.0.0 \
	  -v 1.0.0 2.0.0 \
	  -c @otherscope/othername
```

![example output](https://raw.githubusercontent.com/springernature/frontend-toolkit-utilities/master/packages/util-context-warning/img/cli-name.png)

#### No brand context versions

```
$ npx @springernature/util-context-warning \
      -p @springernature/global-article@1.0.0
```

![example output](https://raw.githubusercontent.com/springernature/frontend-toolkit-utilities/master/packages/util-context-warning/img/cli-error.png)

## License

[MIT License][info-license] &copy; 2020, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-context-warning
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-context-warning.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=8-brightgreen.svg
[info-node]: package.json
npm package: @springernature/util-dynamic-partial
Description: Dynamically reference handlebars partials
Author: ajk
Latest version: 0.1.0

# Dynamic Partials

[![NPM version][badge-npm]][info-npm]
![MIT License][badge-license]

> Dynamically render a partial within a handlbars template

Allows us to conditionally reference component handlebars templates by registering a handlebars partial file, and providing a helper for dynamically including that template file.

## Install

```
$ npm install @springernature/util-dynamic-partial
```

## Usage

**`context.json`**
```json
{
  "dynamicPartials": {
    "partialName": "./path/to/partialName.hbs"
  }
}
```

**Javascript**
```js
const Handlebars = require('handlebars');
const dynamicPartials = require('@springernature/util-dynamic-partial');
const config = require('./context.json');

// Register all dynamic partials
(async () => {
  try {
    await dynamicPartials(Handlebars, config.dynamicPartials);
  } catch (error) {
    console.error(error);
  }
})();
```

**HTML (handlebars)**
```handlebars
<h2>Include the dynamic partial below</h2>
{{> partialName }}
```

> Find a more complete example in [the demo folder](./demo/README.md).

## API

### registerDynamicPartials(Handlebars, dynamicPartials, startingLocation)

Return: `Promise`<br/>
Register any number of [handlebars partial files](https://handlebarsjs.com/guide/partials.html) as defined within a JSON object

### options

#### Handlebars

Type: `Object`<br/>
Required: `true`<br/>
The handlebars instance with which to register the partials

#### dynamicPartials
Type: `Object`<br/>
Required: `true`<br/>
Key/Value pairs that define the name of the dynamic partial, and the location relative to `startingLocation`

#### startingLocation
Type: `String`<br/>
Required: `true`<br/>
Default: `.`<br/>
Path to start looking for the partial templates

## License

[MIT License][info-license] &copy; 2021, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-dynamic-partial
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-dynamic-partial.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
npm package: @springernature/util-eslint-runner
Description: Run ESLint only if Javascript files are found
Author: Springer Nature
Latest version: 0.0.3

# ESLint Runner

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![LGPL 3.0 licensed][badge-license]

As of `ESLint v5` a breaking behaviour change ([8b7c6ea](https://github.com/eslint/eslint/commit/8b7c6eaed39e8506dba1aa6e57b1d0e2fdc351c3)) was introduced where a fatal error is thrown if any file pattern returns no files. We would like to use a generic linting implementation on all our component monorepos without having to turn JS linting on/off depending on the presence of Javascript.

This small utility will check for the existence of Javascript files in a repo and then run an `npm script` command if any are found. The npm script should run your eslint setup.

## Install

```
$ npm install @springernature/util-eslint-runner
```

Installing `util-eslint-runner` adds command line exectuables to `./node_modules/.bin/`.

## Usage

```
$ ./node_modules/.bin/util-eslint-runner [options]
```

```
Options:
  -n --name [string]     NPM script to execute (default: null)
  -p --pattern [string]  Glob pattern to search (default: **/*.js)
  -h, --help             output usage information
```

#### `.eslintignore`

ESLint runner will check for an `.eslintignore` file, and ignore any patterns it finds.

## Example

You always need to specify the `--name` option, otherwise nothing will run on completion. The default search pattern is `**/*.js`, which you can override with the `--pattern` option. Some examples using different options

```
$ util-eslint-runner --name 'lint-js'
$ util-eslint-runner -n 'lint-js'
$ util-eslint-runner --name 'lint-js' --pattern 'packages/**/*.js'
$ util-eslint-runner -n 'lint-js' -p 'packages/**/*.js'
```

#### Example monorepo script setup

Below is an example set of example scripts from a monorepo `package.json` file:

```json
"scripts": {
  "lint": "util-eslint-runner -n 'lint-js' -p 'packages/**/*.js' && npm run lint-sass",
  "lint-sass": "sass-lint 'packages/**/*.scss'",
  "lint-js": "eslint 'packages/**/*.js'"
}
```

## License

[MIT License][info-license] &copy; 2018, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-eslint-runner
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-eslint-runner.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=8-brightgreen.svg
[info-node]: package.json
npm package: @springernature/util-package-diff
Description: visual diff between two elements packages on a local server
Author: ajk
Latest version: 0.0.3

# Visual Package Diff

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![MIT License][badge-license]

Visually compare two versions of an Elements component package. Pass the name and version of a package and the demo is retrieved from NPM. A local server is created and the NPM package demo is displayed side-by-side with the current local demo of the component package.

Can be used to test the affect of `brand-context` or other updates on a component package.

## Usage

```
$ npx @springernature/util-package-diff --help                                  

  visual diff between two elements packages on a local server

  Usage
        npx @springernature/util-package-diff [options]

  Options
        --package, -p        Name and version of package
        --scope, -s          NPM scope, default: @springernature
        --port, -t           Port for local server, default: 3000

  Examples
        npx @springernature/util-package-diff -p package-name@1.0.0
        npx @springernature/util-package-diff -p package-name@1.0.0 -s @some-other-scope
        npx @springernature/util-package-diff -p package-name@1.0.0 -s @some-other-scope -t 5000
```

### Example

`$ npx @springernature/util-package-diff -p global-corporate-footer@4.0.0 -t 5000`

## License

[MIT License][info-license] &copy; 2019, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-package-diff
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-package-diff.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=16-brightgreen.svg
[info-node]: package.json
npm package: @springernature/util-package-installer
Description: Dynamically installs NPM packages
Author: jpw
Latest version: 1.0.0

# Package Installer

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![MIT License][badge-license]

This package allows dynamic installation of other NPM packages.

Internally it uses node's `child_process.spawn` because the recommended way of installing
node modules dynamically is to use `npm` directly.

It has one dependency and is intended to be as light as possible.

It does not accept `npm` v1-style package names. If you don't know what they are,
don't worry because they are old :)

## Sample, simple usage (async/await style)

The general idea is to pass it a `JSON.parse`d `package.json`;
It will either return `stdout`, or throw an `Error`.

```
const install = require('@springernature/util-package-installer');
const packageJSON = require('./path/to/package.json');
(async () => {
    let installResult;
    try {
        installResult = await install.dependencies(packageJSON);
        console.log(`npm install stdout: ${installResult}`);
    } catch (error) {
        console.log(`npm install stderr: ${error}`);
    }
})();
```
There are also helper methods to install just `devDependencies` or `peerDependencies`,
please see the [full documentation in this repo](docs/index.html).

## License

[MIT License][info-license] &copy; 2019, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-package-installer
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-package-installer.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=8-brightgreen.svg
[info-node]: package.json
npm package: @springernature/util-sass-compiler
Description: Promisify SASS.render and add JSON output
Author: Alex Kilgour
Latest version: 0.1.0

# SASS Compiler

[![NPM version][badge-npm]][info-npm]
[![Node version][badge-node]][info-node]
![MIT License][badge-license]

Helper module for compiling SASS using `node-sass`, and returning the result as either `CSS` or `JSON` within a `<Promise>`. Used for testing SASS logic using Jest. 

## Install

```
$ npm install @springernature/util-sass-compiler
```

## Usage

The `render` function returns an Object of the form

```js
{
  "css": <Buffer>,
  "stats": {},
  "json": {}
}
```

### Example

Below is a simple example, see the [test folder](__tests__/unit/lib/js/render.test.js) for more.

```js
import {render} from '@springernature/util-sass-compiler';

describe('Compile Some SASS', () => {
  test('CSS String', async () => {
    const result = await render({
	  data: `
	    $size: 100px;
        .foo {
          width: $size;
        }`;
    });
    expect(result.css.toString().trim()).toEqual('.foo{width:100px}');
  });

  test('JSON match', async () => {
    const result = await render({
	  data: `
	    $size: 100px;
        .foo {
          width: $size;
        }`;
    });
    expect(result.json).toEqual(
      expect.objectContaining({
        '.foo': {
          'width': '100px'
        }
      })
    );
  });
});
```

## License

[MIT License][info-license] &copy; 2020, Springer Nature

[info-npm]: https://www.npmjs.com/package/@springernature/util-sass-compiler
[badge-npm]: https://img.shields.io/npm/v/@springernature/util-sass-compiler.svg
[info-license]: https://github.com/springernature/frontend-toolkit-utilities/blob/master/LICENCE
[badge-license]: https://img.shields.io/badge/license-MIT-blue.svg
[badge-node]: https://img.shields.io/badge/node->=8-brightgreen.svg
[info-node]: package.json
npm package: @springfield/ultrasonic-transducer
Description: Sensor implementation for an ultrasonic transducer
Author: Bryan Hunt
Latest version: 1.0.0

# Overview

This module provides a sensor implementation for an ultrasonic transducer.  The transducer is expected to output values on a serial port at 9600 baud.  The data value is expected to have the format: R[number]\r.  For example: R0567\r.