open-index/open-npm huggingface dataset:
npm package: @lightspeed/apollo-logging-extension
Description: Standard output logging extension for Apollo GraphQL services
Latest version: 0.2.13

# `@lightspeed/apollo-logging-extension`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Fapollo-logging-extension.svg)](https://badge.fury.io/js/%40lightspeed%2Fapollo-logging-extension)

## Introduction

Standard output logging extension for GraphQL services. Logs the request operation, query, arguments, errors, and tracing information overall and per field.

## Quick Start

1. Install the dependency in your webapp.

```sh
yarn add apollo-server-express @lightspeed/apollo-logging-extension
```

2. Enable the extension and tracing in your Apollo server configuration. As a best practice, pass in the version and name of your service.

```ts
// server.ts
import ApolloLoggingExtension from '@lightspeed/apollo-logging-extension';

const { name, version } = require('./package.json');

const server = new ApolloServer({
  // ...
  extensions: [() => new ApolloLoggingExtension({ name, version })],
  tracing: true,
});
```

3. Optionally, enable variables logging for debugging purpose. This is explicitely turned off by default to prevent logging sensible information going through the GraphQL layer:

```ts
// server.ts
import ApolloLoggingExtension from '@lightspeed/apollo-logging-extension';

const { name, version } = require('./package.json');

const server = new ApolloServer({
  // ...
  extensions: [
    () =>
      new ApolloLoggingExtension({
        name,
        version,
        logVariables: process.env.NODE_CONFIG_ENV === 'development',
      }),
  ],
  tracing: true,
});
```
npm package: @lightspeed/apollo-new-relic-extension
Description: New Relic logging extension for Apollo GraphQL services
Latest version: 0.1.12

# `@lightspeed/apollo-new-relic-extension`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Fapollo-new-relic-extension.svg)](https://badge.fury.io/js/%40lightspeed%2Fapollo-new-relic-extension)

## Introduction

[**New Relic**](https://newrelic.com/) logging extension for GraphQL services. This extension will log all GraphQL transactions as New Relic transactions, providing insight into the operation query, an easily digestable time tracing summary, and a total error count.

## Quick Start

1. Install the dependency in your webapp.

```sh
yarn add newrelic @lightspeed/apollo-new-relic-extension
```

2. Configure New Relic by either creating a `newrelic.js` configuration file at the root directory of your service, or setting environment variables as described [here](https://docs.newrelic.com/docs/agents/nodejs-agent/installation-configuration/nodejs-agent-configuration). You will at least need to set the `app_name` and `license_key` configurations.

3. Add `require('newrelic');` as the first line of your application's entry point. Modules syncronously loaded after New Relic will be instrumented appropriately.

4. Enable the extension and tracing in your Apollo server configuration.

```ts
import ApolloNewRelicExtension from '@lightspeed/apollo-new-relic-extension';

// server.ts
const server = new ApolloServer({
  // ...
  extensions: [() => new ApolloNewRelicExtension()],
  tracing: true,
});
```
npm package: @lightspeed/apollo-next-app
Description: Apollo Client SSR/CSR integration with Next.js
Latest version: 0.2.3
Deprecated: Package no longer supported. Please refer to Web Portal documentation on how to implement.

# `@lightspeed/apollo-next-app`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Fapollo-next-app.svg)](https://badge.fury.io/js/%40lightspeed%2Fapollo-next-app)

## Introduction

[**Apollo Client**](https://www.apollographql.com/docs/react/) integration app HOC for Next.js applications that provides prefetching of data on client-side rendering (CSR) and server-side rendering (SSR).

## Quick start

### Install

```sh
yarn add @lightspeed/apollo-next-app
```

### Setup

In your Next.js application, enhance your `_app.tsx` component with the `withApollo` HOC. We have bundled a simple set of Apollo client instantiation dependencies with this module for convenience:

````tsx
import React from 'react';
import App, { Container } from 'next/app';
import getConfig from 'next/config';
import { withApollo, ApolloClient, HttpLink, InMemoryCache } from '@lightspeed/apollo-next-app';

// Assumes you have passed `process.env.BASE_GRAPHQL_URL` in your `next.config.js` file:
// ```
// const withLightspeed = require('@lightspeed/config-next');
//
// module.exports = withLightspeed({
//   publicRuntimeConfig: {
//     baseGraphQLUrl: process.env.BASE_GRAPHQL_URL,
//   },
// });
// ```
const { publicRuntimeConfig } = getConfig();
const { baseGraphQLUrl } = publicRuntimeConfig;

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    );
  }
}

