open-index/open-npm huggingface dataset:
npm package: @paprika/breadcrumbs
Description: Breadcrumbs are a type of navigation that also allows users to visualize their location.
Author: @paprika
Latest version: 4.0.4

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

# @paprika/breadcrumbs

## Description

Breadcrumbs are a type of navigation that also allows users to visualize their location.

## Installation

```
yarn add @paprika/breadcrumbs
```

or with npm:

```
npm install @paprika/breadcrumbs
```

## Props

### Breadcrumbs

| Prop            | Type | required | default | Description                                                                             |
| --------------- | ---- | -------- | ------- | --------------------------------------------------------------------------------------- |
| children        | node | false    | null    |                                                                                         |
| isDark          | bool | false    | false   | If the breadcrumbs will be rendered on a dark background and will use inverted colours. |
| isAutoCollapsed | bool | false    | true    | If the breadcrumbs will be collapsed when it has more than 3 links.                     |

### Breadcrumbs.Link

| Prop            | Type                 | required | default | Description                                         |
| --------------- | -------------------- | -------- | ------- | --------------------------------------------------- |
| children        | node                 | false    | null    |                                                     |
| as              | [string,elementType] | false    | null    | Render as another component instead of Button.Link. |
| hasOnlyOneChild | bool                 | false    | false   |                                                     |
| href            | string               | false    | null    | Url for the link.                                   |

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-breadcrumbs--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Breadcrumbs/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/breadcrumbs%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/Breadcrumbs/CHANGELOG.md)
npm package: @paprika/build-translations
Description: An utility tool to convert translation yml files to js.
Author: @paprika
Latest version: 0.1.4

# @paprika/build-translations

## Description

Utility tool. Converting yml/yaml files to js files.

## Usage

### run from CLI

```
# Using yarn:
yarn global add @paprika/build-translations --dev
build-translations <sourcePath> --out-dir <outPath> --yaml-file-ext yml
# Or via npx:
npx @paprika/build-translations <sourcePath> --out-dir <outPath> --yaml-file-ext yml
```

#### Options

`<sourcePath>` will be default to current path.

| Option          | Required | Default                |
| --------------- | -------- | ---------------------- |
| --out-dir       | false    | Same as `<sourcePath>` |
| --yaml-file-ext | false    | `yml`                  |

### with node

```
yarn add @paprika/build-translations --dev
```

#### in your file

```js
import buildTranslations from "@paprika/build-translations";

// default values are same with running from CLI
buildTranslations({
  sourcePath: "./src/locale",
  outputPath: "./src/locale-js",
  yamlFileExtension: "yaml",
});
```

## Notes

