@carforyou/header-footer

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';

Then, use components as follows

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

<Header
  language="de"
  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",
    },
  ]}
/>

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.