export default withApollo({
  initApollo: ({ initialState }) =>
    new ApolloClient({
      link: new HttpLink({
        uri: typeof window !== 'undefined' ? '/graphql' : `${baseGraphQLUrl}/graphql`,
        credentials: 'include',
      }),
      cache: new InMemoryCache().restore(initialState || {}),
    }),
})(NextApp);
````

You can now start executing queries by following [Apollo Client's guide](https://www.apollographql.com/docs/react/essentials/queries/)!

#### Options

The following configuration options are available to the `withApollo` HOC.

| Key          | Type                         | Default   | Note                                        |
| ------------ | ---------------------------- | --------- | ------------------------------------------- |
| `initApollo` | `function`                   | N/A       | Factory function to build the Apollo client |
| `debug`      | `boolean`                    | `false`   | Enable debug mode                           |
| `prefetch`   | `'always'`, `'ssr'` or `'never'` | `'never'` | Prefetch on CSR and SSR, only SSR, or never |

### Apollo Client instance

Additionally, you'll have access to the `apolloClient` instance in the `NextContext` of your page `getInitialProps` functions.

```tsx
MyPage.getInitialProps = (ctx: NextContext) => {
  const { apolloClient } = ctx;
  // ...and do as you please!
};
```
npm package: @lightspeed/babel-preset-node
Description: Common Babel configuration for Lightspeed Node.js apps
Latest version: 0.3.2

# `@lightspeed/babel-preset-node`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Fbabel-preset-node.svg)](https://badge.fury.io/js/%40lightspeed%2Fbabel-preset-node)

## Introduction

[**Babel**](https://babeljs.io/) Node.js configuration and plugins in a convenient package.

## Features

- ✨ Transpile Node.js (and server-side React when used) TypeScript code to meet Lightspeed Node.js standards
- ➡ Absolute path resolving for root `src`:

```js
// From anywhere in your app, this will resolve to `<root>/src/components/MyComponent.(js,ts,jsx,tsx)
import { MyComponent } from 'src/components/MyComponent';
```

## Quick Start

1. Install the dependency in your webapp.

```sh
yarn add @babel/core @lightspeed/babel-preset-node
```

2. Consume the Babel preset.

```js
// babel.config.js
module.exports = {
  presets: ['@lightspeed/node'],
};
```

3. Optionally, extend the configuration as you see fit.

```js
// babel.config.js
module.exports = {
  presets: [
    [
      '@lightspeed/node',
      {
        'preset-env': {
          targets: {
            node: '8',
          },
        },
      },
    ],
  ],
};
```
npm package: @lightspeed/babel-preset-web
Description: Common Babel configuration for Lightspeed webapps
Latest version: 0.2.2

# `@lightspeed/babel-preset-web`

[![npm version](https://badge.fury.io/js/%40lightspeed%2Fbabel-preset-web.svg)](https://badge.fury.io/js/%40lightspeed%2Fbabel-preset-web)

## Introduction

[**Babel**](https://babeljs.io/) web configuration and plugins in a convenient package.

## Features

- ✨ Transpile React TypeScript code to meet Lightspeed browser requirements
- ➡ Absolute path resolving for root `src`:

```js
// From anywhere in your app, this will resolve to `<root>/src/components/MyComponent.(js,ts,jsx,tsx)
import { MyComponent } from 'src/components/MyComponent';
```

## Quick Start

1. Install the dependency in your webapp.

```sh
yarn add @babel/core @lightspeed/babel-preset-web
```

2. Consume the Babel preset.

```js
// babel.config.js
module.exports = {
  presets: ['@lightspeed/web'],
};
```

3. Optionally, extend the configuration as you see fit.

```js
// babel.config.js
module.exports = {
  presets: [
    [
      '@lightspeed/web',
      {
        'preset-env': {
          targets: {
            browsers: ['>0.25%', 'not op_mini all', 'ie <= 11', 'not dead'],
          },
        },
      },
    ],
  ],
};
```
npm package: @lightspeed/browserslist-config
Description: Common Browserslist configuration for Lightspeed webapps
Latest version: 0.2.0

# `@lightspeed/browserslist-config`

## Introduction

[**Browserslist**](https://twitter.com/browserslist) configuration in a convenient package.

We recommend to use a shared Babel configuration with a baked-in browserslist, such as that exposed in `@lightspeed/config-next`.

## Quick Start

1. Install the dependency in your webapp.

```sh
yarn add -D @lightspeed/browserslist-config
```

2. Consume the Browserslist configuration in `package.json`. Alternate query sources are described [here](https://github.com/browserslist/browserslist#queries).

```json
"browserslist": [
  "extends @lightspeed/browserslist-config"
]
```

1. Optionally, extend the configuration as you see fit.

```json
"browserslist": [
  "extends @lightspeed/browserslist-config",
  "ie <= 11"
]
```
npm package: @lightspeed/cirrus-alert
Description: Cirrus Alert Component
Author: Lightspeed
Latest version: 6.0.0-beta.1

# Alert

A cirrus themed Alert Component.

## Installation

1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2. Install the component library

```sh
yarn add @lightspeed/cirrus-alert
```

3. Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/* 
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4. Import `Alert` and use right away!


### React Component

#### Component props

| Prop                  | Type                                      | Description                                  |
| --------------        | ----------------------------------------- | -------------------------------------------- |
| `type`                | `info`, `warning`, `danger`, or `success` | default is `info`                            |
| `title`               | `string`                                  |                                              |
| `onClose`             | `fn()`                                    | custom `fn(event)` passed the event object   |
| `noCloseBtn`          | `boolean`                                 |                                              |
| `children` (required) | `any`                                     | The content of the alert                     |

**Example**

```js
import React from 'react';
import Alert from '@lightspeed/cirrus-alert';

const MyComponent = () =>
  <div>
    <Alert type="info" title="My Title">Alert content</Alert>
  </div>;

export default MyComponent;
```
npm package: @lightspeed/cirrus-autocomplete
Description: Cirrus Autocomplete Component
Author: Lightspeed
Latest version: 8.1.0

# Autocomplete

Select/Autocomplete Cirrus styling for [react-select](https://react-select.com) with custom predefined `DropdownIndicator`, `ClearIndicator`.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-autocomplete
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-autocomplete
```

## Usage

Import required components:

```js
import Select, { Async, AsyncCreatable, Creatable, Animated, formatCreateLabel } from '@lightspeed/cirrus-autocomplete';
```

#### Props

See `react-select`'s [Documentation](https://react-select.com/props).

#### Example

See the [examples folder](https://github.com/lightspeedretail/cirrus/tree/master/packages/Autocomplete/examples) for this component.

### CSS Component

Not available.
npm package: @lightspeed/cirrus-badge
Description: Cirrus Badge Component
Author: Lightspeed
Latest version: 7.0.0-beta.1

# Badge

Our basic badge component.

## Installation

1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2. Install the component library

```sh
yarn add @lightspeed/cirrus-badge
```

3. Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/* 
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4. Import `{ Badge }` and use right away!

### React Components

#### `<Badge>`

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `children` | React.ReactNode | The content to display inside the button |
| `type` | `'default', 'info', 'success', 'info', 'important', 'warning', 'danger'` | Style of badge |
| `size` | `'small', 'medium'` | Change size of badge |
| `bg` | string | Custom background color. Accepts any valid CSS color, i.e: `#000` |
| `color` | string | Custom text color. Accepts any valid CSS color, i.e: `#fff` |

#### `<PillBadge>`
_extends `<Badge>`_

#### Example

```js
import React from 'react';
import { Badge, PillBadge } from '@lightspeed/cirrus-badge';

const MyComponent = () =>
  <div>
    <Badge>My Badge</Badge>
    <PillBadge>My PillBadge</PillBadge>
  </div>;

export default MyComponent;
```
npm package: @lightspeed/cirrus-bone
Description: Cirrus Bone Component
Author: Lightspeed
Latest version: 4.0.0-beta.1

# Bone

Used to build the skeleton preview of a component while loading data.

## Installation

1.  Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2.  Install the component library

```sh
yarn add @lightspeed/cirrus-bone
```

3.  Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4.  Import `Bone` and use right away!

### React Component

#### Props

| Prop       | Type      | Description                                    |
| ---------- | --------- | ---------------------------------------------- |
| `width`    | `string`  | custom CSS width                               |
| `height`   | `string`  | custom CSS height                              |
| `animated` | `boolean` | whether the bone is animated (default: true)   |
| `bg`       | `string`  | Override the base background color of the bone |

#### Example

```js
import React from 'react';
import Bone from '@lightspeed/cirrus-bone';

const MyComponent = () => (
  <div>
    <Bone width="1rem" height="1rem" />
  </div>
);

export default MyComponent;
```
npm package: @lightspeed/cirrus-checkbox
Description: Cirrus Checkbox Component
Author: Lightspeed
Latest version: 6.0.3

# Checkbox
Checkbox component that supports the indeterminate state.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-checkbox
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-checkbox
```

## Usage
The use case of a checkbox is often confused with the one of a switch. The primary use case for a checkbox is when our user can select multiple values or to opt-in on something. The best and easiest way to remember if you should use a checkbox or a switch is by checking if the function is answering: 
Yes/No --> `<Checkbox>`
On/Off --> `<Switch>`.

**Never use a checkbox to turn something On/Off**

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-checkbox/Checkbox.scss';
```

### React Component

#### Props

| Prop            | Type                   | Description |
| --------------- | ---------------------- | ----------- |
| `id`            | `string`               | Checkbox's ID |
| `label`         | `string` or `element`  | Checkbox's label |
| `description`   | `string` or `element`  | Description's text |
| `disabled`      | `boolean`              | Set the Checkbox in a disabled state |
| `checked`       | `boolean`              | Use true for checked, false for unchecked, undefined or not set for indeterminate |
| `html property` | `string`               | Any extra properties passed will be added to the `<Checkbox>` tag |

#### Example

```js
import React from 'react';
import Checkbox from '@lightspeed/cirrus-checkbox';

const handleChange = (event) => {
  console.log(event.target.value);
}

const MyComponent = () =>
  <div>
    <Checkbox
      id="checkbox"
      name="checkbox"
      label="checkbox"
      data-attribute="custom attribute"
      checked={true}
      onChange={handleChange}
    />
  </div>;

export default MyComponent;
```

### CSS Component

Not available.
npm package: @lightspeed/cirrus-core
Description: Core CSS-in-JS components for cirrus
Author: Lightspeed
Latest version: 1.0.0-beta.1

# The Core package

Core has a simple task:

Give access to the the most basic/elemetary components/functions you can freely use (like, Box and Text) that are connected to the token system.

### React Component

#### `<CirrusTheme>`

Simple wrapper around emotion's theme provider.

```js
import React from 'react';
import { CirrusTheme } from '@lightspeed/cirrus-core';
import Button from '@lightspeed/cirrus/Button';

const MyApp = () =>
  <CirrusTheme>
    <div>
      <Button>My Button</Button>
    </div>
  </CirrusTheme>;

export default MyApp;
```

#### `<CirrusText>`

Simple component to output the fonts we use throughout cirrus.

Add this component to the `<head />` of your application.

```js
import React from 'react';
import { CirrusText } from '@lightspeed/cirrus-core';

const MyApp = () =>
  <html>
    <head>
      <CirrusText />
    </head>
    <body>
      <div>Hello World</div>
    </body>
  </html>;

export default MyApp;
```
npm package: @lightspeed/cirrus-divider
Description: Cirrus Divider Component
Author: Lightspeed
Latest version: 5.0.0-beta.1

# Divider

Divider component is used to separate html sections by creating a dividing line.

## Installation

1.  Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2.  Install the component library

```sh
yarn add @lightspeed/cirrus-divider
```

3.  Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4.  Import `divider` and use right away!

### React Component

#### Props

| Prop       | Type            | Description                            | Default    |
| ---------- | --------------- | -------------------------------------- | ---------- |
| `children` | React.ReactNode | The content to display inside the text | -          |
| `variant`  | string          | `dotted` or `solid`                    | `solid`    |
| `color`    | string          | Override the color of the divider      | `gray-100` |
| `pt`       | string          | set the top padding of the divider     | -          |
| `pb`       | string          | set the bottom padding of the divider  | -          |

#### Example

```js
import React from 'react';
import Divider from '@lightspeed/cirrus-divider';

const MyComponent = () => (
  <div>
    <Divider>My Divider</Divider>
  </div>
);

export default MyComponent;
```
npm package: @lightspeed/cirrus-flag
Description: Cirrus Flag Component
Author: Lightspeed
Latest version: 4.0.0

# Flag

A set of small and readable flags.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-flag
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-flag
```

## Contributing

Flags as React components are automatically generated with a build script.
To see changes when adding/updating a flag, add your `.svg` in the `svg` folder,
navigate to this directory in the terminal, and run this command to re-generate the build:

```sh
yarn prepublish
```

This script will generate the React components and the Flag sprite.

Note that this command will be run automatically when in [local development](https://github.com/lightspeedretail/cirrus/blob/master/.github/CONTRIBUTING.md#launch-storybook-for-local-development) and when we publish to npm.

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-flag/Flag.scss';
```

### React Component

#### Props

> Color properties can be any Cirrus color token, ex `green-100` or any CSS value.

| Prop        | Type     | Description                                                                       |
| ----------- | -------- | --------------------------------------------------------------------------------- |
| `code`      | `string` | ISO 3166-2 Country code (case is insensitive)                                     |
| `name`      | `string` | Country / Region / Other name (case is insensitive)                               |
| `size`      | `string` | Default 16 by 12, can be set to any custom value, the height will scale to be 75% |

#### Example

```js
import React from 'react';
import Icon from '@lightspeed/cirrus-flag';

const MyComponent = () => (
  <div>
    <Flag code="CA" />
    <Flag name="Canada" />
    <Flag code="CA-QC" />
    <Flag name="Quebec" />
    <Flag code="nl" size="1.75rem" />
  </div>
);

export default MyComponent;
```
npm package: @lightspeed/cirrus-label
Description: Cirrus Label Component
Author: Lightspeed
Latest version: 3.0.0

## **This component/package was renamed to [`Badge`](https://github.com/lightspeedretail/cirrus/tree/master/packages/Badge) to prevent troubles communicating the difference with an input label.**

# Label

Our basic label component.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-label
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-label
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-label/Label.scss';
```

### React Component

#### Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `children` | React.ReactNode | The content to display inside the button |
| `success` | boolean | Display as success label |
| `danger` | boolean | Display as danger label |
| `info` | boolean | Display as success label |
| `important` | boolean | Display as important label |
| `warning` | boolean | Display as warning label |
| `small` | boolean | Display as small label |
| `backgroundColor` | string | any valid CSS color, i.e: `#000000`, only use for custom labels |
| `textContrast` | string | `light` or `dark` (use for custom labels with `backgroundColor`) |

#### Example

```js
import React from 'react';
import Label from '@lightspeed/cirrus-label';

const MyComponent = () =>
  <div>
    <Label>My Label</Label>
  </div>;

export default MyComponent;
```

### CSS Component

#### Classes

Besides the base class `.cr-label` you can use one of these classes:

| Type | Class |
| ---- | ----- |
| success | `.cr-label--success` |
| danger | `.cr-label--danger` |
| info | `.cr-label--info` |
| important | `.cr-label--important` |
| warning | `.cr-label--warning` |
| small | `.cr-label--small` |

#### Example

```html
<span class="cr-label cr-label--info">My Label</span>
```
npm package: @lightspeed/cirrus-logo
Description: Cirrus Logo Component
Author: Lightspeed
Latest version: 5.0.0-beta.1

# Logo

The logo consists of two elements: the flame and word mark.

## Installation

1.  Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2.  Install the component library

```sh
yarn add @lightspeed/cirrus-logo
```

3.  Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4.  Import `Logo` and use right away!

## Usage

Refer to the Lightspeed Style Guide ["How to use our logos"](http://styleguides.lightspeedhq.com/pages/branding/logos/) guide when implementing the component in your application.

### React Component

#### Props

| Prop    | Type                                                   | Description                                       |
| ------- | ------------------------------------------------------ | ------------------------------------------------- |
| `width` | string                                                 | Logo width, `height` will be proportional on type |
| `type`  | oneOf([`horizontal`, `flame`, `vertical`])             | Logo type, default is `horizontal`                |
| `color` | oneOf([`red-white`, `maple`, `dive`, `night`, `snow`]) | Optional color variants                           |

#### Example

```js
import React from 'react';
import Logo from '@lightspeed/cirrus-logo';

const MyComponent = () => (
  <div>
    <Logo />
  </div>
);

export default MyComponent;
```

### CSS Component

There is no CSS Component for logos. However, you can download the `.svg` files from the [Lightspeed Style Guide](http://styleguides.lightspeedhq.com/pages/branding/logos/).
npm package: @lightspeed/cirrus-ls-logo
Description: Lightspeed Logo component
Author: Lightspeed
Latest version: 1.0.1

# Logo

Lightspeed Logo component.

## Installation

First, make sure you have been through the [install steps](https://github.com/lightspeed/flame#installing) steps required to add Flame in your application. Although it's not required to have Flame installed to use Logo, you will need to install its peer dependencies.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-ls-logo
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-ls-logo
```

### React Component

#### Props

| Prop    | Type                                                   | Description                                       |
| ------- | ------------------------------------------------------ | ------------------------------------------------- |
| `width` | string                                                 | Logo width, `height` will be proportional on type |
| `type`  | oneOf([`horizontal`, `flame`, `vertical`])             | Logo type, default is `horizontal`                |
| `color` | oneOf([`red-white`, `maple`, `dive`, `night`, `snow`]) | Optional color variants                           |

#### Example

```tsx
import * as React from 'react';
import { Logo } from '@lightspeed/cirrus-ls-logo';

const MyComponent: React.FC = () => (
  <div>
    <Logo />
  </div>
);

export default MyComponent;
```
npm package: @lightspeed/cirrus-popover
Description: Cirrus Popover Component
Author: Lightspeed
Latest version: 7.0.0-beta.2

# Popover

Popover with content that appears when clicking on a target element.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-popover
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-popover
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-popover/Popover.scss';
```

### React Component

#### Props

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `children` | react.node | required | Content to display inside the popover |
| `placement`| string | `bottom-start` |  Position of the `Popover` in relation with the targeted element. |
| `target` | function | required | Target that will toggle the popover. Must return a React element that will be rendered. The function receives the following props: `({ targetProps: object, targetEvents: object, active: boolean })`. `targetProps` and `targetEvents` are required to be passed to the target. Uses the [render props](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern |
| `light` | boolean | `undefined` | Displays popover on a light background |
| `noArrow` | boolean | `undefined` | Doesn't show arrow for the popover |
| `isOpen` | boolean | `false` | Opened and closed state |
| `isFlipEnabled` | boolean | `true` | When enabled the popover repositions itself based on the screen size |
| `onOpen` | function | `() => {}` | Called when the popover is opened |
| `onClose` | function | `() => {}` | Called when the popover is closed |
| `autoClose` | boolean | `true` | Whether the component should call `onClose` when clicking outside of the popover |

#### Example

```js
import React from 'react';
import Popover from '@lightspeed/cirrus-popover';

const MyComponent = () => (
  <div>
    <Popover
      target={({ targetProps, targetEvents }) => (
        <button {...targetProps} {...targetEvents}>
          Target {active && '(is active)'}
        </button>
      )}
    >
      <div>
        Content
      </div>
    </Popover>
  </div>
);

export default MyComponent;
```

### CSS Component

You can use CSS classes along with [`popper.js`](https://popper.js.org/) (the library used by the React component) to enable popovers outside a React application. Here's the available classes:

| Type | Class |
| ---- | ----- |
| box | `.cr-popover` |
| placement | `[data-placement="top"]` |
| light | `.cr-popover--light` |
| arrow | `.cr-popover__arrow` |
npm package: @lightspeed/cirrus-progress
Description: Cirrus Progress Component
Author: Lightspeed
Latest version: 2.0.0-beta.1

# Progress

Give your users a bit of feedback on how much is left with the Progress component.

## Installation

1.  Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2.  Install the component library

```sh
yarn add @lightspeed/cirrus-progress
```

3.  Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4.  Import `Progress` and use right away!

### React Component

#### Props

| Prop         | Type                                     | Default       | Description                                                             |
| ------------ | ---------------------------------------- | ------------- | ----------------------------------------------------------------------- |
| `type`       | 'determinate', 'indeterminate', 'static' | 'determinate' | Progress variant                                                        |
| `current`    | `number`                                 | 0             | Current value of the progress                                           |
| `total`      | `number`                                 | 100           | Total value of the progress                                             |
| `[property]` | `any`                                    | any           | Any extra properties passed will be added to the `<Progress>` component |

#### Example

See the [examples folder](https://github.com/lightspeedretail/cirrus/tree/master/packages/Progress/examples) for this component.
npm package: @lightspeed/cirrus-radio
Description: Cirrus Radio Component
Author: Lightspeed
Latest version: 2.0.0-beta.1

# Radio

A small wrapper around the radio component to give it the cirrus styling.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-radio
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-radio
```

### React Component

#### Props

| Prop            | Type      | Default   | Description                                                    |
| --------------- | --------- | --------- | -------------------------------------------------------------- |
| `label`         | `string`  | undefined | Radio's label                                                  |
| `description`   | `string`  | undefined | Description's text                                             |
| `html property` | `string`  | undefined | Any extra properties passed will be added to the `<Radio>` tag |


### Example

#### Simple stateless radio input

By default, the radio input is stateless.

```js
import React from 'react';
import Radio from '@lightspeed/cirrus-radio';

const MyComponent = () => (
  <div>
    <Radio name="feature" value="a"/>
    <Radio name="feature" value="b"/>
  </div>
);

export default MyComponent;
```

##### Making a controlled radio input

If we need to control or set the checked property in any matter, we need to create
a controlled version of the radio input.

```js
import React from 'react';
import Radio from '@lightspeed/cirrus-radio';

class StatefulRadio extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radioAChecked: false,
      radioBChecked: false,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    if (event.target.value === 'a') {
      this.setState({ radioAChecked: true, radioBChecked: false, });
    } else if (event.target.value === 'b') {
      this.setState({ radioAChecked: false, radioBChecked: true, });
    }
  }

  render() {
    const { checked } = this.state;
    return (
      <div>
        <Radio name="feature" checked={radioAChecked} onChange={this.handleChange} value="a" />
        <Radio name="feature" checked={radioBChecked} onChange={this.handleChange} value="b" />
      </div>
    );
  }
}

export default StatefulSwitch;
```
npm package: @lightspeed/cirrus-select
Description: Cirrus Select Component
Author: Lightspeed
Latest version: 4.0.0-beta.1

# Select

Styled `<select>` element.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-select
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-select
```

#### Example

See [example](https://github.com/lightspeedretail/cirrus/tree/master/packages/Select/examples) folder.

#### Example

```html
<select id="select-id" name="select-name" class="cr-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
```
npm package: @lightspeed/cirrus-spinner
Description: Cirrus Spinner Component
Author: Lightspeed
Latest version: 5.0.5

# Spinner

Spinner component bundles the `progress` icon and makes it spin. 

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-spinner
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-spinner
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-spinner/Spinner.scss';
```

### React Component

#### `<Spinner>`

#### Passed down Props to the spinner Icon

>Color or Size properties can be any Cirrus token, ex `green-100` (color), `xlarge` (size) or any CSS value.

| Prop            | Type         | Description                                             |
| --------------- | ------------ | ------------------------------------------------------- |
| `className`     | `string`     | Custom className to add in addition to the default ones |
| `name`          | `string`     | Name of the icon                                        |
| `size`          | `string`     | Default 1rem, can be set to any custom value            |
| `color`         | `string`     | Applied on the svg `fill` property                      |
| `baseColor`     | `string`     | Applied on the base paths `fill` property               |
| `baseColor1`    | `string`     | Applied on the base-1 path `fill` property              |
| `baseColor2`    | `string`     | Applied on the base-2 path `fill` property              |

#### Example

```js
import React from 'react';
import Spinner from '@lightspeed/cirrus-spinner';

const MyComponent = () => (
  <div>
    <Spinner size="large" color="maple-200" />
  </div>
);

export default MyComponent;
```

### CSS Component

#### Component classes

| Type | Class |
| ---- | ----- |
| base | `.cr-spinner` |

### Component HTML

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cr-icon cr-icon-spinner cr-spinner" style="width: 1rem; height: 1rem;">
  <path class="cr-icon__base cr-icon__base-2" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-3A5 5 0 1 0 8 3a5 5 0 0 0 0 10z" opacity=".3"></path>
  <path class="cr-icon__base cr-icon__base-1" d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"></path>
</svg>
```
npm package: @lightspeed/cirrus-tag
Description: Cirrus Tag Component
Author: Lightspeed
Latest version: 1.0.4

# Tag

Tag component.

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-tag
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-tag
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-tag/Tag.scss';
```

### React Component

`<Tag />`

| Prop            | Type              | Default       |  Description |
| --------------- | ------------------| ------------- | ------------ |
| `children`      | `node`            | required      | Tag content |
| `size`          | `normal`, `small` | normal        | Tag size |
| `onClick`       | `function`        | () => {}      | Handler called when clicking the Tag |
| `onRemove`       | `function`        | () => {}      | Handler that enables the dismissible functionality and is called when clicking the remove button of the Tag |
| `[property]`    | `any`             | any           | Any extra properties passed will be added to the Tag component |

`<TagLabel />`

| Prop            | Type              | Default       |  Description |
| --------------- | ------------------| ------------- | ------------ |
| `children`      | `node`            | required      | TagLabel content |
| `size`          | `normal`, `small` | normal        | TagLabel size |
| `onClick`       | `function`        | () => {}      | Handler called when clicking the TagLabel |
| `[property]`    | `any`             | any           | Any extra properties passed will be added to the TagLabel component |

`<TagRemove />`

| Prop            | Type              | Default       |  Description |
| --------------- | ------------------| ------------- | ------------ |
| `onClick`       | `function`        | () => {}      | Handler called when clicking the TagRemove |
| `[property]`    | `any`             | any           | Any extra properties passed will be added to the TagRemove component |

#### Example

See the [examples folder](https://github.com/lightspeedretail/cirrus/tree/master/packages/Tag/examples) for this component.

### HTML Component

```html
<div class="cr-tag" role="button" tabIndex="0">
  <div class="cr-tag__label cr-tag__label--small">Tag</div>
  <div class="cr-tag__remove" role="button" tabIndex="0">x</div>
</div>
```

#### Classes

| Type | Class |
| ---- | ----- |
| base | `.cr-tag` |
| label | `.cr-tag__label` |
| label small | `.cr-tag__label--small` |
| label normal | `.cr-tag__label--normal` |
| remove | `.cr-tag__remove` |
npm package: @lightspeed/config-browserslist
Description: Common Browserslist configuration for Lightspeed webapps
Latest version: 0.1.1

# `@lightspeed/config-browserslist`

## Introduction

[**Browserslist**](https://twitter.com/browserslist) configuration in a convenient package.

We recommend to use a shared Babel configuration with a baked-in browserslist, such as that exposed in `@lightspeed/config-next`.

## Quick Start

1. Install the dependency in your webapp.

```sh
yarn add -D @lightspeed/config-browserslist
```

2. Consume the Browserslist configuration in `package.json`. Alternate query sources are described [here](https://github.com/browserslist/browserslist#queries).

```json
"browserslist": [
  "extends @lightspeed/config-browserslist"
]
```

1. Optionally, extend the configuration as you see fit.

```json
"browserslist": [
  "extends @lightspeed/config-browserslist",
  "ie <= 11"
]
```