CAR FOR YOU Header / Footer

Usage

npm install @carforyou/header-footer

In your postcss config, add the components paths to the purgecss paths, so this packages classnames don't get stripped:

const glob = require("glob")
glob.sync("node_modules/@carforyou/header-footer/pkg/**/*.js")

Make sure to import global styles:

@import '@carforyou/components/assets/index.css';

Translations will be handled by the application, so you'll need to make sure the dictionaries are passed to the i18n setup properly:

import de from "@carforyou/header-footer/locales/de.json"
import fr from "@carforyou/header-footer/locales/fr.json"
import it from "@carforyou/header-footer/locales/it.json"
import en from "@carforyou/header-footer/locales/en.json"

Use the components as follows, passing the language, the translation function and the root urls as the bare minimum:

import { Header } from "@carforyou/header-footer"

<Header
  language="de"
  t={t}
  dealerhubRootUrl="https://dealerhub.carforyou.ch"
  listingsRootUrl="https://www.carforyou.ch"
/>

Features

Header-Footer package supports enabling/disabling features via an optional features prop. To enable specific feature pass { <featureName>: true } e.g to disable the list for free CTA:

<Header
  language="de"
  dealerhubRootUrl="https://dealerhub.carforyou.ch"
  listingsRootUrl="https://www.carforyou.ch"
  features={{
    disabledCTA: true
  }}
/>

Existing features | Name | Affected component | Effect | |------|--------------------|--------| | disabledCTA | Header | disables List for free header CTA | showLeasingDisclaimer | Footer | shows a disclaimer with leasing information | showLoanDisclaimer | Footer | shows a disclaimer with loan information

Injecting mobile menu

In some cases, there is an additional menu/navigation component (like a sidebar) that needs to be merged with the mobile menu. To achieve that, we support mobileMenuElements prop, which can be used to inject some extra navigation. Usage example:

<Header
  language="de"
  mobileMenuElements={[
    {
      tag: "title",
      title: "Section Title",
    },
    {
      tag: "item",
      title: "Menu Item",
      IconComponent: Icon,
      onClick: trackingFunction,
      url: "http://menu-item.com",
    },
  ]}
/>

Injecting header icons

Sometimes an application might want to show additional icon in the header (think comparison tool, which is only applicable in listings). To support that we provide extraIcons optional prop that can be used like this:

<Header
  language="de"
  extraIcons={[
    <ComparisonIcon />
  ]}
/>

Development

npm run build

Whenever you change the json translation files, run

npm run build:translations

You can link your local npm package to integrate it with any local project:

cd carforyou-header-footer-pkg
npm run build

cd carforyou-listings-web
npm link ../carforyou-header-footer-pkg

If this throws an Invalid hook call error when integrating with a next.js project, add the following to the webpack config:

config.resolve.alias["react"] = path.resolve(__dirname, "node_modules", "react")
config.resolve.alias["react-dom"] = path.resolve(__dirname, "node_modules", "react-dom")

Release a new version

New versions are released on the ci using semantic-release as soon as you merge into master. Please make sure your merge commit message adheres to the corresponding conventions.

Circle CI

You will need to enable the repository in circle CI ui to be able to build it.

For slack notifications to work you will need to provide the token in circle settings.