@hsl-fi/site-header v4.5.1-alpha.0

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'
      }
    ]}
  />
);