open-index/open-npm huggingface dataset:
npm package: @hurtigruten/shared-components
Description: Shared components
Latest version: 14.1.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shared Components

Reusable React components for Hurtigruten's design.

Storybook: https://hurtigruten.github.io/b2c.utils.shared-components/

## Installation

```bash
npm install --save @hurtigruten/shared-components
```

## Publishing

More information on publishing can be found [here](./PUBLISH.md)

# Using the component library for different brands

In 2021 Hurtigruten split the company in three: 

1. Hurtigruten Group
2. Hurtigruten Norway (Coastal)
3. Hurtigruten Expedition

All of which have their own visual identity. This is reflected in the components in this library (colors, font-families etc.)

## Specify the brand

To make it easy to manage which brand to use we export a **required** `BrandProvider`-component, which allows you to control the brand-theme. This is a [ThemeProvider used by styled-components.](https://styled-components.com/docs/advanced#theming)

Supported brands: `export type Brand = 'group' | 'coastal' | 'expedition';`

### Default brand 

Hurtigruten Group (`"group"`) will be used for all components in this library if no other brand is specified. 

### Controlling the brand from outside the application

On mount, the `BrandProvider` reads the `window.brand` value to determine the current context of the application. This is useful for applications that should support multiple brands, like the B2C booking flow. 

### Fixed brand

`BrandProvider` accepts an optional prop (`fixedBrand`). This value overrides `window.brand` for the whole application. 


```js
<div>
    <Header1>Header with inherited theme</Header1>
    <BrandProvider fixedBrand="coastal">
        <Header1>Header with fixed brand (coastal)</Header1>
    </BrandProvider>
</div>
```


### Nested brands

It's possible to have nested `BrandProvider`-components. When this is the case, the closest parent `BrandProvider` will be used. This is useful for applications that want to render a small part of the application with a fixed brand, like the B2B portal.