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.
Install the module using npm or Yarn:
yarn add @justeat/f-template-subnav
npm install @justeat/f-template-subnav
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')
}
}
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'
}
]
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>
Start by cloning the repository and installing the required dependencies:
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
Change directory to the f-template-subnav
package:
$ cd packages/components/templates/f-template-subnav
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.
yarn test
As this component contains no, or very little, logic it only needs visual testing which will be the responsibility of the consuming component.