open-index/open-npm huggingface dataset:
npm package: @financial-times/o-loading
Description: A visual loading indicator, available in two colours and four sizes
Latest version: 6.0.1

# o-loading

This is an [Origami](http://origami.ft.com/) component that provides a visual loading indicator.

- [Usage](#usage)
- [Markup](#markup)
- [Sass](#sass)
- [Migration guide](#migration-guide)
- [Contact](#contact)
- [Licence](#licence)

## Usage

Check out [how to include Origami components in your project](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) to get started with `o-loading`.

## Markup

In order to display a loading indicator in your product, you will need to supply the theme and the size modifiers in your markup, e.g.:

```html
<div class="o-loading o-loading--light o-loading--small"></div>
```

## Sass

In order to output all of the variations in theme and size of `o-loading`, you'll need to include the following:

```scss
@import '@financial-times/o-loading/main';

@include oLoading();
```

You can also be more selective about which themes or sizes of the loading indicator you wish to output, by using a map.
The `$opts` map accepts two lists:

'themes':

- light
- dark

And 'sizes':

- mini
- small
- medium
- large

```scss
@import '@financial-times/o-loading/main';

@include oLoading(
	$opts: (
		'themes': (
			'light',
		),
		'sizes': (
			'medium',
			'large',
		),
	)
);

// outputs a large light spinner and a medium light spinner
```

If you need to build a loading spinner into a component, for example, you can use the following mixin:

```scss
@import '@financial-times/o-loading/main';

.my-loading-spinner {
	@include oLoadingContent(
		$opts: (
			'theme': 'light',
			'size': 'small',
		)
	);
}
```

## Migration guide

|    State     | Major Version | Last Minor Release |                    Migration guide                    |
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
| ⚠ maintained |       6       |        N/A         | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
| ╳ deprecated |       5       |        5.2         | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
| ╳ deprecated |       4       |       4.0.4        | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
| ╳ deprecated |       3       |        3.1         | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
| ╳ deprecated |       2       |        2.3         | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
| ╳ deprecated |       1       |        1.0         |                           -                           |

## Contact

If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-loading/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
npm package: @financial-times/o-top-banner
Description: On site messaging for marketing and enhancement messages.
Latest version: 2.0.0

# o-top-banner

o-top-banner is used for marketing or enhancement messages along the top of the page. For similar messaging as an overlay, typically bottom left, see [o-banner](https://registry.origami.ft.com/components/o-banner). For service messaging such as "success" or "error" see [o-message](https://registry.origami.ft.com/components/o-message).

- [Usage](#usage)
- [Themes](#theme)
- [Markup](#markup)
- [Sass](#sass)
- [Migration](#migration)
- [Contact](#contact)
- [Licence](#licence)

## Usage

Check out [how to include Origami components in your project](https://origami.ft.com/docs/components/#including-components-in-your-project) to get started with `o-top-banner`.

## Themes

By default, `o-top-banner` supports 2 themes:

- `professional-inverse` – Exclusive used to advertise FT Professional.
- `new-world`

## Markup

Use the following markup for `o-top-banner`. Replace `o-top-banner--[theme]` with your [theme](#themes) and include relevant copy for the heading, copy, and button elements.

```html
<div class="o-top-banner o-top-banner--[theme]">
	<div class="o-top-banner__container">
		<div class="o-top-banner__content">
			<h2 class="o-top-banner__heading">Your heading</h2>
			<p class="o-top-banner__copy">You main copy goes here.</p>
		</div>

		<div class="o-top-banner__actions">
			<a href="#" class="o-top-banner__button">Your CTA</a>
		</div>
	</div>
</div>
```

## Sass

Use `@include oTopBanner()` to include styles for all `o-top-banner` [themes](#themes).

```scss
@import '@financial-times/o-top-banner';

@include oTopBanner();
```

Or use the `$opts` argument to output only the specific [themes](#themes) you need:

```scss
@import '@financial-times/o-top-banner';

@include oTopBanner(
	$opts: (
		'themes': (
			'new-world',
			'professional-inverse',
		),
	)
);
```

## Migration

|    State     | Major Version | Last Minor Release |                    Migration guide                    |
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
| ⚠ maintained |       2       |        N/A         | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
| ╳ deprecated |       1       |        1.1         |                           -                           |

## Contact

If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/origami/issues/new?labels=o-top-banner,components), visit [#origami-support](https://financialtimes.slack.com/messages/#origami-support/) or email [origami.support@ft.com](mailto:origami.support@ft.com).

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
npm package: @financial-times/o-utils
Description: Provides JS helper functions, such as throttling and debouncing
Latest version: 2.2.1

# o-utils [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)

Origami JS helpers.

- [Usage](#usage)
- [JavaScript](#javascript)
- [Contributing](#contributing)
- [Migration guide](#migration-guide)
- [Contact](#contact)
- [Licence](#licence)

## Usage

Check out [how to include Origami components in your project](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) to get started with `o-utils`.

## JavaScript

```JS
	import * as Utils from 'o-utils';
	const myFunction = () => {};
	Utils.throttle(myFunction, 100);
	Utils.debounce(myFunction, 100)
```

For more detailed explanation, refer to our [JSDoc](http://codedocs.webservices.ft.com/v1/jsdoc/o-utils)


## Contributing

This module is suitable for helper functions that need to be used commonly in other modules like throttle and debounce. These **must** be kept to a minimum.


## Migration Guide

State | Major Version | Last Minor Release | Migration guide |
:---: | :---: | :---: | :---:
✨ active | 2 | N/A | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
⚠ maintained | 1 | 1.1 | -   |

***

## Contact

If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-utils/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).

***

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
npm package: @financial-times/o3-web-token
Description: Origami web-tokens with design tokens
Latest version: 0.5.1

# o3-web-tokens

- [o3-web-tokens](#o3-web-tokens)
  - [Usage](#usage)
  - [Migration](#migration)
  - [Contact](#contact)
  - [Licence](#licence)

## Usage

`o3-web-token` provides CSS Custom Properties for design tokens representing colours, typographic scale, spacing, and iconography.

`o3-web-token` supports brands: `core`, `internal`, `professional` and `whitelabel`.

Import your chosen brand to begin using tokens in your CSS:

```css
@import '@financial-times/o3-web-tokens/core.css';

body {
	background-color: var(--o3-color-use-case-page-background);
	font-size: var(--o3-font-size-1);
	line-height: var(--o3-font-lineheight-1);
}
```

To add support for another brand, import its tokens too:

```diff
+@import '@financial-times/o3-web-tokens/core.css';
+@import '@financial-times/o3-web-tokens/internal.css';

.example-custom-link {
	color: var(--o3-color-link);
	font-size: var(--o3-font-size-3);
	line-height: var(--o3-lineheight-3);
}
```

Then apply the brand data selector `data-o3-brand="[BRAND]"` on a container element within your HTML.

```html
<body data-o3-brand="core">
	<a href="#" class="example-custom-link">Example</a>
</body>
```

## Migration

|   State   | Major Version | Last Minor Release | Migration guide |
| :-------: | :-----------: | :----------------: | :-------------: |
| ✨ active |       0       |        N/A         |       N/A       |

## Contact

If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/origami/issues/new?labels=o-buttons-experimental,components), visit [#origami-support](https://financialtimes.slack.com/messages/#origami-support/) or email [origami.support@ft.com](mailto:origami.support@ft.com).

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
npm package: @financial-times/origami-bower-safe-version-supervisor
Description: Check projects dependencies are using versions of origami which are avialable on both npm and bower
Latest version: 1.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Origami Bower Safe Version Supervisor

This is command-line application for use in projects which have not finished their miigration to npm-only Origami.

The application will exit with a non-zero exit code if it detects that an npm-only Origami dependency has been installed and will print out a detailed message about how to resolve the situation.

### How To Use

1. First, install as a development dependency

   ```shell
   npm install --save-dev "@financial-times/origami-bower-safe-version-supervisor"
   ```

2. Then add it as a postinstall script within your project's package.json file.

   ```json
   {
       "scripts": {
           "postinstall": "o-no"
       }
   }
   ```

3. That's it! Any time `npm install` is ran within your project, `o-no` will run and check that no npm-only Origami depdencies were installed. Once your project has finished the migration to npm-only Origami, you can remove the postinstall script and the development dependency @financial-times/origami-bower-helper.