open-index/open-npm huggingface dataset:
npm package: @justeat/eslint-config-fozzie
Description: Just Eat's JS ESLint config, which follows our styleguide
Latest version: 5.5.0

# eslint-config-fozzie
[![npm version](https://badge.fury.io/js/%40justeat%2Feslint-config-fozzie.svg)](https://badge.fury.io/js/%40justeat%2Feslint-config-fozzie)

This package provides Just Eat's base JS .eslintrc as an extensible shared config.

It extends the [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base) ruleset with our own set of JS linting rules.

Many thanks to the work that the Airbnb team have put in on creating their template for extension rules – we have liberally borrowed from their structure and documentation in creating this ruleset.

## Usage

### eslint-config-fozzie

Our default export contains all of our ESLint rules, including ECMAScript 6+. It requires `eslint` and `eslint-plugin-import`.

1. Install the correct versions of each package, which are listed by the command:

  ```sh
  npm info "@justeat/eslint-config-fozzie@latest" peerDependencies
  ```

  Linux/OSX users can simply run
  ```sh
  (
    export PKG=@justeat/eslint-config-fozzie;
    npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
  )
  ```

  Which produces and runs a command like:

  ```sh
    npm install --save-dev @justeat/eslint-config-fozzie eslint@^#.#.# eslint-plugin-import@^#.#.#
  ```

  Windows users can either install all the peer dependencies manually, or use the [install-peerdeps](https://github.com/nathanhleung/install-peerdeps) cli tool.

  ```sh
  npm install -g install-peerdeps
  install-peerdeps --dev @justeat/eslint-config-fozzie
  ```

  The cli will produce and run a command like:

  ```sh
  npm install --save-dev @justeat/eslint-config-fozzie eslint@^#.#.# eslint-plugin-import@^#.#.#
  ```

2. Add `"extends": "@justeat/eslint-config-fozzie"` to your `.eslintrc` file, which should look like this:
```
// Use this file as a starting point for your project's .eslintrc.js
// Copy this file, and add rule overrides as needed.
module.exports = {
    extends: '@justeat/eslint-config-fozzie'
}
```


## Testing

You can run tests on this ruleset with `npm test`.

You can make sure this module lints with itself using `npm run lint`.
npm package: @justeat/f-account-info
Description: Fozzie Account Info - The account information page
Latest version: 1.8.1

<div align="center">

# f-account-info

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

The account information page

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-account-info.svg)](https://badge.fury.io/js/%40justeat%2Ff-account-info)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-account-info/badge.svg)](https://coveralls.io/github/justeat/f-account-info)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-account-info/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-account-info?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-account-info
```

```sh
npm install @justeat/f-account-info
```



### Vue Applications

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

```js
import AccountInfo from '@justeat/f-account-info';
import '@justeat/f-account-info/dist/f-account-info.css';

export default {
    components: {
        AccountInfo
    }
}
```

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

```js
import '@justeat/f-account-info/dist/f-account-info.css';

export default {
    components: {
        // …
        AccountInfo: () => import(/* webpackChunkName: "account-info" */ '@justeat/f-account-info')
    }
}
```

## Configuration

### Props

There may be props that allow you to customise its functionality.

The props that can be defined are as follows (if any):

| Prop  | Type  |  Required | Description |
| ----- | ----- |  ------- | ----------- |
| authToken | string | false | the users authorisation token |
| isAuthFinished | boolean | true | a flag indicating if the authorisation process has completed |
| smartGatewayBaseUrl | string | true | the smartgateway host |
| loginPath | string | false | the redirect path if the GET fails with a 403, if not supplied then will not redirect |

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-account-info` package:

```sh
$ cd packages/components/pages/f-account-info
```

## Testing

To test all components, run from root directory.
To test only `f-account-info`, run from the `./fozzie-components/packages/components/pages/f-account-info` directory.

### Unit and Integration tests

```sh
yarn test
```

### Component and Accessibility Tests

```bash
# Note: Ensure Storybook is running when running the following commands
cd ./fozzie-components

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

### Accessibility tests
```sh
yarn test-a11y:chrome
```

## Documentation to be completed once module is in stable state.
npm package: @justeat/f-alert
Description: Fozzie Alert – Fozzie Alert Component
Latest version: 6.3.1


<div align="center">
  <h1>f-alert</h1>

  <img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

  <p>Fozzie Alert Component</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-alert.svg)](https://badge.fury.io/js/%40justeat%2Ff-alert)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)

## Usage

### Installation

This package can be installed using npm or yarn:

```sh
yarn add @justeat/f-alert
```

```sh
npm install @justeat/f-alert
```

The package also has dependencies that need to be installed by consuming components/applications:

| Dependency | Command to install | Styles to include |
| ----- | ----- | ----- |
| f-button | `yarn add @justeat/f-button` | `import '@justeat/f-button/dist/f-button.css';` |

### Vue Applications

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

```js
import FAlert from '@justeat/f-alert';
import '@justeat/f-alert/dist/f-alert.css';

export default {
    components: {
        FAlert
    }
}
```

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

```js
import '@justeat/f-alert/dist/f-alert.css';

export default {
    components: {
        ...
        FAlert: () => import(/* webpackChunkName: "f-alert" */ '@justeat/f-alert')
    }
}

```

## Configuration

### Props

`f-alert` has a number of props that allow you to customise its functionality.

The props that can be defined are as follows:

| Prop  | Type  | Required | Default | Description |
| ----- | ----- | -------- |------- | ----------- |
| `locale` | `String` | No |`` | Sets locale for I18n. |
| `type` | `String` | Yes |`success` | Sets the modifier theme for styling. Options:  `success`, `warning`, `info`, `danger`. |
| `heading` | `String` | Yes |`` | The title text of the alert |
| `isDismissible` | `Boolean` | No |  `false` | Controls whether or not to display the alert close button. |

### CSS Classes

`f-alert` has its own styles which are scoped to the component using CSS modules to prevent conflicts with existing styles on the page.

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-alert` package:

```sh
$ cd packages/components/molecules/f-alert
```

### Running storybook

Storybook can be used to develop new and existing components.

To start storybook:

> Please ensure you are in the f-alert directory as outlined in the above instructions.

```sh
# cd to the storybook package
$ cd ../../../storybook

# Run storybook
$ yarn storybook:serve
```

This will build and serve storybook at [http://localhost:8080](http://localhost:8080).
npm package: @justeat/f-build-config
Description: Shared configuration object used by all `f-build` packages.
Latest version: 0.3.0

<div align="center">
<h1>f-build-config</h1>

<img width="125" alt="Fozzie Bear" src="bear.png" />

<p>Contains the shared configuration used for all `f-build` packages.</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-build-config.svg)](https://badge.fury.io/js/%40justeat%2Ff-build-config)
[![Build Status](https://travis-ci.org/justeat/f-build-config.svg)](https://travis-ci.org/justeat/f-build-config)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-build-config/badge.svg)](https://coveralls.io/github/justeat/f-build-config)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-build-config/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-build-config?targetFile=package.json)

---

## Quick Guide

README To Be Written
npm package: @justeat/f-build-js
Description: Fozzie Build configuration for JS components
Latest version: 0.2.1

<div align="center">
<h1>f-build-js</h1>

<img width="125" alt="Fozzie Bear" src="bear.png" />

<p>Webpack configuration for JS Builds</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-build-js.svg)](https://badge.fury.io/js/%40justeat%2Ff-build-js)
[![Build Status](https://travis-ci.org/justeat/f-build-js.svg)](https://travis-ci.org/justeat/f-build-js)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-build-js/badge.svg)](https://coveralls.io/github/justeat/f-build-js)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-build-js/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-build-js?targetFile=package.json)

---

## Quick Guide

README To Be Written

## Overriding default configuration

`f-build-js` is setup with a bunch of sensible defaults that the majority of projects will be able to use out of the box.

However, should you wish to adjust the config of any part of webpack config, you can hook into the rules and merge/override them with your own configuration using the [hooks in `webpack-chain`](https://github.com/neutrinojs/webpack-chain/blob/master/README.md#config-module-rules-uses-loaders-modifying-options).

For example, say you wanted to change the name of the JS file being produced from the default entrypoint, you would do so in the following way:

```js
const webpackConfig = require('@justeat/f-build-js');

webpackConfig
    .output
        .path(__dirname)
        .filename('testName.js');
```

For overwriting or adding options within a loaders configuration you will need to use these hooks combined with the [`babel-merge` package](https://github.com/eliperelman/babel-merge).

One example would be if you wanted to override the default behaviour of the ESLint rule to turn off auto-fixing. You could do this by declaring the following in your `webpack.config.js`:

```js
const webpackConfig = require('@justeat/f-build-js');
const merge = require('babel-merge');

webpackConfig.module
    .rule('jsLinting')
        .use('eslint')
            .tap(options => merge(options, {
                fix: false // turn off autofix
            }));

module.exports = webpackConfig.toConfig();
```

A full list of the named rules and loaders you can hook into are listed below.


## Rules

TODO
npm package: @justeat/f-build-scss
Description: Fozzie Build configuration for Sass components
Latest version: 0.12.0

<div align="center">
<h1>f-build-scss</h1>

<img width="125" alt="Fozzie Bear" src="bear.png" />

<p>Webpack configuration for SCSS Builds</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-build-scss.svg)](https://badge.fury.io/js/%40justeat%2Ff-build-scss)
[![Build Status](https://travis-ci.org/justeat/f-build-scss.svg)](https://travis-ci.org/justeat/f-build-scss)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-build-scss/badge.svg)](https://coveralls.io/github/justeat/f-build-scss)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-build-scss/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-build-scss?targetFile=package.json)

---

## Quick Guide

This module essentially finds and generates an Array of webpack-chain config objects, a builder for which is returned when this module is called.

Ideally, we would use one webpack-chain object with multiple entry points (to avoid duplication), but due to a bug in Eyeglass this isn't possible (as it returns the same output for the multiple CSS outputs).
This also in turn means that we cannot generate a single manifest as a result of the CSS bundling, but rather need to generate one for each entry file (i.e., `je.css`, `je.menulog.css`), to be combined by the consuming application after the webpack build is finished.

## Example Usage

To run as part of a webpack build, the following gives an example of how the style config can be applied.

```js
const styleConfigBuilder = require('@justeat/f-build-scss'); // returns an array of webpack-chain objects

module.exports = (env, argv) => {
    const mode = settings.returnMode(argv);
    const styleConfig = styleConfigBuilder(mode);

    // Use map to apply common config to multiple webpack configs
    const rawStyleConfig = styleConfig.map(config => {
        config
          .mode(mode)
          .output
          .path(path.join(__dirname, 'wwwroot/hw'))
          .publicPath('/');

        return config.toConfig(); // Convert the webpack-chain object to a regular webpack config object
    });

    return [
        ...rawStyleConfig
    ];
};
```
npm package: @justeat/f-compatibility
Description: Fozzie Compatibility - Service to check browser compatibilities and warn users with incompatible browsers
Latest version: 0.4.0

<div align="center">

# f-compatibility

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

Service to check browser compatibilities and warn users with incompatible browsers

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-compatibility.svg)](https://badge.fury.io/js/%40justeat%2Ff-compatibility)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-compatibility/badge.svg)](https://coveralls.io/github/justeat/f-compatibility)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-compatibility/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-compatibility?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-compatibility
```

```sh
npm install @justeat/f-compatibility
```
npm package: @justeat/f-copy-assets
Description: Copies assets from node modules to a specified destination directory
Latest version: 1.1.0

﻿# f-copy-assets :bear:

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-copy-assets.svg)](https://badge.fury.io/js/%40justeat%2Ff-copy-assets)
[![Build Status](https://travis-ci.org/justeat/f-copy-assets.svg)](https://travis-ci.org/justeat/f-copy-assets)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-copy-assets/badge.svg)](https://coveralls.io/github/justeat/f-copy-assets)

A module that copies assets from node_modules to a specified destination directory, using promises


## Usage

```js
const copyAssets = require('@justeat/f-copy-assets');

const options = {
  pkgSrcGlob: 'node_modules/@justeat/*/',
  dest: 'assets/',
  verbose: true,
  logger: gutil.log
};

copyAssets(options)
```

## Module Options

### `pkgSrcGlob`

default: `"node_modules/*/"`

Glob to match directory (or directories) containing packages from which will be copied if they are found.

### `dest`

default: `"dist"`

The directory to copy files to.

### `verbose`

default: `false`

Whether or not to log the files that are being copied.

### `logger`

default: `console.log`

If `verbose`, the function to use for logging.


## Specifying assets to be copied

There are a few different ways this can be configured.

### Basic

```json
{
  "assets": {
    "root": "dist/",
    "glob": "img/**/*.{png,svg}"
  }
}
```

All files matching the glob `"dist/img/**/*.{png,svg}"` will be copied into an `img` directory in the `dest` directory.

## Specify a "dest" directory

```json
{
  "assets": {
    "root": "dist/",
    "glob": "img/**/*.{png,svg}",
    "dest": "./"
  }
}
```

All files matching the glob `"dist/img/**/*.{png,svg}"` will be copied into an `img` directory in the root of the project.

## Multiple asset configurations

```json
{
  "assets": [
    {
      "root": "dist/",
      "glob": "img/**/*.{png,svg}"
    },
    {
      "root": "src/",
      "glob": "templates/**/*",
      "dest": "./"
    }
  ]
}
```

All files matching the glob `"dist/img/**/*.{png,svg}"` will be copied into an `img` directory in the `dest` directory, _**and**_ all files matching the glob `"src/templates/**/*"` will be copied into a `templates` directory in the root of the project.

## Assets Options

### `root`

Root directory to search for assets. The file structure under `"root"` will be preserved, so in this example, copied assets would be found in `"assets/img/..."`.

### `glob`

Specify a glob pattern to search for assets which should be copied.

### `dest`

Specify the directory that the matched assets should be copied into. This option is not required — it will default to [the `dist` option within the module options](#module-options).
npm package: @justeat/f-development-context
Description: A package to provide development context options for Storybook and WebDriver
Latest version: 1.1.0

# f-development-context
- f-development-context provides entry points for the WebDriver Demo within components so that they can install the standard context of features
- You shouldn't manually add this to any of your components; the generator will add the devDependency and wire up the WebDriver test scripts automatically

<hr>

## Contexts Added
- **$logger** - The standard way to provide diagnostic output through `this.$logger`
- **$cookies** - The standard way to interact with cookies through `this.$cookies`
- **i18n** - The standard way to localise your components using `<i18n>`, `this.i18n` and `$t('message')`
- **VueX** - The standard way to store state information in components
- **$gtm** - The standard way to provide GTM access via `this.$gtm` (note: the variable name `gtm` is configurable)

### $logger Interface
- logError(message, store, additionalProperties)
- logWarn(message, store, additionalProperties)
- logInfo(message, store, additionalProperties)

### $cookies Interface
- Refer to third party documentation: https://www.npmjs.com/package/cookie-universal

### i18n Interface
- Refer to third party documentation: https://kazupon.github.io/vue-i18n/introduction.html

### VueX Interface
- Refer to third party documentation: https://vuex.vuejs.org/guide/

### $gtm Interface
- pushPlatformData(...)
- pushPageData(...)
- pushUserData(...)
- pushEvent(...)
- Refer to documentation: https://github.com/justeat/fozzie-components/blob/master/packages/services/f-analytics/README.md
npm package: @justeat/f-dom
Description: Fozzie JS DOM queries library.
Latest version: 1.1.0

<div align="center">
<h1>f-dom</h1>

<img width="125" alt="Fozzie Bear" src="bear.png" />

<p>Fozzie JS DOM queries library, built on top of <a href="https://www.npmjs.com/package/qwery">the qwery selector engine</a>.</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-dom.svg)](https://badge.fury.io/js/%40justeat%2Ff-dom)
[![Build Status](https://travis-ci.org/justeat/f-dom.svg)](https://travis-ci.org/justeat/f-dom)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-dom/badge.svg)](https://coveralls.io/github/justeat/f-dom)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-dom/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-dom?targetFile=package.json)


## Adding `f-dom` to your project

```bash
yarn add @justeat/f-dom
```

Then, inside your script import `f-dom`.

```js
import $ from '@justeat/f-dom';
```

## Usage

Each method has 2 parameters: mandatory `selector` and optional `root`.
If `root` parameter is not specified, search will be performed for all elements in the DOM, otherwise, search will be performed for `root` child elements.

`first` method returns first element in the DOM for the specified selector.

```js
const element = $.first('.btn');
...
const element = $.first('#btn', '.container');
```

`all` method returns all elements in the DOM for the specified selector.

```js
const element = $.all('.btn');
...
const element = $.all('.btn', '.container');
...
const element = $('.btn'); // short syntax
```

`exists` method returns true, if at least one element exists in the DOM, otherwise returns false.

```js
const exists = $.exists('.btn');
...
const exists = $.exists('.btn', '.container');
```
npm package: @justeat/f-error-message
Description: Fozzie Error Message – Generic inline error message
Latest version: 2.5.0


<div align="center">
  <h1>f-error-message</h1>

  <img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

  <p>Generic inline error message</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-error-message.svg)](https://badge.fury.io/js/%40justeat%2Ff-error-message)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-error-message/badge.svg)](https://coveralls.io/github/justeat/f-error-message)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-error-message/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-error-message?targetFile=package.json)


## Usage

### Installation

This package can be installed using npm or yarn:

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

```js
import ErrorMessage from '@justeat/f-error-message';
import '@justeat/f-error-message/dist/f-error-message.css';

export default {
    components: {
        ErrorMessage
    }
}
```

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

```js
import '@justeat/f-error-message/dist/f-error-message.css';

export default {
    components: {
        ...
        ErrorMessage: () => import(/* webpackChunkName: "error-message" */ '@justeat/f-error-message')
    }
}

```

## Configuration

### Props

`f-error-message` does not expose any props.

```js
<error-message>Default error message</error-message>
```

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-error-message` package:

```sh
$ cd packages/components/atoms/f-error-message
```

### Running storybook

Storybook can be used to develop new and existing components.

To start storybook:

> Please ensure you are in the f-error-message directory as outlined in the above instructions.

```sh
# cd to the storybook package
$ cd ../../../storybook

# Run storybook
$ yarn storybook:serve
```

This will build and serve storybook at [http://localhost:8080](http://localhost:8080).
npm package: @justeat/f-feature-management
Description: Service for querying feature values provided by Feature Management
Latest version: 0.11.0

# Feature Management

This service allows querying of feature flags as configured using the Feature
Management service via an injectable Nuxt plugin

## Usage

To create an instance of the service:

```javascript
const featuresService = new FeaturesService(store, {
    httpClient: $axios, // nuxt-axios plugin instance or compliant http client
    cookies: $cookies, // cookie-universal-nuxt plugin or compliant cookie store
    analytics: $gtm, // @justeat/f-analytics instance
    log: $log // See below
});
```

To manually fetch a new configuration file from the CDN:

```javascript
await featuresService.update();
```

To inject as a nuxt plugin:

```javascript
inject('features', featuresService.plugin);
```

## Configuration

The following configuration should be available in the store:

```javascript
{
  scope: 'my-scope', // your team / component scope
  environment: 'development', // development | production
  obfuscationKey: 'xtpEe9PoYlHTv14hJq6m', // key provided with scope
  pollInterval: 1000 * 60 // How frequently config should be polled for in ms
}
```

The service accesses this configuration from the store at the following
location:

```javascript
store.state.configuration.settings.featureManagement
```

## Logging

The log class must provide the following interface:

```javascript

class Log {
  info (message, tags, payload = {}) { ... }

  warn (message, tags, payload = {}) { ... }

  error (message, exception, tags, payload = {}) { ... }
}
```
npm package: @justeat/f-feature-management-vue
Description: Service for querying feature values provided by Feature Management, made reactive for Vue 2/3.
Latest version: 0.4.0

# Feature Management for Vue

This service wraps [f-feature-management](../f-feature-management) for use with Vue 2 or 3, allowing features to be queried in a reactive way (so they refresh when new config is loaded) if required.  Non-reactive querying is also possible.

## Usage

The `settings` object is documented in the main [f-feature-management](../f-feature-management) module. What this module adds is that the return "Feature Management" object has a property called `reactive`. If you call `featureManagement.reactive.getValue()` from a Vue context, it will be reactive and will be re-evaluated when new config is loaded by the Feature Management SDK.

Calling `getValue()` from the base "Feature Management" object will not be reactive and the value will remain until you explicitly call it again.

So for example if you have:

```javascript
  data: () => {
      featureManagement: createFeatureManagementForVue({/*settings*/})
    },
  computed: {    
    myDynamicFeatureStatus: () => {
      return this.featureManagement.reactive.getValue('my-feature') ? 'Feature On' : 'Feature Off'; //dynamic
    },
    myStaticFeatureStatus: () => {
      return this.featureManagement.getValue('my-feature') ? 'Feature On' : 'Feature Off'; //static
    }
  }
```

## vue-demi
[vue-demi](https://github.com/vueuse/vue-demi) provides some shims around Vue 2 / 3 to help libs be compatible with either.

For this library we are using the `set()` shim (only exists in Vue2).  There is a shim over `reactive()` for Vue2, which relies on the [composition-api](https://github.com/vuejs/composition-api) and converts the object to a Vue2 proxy (rather than creating a new proxy object, as `reactive()` does in Vue3).

We are not making use of this however, and indeed have not made `@vue/compositionapi` a peer dependency.  The use of the Feature Management instance within a Vue2 app will do this for us, and as long we use the Vue2 `set()` function all should be well.

__Note: the tests are set up to run under Vue3. We would ideally have the ability to run the tests under Vue2 as well.__
npm package: @justeat/f-filter-pill
Description: Fozzie Filter Pill - An interactive component for filter toggles.
Latest version: 1.5.0

<div align="center">

# f-filter-pill

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

Fozzie Filter Pill - An interactive component for filter toggles.

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-filter-pill.svg)](https://badge.fury.io/js/%40justeat%2Ff-filter-pill)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-filter-pill/badge.svg)](https://coveralls.io/github/justeat/f-filter-pill)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-filter-pill/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-filter-pill?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-filter-pill
```

```sh
npm install @justeat/f-filter-pill
```



### Vue Applications

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

```js
import FilterPill from '@justeat/f-filter-pill';
import '@justeat/f-filter-pill/dist/f-filter-pill.css';

export default {
    components: {
        FilterPill
    }
}
```

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

```js
import '@justeat/f-filter-pill/dist/f-filter-pill.css';

export default {
    components: {
        // …
        FilterPill: () => import(/* webpackChunkName: "filter-pill" */ '@justeat/f-filter-pill')
    }
}
```

## Configuration

### Props

There may be props that allow you to customise its functionality.

The props that can be defined are as follows (if any):

| Prop  | Type  | Default | Description |
| ----- | ----- | ------- | ----------- |

### Events

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

| Event | Description |
| ----- | ----------- |

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-filter-pill` package:

```sh
$ cd packages/components/atoms/f-filter-pill
```

## Testing

To test all components, run from root directory.
To test only `f-filter-pill`, run from the `./fozzie-components/packages/components/atoms/f-filter-pill` directory.

### Unit and Integration tests

```sh
yarn test
```

### Component and Accessibility Tests

```bash
# Note: Ensure Storybook is running when running the following commands
cd ./fozzie-components

yarn storybook:build
yarn storybook:serve-static
```

yarn test-component:chrome
```
### Accessibility tests
```bash
yarn test-a11y:chrome
```
## Documentation to be completed once module is in stable state.
npm package: @justeat/f-globalisation
Description: Fozzie Globalisation – A utility which wires up vue-i18n within your Smart Component
Latest version: 1.5.0


<div align="center">
  <h1>f-globalisation</h1>

  <img width="125" alt="Fozzie Bear" src="../../bear.png" />

  <p>A utility which wires up vue-i18n within your Smart Component</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-globalisation.svg)](https://badge.fury.io/js/%40justeat%2Ff-globalisation)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-globalisation/badge.svg)](https://coveralls.io/github/justeat/f-globalisation)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-globalisation/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-globalisation?targetFile=package.json)


## Usage

1.  Install the module using NPM or Yarn:

    ```bash
    yarn add @justeat/f-globalisation
    ```

2.  Import the Mixin

    F-Globalisation contains a mixin which should be imported into your "Smart Component", for example in F-Checkout import it into the Checkout.vue component as that is the root.

    ```
    import { VueGlobalisationMixin } from '@justeat/f-globalisation';

    export default {
        mixins: [VueGlobalisationMixin]
    }
    ```

3.  Add `tenantConfigs` to your component data

    The mixin will access your localisation by accessing this data property. See F-Checkout for an example if needed. It should expose an import for the localisation files in your component.

    ```
    import tenantConfigs from '../tenants';

    export default {
        mixins: [VueGlobalisationMixin],

        data () {
            return {
                tenantConfigs
            }
        }
    }
    ```

4. Now apply vue-i18n within your components

    Once installed; you should be able to access `$t`, `<i18n>` and `this.$i18n`. The correct locale messages should be loaded automatically and `en-GB` should also be loaded as a fallback.

    vue-i18n is not needed as a dependency, because it is registered by the host application, such as CoreWeb or Storybook and thus exists in context.

    The mixin also exposes a prop; so that you can pass a locale in from a website host where required.
npm package: @justeat/f-logger
Description: Client-side logging, error-logging and debugging utils
Author: Simon Sanders
Latest version: 0.8.1

<div align="center">
<h1>f-logger</h1>

<img width="125" alt="Fozzie Bear" src="https://github.com/justeat/global-component-library/blob/master/assets/src/img/logos/fozzie.svg" />

<p>JavaScript logging and error-logging component for the Just Eat Fozzie UI Component Library.</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-logger.svg)](https://badge.fury.io/js/%40justeat%2Ff-logger)


This component is designed to catch client-side errors and allow client-side logging which will report back via web server logs.

## Logging

- Allows logging points to be placed in the code

## Error logging

- Allows error logging points to be placed in the client-side JavaScript code
- Hooks onto window.onerror to catch unhandled exceptions
- Passes error message to a file on the web server as a querystring parameter, which can then be parsed via web server log parsers

## Logging utils

### Debugger

- Sets a debug flag in the client
- Returns debug info to the client
- Allows debug mode to be persisted through a cookie

### Outputter

- Using debug mode, optionally outputs the logging messages to the console
- For client platforms that do not support console, provides output to the browser window
npm package: @justeat/f-loyalty
Description: Fozzie Loyalty - provides a way for customers to collect loyalty stamps for restaurants
Latest version: 3.4.1

<div align="center">

# f-loyalty

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

provides a way for customers to collect loyalty stamps for restaurants

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-loyalty.svg)](https://badge.fury.io/js/%40justeat%2Ff-loyalty)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-loyalty/badge.svg)](https://coveralls.io/github/justeat/f-loyalty)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-loyalty/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-loyalty?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-loyalty
```

```sh
npm install @justeat/f-loyalty
```



### Vue Applications

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

```js
import VLoyalty from '@justeat/f-loyalty';
import '@justeat/f-loyalty/dist/f-loyalty.css';

export default {
    components: {
        VLoyalty
    }
}
```

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

```js
import '@justeat/f-loyalty/dist/f-loyalty.css';

export default {
    components: {
        // …
        VLoyalty: () => import(/* webpackChunkName: "v-loyalty" */ '@justeat/f-loyalty')
    }
}
```

## Configuration

### Props

There may be props that allow you to customise its functionality.

The props that can be defined are as follows (if any):

| Prop  | Type  | Default | Description |
| ----- | ----- | ------- | ----------- |

### Events

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

| Event | Description |
| ----- | ----------- |

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-loyalty` package:

```sh
$ cd packages/components/pages/f-loyalty
```

## Testing

To test all components, run from root directory.
To test only `f-loyalty`, run from the `./fozzie-components/packages/components/pages/f-loyalty` directory.

### Unit and Integration tests

```sh
yarn test
```

### Component and Accessibility Tests

```bash
# Note: Ensure Storybook is running when running the following commands
cd ./fozzie-components

yarn storybook:build
yarn storybook:serve-static
```

yarn test-component:chrome
```
### Accessibility tests
```bash
yarn test-a11y:chrome
```
## Documentation to be completed once module is in stable state.
npm package: @justeat/f-offers
Description: Fozzie Offers - displays offers to the customers
Latest version: 2.3.2

<div align="center">

# f-offers

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

displays offers to the customers

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-offers.svg)](https://badge.fury.io/js/%40justeat%2Ff-offers)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-offers/badge.svg)](https://coveralls.io/github/justeat/f-offers)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-offers/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-offers?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-offers
```

```sh
npm install @justeat/f-offers
```



### Vue Applications

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

```js
import VOffers from '@justeat/f-offers';
import '@justeat/f-offers/dist/f-offers.css';

export default {
    components: {
        VOffers
    }
}
```

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

```js
import '@justeat/f-offers/dist/f-offers.css';

export default {
    components: {
        // …
        VOffers: () => import(/* webpackChunkName: "v-offers" */ '@justeat/f-offers')
    }
}
```

## Configuration

### Props

There may be props that allow you to customise its functionality.

The props that can be defined are as follows (if any):

| Prop  | Type  | Default | Description |
| ----- | ----- | ------- | ----------- |

### Events

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

| Event | Description |
| ----- | ----------- |

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-offers` package:

```sh
$ cd packages/components/pages/f-offers
```

## Testing

To test all components, run from root directory.
To test only `f-offers`, run from the `./fozzie-components/packages/components/pages/f-offers` directory.

### Unit and Integration tests

```sh
yarn test
```

### Component and Accessibility Tests

```bash
# Note: Ensure Storybook is running when running the following commands
cd ./fozzie-components

yarn storybook:build
yarn storybook:serve-static
```

yarn test-component:chrome
```
### Accessibility tests
```bash
yarn test-a11y:chrome
```
## Documentation to be completed once module is in stable state.
npm package: @justeat/f-performance
Description: Fozzie Performance - RUM performance metric collector
Latest version: 0.3.0

<div align="center">

# f-performance

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

RUM performance metric collector

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-performance.svg)](https://badge.fury.io/js/%40justeat%2Ff-performance)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-performance/badge.svg)](https://coveralls.io/github/justeat/f-performance)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-performance/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-performance?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-performance
```

```sh
npm install @justeat/f-performance
```
npm package: @justeat/f-restaurant-card
Description: Fozzie Restaurant Card -  Responsible for displaying restaurant data and linking to a restaurant
Latest version: 1.6.3

<div align="center">

# f-restaurant-card

<img width="125" alt="Fozzie Bear" src="../../../../bear.png" />

 Responsible for displaying restaurant data and linking to a restaurant

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-restaurant-card.svg)](https://badge.fury.io/js/%40justeat%2Ff-restaurant-card)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-restaurant-card/badge.svg)](https://coveralls.io/github/justeat/f-restaurant-card)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-restaurant-card/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-restaurant-card?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-restaurant-card
```

```sh
npm install @justeat/f-restaurant-card
```



### Vue Applications

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

```js
import RestaurantCard from '@justeat/f-restaurant-card';
import '@justeat/f-restaurant-card/dist/f-restaurant-card.css';

export default {
    components: {
        RestaurantCard
    }
}
```

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

```js
import '@justeat/f-restaurant-card/dist/f-restaurant-card.css';

export default {
    components: {
        // …
        RestaurantCard: () => import(/* webpackChunkName: "restaurant-card" */ '@justeat/f-restaurant-card')
    }
}
```

## Configuration

### Props

There may be props that allow you to customise its functionality.

The props that can be defined are as follows (if any):

| Prop  | Type  | Default | Description |
| ----- | ----- | ------- | ----------- |

### Events

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

| Event | Description |
| ----- | ----------- |

## Development

Start by cloning the repository and installing the required dependencies:

```sh
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
```

Change directory to the `f-restaurant-card` package:

```sh
$ cd packages/components/molecules/f-restaurant-card
```

## Testing

To test all components, run from root directory.
To test only `f-restaurant-card`, run from the `./fozzie-components/packages/components/molecules/f-restaurant-card` directory.

### Unit and Integration tests

```sh
yarn test
```

### Component and Accessibility Tests

```bash
# Note: Ensure Storybook is running when running the following commands
cd ./fozzie-components

yarn storybook:build
yarn storybook:serve-static
```

yarn test-component:chrome
```
### Accessibility tests
```bash
yarn test-a11y:chrome
```
## Documentation to be completed once module is in stable state.
npm package: @justeat/f-services
Description: Fozzie Services - Shared Services for Components and projects
Latest version: 1.18.1

<!--suppress SpellCheckingInspection -->
<div align="center">

# f-services

<img width="125" alt="Fozzie Bear" src="../../../bear.png" />

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-services.svg)](https://badge.fury.io/js/%40justeat%2Ff-services)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Coverage Status](https://coveralls.io/repos/github/justeat/f-services/badge.svg)](https://coveralls.io/github/justeat/f-services)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-services/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-services?targetFile=package.json)

## Usage

### Installation

Install the module using NPM or Yarn:

```sh
yarn add @justeat/f-services
```

```sh
npm install @justeat/f-services
```

### Import the package

You can import it in your component/application like this (please note that styles have to be imported separately)

```js
import { windowServices } from '@justeat/f-services';

// You can then (optionally) destructure
const { addEvent, getWindowWidth, removeEvent } = windowServices;

```

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

### Services in the bundle:

----

#### Axios

##### `createClient`

Create an axios client.
##### `createCamelCaseClient`

Create an axios client with all response JSON transformed to camelCase.

##### `getNetworkDetails`

Uses the navigator API (falling back to moz/webkit) to return network information.

##### `objectToCamelCase`

Recursively converts object's property names to camelCase.

----

#### Globalisation

##### `getLocale`

Returns the locale for the current tenant, if the configuration for that locale is present, otherwise returns the default locale.

##### `getTheme`

Returns the theme based on the user's locale. Either `ml` for Menulog or `je` for Just Eat.

----

#### Window

Uses the `window-or-global` module for SSR compatibility.

##### `addEvent`

Add an event listener with a callback function. Optional throttling. Returns the function that will be called by the listener.

##### `getWindowHeight`

Returns the current innerHeight.

##### `getWindowWidth`

Returns the current innerWidth.

##### `removeEvent`

Remove an event listener. To remove a throttled event, pass in the value returned by `addEvent` when the listener was added.

----

#### Utilities

##### default export

Returns a deep object by traversing following the provided path.

----

#### Validations

##### `getFormValidationState`

Returns an object containing arrays of the names of valid and invalid validation rules.

##### `isValidPostcode`

Returns a boolean indicating whether the provided postcode is valid in the provided locale.

##### `isValidPhoneNumber`

Returns a boolean indicating whether the provided phone number is valid in the provided locale.x
npm package: @justeat/f-serviceworker
Description: Script for registering the service worker
Latest version: 1.0.1

# f-serviceworker :bear:

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-serviceworker.svg)](https://badge.fury.io/js/%40justeat%2Ff-serviceworker)
[![Build Status](https://travis-ci.org/justeat/f-serviceworker.svg)](https://travis-ci.org/justeat/f-serviceworker)
[![install size](https://packagephobia.now.sh/badge?p=@justeat/f-serviceworker)](https://packagephobia.now.sh/result?p=@justeat/f-serviceworker)

Contains the registration script for `service-worker.js` located in the root of your website.

```javascript
const sw = require('@justeat/f-serviceworker');
sw.register();
```

 on all pages that should be managed by the service worker.

 Optional configuration object can be passed containing the service-worker.js path. Defaults to /service-worker.js

 ```javascript
 Sw.register({ swPath: '/subdir/service-worker.js' });
 ```