There's no tests for this tool yet, we were going to add some, but it's unpossible to mock `process.cwd()` in jest, see [facebook/jest#5146](https://github.com/facebook/jest/issues/5146).
npm package: @paprika/calendar
Description: Calendar component
Author: @paprika
Latest version: 5.0.4

# Calendar

This package consists of two components (`SingleDateCalendar` and `DateRangeCalendar`) providing calendar views but with difference that `SingleDateCalendar` allows selecting only one exact date and `DateRangeCalendar` allows selection range of dates.

## Installation

```shell
npm install --save @paprika/calendar
```

or

```shell
yarn add @paprika/calendar
```

## Usage

Please use `<L10n />` component to wrap calendar components or you application.

### SingleDateCalendar

```js
import SingleDateCalendar from "@paprika/calendar/lib/SingleDateCalendar";
// alternative (but has potential problems with tree-shaking):
// import { SingleDateCalendar } from "@paprika/calendar";

const [date, setDate] = React.useState(null);
const [possibleDate, setPossibleDate] = React.useState(null);

<SingleDateCalendar
  date={date}
  onSelect={setDate}
  possibleDate={possibleDate}
  resetPossibleDate={() => {
    setPossibleDate(null);
  }}
/>;
```

### DateRangeCalendar

```js
import DateRangeCalendar from "@paprika/calendar/lib/DateRangeCalendar";
// alternative (but has potential problems with tree-shaking):
// import { DateRangeCalendar } from "@paprika/calendar";
import { START_DATE } from "@paprika/calendar/lib/tokens";

const [currentInput, setCurrentInput] = React.useState(START_DATE);
const [{ startDate, endDate }, setDates] = React.useState({ startDate: null, endDate: null });
const [possibleDate, setPossibleDate] = React.useState(null);

<DateRangeCalendar
  startDate={startDate}
  endDate={endDate}
  onDatesChange={setDates}
  possibleDate={possibleDate}
  resetPossibleDate={() => {
    setPossibleDate(null);
  }}
  focusedInput={currentInput || START_DATE}
  onFocusChange={setCurrentInput}
/>;
```

## Props

### SingleDateCalendar

- `date` (required)
- `onSelect` (required)
- `possibleDate`
- `resetPossibleDate`

### DateRangeCalendar

- `startDate` (required)
- `endDate` (required)
- `onDatesChange` (required)
- `possibleDate`
- `resetPossibleDate`
- `focusedInput` (required)
- `onFocusChange` (required)
npm package: @paprika/collapsible-card
Description: Styled collapsible card component.
Author: @paprika
Latest version: 5.0.4

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

# @paprika/collapsible-card

## Description

Styled collapsible card component.

## Installation

```
yarn add @paprika/collapsible-card
```

or with npm:

```
npm install @paprika/collapsible-card
```

## Props

### CollapsibleCard

| Prop                | Type   | required | default  | Description |
| ------------------- | ------ | -------- | -------- | ----------- |
| children            | node   | false    | null     |             |
| initialIsCollapsed  | bool   | false    | true     |             |
| isCollapsed         | bool   | false    | null     |             |
| isEditing           | bool   | false    | false    |             |
| onToggleIsCollapsed | func   | false    | () => {} |             |
| position            | string | false    | null     |             |

### CollapsibleCard.Body

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | false    | null    |             |

### Group

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | false    | null    |             |

### CollapsibleCard.Header

| Prop             | Type   | required | default  | Description |
| ---------------- | ------ | -------- | -------- | ----------- |
| breakpoint       | number | false    | 800      |             |
| children         | node   | false    | null     |             |
| onChangeIsBroken | func   | false    | () => {} |             |

### CollapsibleCard.HeaderLayout

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | false    | null    |             |

### CollapsibleCard.Segment

| Prop     | Type   | required | default | Description |
| -------- | ------ | -------- | ------- | ----------- |
| children | node   | false    | null    |             |
| width    | number | false    | null    |             |

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-collapsiblecard--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/CollapsibleCard/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/collapsible-card%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/CollapsibleCard/CHANGELOG.md)
npm package: @paprika/collapsible-text
Description: CollapsibleText component, an uncontrolled component that truncates some given content at a given length to be revealed by clicking a 'Show more' link.
Author: @paprika
Latest version: 4.0.4

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

# @paprika/collapsible-text

## Description

CollapsibleText component, an uncontrolled component that truncates some given content at a given length to be revealed by clicking a 'Show more' link.

## Installation

```
yarn add @paprika/collapsible-text
```

or with npm:

```
npm install @paprika/collapsible-text
```

## Props

### CollapsibleText

| Prop            | Type   | required | default | Description                                                                                                          |
| --------------- | ------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
| a11yText        | string | false    | null    | Additional description for "Show more" link. Should be a "topic" that will be appended to "Show more about [topic]". |
| children        | node   | true     | -       | Full content to be revealed. Can include HTML markup, but should not include dynamic React nodes.                    |
| collapsedLength | number | false    | 255     | Length, in characters, of truncated preview content.                                                                 |

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

### Usage

