@hurtigruten/shared-components

Shared Components

Reusable React components for Hurtigruten's design.

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

Installation

npm install --save @hurtigruten/shared-components

Publishing

More information on publishing can be found here

Using the component library for different brands

In 2021 Hurtigruten split the company in three:

• Hurtigruten Group
• Hurtigruten Norway (Coastal)
• 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.

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.

<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.