open-index/open-npm huggingface dataset:
npm package: @justeat/f-spinner
Description: Fozzie Spinner - loading indicator
Latest version: 1.3.0

<div align="center">

# f-spinner

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

loading indicator

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-spinner.svg)](https://badge.fury.io/js/%40justeat%2Ff-spinner)
[![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-spinner/badge.svg)](https://coveralls.io/github/justeat/f-spinner)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-spinner/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-spinner?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

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

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



### Vue Applications

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

```js
import VSpinner from '@justeat/f-spinner';
import '@justeat/f-spinner/dist/f-spinner.css';

export default {
    components: {
        VSpinner
    }
}
```

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

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

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

## Configuration

### Events

The spinner handles the following events:

| Event | Description |
| ----- | ----------- |
| 'stop-spinner' | Hides the spinner and displays the slot component |
| 'start-spinner' | Hides the slot component and runs displays the spinner |

To use these events, use `this.$parent.$emit('start-spinner')` or `this.$parent.$emit('stop-spinner')`.
`f-spinner` cannot handle `this.$emit` as is not possible to access `this.$emit` from a slot.

## 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-spinner` package:

```sh
$ cd packages/components/atoms/f-spinner
```

## Testing

To test all components, run from root directory.
To test only `f-spinner`, run from the `./fozzie-components/packages/components/atoms/f-spinner` 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-templates
Description: Locate, compile, and serve HTML from templates.
Latest version: 1.5.1

# `f-templates` :bear:

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


## About

The purpose of this module is to copy a JavaScript module into your web project which can
locate, compile, and serve HTML from templates. This is achieved by using the [gulp-build-fozzie `copy:assets`](https://github.com/justeat/gulp-build-fozzie#copyassets) task.


## Adding `f-templates` to your project

Add the module to your dependencies

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

Once the module has been copied into your project (via the [gulp-build-fozzie `copy:assets`](https://github.com/justeat/gulp-build-fozzie#copyassets) task) you can use it in the following ways.

### Node

Require and call the imported module:

```js
const templates = require('./templates');

const html = templates.getTemplate(callback, moduleName, language, options);
```

### .Net Core

If you are using the [NodeServices NuGet package](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.NodeServices#microsoftaspnetcorenodeservices) then you can call it like this:

```csharp
public async Task<IActionResult> MyAction([FromServices] INodeServices nodeServices)
{
    var result = await nodeServices.InvokeExportAsync<string>("./templates", getTemplate, templateName, language, options);
    return new HtmlString(result);
}
```

## Parameters

- `callback` is a function which should be called upon completion. This is not required when using NodeServices in .Net Core.

- `moduleName` is the name of the template file which you would should be used to generate the HTML.

- `language` is a string containing the country code for the language you'd like the templates to compile with e.g. "fr-CA" for French Canadian.

- `options` is an optional parameter in which you can pass parameters which will be used in the template.
npm package: @justeat/f-test-data-creator
Description: Fozzie Test Data Creator - Generates data for testing purposes
Latest version: 0.4.0

<div align="center">

# f-test-data-creator

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



</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-test-data-creator.svg)](https://badge.fury.io/js/%40justeat%2Ff-test-data-creator)
[![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-test-data-creator/badge.svg)](https://coveralls.io/github/justeat/f-test-data-creator)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-test-data-creator/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-test-data-creator?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-test-data-creator
```

```sh
npm install @justeat/f-test-data-creator
```
npm package: @justeat/f-trak
Description: Analytics module that provides a consistent interface for reporting analytics
Latest version: 1.0.0

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

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

<p>Analytics module that provides a consistent interface for reporting analytics.</p>
</div>

---

# `f-trak` :bear:

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

## Setup

Add `f-trak` to your project:

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

Then, inside your script import the module such that:

```js
import Trak from '@justeat/f-trak';
```

## Usage

### Event Throttling

Throttles events by a given timeout (in seconds) using the event action as a key.

**For example**

```html
<!-- Set event throttling to 1 minute -->
<button
  data-trak='{
    "trakEvent": "click",
    "category": "My test category",
    "action": "My test action",
    "label": "My test label"
    "throttle": 60
}'
>
  My Test Button
</button>
```

### Contribution notes

If you use Volta, compatible node and yarn versions will be automatically used. If not, please install the versions found in the volta config in `package.json`.

For testing with other applications, I found `yalc@1.0.0-pre.35` to work. The latest version of yalc gave "primordials is not defined" when it ran the prepare script.
npm package: @justeat/f-user-message
Description: Fozzie User Message – Globalised User Message Component
Latest version: 4.3.1

<!-- markdownlint-disable -->
<div align="center">
    <h1>f-user-message</h1>

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

    <p>Global User message Component for Vue.js.</p>
</div>

---

[![Coverage Status](https://coveralls.io/repos/github/justeat/f-user-message/badge.svg)](https://coveralls.io/github/justeat/f-user-message)
[![CircleCI](https://circleci.com/gh/justeat/fozzie-components.svg?style=svg)](https://circleci.com/gh/justeat/workflows/fozzie-components)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-user-message/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-user-message?targetFile=package.json)
<!-- markdownlint-enable -->

<!-- markdownlint-disable MD002 -->
## Usage
<!-- markdownlint-enable -->

1. Install the module using NPM or Yarn:

    ```bash
    yarn add @justeat/f-user-message
    # Alternatively if using npm
    npm install @justeat/f-user-message
    ```

2. Import the component

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

    ```JavaScript
    import UserMessage from '@justeat/f-user-message';
    import '@justeat/f-user-message/dist/f-user-message.css';
    export default {
        components: {
            UserMessage
        }
    }
    ```

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

    <!-- markdownlint-disable MD013 -->
    ```JavaScript
    import '@justeat/f-user-message/dist/f-user-message.css';
    export default {
        components: {
            ...
            UserMessage: () => import(/* webpackChunkName: "vue-user-message" */ '@justeat/f-user-message')
        }
    }
    ```
    <!-- markdownlint-enable MD013 -->

3. Properties which component accepts:

    `locale` - If there is a vue-i18n plugin in the project, the user message
     component can be called without locale property, otherwise it accepts it
     in format like 'en-GB'

## 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.

```bash
# cd ./fozzie-components
yarn install

## Testing
Unit / Integration / Contract

```bash
# Run Unit / Integration / Contract tests for all components
cd ./fozzie-components
yarn test
```

OR

```bash
# Run Unit / Integration / Contract tests for f-user-message
cd ./fozzie-components/packages/f-user-message
yarn test
```

Component Tests
```bash
# 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

```bash
# Run Component tests for f-user-message
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components/packages/f-user-message
yarn test-component:chrome
```
npm package: @justeat/f-utilities
Description: A repo of useful Fozzie JS modules
Latest version: 0.8.8

# `f-utilities` :bear:

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

A repo of useful Fozzie JS modules

------

## Quick Guide

### Build Tasks

These are located in `gulpfile.js` in the root of the project.

### Documentation files

These are located in the `docs` folder from the root of the project.

### Assets

All assets should be put in the relevant directories within the `src` folder.

### Tests

JavaScript tests should be located in the `test` directory at the root of the project or in the `test` directory of the JavaScript module.
npm package: @justeat/f-validate
Description: Fozzie vanilla JS Validation Component
Latest version: 1.5.0

# `f-validate` :bear:

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

Fozzie vanilla JS Validation Component.


## Adding `f-validate` to your project

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

Then, inside your script import and run `f-validate`.

```js
import validate from '@justeat/f-validate';

//to be confirmed
```
npm package: @justeat/f-vue-icons
Description: <div align="center"> <h1>f-vue-icons</h1>
Latest version: 3.14.2

<div align="center">
<h1>f-vue-icons</h1>

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

<p>Shared Icon Components for Vue.js.</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-vue-icons.svg)](https://badge.fury.io/js/%40justeat%2Ff-vue-icons)
[![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-vue-icons/badge.svg)](https://coveralls.io/github/justeat/f-vue-icons)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-vue-icons/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-vue-icons?targetFile=package.json)

---
## Usage

### Installation

Add the module to your project

```bash
yarn add @justeat/f-vue-icons
```

### Vue Applications

```js
// Only import what you need!
import { AlertIcon, PaymentAmexIcon, ... } from '@justeat/f-vue-icons'
```

Within the context of a Vue app, that will look like:

  ```js
  <template>
      <alert-icon />
      <payment-amex-icon />
  </template>


  <script>
  import { AlertIcon, PaymentAmexIcon, ... } from '@justeat/f-vue-icons';

  export default {
      components: {
          AlertIcon,
          PaymentAmexIcon
      }
  };
  </script>
  ```

### Tree shaking

By using ES imports like `import { AlertIcon } from '@justeat/f-vue-icons'` with Webpack v4 or Rollup, unused exports in this module will be automatically eliminated.

If you can't use a tree-shaking compatible build tool, then you can use the per-file icons from [`icons`](https://unpkg.com/@justeat/f-vue-icons/icons/) directory, e.g. `import AlertIcon from '@justeat/f-vue-icons/icons/AlertIcon'`.


### Browser Support

The component extends [@justeat/browserslist-config-fozzie](https://github.com/justeat/browserslist-config-fozzie) package for the list of browsers to support.


## Contributing

Before staring please read our [contributing guide](https://vue.pie.design/?path=/story/documentation-getting-started-contributing--page)

### Adding new icons

This package uses our [`@justeat/f-icons` svg library](https://github.com/justeat/f-icons) and compiles component files on build.

To build new icon components you need to add new svgs to `@justeat/f-icons`, publish the package, than bump the f-icons version here and build the module.

### Building the Module

Run `yarn build` to compile the module.

### Running the Tests

Run `yarn test` to run the tests.

## Icon list

You can check the list of all the icons in our [Storybook](https://vue.pie.design/?path=/story/components-atoms--icons).


## Credits

This package was heavily inspired by the excellent [`vue-feather-icons`](https://github.com/egoist/vue-feather-icons) package.
npm package: @justeat/f-wdio-utils
Description: Fozzie Wdio Utils - webdriverIO page object
Latest version: 1.4.0

<div align="center">

# f-wdio-utils</h1>

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

webdriverIO page object

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-wdio-utils.svg)](https://badge.fury.io/js/%40justeat%2Ff-wdio-utils)
[![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-wdio-utils/badge.svg)](https://coveralls.io/github/justeat/f-wdio-utils)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-wdio-utils/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-wdio-utils?targetFile=package.json)

---

## Usage

### Installation

Install the module using npm or Yarn:

```sh
yarn add @justeat/f-wdio-utils
```

```sh
npm install @justeat/f-wdio-utils
```
npm package: @justeat/fozzie-updater
Description: Common update for use in Fozzie projects.
Latest version: 0.5.0

# Fozzie Updater

This node package is intended as a helper when updating any [fozzie](https://github.com/justeat/fozzie) component

## Installing
```
npm i -g @justeat/fozzie-updater
```

## How to use
- Navigate to the root directory of the fozzie component
- Run `fozzie-updater`
- Run the modifier commands (below) that state what changes have been made
- Performing the update with `run` when you are ready. It is advised to use the `summary` command before performing `run`

## Base Commands

### run
Performs update

### summary
Displays output that will be added at the top of the CHANGELOG.md

### help [command...]
Provides help for a given command

### exit
Exits application

## Modifier Commands

### added <description...>
Adds a line to the `Added` changelog section

### changed <description...>
Adds a line to the `Changed` changelog section

### fixed <description...>
Adds a line to the `Fixed` changelog section

### removed <description...>
Adds a line to the `Removed` changelog section

### version [semver|major|minor|patch]
Sets the new version of the package being updated. The `minor` version is bumped up one version by default

## TODO
- Create tag
- Publish to npm
- Create a release on GitHub
- Tests
npm package: @justeat/generator-component
Description: Generator Component – A generator for Fozzie components
Latest version: 2.15.0

<div align="center">

# generator-component

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

A generator for Fozzie components.

</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Fgenerator-component.svg)](https://badge.fury.io/js/%40justeat%2Fgenerator-component)
[![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/generator-component/badge.svg)](https://coveralls.io/github/justeat/generator-component)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/generator-component/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/generator-component?targetFile=package.json)


## Usage

### Installation

First, install `yeoman` if you haven't already done so:

```sh
$ npm install --global yo
```

And then install the component generator:

```sh
$ npm install --global @justeat/generator-component
```

### Running the generator

To run the generator, use this command from any directory within the `fozzie-components` repo:

```sh
yo @justeat/component
```

An interactive prompt should now be displayed asking for a Component name, description and a number of options for you to define the component that you are creating.

Once you have completed all the prompts, your scaffolded component will be generated 🎉

## Contributing

In order to contribute to the `generator-component`, it's advised to link your local build of the generator to Yeoman.

To do this, run `yarn link` from the root of the `generator-component` folder in the mono-repo.

Once you have done this, running `yo @justeat/component` will run your local copy of the generator (rather than the version installed globally via NPM).

## Note
!!! There is a manual step temporary required: Please, add your component to `.circleci/config.yml` under `save_cache_dist_directories` manually after the component is generated.
npm package: @justeat/generator-fozzie
Description: <div align="center"> <h1>generator-fozzie</h1>
Latest version: 1.2.0

<div align="center">
<h1>generator-fozzie</h1>

<img width="125" alt="Fozzie Bear" src="bear.png" />

<p><code>generator-fozzie</code> creates a base template to start a new Fozzie module.</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Fgenerator-fozzie.svg)](https://badge.fury.io/js/%40justeat%2Fgenerator-fozzie)

## Install

First, install `yo` if you haven't already done so

```
$ npm install --global yo
```

Then install `generator-fozzie`

```
$ npm install --global generator-fozzie
```

## Usage

```
$ yo fozzie
```