```js
import CollapsibleText from "@paprika/collapsible-text";

const yourComponent = () => {
  return (
    <CollapsibleText collapsedLength={64} a11yText="cardigans">
      <p>
        Lorem hipsum cardigan. Plaid brunch street cred cloud bread art party pickled, VHS fingerstache la croix paleo
        single-origin coffee. Pinterest normcore wayfarers gentrify marfa helvetica street art vegan. Wayfarers portland
        chicharrones craft beer sartorial. Cray raw denim listicle mixtape, pug farm-to-table tofu ennui whatever
        williamsburg. Chia offal slow-carb, kickstarter gastropub letterpress echo park mustache irony 90s.
      </p>
    </CollapsibleText>
  );
};

export default yourComponent;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-collapsibletext--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/CollapsibleText/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/collapsible-text%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/CollapsibleText/CHANGELOG.md)
npm package: @paprika/constants
Description: Constants for components, for library internal use only
Author: @paprika
Latest version: 1.0.2

<!-- autogenerated don't modify -->
<!-- autogenerated don't modify -->
<!-- content -->

# Constants

This package acts as a centralized location for all reusable constants for Paprika compoonents. This package is intended for internal use only, this package is not intended for use by consumers.

<!-- eoContent -->
npm package: @paprika/copy-input
Description: The CopyInput component is an input with a button that copies the input's contents to user's clipboard.
Author: @paprika
Latest version: 4.0.4

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

# @paprika/copy-input

## Description

The CopyInput component is an input with a button that copies the input's contents to user's clipboard.

## Installation

```
yarn add @paprika/copy-input
```

or with npm:

```
npm install @paprika/copy-input
```

## Props

### CopyInput

| Prop              | Type   | required | default | Description                                                                 |
| ----------------- | ------ | -------- | ------- | --------------------------------------------------------------------------- |
| alterCopiedText   | func   | false    | null    | Called after the button is clicked, and the copied value is passed in       |
| children          | node   | false    | null    | Used for CopyInput.Input                                                    |
| clickedText       | string | false    | null    | The text to show in the tooltip when the user presses the "copy" button     |
| hoverText         | string | false    | null    | The text to show in the tooltip when the user hovers over the "copy" button |
| isReadOnly        | bool   | false    | true    | Is the input read-only.                                                     |
| hasInputContainer | bool   | false    | true    | If the value will be rendered in an Input component or hidden               |
| hasValueContainer | bool   | false    | false   | If a plain text version of the value will be rendered                       |
| value             | string | false    | ""      | Default value for the input                                                 |

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

### Usage

Uncontrolled:

```js
import CopyInput from "@paprika/copy-input";

return <CopyInput value="Copy me" />;
```

Controlled with props for the internal `Input`

```js
import CopyInput from "@paprika/copy-input";

const [controlledValue, setControlledValue] = React.useState("Copy me");

return (
  <CopyInput>
    <CopyInput.Input value={controlledValue} onChange={e => setControlledValue(e.target.value)} />
  </CopyInput>
);
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-copyinput--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/CopyInput/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/copy-input%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/CopyInput/CHANGELOG.md)
npm package: @paprika/data-header
Description: Data header package is a set of components that help the Table and DataGrid to enhance the cell property to display different header types in a ease manner
Author: @paprika
Latest version: 4.0.4

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

# @paprika/data-header

## Description

Data header package is a set of components that help the Table and DataGrid to enhance the cell property to display different header types in a ease manner

## Installation

```
yarn add @paprika/data-header
```

or with npm:

```
npm install @paprika/data-header
```

## Props

### DataHeader

| Prop            | Type                                                                                           | required | default | Description |
| --------------- | ---------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
| backgroundColor | string                                                                                         | false    | null    |             |
| color           | string                                                                                         | false    | null    |             |
| label           | [func,string]                                                                                  | true     | -       |             |
| renderActions   | func                                                                                           | false    | null    |             |
| type            | [ types.type.TEXT, types.type.NUMERIC, types.type.DATE, types.type.DATE_TIME, types.type.TIME] | false    | null    |             |
| icons           | object                                                                                         | false    | null    |             |

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

# DataHeader

The `<DataHeader />` component helps consumer to deal with header with the `<Table />` and `<DataGrid />` components.

With this component you have access to three major features: render Label via a string or function, render an action button/menu at the right side of the header or render an icon `type`
before the label.

The component looks like:

