@hsl-fi/site-header
v4.5.1-alpha.0
Published
## Default use-case
Downloads
600
Keywords
Readme
SiteHeader
Default use-case
import SiteHeader from '@hsl-fi/site-header';
// HSL.fi-url, required
const hslFiUrl="https://www.hsl.fi";
// Url for getting search suggestions, required
const suggestionsApiUrl = "https://content.hsl.fi/api/v1/search/suggestions";
// Your notification proxy endpoints.
// Note! Language parameter is required.
const notificationApiUrls = {
get: '/your/api/notifications', // Should fetch `<HSL_FI_URL>/user/api/v1/notifications?language=<LANG>` with `{'x-hslid-token': <ID_TOKEN>}`-header
post: '/your/api/notifications/read' // Should post to `<HSL_FI_URL>/user/api/v1/notifications/read?language=<LANG>` with `{'x-hslid-token': <ID_TOKEN>}`-header
}
// Language, "fi", "en" or "sv", required
const lang = "fi";
// Language menu, required
const languageMenu = [
{ name: 'fi', url: '/', onClick: () => void },
{ name: 'en', url: '/en', onClick: () => void },
{ name: 'sv', url: '/sv', onClick: () => void }
];
// User menu, required
const userMenu = {
isAuthenticated: true, // When true, initials and user notifications are visible
isLoading: false, // Show spinner while fetching auth-information
isSelected: false, // Show active-indicator for user-menu icon
initials: 'TH', // Authenticated user's initials
loginUrl: 'https://service-abc.hsl.fi/user/auth/login',
menuItems: [
{
name: 'Omat tiedot',
url: 'https://www.hsl.fi/omat-tiedot',
onClick: () => void
},
{
name: 'Kirjaudu ulos',
url: 'https://service-abc.hsl.fi/user/auth/logout',
onClick: () => void
}
],
};
// Number shown on top of cart icon, optional
const cartItemCount={1}
// Link url for when click on cart, optional
const cartUrl="/cart"
return (
<SiteHeader
hslFiUrl={hslFiUrl}
lang={lang}
languageMenu={languageMenu}
userMenu={userMenu}
suggestionsApiUrl={suggestionsApiUrl}
notificationApiUrls={notificationApiUrls}
cartItemCount={3}
cartUrl="https://www.hsl.fi/cart"
/>
);
Advanced use-case
import { useRef } from 'react';
import SiteHeader from '@hsl-fi/site-header';
const siteHeaderRed = useRef(null);
useEffect(() => {
// Refetch notifications
siteHeaderRed.current.fetchNotifications();
}, [yourDependency]);
return (
<SiteHeader
ref={siteHeaderRef}
hslFiUrl="https://www.hsl.fi"
lang="fi"
languageMenu={[
{ name: 'fi', url: '/' },
{ name: 'en', url: '/en' },
{ name: 'sv', url: '/sv' }
]}
userTypeMenuOverride={[
{ name: 'Henkilöasiakkaalle', url: '/', isSelected: true },
{ name: 'Yrityksille', url: '/yrityksille', isSelected: false }
]}
mainMenuOverride={[
{
name: 'Matkustaminen',
url: 'https://www.hsl.fi/matkustaminen',
isSelected: false,
onClick: () => null
},
{
name: 'Liput ja hinnat',
url: 'https://www.hsl.fi/liput-ja-hinnat',
isSelected: false,
onClick: () => null
},
{
name: 'Asiakaspalvelu',
url: 'https://www.hsl.fi/asiakaspalvelu',
isSelected: false,
onClick: () => null
},
{
name: 'HSL',
url: 'https://www.hsl.fi/hsl',
isSelected: false,
onClick: () => null
}
]}
userMenu={{
isLoading: false,
isAuthenticated: true,
initials: 'TH',
loginUrl: '/user/auth/login',
onLoginClick: () => null,
menuItems: [
{
name: 'Omat tiedot',
url: 'https://www.hsl.fi/omat-tiedot',
onClick: () => null
},
{
name: 'Kirjaudu ulos',
url: 'https://service-abc.hsl.fi/user/auth/logout',
onClick: () => null
}
],
isSelected: true
}}
notificationApiUrls={{
get: '/your/api/notifications', // Should fetch `<HSL_FI_URL>/user/api/v1/notifications?language=<LANG>` with `{'x-hslid-token': <ID_TOKEN>}`-header
post: '/your/api/notifications/read' // Should post to `<HSL_FI_URL>/user/api/v1/notifications/read?language=<LANG>` with `{'x-hslid-token': <ID_TOKEN>}`-header
}}
suggestionsApiUrl="https://content.hsl.fi/api/v1/search/suggestions"
searchSelected={false}
banners={[
{
body: 'Metroliikenne pysähtynyt määrittelemättömästä syystä — <a href="/hsl/uutiset/uutinen/2020/08/joukkoliikenne-ja-koronavirus---tietoa-matkustajalle">lue lisää</a>',
priority: 'Primary'
},
{
body: 'Koronavirus — katso päivitetyt <a href="/matkustaminen/korona">matkustusohjeet</a>',
priority: 'Secondary'
}
]}
/>
);