@justeat/f-footer

f-footer

Global Footer Component for Vue.js.

---

---

1. Add the module to your project

   yarn add @justeat/f-footer
   

2. Import the component

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

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

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

   import '@justeat/f-footer/dist/f-footer.css';
   
   export default {
       components: {
           ...
           VueFooter: () => import(/* webpackChunkName: "vue-footer" */ '@justeat/f-footer')
       }
   }
   
   

   • If there is a vue-i18n plugin in the project, footer component can be called without any props:

   <vue-footer />

   • Or you can pass locale as a property to specify the tenant:

   <vue-footer locale="en-GB" />

3. Browser Support

   This component extends @justeat/browserslist-config-fozzie.

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-footer
cd ./fozzie-components/packages/f-footer
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-footer
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components/packages/f-footer
yarn test-component:chrome

Changelog

v4.6.1

October 12, 2021

Added

• f-contact-preferences to Circle CI cache.