open-index/open-npm huggingface dataset:
npm package: @paprika/side-navigation
Description: Side Navigation component
Author: @paprika
Latest version: 6.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/side-navigation

## Description

Side Navigation component

## Installation

```
yarn add @paprika/side-navigation
```

or with npm:

```
npm install @paprika/side-navigation
```

## Props

### SideNavigation

| Prop     | Type   | required | default | Description                    |
| -------- | ------ | -------- | ------- | ------------------------------ |
| a11yText | string | false    | null    | Aria-label on the nav element. |
| children | node   | false    | null    |                                |
| header   | node   | true     | -       | Header text in the side panel. |

### SideNavigation.Item

| Prop      | Type | required | default | Description                                                                 |
| --------- | ---- | -------- | ------- | --------------------------------------------------------------------------- |
| children  | node | false    | null    |                                                                             |
| isCurrent | bool | false    | false   | If this side navigation item is the current page and should be highlighted. |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-sidenavigation--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/SideNavigation/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/side-navigation%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/SideNavigation/CHANGELOG.md)
npm package: @paprika/spinner
Description: Spinner component tells the user that the app is doing something.
Author: @paprika
Latest version: 1.0.24

<!-- start: Autogenerated - do not modify -->

# @paprika/spinner

## Description

Spinner component tells the user that the app is doing something.

## Installation

```
yarn add @paprika/spinner
```

or with npm:

```
npm install @paprika/spinner
```

## Props

### Spinner

| Prop     | Type                                                                             | required | default                   | Description                                                                                         |
| -------- | -------------------------------------------------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------- |
| a11yText | string                                                                           | false    | null                      | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| caption  | string                                                                           | false    | null                      | Sets the caption that will display beneath the spinner                                              |
| isDark   | bool                                                                             | false    | false                     | If the background is dark, different color of spinner will be rendered                              |
| size     | [ Spinner.types.size.SMALL, Spinner.types.size.MEDIUM, Spinner.types.size.LARGE] | false    | Spinner.types.size.MEDIUM | Sets the size of the spinner                                                                        |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

```js
import Spinner from "@paprika/spinner";

<Spinner caption="spinning" />;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/messaging-spinner--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Spinner/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/spinner%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Spinner/CHANGELOG.md)
npm package: @paprika/status-tracker
Description: Move items through a customized status workflow and view metadata for the previous and current statuses.
Author: @paprika
Latest version: 5.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/status-tracker

## Description

Move items through a customized status workflow and view metadata for the previous and current statuses.

## Installation

```
yarn add @paprika/status-tracker
```

or with npm:

```
npm install @paprika/status-tracker
```

## Props

### StatusTracker

| Prop             | Type | required | default | Description                      |
| ---------------- | ---- | -------- | ------- | -------------------------------- |
| children         | node | false    | null    |                                  |
| hasExtensionLine | bool | false    | true    | Displays extension line if true. |

### StatusTracker.Point

| Prop        | Type                                       | required | default      | Description                                                           |
| ----------- | ------------------------------------------ | -------- | ------------ | --------------------------------------------------------------------- |
| children    | node                                       | false    | null         |                                                                       |
| description | node                                       | false    | null         | The description of current status point will be shown in the tooltip. |
| kind        | [ kinds.CURRENT, kinds.FUTURE, kinds.PAST] | false    | kinds.FUTURE | Kind of current status point.                                         |
| name        | node                                       | false    | null         | The name of current status point will be shown in the tooltip.        |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/buttons-statustracker--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/StatusTracker/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/status-tracker%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/StatusTracker/CHANGELOG.md)
npm package: @paprika/stylers
Description: Helpers and includes for styled-components
Author: @paprika
Latest version: 1.1.13

# @paprika/stylers

## Description

The `stylers` package is a companion for the `tokens` package, they are both implementations of the [Starling Design System](https://design.wegalvanize.com/) for use in styling user interfaces. The `stylers` are more than just simple values however, they are helper functions and bundles of CSS rules.

## Installation

```sh
yarn add @paprika/stylers
```

or with npm:

```sh
npm install @paprika/stylers
```

## Usage

`stylers` are intended for use **internally and externally**.

Internally, when contributors create Paprika components, and externally, when application developers consume Paprika to create user interfaces with the Starling Design System.

### Consumers

Typically consumers will be using tokens with Sass. They can be included in any Sass file with:

```scss
@import "@paprika/stylers/lib/helpers.scss";
```

Then you should be able to use Sass functions like `font-size()` and `spacer()` as well as mixins like `@include truncate-text;` and `@include focus-ring(true)`.

### Contributors

For scalability, in implementation of the `stylers` is split into:

- `includes.js` and `formIncludes.js` (for bundles of styling rules)
- `helpers.js` (functions that take an input and generate a value or styling rule/rules).

## Links

- [Storybook - Includes](https://paprika.highbond.com/?path=/story/utilities-stylers--includes)
- [Storybook - Helpers](https://paprika.highbond.com/?path=/story/utilities-stylers--helpers)
- [Storybook - Sass Mixins](https://paprika.highbond.com/?path=/story/utilities-stylers-sass--mixins)
- [Storybook - Sass Functions](https://paprika.highbond.com/?path=/story/utilities-stylers-sass-functions)
- [Paprika coding conventions wiki](https://github.com/acl-services/paprika/wiki/Coding-Conventions#stylers)
- [Github source code](https://github.com/acl-services/paprika/tree/master/packages/Stylers/src)
- [Github create issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/stylers%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [ChangeLog](https://github.com/acl-services/paprika/tree/master/packages/Stylers/CHANGELOG.md)
npm package: @paprika/switch
Description: Switch component for turning a setting on or off.
Author: @paprika
Latest version: 1.0.26

<!-- start: Autogenerated - do not modify -->

# @paprika/switch

## Description

Switch component for turning a setting on or off.

## Installation

```
yarn add @paprika/switch
```

or with npm:

```
npm install @paprika/switch
```

## Props

### Switch

| Prop         | Type                                                                          | required | default                  | Description                                                                       |
| ------------ | ----------------------------------------------------------------------------- | -------- | ------------------------ | --------------------------------------------------------------------------------- |
| a11yText     | string                                                                        | false    | null                     | Descriptive a11y text for assistive technologies. Typically required.             |
| canPropagate | bool                                                                          | false    | true                     | If click events are allowed to propagate up the DOM tree.                         |
| isChecked    | bool                                                                          | false    | false                    | If the switch is on.                                                              |
| isDisabled   | bool                                                                          | false    | false                    | If the switch is disabled.                                                        |
| onChange     | func                                                                          | false    | () => {}                 | Callback to be executed when the switch is toggled on or off. Typically required. |
| size         | [ Switch.types.size.SMALL, Switch.types.size.MEDIUM, Switch.types.size.LARGE] | false    | Switch.types.size.MEDIUM | Size of the switch.                                                               |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

### Usage

For a basic switch

```js
import Switch from "@paprika/switch";

