@justeat/f-breadcrumbs

f-breadcrumbs

Provides clickable paths back to previous pages

Usage

• Install the module using NPM or Yarn:

  yarn add @justeat/f-breadcrumbs
  

  npm install @justeat/f-breadcrumbs
  

• Import the component

  You can import it in your Vue SFC like this (please note that styles have to be imported separately):

  import BreadCrumbs from '@justeat/f-breadcrumbs';
  import '@justeat/f-breadcrumbs/dist/f-breadcrumbs.css';
  
  export default {
      components: {
          BreadCrumbs
      }
  }
  

  If you are using Webpack, you can import the component dynamically to separate the bread-crumbs bundle from the main bundle.client.js:

  import '@justeat/f-breadcrumbs/dist/f-breadcrumbs.css';
  
  export default {
      components: {
          ...
          BreadCrumbs: () => import(/* webpackChunkName: "bread-crumbs" */ '@justeat/f-breadcrumbs')
      }
  }
  
  

Configuration

Props

The props that can be defined are as follows:

Prop	Type	Default	Description
links	Array - object	-	Defines a list of links to be rendered by f-breadcrumbs
hasBackground	Boolean	false	Defines if the breadcrumbs component will have a background or not

Examples

The prop Links, from the above table follows the structure below, more examples can be found within the components test directory.

[{
    name: 'Link 1',
    url: '/link/1',
    routerLink: false
},
{
    name: 'Link 2',
    url: '',
    routerLink: false
}];

Development

It is recommended to run the following commands at the root of the monorepo in order to install dependencies and allow you to view components in isolation via Storybook.

# cd ./fozzie-components
yarn install

## Testing
Unit / Integration / Contract

```bash
# Run Unit / Integration / Contract tests for all components
cd ./fozzie-components
yarn test

OR

# Run Unit / Integration / Contract tests for f-breadcrumbs
cd ./fozzie-components/packages/f-breadcrumbs
yarn test

Component Tests

# Run Component tests for all components
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components

yarn storybook:build
yarn storybook:serve-static
yarn test-component:chrome

OR

# Run Component tests for f-breadcrumbs
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components/packages/f-breadcrumbs
yarn test-component:chrome

Documentation to be completed once module is in stable state.

Changelog

v4.4.0

October 7, 2021

Added

• Conditional logic to visual regression tests (via new visual-regression-preflight.js script).
• Custom Github Action for triggering Circle CI pipeline when wip tag is removed.