@justeat/f-tabs

f-tabs

Switchable slots for content"

---

Usage

1. Install the module using NPM or Yarn:

   yarn add @justeat/f-tabs

   npm install @justeat/f-tabs

2. Import the component

   This component has two exports Tab.vue and Tabs.vue. The reasoning behind this is that due to the ability to register a tab with provide / inject, you may wish in a particular circumstance create your own tab and register it manually, therefore removing the need to import Tab.vue.

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

   import { Tabs, Tab } from '@justeat/f-tabs';
   import '@justeat/f-tabs/dist/f-tabs.css';
   
   export default {
       components: {
           Tabs,
           Tab
       }
   }
   

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

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

Configuration

Events

The events that can be subscribed to are as follows (if any):

Event	Description
change	Fired from f-tabs when the selected tab is changed. Payload contains the indices of the new and prev selected tabs.

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

Documentation to be completed once module is in stable state.