<Switch isChecked={switchState} onChange={changeHandler} />;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-switch--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Switch/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/switch%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Switch/CHANGELOG.md)
npm package: @paprika/time-picker
Description: The TimePicker component gives users the ability to select a specific time from a popover.
Author: @paprika
Latest version: 5.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/time-picker

## Description

The TimePicker component gives users the ability to select a specific time from a popover.

## Installation

```
yarn add @paprika/time-picker
```

or with npm:

```
npm install @paprika/time-picker
```

## Props

### TimePicker

| Prop          | Type   | required | default        | Description                                        |
| ------------- | ------ | -------- | -------------- | -------------------------------------------------- |
| a11yText      | string | false    | "Time (hh:mm)" | Descriptive a11y text for assistive technologies.  |
| defaultIsOpen | bool   | false    | false          | If the TimePicker is set to visible.               |
| defaultValue  | string | false    | null           | Sets the default value for the TimePicker          |
| isDisabled    | bool   | false    | false          | If the TimePicker is disabled.                     |
| isReadOnly    | bool   | false    | false          | Should be read-only or not, default is false.      |
| onChange      | func   | false    | () => {}       | Callback to be executed when the value is changed. |
| onError       | func   | false    | () => {}       | Callback to be executed when there is an error.    |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## TimePicker

The TimePicker component gives users the ability to select a specific time from a popover.

### Usage

To create a TimePicker simply add the `<TimePicker />` component. You can set the default value of the picker and whether to display the dropdown displaying the time selection options by adding the properties to the the TimePicker.

```js
<TimePicker defaultValue="6am" isVisible />
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-timepicker--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/TimePicker/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/time-picker%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/TimePicker/CHANGELOG.md)
npm package: @paprika/tokens
Description: Design tokens generated as scss + js
Author: @paprika
Latest version: 3.1.1

# @paprika/tokens

## Description

The `tokens` package is the implementation of the Starling Design System's design tokens for use with Sass and JavaScript (for use with `styled-components`).

They include an extensive colour palette, spacing values, and other CSS properties to keep the styling conssitent for apps created with Paprika.

On the Paprika wiki pages, you can [read more about using design tokens](https://github.com/acl-services/paprika/wiki/Coding-Conventions#tokens).

## References

<details>
<summary>View All Paprika Design Tokens 👀</summary>

![paprika-tokens](https://user-images.githubusercontent.com/14944896/222009355-5dca239b-9f18-4c6b-8ee5-8f924f446204.png)

</details>

Source file: [tokens.yaml](src/tokens.yaml)

## Installation

```sh
yarn add @paprika/tokens
```

or with npm:

```sh
npm install @paprika/tokens
```

## Usage

`tokens` are intended for use **internally and externally**.

Internally, when contributors create Paprika components, and externally, when application developers consume Paprika to create user interfaces with the Starling Design System.

### Consumers

Typically consumers will be using tokens with Sass. They can be included in any Sass file with:

```scss
@import "@paprika/tokens/lib/tokens.scss";
```

Then you should be able to use variables like `$space` and `$color--black-lighten-10`.

### Contributors

When using tokens in Paprika, or even in an application that uses `styled-components` or another CSS-in-JS framework, the tokens can be imported with:

```js
import tokens from "@paprika/tokens";
```

Then you can access the tokens from that `tokens` object, like `tokens.space` or `tokens.color.blackLighten10`.

With `styled-components` you will usually use them in a template string, interpolated like `${tokens.space}`.

#### Adding New Tokens

The source file for the tokens is `src/tokens.yaml`. New tokens can be added there and then generated for Sass, JavaScript and even for the Starling Design System reference page by running the folloing in the `packages/Tokens` directory:

```sh
yarn pretranspile
```

Which will generate the following:

- tokens.js
- tokens.json
- tokens.scss
- tokens.md

## Links

- [Starling Design System tokens reference](https://design.wegalvanize.com/tokens)
- [Paprika coding conventions wiki](https://github.com/acl-services/paprika/wiki/Coding-Conventions#tokens)
- [Github source code](https://github.com/acl-services/paprika/tree/master/packages/Tokens/src)
- [Github create issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/tokens%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [ChangeLog](https://github.com/acl-services/paprika/tree/master/packages/Tokens/CHANGELOG.md)