```js
<DataHeader label={string|function} type={:string} renderActions={:function} />
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/table-dataheader--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/DataHeader/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/data-header%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/DataHeader/CHANGELOG.md)
npm package: @paprika/date-range-picker
Description: DateRangePicker component allows user to view and specify a date range through an entry fields or a calendar widgets.
Author: @paprika
Latest version: 4.0.4

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

# @paprika/date-range-picker

## Description

DateRangePicker component allows user to view and specify a date range through an entry fields or a calendar widgets.

## Installation

```
yarn add @paprika/date-range-picker
```

or with npm:

```
npm install @paprika/date-range-picker
```

## Props

### DateRangePicker

| Prop      | Type       | required | default | Description                                         |
| --------- | ---------- | -------- | ------- | --------------------------------------------------- |
| startDate | instanceOf | false    | null    | Selected start date in moment object                |
| endDate   | instanceOf | false    | null    | Selected end date in moment object                  |
| onChange  | func       | true     | -       | Callback to fire when user select start or end date |
| children  | node       | false    | null    |                                                     |

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

### Subcomponents

#### DateRangePicker.Input

Can receive any props suitable for `DateInput` component. Props will be applied to both inputs (start date and end date input).

#### DateRangePicker.StartInput

Can receive any props suitable for `DateInput` component. This component has priority over `DateRangePicker.Input`.

#### DateRangePicker.EndInput

Can receive any props suitable for `DateInput` component. This component has priority over `DateRangePicker.Input`.

#### DateRangePicker.Popover

Can receive any props suitable for `Popover` component.

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-daterangepicker--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/DateRangePicker/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/date-range-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/DateRangePicker/CHANGELOG.md)
npm package: @paprika/dialog-actions
Description: The DialogActions component renders three buttons, Save (hasConfirm), Don't Save (hasDecline) and Cancel.
Author: @paprika
Latest version: 4.0.4

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

# @paprika/dialog-actions

## Description

The DialogActions component renders three buttons, Save (hasConfirm), Don't Save (hasDecline) and Cancel.

## Installation

```
yarn add @paprika/dialog-actions
```

or with npm:

```
npm install @paprika/dialog-actions
```

## Props

### DialogActions

| Prop         | Type   | required | default   | Description                                        |
| ------------ | ------ | -------- | --------- | -------------------------------------------------- |
| kindConfirm  | string | false    | "primary" | If the primary button is a destructive action.     |
| isDisabled   | bool   | false    | false     | If the primary and secondary buttons are disabled. |
| labelCancel  | string | false    | ""        | Text for cancel button.                            |
| labelConfirm | string | false    | ""        | Text for primary action button.                    |
| labelDecline | string | false    | ""        | Text for a secondary generic button.               |
| onCancel     | func   | false    | () => {}  | Function to call when cancel button is clicked.    |
| onConfirm    | func   | false    | () => {}  | Function to call when primary button is clicked.   |
| onDecline    | func   | false    | () => {}  | Function to call when secondary button is clicked. |

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

## Usage

Please use `<L10n />` component to wrap `<DialogActions />` in your application.

Example:

```js
import DialogActions from "@paprika/dialog-actions";

<DialogActions />;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/buttons-dialogactions--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/DialogActions/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/dialog-actions%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/DialogActions/CHANGELOG.md)
npm package: @paprika/dropdown-menu
Description: DEPRECATED - DropdownMenu component displays a trigger button, which when clicked displays a list of items in a dropdown menu format. These items can be raw content, Links or actions such as Delete, which will prompt a confirmation panel to be displayed.
Author: @paprika
Latest version: 2.0.48
Deprecated: Moved to @paprika/overflow-menu

This component is deprecated and has been renamed @paprika/overflow-menu
npm package: @paprika/dynamic-hyperlink-transformer
Description: Adding this component runs a script that fires a callback function on each hyperlink with a specific data attribute, then replaces the link with a fancier card.
Author: @paprika
Latest version: 4.0.4

## Usage

Adding this component runs a script that fires a callback function on each hyperlink with a specific data attribute, then replaces the link with a fancier card.

See the stories for a working example.
npm package: @paprika/guard
Description: Guard component helps to prevent a user from losing unsaved data
Author: @paprika
Latest version: 1.0.3

## Guard

The `<Guard>` component is a ... .

### Installation

`> npm install --save @paprika/guard`
or
`> yarn add @paprika/guard`

### Usage

React <16.8.x

```js
import Guard from "@paprika/guard";

function App() {
  function doClose() {}

  return (
    <Guard.Supervisor>
      <Guard.Connector isDirty />
      <Guard.Gatekeeper>{canLeave => <button onClick={() => canLeave() && doClose()}>Close</button>}</Guard.Gatekeeper>
    </Guard.Supervisor>
  );
}
```

React >=16.8.x

```js
import Guard from "@paprika/guard";

function MyComponent() {
  const canLeave = Guard.useGuard(); // a hook
  const isDirty = React.useState(false);

  function doClose() {}

  return (
    <div>
      <Guard.Connector isDirty={isDirty} />
      <button onClick={() => canLeave() && doClose()}>Close</button>
    </div>
  );
}

function App() {
  return (
    <Guard.Supervisor>
      <MyComponent />
    </Guard.Supervisor>
  );
}
```

### Props

// TODO

