open-index/open-npm huggingface dataset:
npm package: @invisionag/iris-colors
Description: ```js import colors from '@invisionag/iris-colors'; ```
Latest version: 5.2.2

```js
import colors from '@invisionag/iris-colors';
```

The injixo color world is split into 3 categories:

**Brand**

Only used for branding related tasks. It's not allowed to use those color for any other cause.

```js
import { brand } from '@invisionag/iris-colors';
```

**System**

Are used for all stylings within the injixo applications such as background-colors, border, typography, etc...

```js
import { system } from '@invisionag/iris-colors';
```

**Data Visualization**

Only used for data visualization such as graphs, tables and other data heavy visualizations.

```js
import { visualization } from '@invisionag/iris-colors';
```

### Usage:

```js
export const StyledItem = styled.div`
  background-color: ${colors.system.ui100};
`;
```

**Brand**

```js
export const StyledItem = styled.div`
  background-color: ${brand.injixo100};
`;
```

**System**

```js
export const StyledItem = styled.div`
  background-color: ${system.ui100};
`;
```

**Data Visualization**

```js
export const StyledItem = styled.div`
  background-color: ${visualization.ink50};
`;
```
npm package: @invisionag/iris-generic
Description: ```js import generic from '@invisionag/iris-generic'; ```
Latest version: 4.6.2

# JS Version
```js
import generic from '@invisionag/iris-generic';
```

`generic` is a styled-components wrapper around a couple of shared stylings:
* box-sizing
* typography
* normalization

Usage:
Somewhere in your code, you want to inject the exported styling like so:

```
import * as React from 'react';
import GlobalStyles from '@invisionag/iris-generic';
import App from './my-root-component';

render(
  <>
    <GlobalStyles />
    <App />
  </>
)
```

# SCSS Version
Import the generic file in your sass bundle:
```
@import '~@invisionag/iris-generic/generic.scss';
```
npm package: @invisionag/iris-react-a11y
Description: ```js import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y'; ```
Latest version: 3.4.2

```js
import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y';
```

A collection of higher-order-components aiming to improve usability and accessability of our components.

# withFocus

the `withFocus` hoc takes care of setting a prop `hasFocus` on the component passed to it. This prop will be `true` if the element is currently focused, and `false` if its not. You can use it to set the appropriate styling.

