f-template-subnav

This component provides the styling for template that includes a breadcrumb, sub navigation navigation and a slot for the main body of the page.

On wider views, this will be laid out with the breadcrumb running along the top, the subnav on the left and the main body content positioned to the right of the subnav. A good example of where this might be used is on the account info pages.

Usage

Installation

Install the module using npm or Yarn:

yarn add @justeat/f-template-subnav

npm install @justeat/f-template-subnav

Vue Applications

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

import TemplateSubNav from '@justeat/f-template-subnav';
import '@justeat/f-template-subnav/dist/f-template-subnav.css';

export default {
    components: {
        TemplateSubNav
    }
}

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

import '@justeat/f-template-subnav/dist/f-template-subnav.css';

export default {
    components: {
        // …
        TemplateSubNav: () => import(/* webpackChunkName: "template-subnav" */ '@justeat/f-template-subnav')
    }
}

Configuration

Props

This component requires data that it needs to pass on to embedded components. This can be done using the following props:

| Prop | Type | Default | Required | Description | | ----- | ----- | ------- | ----- | ----------- | | breadcrumbs-links | array | [ ] | No (but expected) | An array of links objects (see example #1 below) | | navigation-links | array | [ ] | No (but expected) | An array of links objects (see example #2 below) |

Example #1 (breadcrumbs-links)

[
  {
    // Start of breadcrumb
    name: 'Link 1',
    url: '/link/1',
    routerLink: false
  },
  {
    name: 'Link 2',
    url: '/link/2',
    routerLink: true
  },
  {
    // End of (Current Active Page) breadcrumb
    name: 'Link 2'
  }
];

Example #2 (navigation-links)

Links can be rendered as either <a> or <router-link>. The to attribute will cause <f-link> to render a <router-link>. The href attribute will cause <f-link> to render an <a> link.

[
  {
      id: 'accountNavLinkInfo'  // Test Data Id
      to|href: '/account/info', // `to` or `href`
      name: 'Account info',
  },
  {
      id: 'accountNavLinkOrderHistory',
      to: '/order-history',
      name: 'Your orders'
  }
]

Slots

This component has a space (main body) for a dynamic component to be added at runtime via a slot, see an example below:

  <template-sub-nav
      :breadcrumb-links="breadcrumbLinks"
      :navigation-links="navigationLinks">

The Slot component is then added here:

      <contact-preferences
          :auth-token="authToken"
          :locale="locale"
          :smart-gateway-base-url="settings.smartGatewayBaseUrl" />

  </template-sub-nav>

Development

Start by cloning the repository and installing the required dependencies:

$ git clone [email protected]:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn

Change directory to the f-template-subnav package:

$ cd packages/components/templates/f-template-subnav

Testing

To test all components, run from root directory. To test only f-template-subnav, run from the ./fozzie-components/packages/components/templates/f-template-subnav directory.

Unit and Integration tests

yarn test

Component and Accessibility Tests

As this component contains no, or very little, logic it only needs visual testing which will be the responsibility of the consuming component.