- `a11yText`
- `canPropagate`
- `children` (required)
- `hasInsetFocusStyle`
- `isDisabled`
- `onClick` (required)
- `tabIndex`
- `role`

[More detail about these props](https://github.com/acl-services/paprika/blob/master/packages/Guard/src/Guard.js)
npm package: @paprika/heading
Description: Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.
Author: @paprika
Latest version: 1.0.21

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

# @paprika/heading

## Description

Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.

## Installation

```
yarn add @paprika/heading
```

or with npm:

```
npm install @paprika/heading
```

## Props

### Heading

| Prop         | Type                | required | default | Description                                                               |
| ------------ | ------------------- | -------- | ------- | ------------------------------------------------------------------------- |
| a11yText     | string              | false    | null    | Optional aria text if it should be more descriptive than what is rendered |
| children     | node                | true     | -       | Heading content is required                                               |
| displayLevel | [ 1, 2, 3, 4, 5, 6] | false    | null    | Optional display level(1-6) affects styles only                           |
| hasDivider   | bool                | false    | false   | Horizontal divider style                                                  |
| hasUnderline | bool                | false    | false   | Underline style                                                           |
| isHidden     | bool                | false    | false   | Optional, visually hide the header                                        |
| isLight      | bool                | false    | false   | Optional, renders the children at a lighter font weight                   |
| isSemantic   | bool                | false    | true    | Optional, using <div> to avoid styles override by global css.             |
| level        | [ 1, 2, 3, 4, 5, 6] | true     | -       | Heading level(1-6) is required.                                           |

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

## Usage

For a basic heading:

```jsx
import Heading from "@paprika/heading";

<Heading level={1}>Heading One</Heading>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/display-heading--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Heading/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/heading%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/Heading/CHANGELOG.md)
npm package: @paprika/helpers
Description: JavaScript and React helper utilities
Author: @paprika
Latest version: 2.4.3

# @paprika/helpers

<br />

## Description

JavaScript and React helper utilities.

<br />

## Installation

```
yarn add @paprika/helpers
```

or with npm:

```
npm install @paprika/helpers
```

<br />

## Usage

Import the helper function you want to use by name from the Paprika `helpers` package:

```jsx
import { helperFunction } from "@paprika/helpers";
```

Polyfills must be imported directly from their source in the `lib` folder. For example:

```jsx
import "@paprika/helpers/lib/polyfills/elementClosest";
```

<br />

## Contents

<br />

#### callAll(functions[])

Returns a function that will call all functions passed as arguments.

#### extractChildren(children, types[])

Get a hash table of components from `chilren` argument where the `displayName` property of `child` matches an item provided in the `types` argument with the keys of the return object matching the items in `types`.

#### extractChildrenProps(children, target)

Get the `props` object from the `target` argument component type if it exists in `children` argument.

#### isDevEnv()

Returns true if `NODE_ENV` is `undefined` or "development".

<br />

### Custom PropTypes

A variety of custom React prop types including:

- `ShirtSizes`
- `AlignTypes`
- `deprecated`
- `InputValidTypes`
- `FocusPropTypes`
- `RefOf`

<br />

### DOM Functions

#### getActiveElement()

Returns the element that is currently focussed, even when that element is found within an open web component.

#### isElementContainsFocus(element)

Returns `true` if the element that is currently focussed is the `element` argument, or any descendent of `element`.

<br />

### Components

#### &lt;LockBodyScroll&gt;

Sets body `overlow` to `hidden`.

#### &lt;Portal&gt;

Wrapper for `ReactDOM.createPortal`.

<br />

### Hooks

#### useDebounce(value, delay)

Provides a `value` after a specified `delay`.

#### useForwardDomRef(ref, parentRef)

Set `parentRef` to `ref`.

#### useMountedRef()

Provides a ref with a `current` value of `true` if component is (still) mounted.

#### usePrevious(value)

Provides the previous value of the `value` argument.

<br />

### Polyfills

#### elementClosest

IE polyfill for `Element.closest()`.

#### elementScroll

IE polyfill for `Element.scroll()`, `Element.scrollTo()`, `Element.scrollBy()`.

<br />

## Links

- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/helpers/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/helpers%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/helpers/CHANGELOG.md)
npm package: @paprika/icon
Description: Icon component is a graphic to represent something else
Author: @paprika
Latest version: 3.0.3

# Icon

## Description

`<Icon>` component is a graphic to represent something else

## Installation

```
yarn add @paprika/icon
```

or with npm:

```
npm install @paprika/icon
```

## Usage

> IMPORTANT: PAPRIKA MAKES USE OF SOME PROPRIETARY ICONS THAT REQUIRE A LICENCE IN ORDER TO BE CONSUMED. PLEASE REPLACE THOSE PROPRIETARY ICONS OUTSIDE OF THE HIGHBOND PLATFORM. PLEASE DO NOT CONSUME THESE ICONS DIRECTLY.

For each SVG icon, we export the respective `<Icon>` component from the `@paprika/icon` package. You can [see the full list of these icons](https://github.com/acl-services/paprika/tree/master/packages/Icon/src/svg).

To add a custom icon to paprika components, you can do the following:

```jsx
import { ArrowDown } from "@paprika/icon";
import tokens from "@paprika/tokens";

// Usually tokens.icon.sizeSm should be used for size
<ArrowDownIcon size={tokens.icon.sizeSm} />;
```

### Note

- The exported `@paprika/icon` is using _PascalCase_ naming (for example ArrowDown, ArrowLeft)

- If you are a consumer who needs a custom icon for your project, you have to use [wasabicons](https://design.wegalvanize.com/icons) _(only accessible to Galvanize users)_
npm package: @paprika/inline-editors
Description: Great flexibility to present a pattern where the user has to interact with an output component in order to trigger an input component
Author: @paprika
Latest version: 1.0.23

# @paprika/inline-editors - 0.1.0

## Description

Great flexibility to present a pattern where the user has to interact with an output component in order to trigger an input component

## Installation

```
yarn add @paprika/inline-editors
```

or with npm:

```
npm install @paprika/inline-editors
```

## Props

### Usage

You can import different components in the format of:

```
import ListBox from "@paprika/inline-editors/lib/ListBox";
import Textarea from "@paprika/inline-editors/lib/Textarea";
import Input from "@paprika/inline-editors/lib/Input";
import Table from "@paprika/inline-editors/lib/Table";
import Editor from "@paprika/inline-editors/lib/Editor";
```

To learn more see: https://paprika.highbond.com/?path=/story/forms-inlineeditors-docs--page

## Links

- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/InlineEditors/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/inline-editors%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)
npm package: @paprika/link
Description: The Link component produces a standard anchor tag that navigates to another URL.
Author: @paprika
Latest version: 1.0.14

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

# @paprika/link

## Description

The Link component produces a standard anchor tag that navigates to another URL.

## Installation

```
yarn add @paprika/link
```

or with npm:

```
npm install @paprika/link
```

## Props

### Link

| Prop           | Type            | required | default | Description                                                              |
| -------------- | --------------- | -------- | ------- | ------------------------------------------------------------------------ |
| a11yText       | [string,null]   | false    | null    | Text for aria-label.                                                     |
| isExternalLink | boolean         | false    | false   | Open url in a new Tab, is indicated by a Tab icon after the link.        |
| hasNoUnderline | boolean         | false    | false   | Remove the default underline                                             |
| hasTruncation  | boolean         | false    | false   | If hasTruncation is set to true, the link will stay in one line          |
| isDark         | boolean         | false    | false   | Change font-color according to background color, set font-color to white |
| isSubtle       | boolean         | false    | false   | Set font-color to black                                                  |
| isMenu         | boolean         | false    | false   | Icon + text format for Menu                                              |
| children       | ReactReactNode  | false    | null    | Content to be displayed: texts, icons, etc.                              |
| maxWidth       | [string,number] | false    | "100%"  | Max-width for Link to be truncate, using a number implies px units.      |

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

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/buttons-link--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Link/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/link%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/Link/CHANGELOG.md)
npm package: @paprika/listbox-browser
Description: DEPRECATED - ListBox Browser component is a two column layout that allows users to select one or multiple options. It is similar to the experience of browsing a file manager in any operating system.
Author: @paprika
Latest version: 0.2.16
Deprecated: Moved to @paprika/list-box-browser

This component is deprecated and has been renamed @paprika/list-box-browser
npm package: @paprika/mock-endpoints
Description: A helper function that wraps of the 'fetch-mock' library, making it easy to mock API calls from your component.
Author: @paprika
Latest version: 1.0.3

## Usage

A helper function that wraps of the 'fetch-mock' library, making it easy to mock API calls from your component.

See the stories for a working examples.

```javascript
  import mockEndpoints from "@paprika/mock-endpoints";

  const endpoints = [
    {
      url: '/users',
      response: [{ id: 1, name: "nahum", ... }, { id: 2, name: "jamie"}],
    },
    {
      url: '/groups',
      response: [{ id: 1, name: "UX", members: [1,2] }, {}],
    }
  ];

  export default function UserLookupStory() {
    const { endpointsAreMocked } = useMockEndpoints(endpoints);
    if (!endpointsAreMocked) return null;

    // Any API calls in this component will be intercepted and the response will come from the corresponding "response" value above
    return <UserLookup />;
  }
```
npm package: @paprika/notification-card
Description: Notification Card component
Author: @paprika
Latest version: 1.0.25

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

# @paprika/notification-card

## Description

Notification Card component

## Installation

```
yarn add @paprika/notification-card
```

or with npm:

```
npm install @paprika/notification-card
```

## Props

### NotificationCard

| Prop     | Type   | required | default | Description                                 |
| -------- | ------ | -------- | ------- | ------------------------------------------- |
| children | node   | false    | null    |                                             |
| maxWidth | string | false    | null    | Dictates the maximum width of the component |

### NotificationCard.Image

| Prop     | Type                                                                     | required | default                          | Description                      |
| -------- | ------------------------------------------------------------------------ | -------- | -------------------------------- | -------------------------------- |
| align    | [ NotificationCard.types.align.TOP, NotificationCard.types.align.CENTER] | false    | NotificationCard.types.align.TOP | Aligns the position of the image |
| children | node                                                                     | false    | null                             |                                  |

### NotificationCard.Header

| Prop     | Type                | required | default | Description                     |
| -------- | ------------------- | -------- | ------- | ------------------------------- |
| children | node                | false    | null    |                                 |
| level    | [ 1, 2, 3, 4, 5, 6] | true     | -       | Heading level(1-6) is required. |

### NotificationCard.Body

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | false    | null    |             |

### NotificationCard.Footer

| Prop     | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| children | node | false    | null    |             |

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/messaging-notificationcard--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/NotificationCard/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/notification-card%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/NotificationCard/CHANGELOG.md)
npm package: @paprika/progress-bar
Description: ProgressBar is a component that shows the current progress of an action
Author: @paprika
Latest version: 1.1.16

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

# @paprika/progress-bar

## Description

ProgressBar is a component that shows the current progress of an action

## Installation

```
yarn add @paprika/progress-bar
```

or with npm:

```
npm install @paprika/progress-bar
```

## Props

### ProgressBar

| Prop        | Type                | required | default | Description                                               |
| ----------- | ------------------- | -------- | ------- | --------------------------------------------------------- |
| a11yText    | string              | false    | null    | Descriptive a11y text for assistive technologies.         |
| bodyText    | string              | false    | null    | Description for the ProgressBar                           |
| completed   | number              | false    | 0       | Specifies how much progress has been completed from 0-100 |
| header      | node                | false    | null    | Text for the heading displayed above ProgressBar          |
| headerLevel | [ 1, 2, 3, 4, 5, 6] | false    | 3       | Semantic heading level of header                          |
| isCompact   | bool                | false    | false   | If ProgressBar is displayed in a compact style            |

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

## Usage

```js
import ProgressBar from "@paprika/progress-bar";

<ProgressBar
  header="Preparing your file..."
  bodyText="Control attributes are getting updated. This might take more than 15secs."
  completed={30}
/>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/messaging-progressbar--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/ProgressBar/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/progress-bar%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/ProgressBar/CHANGELOG.md)
npm package: @paprika/search
Description: The search components helps you to implemented in an easy way an autocomplete interaction.
Author: @paprika
Latest version: 5.0.4

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

# @paprika/search

## Description

The search components helps you to implemented in an easy way an autocomplete interaction.

## Installation

```
yarn add @paprika/search
```

or with npm:

```
npm install @paprika/search
```

## Props

### Search

| Prop           | Type | required | default  | Description |
| -------------- | ---- | -------- | -------- | ----------- |
| children       | node | true     | -        |             |
| onChangeSearch | func | false    | () => {} |             |
| onSelected     | func | false    | () => {} |             |

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-search--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Search/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/search%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/Search/CHANGELOG.md)