There are multiple benefits to using this hoc instead of `:focus` selectors:
* It is testable
* You dont have to rely on implementations that differ beween browsers
* You can pass the prop to children as you like, whereas css rules would have to reach accross component scopes (i.e. `.my-component:focus .my-child {}`
* In addition to styling, you can react with component logic on focus
* The `withFocus` hoc removes focus styling when an element was clicked with the mouse

Example:
```jsx
import {withFocus} from '@invisionag/iris-react-a11y';

const Component = ({ hasFocus, ...props }) => <div style={{ color: hasFocus ? 'red' : 'blue'}} {...props}>Lorem</div>

const FocusableComponent = withFocus(Component);

class App extends React.Component{
  render() {
    return <FocusableComponent />
  }
}
```

# withKeyboardHandlers

The `withKeyboardHandlers` hoc listens to keydown / keyup events on the component and triggers mousedown / mouseup & click events on the passed component respectively.
This makes it easier to implement keyboard navigation of interactable ui elements.

Example:
```jsx
import {withKeyboardHandlers} from '@invisionag/iris-react-a11y';

const Component = props => <div {...props}>Lorem</div>

const KeyboardInteractableComponent = withKeyboardHandlers(Component);

class App extends React.Component{
  render() {
    // enter and space keyup while focused will trigger onClick handler
    return <KeyboardInteractableComponent onClick={console.log}/>
  }
}
```
npm package: @invisionag/iris-react-accordion
Description: ```js Accordion from '@invisionag/iris-react-accordion'; ```
Latest version: 3.6.2

```js
Accordion from '@invisionag/iris-react-accordion';
```

`Accordion` is a vertically collapsable box. It has a header that can be clicked to toggle between open and closed status. It can be used to group elements on a page that are not necessarily important enough to always be visible.

Usage:

```
<Accordion heading={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Drawer>
```

By default, accordions will be closed. To change this, pass the `startOpen` prop

```
<Accordion startOpen header={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>
```

Usually we can let the accordion control the state (open / closed). In certain cases, we may want to control this from the outside. You can pass `open` to override the state

```
<Accordion open={true} header={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>
```

Use the `onToggle` handler to react to the accordion changing state

```
<Accordion onToggle={(open) => console.log('drawer open?', open)} header={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>
```

## Heading
To deal with the header, we have multiple options.

1. Just pass `heading`. This can be a jsx template, numer or a string and will be static, independent of accordion state.
```
<Accordion heading={<h1>Click me to toggle the accordion</h1>}>
  <div>I am an element in an accordion!</div>
</Drawer>
```

2. pass `headingOpen` and `headingClosed`. These will still be static, but switch depending on accordion state.
```
<Accordion
  headingOpen={<h1>Click me to close the accordion</h1>}
  headingClosed={<h1>Click me to open the accordion</h1>}
>
  <div>I am an element in an accordion!</div>
</Drawer>
```

3. pass `headerRenderer`. This needs to be a function that accepts two arguments, `open` (boolean) and `heading` (jsx). `heading` will be `heading` or `headingOpen`/`headingClosed`, depending on what you passed.
```
<Accordion heading="my accordion" headerRenderer={(open, heading) => <h1>{open ? '-' : '+'}: {heading}</h1>}>
  <div>I am an element in an accordion!</div>
</Accordion>
```
npm package: @invisionag/iris-react-animation
Description: ```js import Animation from '@invisionag/iris-react-animation'; ```
Latest version: 2.5.2

```js
import Animation from '@invisionag/iris-react-animation';
```

A component that parses standardized Adobe After Effects animation data.

### Usage:

All additional props will be passed to it's container, which is `react-image-container` by default.

#### Default

Takes a javascript object representing an Adobe After Effects animation (E.g. from a JSON file).

```js
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';

<Animation data={animationData} />
```

#### AnimationDelayer

Sometimes it may be necessary to delay the start of an animation. For this purpose, the animation package ships with an `AnimationDelay` component that stops any css or lottie animation in its children. Note that it will stop *any* animations, not just direct children. The default delay is 1000ms but can be configured by passing a `delay` prop.

Example:
```js
import Animation, { AnimationDelayer } from '@invisionag/iris-react-animation';
import animationData from './animation.json';

<AnimationDelayer delay={1000}>
  <Animation data={animationData} />
</AnimationDelayer>

```

Note: The AnimationDelayer will only delay animations on mounting. It will not delay on updates


#### Custom container

Use the children render prop to render the svg in a custom container.

Render prop params:
* onRef: callback that will be invoked when the ref is set. Expects a domNode as first element, which will then be used as the node the animation is rendered in.
* animation: the lottie animation instance. See https://github.com/airbnb/lottie-web#usage.
* all additional props passed to `Animation`

```js
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';

<Animation data={animationData}>
  {({ onRef }) => (
    <div ref={onRef} />
  )}
</Animation>
```

#### lottieOptions (optional)

This lets you pass options directly to [lottie](https://airbnb.design/lottie/).
Should be used as an escape hatch if all else fails.

```js
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';

<Animation data={animationData} lottieOptions={{ loop: false }} />
```
npm package: @invisionag/iris-react-box
Description: ```js import Box from '@invisionag/iris-react-box'; import { Cell } from '@invisionag/iris-react-grid'; ```
Latest version: 1.3.2

```js
import Box from '@invisionag/iris-react-box';
import { Cell } from '@invisionag/iris-react-grid';
```

`iris-react-box` is our basic implementation of a white box, used to wrap content.

# Usage

## Box

The `Box` component provides a white wrapper for all of our content and other elements. A basic `GridContainer`is also already included.

Please note that you **must** wrap your content inside `Box` in a `Cell` component! There are no other direct children allowed than the `Cell` component.

### Code example

```jsx
<Box>
  <Cell>Content goes here</Cell>
</Box>
```

### Props

The `Box` component has no Props.
npm package: @invisionag/iris-react-button
Description: ```js import Button from '@invisionag/iris-react-button'; ```
Latest version: 6.5.2

```js
import Button from '@invisionag/iris-react-button';
```

A general button component. Has multiple states.

### Usage:

#### Basic button

```
<Button>Push Me</Button>
```

#### Primary button

```
<Button primary>Hello!</Button>
```

#### Danger button

```
<Button danger>Oh no!</Button>
```

#### Disabled button

```
<Button disabled>You can't click me!</Button>
```
npm package: @invisionag/iris-react-button-group
Description: ```js import ButtonGroup from '@invisionag/iris-react-button-group'; ```
Latest version: 4.5.2

```js
import ButtonGroup from '@invisionag/iris-react-button-group';
```

A general buttongroup component. Should only include default buttons.

### Usage:

```
<ButtonGroup>
  <Button>
    All
  </Button>
  <Button>
    Selected
  </Button>
  <Button>
    Unselected
  </Button>
</ButtonGroup>
```
npm package: @invisionag/iris-react-checkbox
Description: ```js import Switch from '@invisionag/iris-react-checkbox'; ```
Latest version: 4.5.2

```js
import Switch from '@invisionag/iris-react-checkbox';
```

`react-checkbox` is a component that enables a user to chose between two input values. Usually a better choice than radio buttons for binary selections ( i.e. ON / OFF )
### Usage

#### Basic

```jsx
<Switch />
```
npm package: @invisionag/iris-react-datepicker
Description: ```js Datepicker from '@invisionag/iris-react-datepicker'; ```
Latest version: 6.3.2

```js
Datepicker from '@invisionag/iris-react-datepicker';
```

`react-datepicker` is a component that provides a graphical input element for dates. It is essentially a wrapper for [blueprint's datepicker component](http://blueprintjs.com/docs/#datetime/datepicker) which itself is a wrapper for [react-day-picker](http://react-day-picker.js.org) with some injixo styling and quality-of-life improvements.

### Usage

#### Basic

```js

<Datepicker onChange={date => console.log(`user has selected ${date}`)} />
```

#### min and max date

You can provide a min and max date (both or individually) to disable date ranges from selection. You can directly pass moment objects.
For more involved date filtering logic (such as disabling weekends), refer to the [modifiers](http://react-day-picker.js.org/api/ModifiersUtils) documentation.

```js
<Datepicker
    minDate={moment('2017-01-01 00:00:00Z')}
    maxDate={moment('2018-01-01 00:00:00Z')}
/>
```

#### highlightRange

This option will highlight the entire week or month the selected day is in. Hovering a date will also highlight the range it is in. The start day of the week is not changeable because it currently uses `isoWeek` from moment to
determine when a week starts and ends.

```js
<Datepicker
    highlightRange="week"
/>
```

```js
<Datepicker
    highlightRange="month"
/>
```

#### Custom trigger elements

If you want the day picker to be triggered by something other than the default input element, you can pass a function that returns the component you want to use as trigger. The first argument of this function provides a reference to the component method that toggles the datepicker.
```js
<Datepicker>
    {({ toggle }) => <Button onClick={toggle}>Click to open Datepicker</Button>}
</Datepicker>
```
npm package: @invisionag/iris-react-digit-input
Description: ```js import DigitInput from '@invisionag/iris-react-digit-input'; ```
Latest version: 1.6.9

```js
import DigitInput from '@invisionag/iris-react-digit-input';
```

`react-digit-input`
is a component that allows you to format inputs by clearly dividing them into each digit. It renders an input field for each digit and combines them into a single value again when needed.

### Usage

#### Basic

Renders 6 one digit input fields that act like a single input.

```js
<DigitInput
  onValueChange={value => {
    console.log(value);
  }}
/>
```

#### length

The `length` prop determines the maximum length of the value and the number of input fields rendered. The default length is 6.

```js
<DigitInput
  length={8}
  onValueChange={value => {
    console.log(value);
  }}
/>
```

#### Other

All other props such as event handlers or html attributes will be passed down directly to each of the rendered input fields.

```js
<DigitInput
  placeholder="0"
  onKeyDown={e => {
    e.stopPropagation();
  }}
  onValueChange={value => {
    console.log(value);
  }}
/>
```
npm package: @invisionag/iris-react-drawer
Description: ```js Drawer from '@invisionag/iris-react-drawer'; ```
Latest version: 4.4.2

```js
Drawer from '@invisionag/iris-react-drawer';
```

`Drawer` is a generalized sidebar component. It provides
functionality to wrap part of the view within a collapsable sidebar.
Anything can be rendered within a Drawer component, no props get attached to the elements.

Usage:

```
<Drawer>
  <div>I am an element in a drawer!</div>
</Drawer>
```

By default, drawers will get attached to the right side. Positioning can be controlled with the `position` prop:

```
<Drawer position="left">
  <div>I am an element in a drawer!</div>
</Drawer>
```

The collapse button is only visible when the sidebar is hovered over. Hovering out triggers a grace timer before the element is truly hidden. The grace timer can be modified with `hoverDelay` and defaults to 500(ms).

```
<Drawer hoverDelay={2000}>
  <div>I am an element in a drawer!</div>
</Drawer>
```
npm package: @invisionag/iris-react-dropdown
Description: ```js import Dropdown from '@invisionag/iris-react-dropdown'; ```
Latest version: 6.6.15

```js
import Dropdown from '@invisionag/iris-react-dropdown';
```

A general single select dropdown component.

It extends [react-select](https://react-select.com) and any of its props can be passed to this component as well. See https://react-select.com/props for a full list.

### Usage:

```
const options = [
  {label: "First Option", value: 1},
  {label: "Second Option", value: 2},
]
<Dropdown placeholder="Select..." options={options} />
```

A custom option renderer can be provided. This works well in conjunction with individualised option arrays:

```
const options = [
  {label: "First Option", value: 1, someValue: "hi!"},
  {label: "Second Option", value: 2, someValue: "ho!"},
]
<Dropdown placeholder="Select..." options={options} optionRenderer={option => <div>{option.someValue}</div>}/>
```

The dropdown can be made searchable by providing the `searchable` prop.
If the dropdown has more then 7 entries it will automatically be searchable.
**Beware:** This will have significant performance issues when a lot of options (100+) are provided!

```
const options = [
  {label: "First Option", value: 1, someValue: "hi!"},
  {label: "Second Option", value: 2, someValue: "ho!"},
]
<Dropdown placeholder="Type to search..." options={options} searchable />
```

The dropdown can be multi selectable by providing the `multi` prop.
Be sure to provide the value as an array. The callback `onChange` returns a an array of values as well.

```
const options = [
  {label: "First Option", value: 1, someValue: "hi!"},
  {label: "Second Option", value: 2, someValue: "ho!"},
]
<Dropdown placeholder="Type to search..." options={options} multi value={[1, 2]} />
```
npm package: @invisionag/iris-react-error-boundary
Description: ```js import ErrorBoundary from '@invisionag/iris-react-errorboundary'; ```
Latest version: 3.5.2

```js
import ErrorBoundary from '@invisionag/iris-react-errorboundary';
```

```react-error-boundary```
is a component that catches JavaScript errors anywhere in its child component tree and displays a fallback UI instead. This prevents the entire react app from unmounting by using [React 16's ```componentDidCatch``` lifecycle method](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).

### Usage

#### Basic
Renders a fallback UI when ```<SomeComponent />``` throws an error. (As seen in the default Story)

```js
<ErrorBoundary>
  <SomeComponent />
</ErrorBoundary>
```

#### showStackTrace
When using the default fallback UI the ```showStackTrace``` prop controlles if the stacktrace is shown. By default the stacktrace isn't shown in the production enviroment.

```js
// Will never show the stacktrace
<ErrorBoundary showStackTrace={false}>
  <SomeComponent />
</ErrorBoundary>
```

#### renderError
The ```renderError``` prop lets you render a custom fallback UI. It expects a function that takes an ```ErrorObject``` and returns a React Node.

```js
type ErrorObject = {
  error: Error,
  componentStack: string,
};

renderError = (errorObject: ErrorObject) => (
  <SomeAlternateComponent errorObject={errorObject} />
);

<ErrorBoundary renderError={renderError}>
  <SomeComponent />
</ErrorBoundary>
```
npm package: @invisionag/iris-react-error-hint
Description: ```js import ErrorHint from '@invisionag/iris-react-error-hint'; ```
Latest version: 2.5.2

```js
import ErrorHint from '@invisionag/iris-react-error-hint';
```

A general error hint.

### Usage:

```
<ErrorHint>Your Error Message</ErrorHint>
```
npm package: @invisionag/iris-react-flash-message
Description: ```js import FlashMessage from '@invisionag/iris-react-flash-message'; ```
Latest version: 4.5.2

```js
import FlashMessage from '@invisionag/iris-react-flash-message';
```

A general single flash message.

### Basic Usage:

```
type Props = {
  text: string,
  type: 'success' | 'error',
  onDismiss: string => any,
};

<FlashMessage text={text} type={type} onDismiss={onDismiss} />
```

### autoDismiss:
When passing the `autoDismiss` prop, the flash message will automatically invoke the passed `onDismiss` callback after an amount of ms specified in iris settings. The lifespan timer will pause when the Flash Message receives a mouseover event and start up again on mouseleave.

```<FlashMessage text="My days are numbered :(" lifespan={2500} onDismiss={onDismiss} />```

If `autoDismiss` is not passed, the message will stay on screen indefinitely.

### mouseEnter
npm package: @invisionag/iris-react-grid
Description: ```js import { GridContainer, GridX, Cell } from '@invisionag/iris-react-grid'; ```
Latest version: 1.4.2

```js
import { GridContainer, GridX, Cell } from '@invisionag/iris-react-grid';
```

`iris-react-grid` offers a collection of layout components to place other components on a fully responsive grid. It's based on the XY Grid from ZURB's Foundation 6 for Sites.

# Usage

Please **do not** apply other styles or classes to any of the following components as it can break the Foundation grid. Please use new wrapper elements inside `Cell` if you want to add new paddings, etc.

## GridContainer

The `GridContainer` component provides the outer frame for all subsequent content.

In its standard version, the grid container will be centered at a max-width of 1200px.

Every single page inside injixo has to use that content container component to ensure consistency across apps.

There are no other direct children allowed than the `GridX` component.

### Props

#### `fluid`

```jsx
fluid?: boolean;
```

Adding the prop `fluid` results in a full width grid.

---

## GridX

The `GridX` component is another wrapper provided by Foundation that allows us to divide horizontal space into columns. Inside this component only `Cell` is allowed. This component has no Props.

---

## Cell

The `Cell` component allows us to place and adjust content on a horizontal axis.

### Props

#### `size`

```jsx
size: number | number[];
```

Adding numbers as array allows for a dynamic resizing based on Foundation's breakpoints (small, medium, large).

**Example:**

```jsx
<Cell size={[12, 3, 1]} />
```

Results in having a cell at 12 column width on small, 3 column width on medium and 1 column width on large.

#### `offset`

```jsx
offset?: number | number[];
```

Adding an offset to a cell provides an easy way to skip a certain number of columns. It follows the same array principle as in `sizes`.

**Example:**

```jsx
<Cell offset={[0, 0, 2]} />
```

In this example we'd move our cell two columns to the right when the viewport is >= large.
npm package: @invisionag/iris-react-heading
Description: ```js import Heading from '@invisionag/iris-react-heading'; ```
Latest version: 4.5.2

```js
import Heading from '@invisionag/iris-react-heading';
```

A basic title component. Sizes are adjustable using props.

### Usage

#### As `h1` (default)

```
<Heading>Heading 1</Heading>
```

#### As other sizes

```
<div>
  <Heading level={2}>Heading 2</Heading>
  <Heading level={3}>Heading 3</Heading>
  <Heading level={4}>Heading 4</Heading>
</div>
```
npm package: @invisionag/iris-react-icon
Description: ```js import Icon from '@invisionag/iris-react-icon'; ```
Latest version: 5.6.2

```js
import Icon from '@invisionag/iris-react-icon';
```

An icon component.

### Usage:

#### Account

```
<Icon is="account" />
```

### Props

#### is
This props expects the name of an svg as implemented by the svg package. See there for which icons are implemented

#### color
Expects a css compatible color code. Will Set the foreground color of the icon

#### backgroundColor
Expects a css compatible color code. Will Set the background color of the icon
npm package: @invisionag/iris-react-icon-button
Description: ```js import IconButton from '@invisionag/iris-react-icon-button'; ```
Latest version: 4.5.2

```js
import IconButton from '@invisionag/iris-react-icon-button';
```

A button component with only an icon inside.

### Usage:

#### Basic button

```
<IconButton icon="account" />
```

#### Primary button

```
<IconButton primary icon="account" />
```

#### Danger button

```
<IconButton danger icon="account" />
```

#### Disabled button

```
<IconButton disabled icon="account" />
```
npm package: @invisionag/iris-react-image-container
Description: ```js import ImageContainer from '@invisionag/iris-react-image-container'; ```
Latest version: 2.6.2

```js
import ImageContainer from '@invisionag/iris-react-image-container';
```

A component that contains an image.

### Usage:

#### Default

```js
import ImageContainer from '@invisionag/iris-react-image-container';

<ImageContainer>
    <svg /> // <- Some image
</ImageContainer>
```

#### scale (optional)

Sets the scale of the contained image. E.g. a scale of 2 will double it's size.
The default size is set to settings.spacing.

```js
import ImageContainer from '@invisionag/iris-react-image-container';

<ImageContainer scale={2}>
    ...
</ImageContainer>
```

#### color (optional)

Sets the color of the contained image.
NOTE: this will NOT override colors set directly on the image.

```js
import ImageContainer from '@invisionag/iris-react-image-container';

<ImageContainer color={'red'}>
    ...
</ImageContainer>
```


#### fillShape (optional)

Fills the inner shapes of the icon with white.

```js
import ImageContainer from '@invisionag/iris-react-image-container';

<ImageContainer fillShape>
    ...
</ImageContainer>
```
npm package: @invisionag/iris-react-input
Description: ```js import Input from '@invisionag/iris-react-input'; ```
Latest version: 8.7.2

```js
import Input from '@invisionag/iris-react-input';
```

`Input` is a generalized input field. It provides
functionality to remove all entered content with one click.

If you'd like to pass additional props to the `input` element, just pass them
to `Input`. This can be useful for event listeners.

We do not recommend to use `hasResetButton` in combination with type `number`.

Usage:

```
<Input placeholder="Type some stuff..." />
```

With reset button:

```
<Input hasResetButton placeholder="More stuff..." />
```

As live search field:

```
<Input isLiveSearchField hasResetButton placeholder="Search" />
```

With success message:

```
<Input message="Success!" status="success"/>
```

With warning message:

```
<Input message="Warning!" status="warning"/>
```

With error message:

```
<Input message="Error!" status="error"/>
```

With info message:

```
<Input message="Here is a info text for the input"/>
```

With half of default size:

```
<Input small />
```

Custom width (is not considered when small is set):

```
<Input width="100%" />
```
npm package: @invisionag/iris-react-input-label
Description: ```js import InputLabel from '@invisionag/iris-react-input-label'; ```
Latest version: 5.6.2

```js
import InputLabel from '@invisionag/iris-react-input-label';
```

This components renders a label. Each child node will be in block-layout by default.

### Usage

```
<InputLabel>
  Label
  <Input placeholder="Placeholder" />
</InputLabel>
```

### Inline

For inline labels, you can pass the `inline` property.
```
<InputLabel inline>
  Label
  <Input id="input-id" placeholder="Placeholder" />
</InputLabel>
```
npm package: @invisionag/iris-react-link
Description: ```js import Link from '@invisionag/iris-react-link'; ```
Latest version: 3.5.2

```js
import Link from '@invisionag/iris-react-link';
```

A basic link component.

### Usage

```
<Link href="http://www.google.com">Link text</Link>
```

### As button

If no `href` prop is passed to the component, it will automatically render as a button.
```
<Link>Button looking like link text</Link>
```
npm package: @invisionag/iris-react-list
Description: ```js import { UnorderedList, ListItem } from '@invisionag/iris-react-list'; ```
Latest version: 3.6.2

```js
import { UnorderedList, ListItem } from '@invisionag/iris-react-list';
```

#DEPRECATED

A basic list component for unordered lists.

### Usage

```
<UnorderedList>
  <ListItem>Bullet Point Text 1</ListItem>
  <ListItem>Bullet Point Text 2</ListItem>
  <ListItem>Bullet Point Text 3</ListItem>
</UnorderedList>
```

### Props

#### icon

When passed a string, it is used to set an iris icon as bullet point

```
<UnorderedList icon="check circle">
  <ListItem>Bullet Point Text 1</ListItem>
  <ListItem>Bullet Point Text 2</ListItem>
  <ListItem>Bullet Point Text 3</ListItem>
</UnorderedList>
```

When passed a react element, the element is rendered as icon

```
<UnorderedList icon={() => <MyCustomIcon />}>
  <ListItem>Bullet Point Text 1</ListItem>
  <ListItem>Bullet Point Text 2</ListItem>
  <ListItem>Bullet Point Text 3</ListItem>
</UnorderedList>
```

It is advisable to base the custom icon on the default `BulletPoint` component, so native styles are extended instead of overwritten. Examples can be found in the story and test files of this component.
npm package: @invisionag/iris-react-message
Description: ```js import Message from '@invisionag/iris-react-message'; ```
Latest version: 5.6.2

```js
import Message from '@invisionag/iris-react-message';
```

## Deprecated

Moved to injixo-ui/core

### Usage:

Default message:

```js
<Message>Hello!</Message>
```

or

```js
<Message variant="default">Hello!</Message>
```

Info message:

```js
<Message variant="info">Did you know?</Message>
```

Warning message:

```js
<Message variant="warning">Watch out!</Message>
```

Error message:

```js
<Message variant="error">Critical error!</Message>
```
npm package: @invisionag/iris-react-modal
Description: ```js import {   Modal,   ModalClose,   ModalBody,   ModalHeader,   ModalFooter } from '@invisionag/iris-react-modal'; ```
Latest version: 6.5.2

```js
import {
  Modal,
  ModalClose,
  ModalBody,
  ModalHeader,
  ModalFooter
} from '@invisionag/iris-react-modal';
```

The modal component is based on https://github.com/reactjs/react-modal, you should follow the documentation of the project.

### Usage:

`closeHandler`, `isOpen`, `contentLabel` are required props.
The `Modal` component is a container component and **has to have** `ModalHeader`, `ModalBody`, `ModalFooter` as children.

```
<Modal
  closeHandler={this.handleCloseModal}
  isOpen={boolean}
  contentLabel="A11y label"
>
  <ModalHeader>Headline</ModalHeader>
  <ModalBody>
    Information text
  </ModalBody>
  <ModalFooter>
    <Button onClick={this.handleCloseModal}>
      Cancel button
    </Button>
    <Button danger>Confirm button</Button>
  </ModalFooter>
</Modal>
```
npm package: @invisionag/iris-react-radio
Description: ```js import Radio, { RadioGroup } from '@invisionag/iris-react-radio'; ```
Latest version: 4.5.2

```js
import Radio, { RadioGroup } from '@invisionag/iris-react-radio';
```

`react-radio` is a component that enables a user to chose between multiple choices. the layouting of these choices depends on what component gets put into the radio group.
### Usage

#### Basic

```jsx
<RadioGroup name="basic-group">
  <Radio value="1">First Option</Radio>
  <Radio value="2">Second Option</Radio>
</RadioGroup>
```

#### Preselected value

```jsx
<RadioGroup name="basic-group" selectedValue="1">
  <Radio value="1">First Option</Radio>
  <Radio value="2">Second Option</Radio>
</RadioGroup>
```
#### Card layout
Instead of the default radio button layout, you can use clickable cards to render your options. Cards children will be displayed in the body, while the optional `header` prop expects valid jsx that will be rendered as a heading.
Cards behave just like the `Radio` elements and can be mixed with them.

```
import RadioCard from '@invisionag/iris-react-radio/Card';
```

```jsx
<RadioGroup name="basic-group" selectedValue="1">
  <RadioCard value="1">First Option</RadioCard>
  <RadioCard value="2" header={<h1>Second</h1>}>Second Option</RadioCard>
  <RadioCard value="3">Third Option</RadioCard>
</RadioGroup>
```

#### OnChange handler
Radios can receive an onChange handler, which will get executed *before* the builtin handler.

```jsx
<RadioGroup name="basic-group" selectedValue="1">
  <Radio value="1" onChange={() => console.log('radio button changes')}>First Option</Radio>
  <Radio value="2">Second Option</Radio>
</RadioGroup>
```
Note that input elements only fire their onChange event when a radio gets _selected_. If, because of that, another radio gets deselected, this one won't fire.
npm package: @invisionag/iris-react-ripple
Description: ```js import Ripple from '@invisionag/iris-react-radio'; ```
Latest version: 4.5.2

```js
import Ripple from '@invisionag/iris-react-radio';
```

`react-ripple` is a component that will mostly find internal usage. It provides a ripple effect on click/tap over the selected area. 
### Usage

#### Basic

```jsx
<Ripple />
```
npm package: @invisionag/iris-react-section
Description: ```js import Section from '@invisionag/iris-react-section'; ```
Latest version: 3.5.2

```js
import Section from '@invisionag/iris-react-section';
```

A basic component to structure elements on a page. `Section` takes a `title`
prop which will be rendered as the sections heading. If `title` is a string it
will be wrapped in `<Heading as="h1" />`.
`additionalInfo` can be passed and will be rendered between `title` and children. If `additionalInfo` was passed, no separator will be rendered.
Children will be passed straight through but left-indented.

### Usage

```
<Section title="Heading">
  <p>Lorem ipsum dolor sid amed.</p>
</Heading>
```

### Pass JSX

```
<Section title={<Heading as="h1">Heading</Heading>}>
  <p>Lorem ipsum dolor sid amed.</p>
</Heading>
```


### additionalInfo

```
<Section title="Heading" additionalInfo={<span>Some stuff</span>}>
  <p>Lorem ipsum dolor sid amed.</p>
</Heading>
```
npm package: @invisionag/iris-react-spinner
Description: ```js import Spinner from '@invisionag/iris-react-spinner'; ```
Latest version: 4.5.2

```js
import Spinner from '@invisionag/iris-react-spinner';
```

---

### Deprecated due to our new technologies.

---

A loading indicating spinner component.

### Usage:

```
<Spinner />
```

### Possible values:

```
<Spinner scale={3} label="Loading" />
```
npm package: @invisionag/iris-react-status-card
Description: ```js import StatusCard from '@invisionag/iris-react-status-card'; import { StatusCardGroup } from '@invisionag/iris-react-status-card'; ``` ## General Props
Latest version: 2.8.2

```js
import StatusCard from '@invisionag/iris-react-status-card';
import { StatusCardGroup } from '@invisionag/iris-react-status-card';
```
## General Props

### icon
Can receive either a string or a react component. When passed a string, it will render the matching iris icon in the header. When passed a component, it will directly render the component instead.

#### Usage

```
<StatusCard icon="check circle" />
<StatusCard icon={() => <div>Custom Component</div>} />
```

### footer
Can receive JSX and will render a footer section into the card. Can be used for content that is supposed to be aligned to the bottom of the card

#### Usage
```
<StatusCard footer={StatusCardProps => <div>My Footer</div>} />
```


## Statuses
Organizes some content in a card layout, with the card being able to communicate different statuses.

### success:
The condition is achieved, this card is supposed to confirm a correct status.

#### Usage:

```
<StatusCard success heading="It worked!" />
```

#### error:
The cards condition is not achieved. The card is interactable.

#### Usage:

```
<StatusCard hasError heading="This did not work!" />
```

### active:
This cards condition is undetermined. User action is expected here. If combined with `success` or `hasError`, the status takes priority when computing styling.

#### Usage:

```
<StatusCard active heading="Click me!" />
```

#### disabled:
Its not possible to interact with this card. Whether status is `success` or `error` does not matter.

#### Usage:

```
<StatusCard disabled heading="I am disabled!" />
```

### largeIcon
Doubles the size of the Icon. Should be used with large StatusCards.

#### Usage:

```
<StatusCard heading="I have a large icon!" largeIcon />
```

### Content
StatusCards are comprised of `heading`, `icon` and `children`. `heading` expects any string, `icon` has to be a valid iris-react-icon value, and `children` may be any react node(s).

### Group
The component also export `StatusCardGroup`, which is a flex-based wrapper for Cards. It also takes care of gutter-spacing for the cards it includes.

#### Usage:

```
<StatusCardGroup>
  <StatusCard heading="I'm a card!" />
  <StatusCard heading="I'm a card too!" />
</StatusCardGroup>
```
npm package: @invisionag/iris-react-status-label
Description: ```js import StatusLabel from '@invisionag/iris-react-status-label'; ```
Latest version: 2.5.2

```js
import StatusLabel from '@invisionag/iris-react-status-label';
```

## Deprecated

Moved to injixo-ui/core

A label component with multiple statuses.

### Usage:

#### Default

```
<StatusLabel>Default</StatusLabel>
```

#### With status

Simply pass one or multiple of the following props

##### Primary

```
<StatusLabel primary>Primary</StatusLabel>
```

##### Success

```
<StatusLabel success>Success</StatusLabel>
```

##### Warning

```
<StatusLabel warning>Warning</StatusLabel>
```

##### Error

```
<StatusLabel error>Error</StatusLabel>
```

#### Multiple statuses

When the label has multiple statuses the prioritization is the following:

Error > Warning > Success > Primary

```
<StatusLabel success error>Error</StatusLabel>
```

In this example the success status will be overwritten by the error status.
npm package: @invisionag/iris-react-tooltip
Description: ```js Tooltip from '@invisionag/iris-react-tooltip'; ```
Latest version: 6.7.2

```js
Tooltip from '@invisionag/iris-react-tooltip';
```

# Tooltip

Tooltip Component for displaying context specific information.

## Props

### tooltipOffset
Expects an object containing an `x` and a `y` key with string values. Offset gets applied to the tooltip as positioning relative to its anchor from the bottom left.

Example:
```js

<Tooltip
  renderAsAnchor={() => <span>Click me!</span>}
  renderTooltipContent={() => <div>I am the Tooltip!</div>}
  tooltipOffset={{x: '0', y: '-10px'}}
/>

```

## as Anchor

### Hoverable

Usage:

```js

<Tooltip
  renderAsAnchor={() => <span>Click me!</span>}
  renderTooltipContent={() => <div>I am the Tooltip!</div>}
/>

```

### Clickable

Usage:

```js

<Tooltip
  clickable
  renderAsAnchor={() => <span>Click me!</span>}
  renderTooltipContent={() => <div>I am the Tooltip!</div>}
/>

```

You can pass a `width` prop to the tooltip, which will determine the width the tooltip will expand to before linebreaking:

```js
<Tooltip
  clickable
  width="100px"
  renderAsAnchor={() => <span>Click me!</span>}
  renderTooltipContent={() => <div>I am the Tooltip!</div>}
/>
```

## with Ref

The Tooltip which is controlled with a react reference can be assigned additional props because it expects to be confirmed.

Usage:

```js
<Tooltip
  renderWithRef={({ setPositionByRef }) => <div ref={setPositionByRef}>Click me!</span>}
  renderTooltipContent={() => <div>I am the Tooltip!</div>}
  renderConfirm={() => 'Confirm'}
  onClose={closeHandlerFunction}
/>
```

You can pass a `width` prop to the tooltip, which will determine the width the tooltip will expand to before linebreaking:

```js
<Tooltip
  width="100px"
  renderWithRef={({ setPositionByRef }) => <div ref={setPositionByRef}>Click me!</span>}
  renderTooltipContent={() => <div>I am the Tooltip!</div>}
  renderConfirm={() => 'Confirm'}
  onClose={closeHandlerFunction}
/>
```
npm package: @invisionag/iris-theme
Description: ## themes
Latest version: 3.0.17

# @invisionag/iris-theme

## themes

You need to wrap your application in a `ThemeProvider` from `styled-components`, like this:

```js
import { ThemeProvider } from 'styled-components';
import themes from '@invisionag/iris-theme';
import { render } from 'react-dom';

render(
  <ThemeProvider theme={themes.injixo}>
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);
```

As of now, a theme consists of the following structure:

```js
const theme = {
  settings, // settings from iris-settings
  colors, // colored mappings, like primary.text or danger.background.
  baseColors, // raw colors like blue100, accent120, black80 etc, the same package as iris-colors
  tools, // iris-tools
  name: 'injixo',
};
```

## withDefaultTheme

You can wrap your components with this function to set the `injixo` default Theme.

```js
import styled from 'styled-components';
import { withDefaultTheme } from '@invisionag/iris-theme';

const StyledDiv = withDefaultTheme(styled.div`
  border-radius: ${({ theme }) => theme.settings.radiusTiny};
`);
```

Behind the scenes, this sets the theme in the `defaultProps` of the component.
npm package: @invisionag/jest-config-ivx
Description: # Overview This Package contains complete configuration of jest for any InVision javascript repository, including: * enzyme support (including matchers) * styled-components support (including serializer and matchers) * stubs for browser functionality (lik
Author: Tobias Lengsholz
Latest version: 6.2.2

# @invisionag/jest-config-ivx

# Overview
This Package contains complete configuration of jest for any InVision javascript repository, including:
* enzyme support (including matchers)
* styled-components support (including serializer and matchers)
* stubs for browser functionality (like fetch)missing in jest testing enviroments
* stubs for asset files

# Installation

Install `@invisionag/jest-config-ivx` as a development dependency.

# Usage

### General
In your `jest.config.js`:
```js
module.exports = require('@invisionag/jest-config-ivx');
```

You can then extend the baseConfig as desired. A simple (complete) example to add an additional setup file would look like this:
```js
  const baseConfig = require('@invisionag/jest-config-ivx');
  module.exports = {
    ...baseConfig,
    setupFiles: [
      ...baseConfig.setupFiles,
      'jest-localstorage-mock',
    ],
  };
```

### Enzyme
Enzyme is a renderer used to initialize react components in a testing enviroment ([Documentation](http://airbnb.io/enzyme/)). Our jest configuration also ships with matchers to easily assert against enzyme objects ([Documentation](https://github.com/FormidableLabs/enzyme-matchers)).

### Styled Components
The configuration ships matchers to assert that styled-components elements include certain attributes [Documentation](https://github.com/styled-components/jest-styled-components)

### Fetch
We also include a minimalistic fetch mocking library to assert that requests were made by the tested code. See the [Documentation](https://github.com/jefflau/jest-fetch-mock) for how to use it
npm package: @invisionag/network-unifi
Description: Library for accessing the unifi network equipment
Author: Alexander Plavinski
Latest version: 0.3.4

# network-unifi
[![CircleCI](https://circleci.com/gh/ivx/network-unifi.svg?style=svg)](https://circleci.com/gh/ivx/network-unifi) [![Coverage Status](https://coveralls.io/repos/github/ivx/network-unifi/badge.svg?branch=master)](https://coveralls.io/github/ivx/network-unifi?branch=master)

> Library for accessing the unifi network equipment

## Install

Currently, the module is written on Node 10+, without any transpilers, using the
ES2015+ features.

``` sh
npm install --save network-unifi
```

## Usage

``` javascript
const networkUnifi = require('network-unifi')
const options = {
  username: '',
  password: '',
  port: 8443,
  url: 'https://192.168.0.1',
  site: 'default',
  ignoreSsl: false
}

networkUnifi(options)
  .then(router =>
    Promise.all([router.getAccessPoints(), router.getClients()])
  .then(([accessPoints, clients]) => {
    console.log(accessPoints, clients)
  })
```

## API

### networkUnifi(options)

Returns a `Promise` with the Router API

#### options

##### username

Type: `string`

Username for the Router API

##### password

Type: `string`

Password for the Router API


##### port (default:`8443`)

Type: `number`

Port for the Router API


##### url (default:`https://192.168.0.1`)

Type: `string`

URL for the Router API

##### site (default:`default`)

Type: `string`

The site setting for the Router API

##### ignoreSsl (default:`false`)

Type: `boolean`

Ignore SSL warnings, for instance when accessing router API that uses a self signed certificate.

## License

MIT © InVision AG
npm package: @invisionag/prettier-config
Description: This is our general config for prettier. This should be used whenever we use prettier.
Latest version: 2.1.3

# @invisionag/prettier-config

This is our general config for prettier. This should be used whenever we use prettier.

# Installation

Install prettier and this configuration.

```sh
npm i -D prettier @invisionag/prettier-config
```

Then extend the prettier configuration by adding the following to your `package.json`.

```json
{
  "prettier": "@invisionag/prettier-config"
}
```

Your `package.json` should look something like this:

```json
{
  "private": true,
  "scripts": {
    "lint": "prettier -c .",
    "format": "prettier -w ."
  },
  "devDependencies": {
    "@invisionag/prettier-config": "*",
    "prettier": "*"
  },
  "prettier": "@invisionag/prettier-config"
}
```

# Ignoring files

It is recommended to ignore all files that are ignored by git:

```patch
 {
   "private": true,
   "scripts": {
-    "lint": "prettier -c .",
+    "lint": "prettier -c . --ignore-path .gitignore",
-    "format": "prettier -w ."
+    "format": "prettier -w . --ignore-path .gitignore"
   },
```

If there are files that should not be formatted but are not excluded by git you should use a `.prettierignore` instead.

# Ruby

To support ruby files you have to do the following:

1. Add the prettier gem to your `Gemfile`:

```rb
gem 'prettier'
```

2. Install the ruby plugin:

```sh
npm i -D @prettier/plugin-ruby
```

3. Use the ruby config:

```patch
- "prettier": "@invisionag/prettier-config"
+ "prettier": "@invisionag/prettier-config/ruby"
```